1. The best performing CTA
Add context to an action button so it can perform effectively to its dedicated purpose. For example, instead of “Buy” use “Buy Now”. Keep it to a maximum of three words.
2. CTA on Mobile
The average width of the index finger is 16–20 mm for most adults so the ideal button size is 40–50px wide.
3. Primary Action Button
The primary action button should be prominent, larger in size and easily accessible. The button should be wider and tappable on mobile as it is easier for the user to confirm an action.
4. Image Overlaying
Bring that WOW factor to emphasise an element in your design with image overlaying. Visually it becomes more interesting and appealing to the user’s eye.
5. When to use Radio Buttons and Dropdown Menus
If you want the user to scan the options easily and quickly and have less than 5 options, radio buttons are the perfect feature. For more than 5 options, a drop-down menu is essential as it becomes less cluttered on the UI.
6. Placeholder – Context of Field Requirement
Use a placeholder with a sample copy example for clear direction of what is required. For e.g. insert a sample phone number in the field text instead of putting the text “phone number”, this will increase form conversion.
7. Error Message
We often make mistakes and when we do it’s important to offer suggestions to correct our errors. To boost conversion rates the ‘instructional’ error message needs to be short, concise and easily identified.
Icons should have an understandable symbol that is readable, represents a strong meaning and reinforces the functionality that can’t best be described with words.
9. Create a Hierarchy of Text Styles and Fonts
Create a design system showcasing hierarchy of text styles and chosen fonts for consistent UI design within the entire project. Display text styles starting from the largest to the smallest and use fonts that have a font family.
10. Colours & Gradients
Colours are an essential part of visual design language. 5 colours are a good maximum when designing your design system.
A well-designed gradient makes objects stand out and subconsciously leads the user’s eye towards the focal point, creating a seamless flow.