Have you ever been startled by loud music that started playing the moment you landed on a website? Or frustrated by a terrible, ambiguous error message that won’t tell you what went wrong? Or lost since you were not able to figure out how to use a certain product or feature? Or even worse, had your cortisol triggered by the introductory text in red of all colors (that too, on a bright blue background)?
If yes, you’ve likely been a victim of poor UI/UX design.
A good UI and UX design is virtually invisible to users.
If it sticks out like a cat in a doghouse, that’s when you know your UX design has not been executed well.
UX design is all about enabling the user to achieve what he wants to achieve, reach where he wants to reach, do what he wants to do, and not get lost in the user flow. A poorly executed UX design requires users to dig deep to find something or reach somewhere.
5 Don’ts of UI Design:
This post will discuss the UI and UX design elements that are most crucial for providing a positive user experience and the best practices for using those elements in your design.
Let’s get started.
1. CTA Buttons
The primary business goal of a Call-to-Action (CTA) button is to generate leads. However, a great CTA button design is all the difference between gaining the attention of a prospect or going unnoticed.
A good CTA button can instantly entice a user to click it and take the required action, whether it is to fill a form, join a community, or make a purchase.
The best design practices for CTA buttons:
- Clickable buttons- The purpose of a CTA button is to make users click it and that’s exactly why it should look clickable in the first place. Make your CTA buttons look clickable by adding 3D effects (such as slight gradients, small shadows, or rounded edges) to them.
- Large CTA buttons- They are more noticeable and clickable. Keep your buttons big enough to be found easily but not so much that they end up spoiling the visual hierarchy of your layout. When designing for mobile screens, remember the ideal button size is between 40 to 50 px, depending on the operating system.
- Contrasting colors- Apply contrasting colors to your CTA buttons in relation to the backgrounds to make them pop out. When choosing the color palette, make sure you refer to the color wheel. Also, don’t forget to put sufficient white space around your buttons.
- Smart placement- It’s ultimately the placement of your CTA buttons that decide, to a lot of extent, whether your users will take a required action or ignore it. For a smart and sensible placement of your button, keep user flow in mind.
Take a look at this great CTA by Netflix that users just can’t help but click:
2. Error Messages
You can prevent errors as much as possible to minimize them by considering the possible failures in advance and displaying appropriate messages to the user based on those constraints.
But it’s common for users to make mistakes when taking an action, for instance filling up a form. They do it all the time.
However, the kind of error messages that are displayed after the user makes an error forms an important part of the UI and UX design.
Take a look at this terrible example of a ‘missing required field’ error message that is placed on the bottom of the form, instead of being placed in line with the input field:
Users dread these kinds of error messages that makes it super difficult for them to spot.
The best design practices for displaying error messages:
- Use simple words- Avoid using technical jargon or details for error messages. Use simple language and leave technical details for the troubleshooting section.
- Highlight missed fields- Show actual fields that the user missed while filling in information. Ensure to distinguish the style of the error fields from the normal input fields.
- Keep it instructional and informative- Provide detailed suggestions to the user on fixing the errors. Keep the message instructional, informative, and short.
- Intuitive placement- Be smart about the placement of the error message. The user should easily be able to spot the error message. Displaying error messages at the top or bottom of the form leads to the longest completion times. Try to display error messages in line with erroneous fields for shortest completion times and positive user experiences.
- Use the right colors- Color triggers instinct. Adding red to error messages and yellow to warning messages is a great practice for designing error messages. While you must ensure to keep the error message contrasting against its background, it’s important to keep accessibility in mind.
This is an example of a great error message:
These error messages tell users what went wrong and are placed well, in line with the input field.
3. Colors and Gradients
Humans respond to colors in a very subjective and varied manner. By choosing and using color strategically, you can set the right atmosphere for your user interface.
While monochromes have serious connotations and stand for sophistication, a hint of vibrant colors can instantly change that. For navigation in your interface, colors can be used to distinguish active (primary buttons) from passive (secondary buttons), hover actions from click actions, and so on. That’s the power of color in setting the mood, atmosphere, and navigation in a web page.
It is not 2014 anymore when flat and ultra-flat UI designs were popular. Today, you can see dozens of brands that use gradients in their designs.
From Dribble to Firefox and Tinder to Stripe, gradient colors have become a popular way of spicing up UI and UX designs. They are totally in these days.
By using gradients in different places and visual elements like your backgrounds, logos, or image overlays, you can make bold statements, add realism to objects, control user flow, make important elements stand out, and introduce great depth and dimension to your design.
The best design practices for using colors and gradients:
- Don’t overload- Stay clear of using more than three colors within the gradient.
- Work an effortless user flow- Create a gradient effect such that it seamlessly leads the user’s eye towards the focal point, such as a CTA button.
- Type of gradient- Choose the type of gradient (from linear, radial, and conic) based on the kind of pattern and user flow you want to create.
- Smooth color transitions- Be mindful when choosing and pairing colors together for creating a beautiful color transition. When in doubt, use either analogous colors (colors that are next to each other on the color wheel) or different shades of the same color. It’s safer to avoid acid colors unless you have solid design skills.
Color Wheel
Smooth Color Transition
4. Icons
Icons can affect user behavior.
Want to see how?
Look at these two images below:
Like this arrow in the second download button on the right, an icon can add value to an element or text.
An icon is an interface element that acts as a pictorial representation of a thing, action, product, or brand.
The notification icon on Medium (that appears like a bell) is a good example to note here. Bell is the thing that the icon represents.
A great icon design is such that it makes the user think only of the action, element, or brand that it represents.
Best practices for designing icons (for a positive user experience):
- Avoid overusing icons without a purpose.
- Consistency- To make your icons look consistent, identify some common elements that you can use in your icons. A great tip here is to keep repeating elements throughout your icons.
- Color palette- Using a maximum of three to four colors to keep the design clean.
- White space- Give your icons attention and space to breathe by using lots of white space around them.
- Communication- Design your icons in a way that they communicate with the user in the simplest way possible.
5. Search Field
A search field aims to help the user to have a seamless and positive search experience.
When looking closely at the search function, it is no more than a box where the user types a keyword and gets relevant information or results.
However, the bird’s eye approach will make you see the larger picture around this crucial UI/UX element.
The search bar is one of the most important UI elements that affects the user experience. And yet, it is neglected the most by designers. Enhancing this element can improve conversion rates and make the user experience positive.
Best practices for designing the search field:
- Easy to spot- Ensure to place the search bar in a place where it can be located effortlessly by the user without requiring him to search for it endlessly. To make it more noticeable, consider displaying an open-text field instead of just an icon. Based on the F-shaped scanning method, it is good practice to place search bars on the top left or top right of every page on the website.
- Magnifying-glass icon- When using a magnifying-glass icon for your search field, try to use a recognizable version of it instead of a fancy version, like a schematic icon with little graphic details. It is the simplest version of the magnifying glass. Keep it large with lots of padding and use plenty of contrast to make it stand out from the background.
- Presence on every page- It is important to place a search box on every page of your website or app. Users rely on it to find their way around, no matter what page they’re on.
- Advanced search options are a no- Unless you want to throw a puzzle at your users and confuse them, it is not recommended to use advanced and fancy search options like the dreaded Boolean search which fetches results that are too broad.
- Auto-complete suggestions- This is an important feature for a search field to assist your user in constructing clear and relevant search queries. This is crucial in helping him get appropriate results. Make your autosuggestions valuable and keep their frequency as quickly as possible to reduce data entry hassles.
- Input field size- Allow your users to enter long search queries and view and change them effortlessly. For this, it is important to keep your input field size large enough. A good practice is to have an input field that adjusts 27-characters text or 90% of the search query. To put your screen space to best use, consider having a search box that enlarges the text input field on click.
Ending note
Designing a good UI and UX is not a one-time process. If you want to deliver positive user experiences repeatedly, you’ve got to keep updating and enhancing your UX design as your product evolves.
The process of UI and UX design starts with identifying the UX mistakes and negative UI elements and understanding the effects it has on your user satisfaction and retention rates.
Key takeaways on UI and UX design
- Do not focus so much on fancy designs and trends that you completely ignore the functional aspect of your user interface. Remove any unnecessary feature that is coming in the way of your website’s usability.
- Do not be compelled to throw unique elements and ways of doing things at users. It will only make them dig harder to find things they’re looking for.
- If you’re considering simplicity in your UI design, ensure you’re not compromising on usability.
- Avoid dropdowns if there are more than 10 items in this menu.
- When designing CTA buttons, ensure they are large, contrasting, placed strategically, and look clickable.
- When displaying error messages, use simple language and appropriate colors, be instructive and informational, highlight missed fields, and place them intuitively.
- When using colors and gradients, be careful about not using more than 3 colors for gradients, keep your color transitions smooth, and choose the right type of gradient effect.
- For designing icons, use a maximum of four colors to keep the design clean and add lots of white or negative space around them.
- Place the search field on the top left or top right of every page on the website, use auto-complete suggestions for it, and keep the input field size large enough to accommodate 90% of the search query.
