Think of the five websites you use the most. What are their distinguishing features? What buttons do you have to click, and what steps do you have to follow? Chances are you don’t really know because you browse on autopilot. You don’t even think about where the search bar is or how to checkout. Believe it or not, not having to think too hard about what you need to do is a sign of a great website. Specifically, it’s a great UI.
Your User Interface (UI) comprises elements that allow people to interact with your site, including pages, screens, buttons, icons, and images. UI isn’t just about making your site look good.
A good UI helps your site function and provides a better user experience for your customers. If your customers can find what they are looking for quickly and easily (without even thinking about it), they will probably come back time and time again. If customers battle to use the site, they’ll click away. In fact, a well-curated UI can boost conversion rates up to a whopping 200%.
Let’s look at UI best practices and some common UI/UX mistakes you might be making on your site.
What are the Golden Rules of UI Design?
You’re probably wondering what makes for a great UI, but the answer isn’t always straightforward. An effective UI can differ from website to website, mainly because all users are different. However, there are a few UI principles or golden rules of UI design that apply to most websites.
Consistency
UI is all about helping users get from Point A to Point B; you want your users to achieve what they would like to achieve quickly and easily. Whether they are looking for a specific item in your eCommerce store, searching for an article on your blog, or looking to register via a link, your users need to be able to locate what they need intuitively.
One of the best ways to achieve this is to be consistent across your pages. This doesn’t just mean using the same consistent font, tone, and similar layout from page to page (although that’s a big part of it). The sequence of actions that users follow should also be consistent across similar actions and should be in line with common web page layouts, e.g., clicking on the logo to return to the home page.
It would help if you also used the same terminology in all your prompts, menus, and helpdesk articles.
Lastly, be careful of any U/UX mistakes. You’d want to avoid them at all costs.
Simplicity and Intuitive Navigation
You’ve probably heard the word intuitive quite a few times when people talk about web design, not to mention several times in this article alone. The best interfaces are the simplest ones and the most intuitive to use. Think of the Apple iPad or iPhone. If you hand one to a toddler, they will figure out how to use it. That’s because the device was designed to be completely intuitive - anyone should be able to use it naturally without instruction or training.
Avoid unnecessary elements and use clear labels and messages to guide users through the site. Buttons and clickable links should be 100% clear and usable and shouldn’t blend into the background. And, you should also ensure that the color combinations are attractive and inspiring.
Structure
When working on your layout, keep in mind the spatial relationships between items on the page and structure your page so that the most important information appears at the top. You may have heard advertisers or front-end developers refer to placing information ‘above the fold.’ This refers to the upper area of the screen that users will see as soon as they open up your site.
Use fonts and placement to draw the eye towards the most critical information, especially the call to action. Remember that most web users only scan web pages rather than reading the copy with close attention. Break up your text with paragraphs and subheaders and keep it concise.
Usability
What does your user need? Most users need information. They want to find a product or complete an action. However, not all of them are equally adept at navigating the site or will navigate it the same way. Age, language, location, and technical prowess will vary from person to person, so you should make it as easy as possible to use.
Add prompts, prominent links to your helpdesk, chatbots, shortcuts, and fast pacing to enrich your user experience and guide their navigation through the site. To ease readability and scanability, you should also choose your typeface (font, size, and spacing). If necessary, you can hire an expert to ensure your online platform not only fulfills but exceeds your users' expectations, without them consciously noticing the UI, while maintaining an engaging and intuitive navigation.
Cognitive Load Reduction
We’ve already spoken about the automated user experience that comes with great UI, but that feeling of being on autopilot is based on scientific principles. Any mental energy you expend while thinking is called cognitive load. When you need to concentrate and reason your way through a site, your experience is a lot less pleasant. Good UI designers want to keep your cognitive load low because human attention is limited. Have you ever fallen down an Internet rabbit hole and then struggled to recall what you were doing for the last thirty minutes?
Most human beings will only keep about five items in our short-term memory at a time, which is why websites are designed so that we recognize rather than recall what we need to do. This involves adding familiar cues to guide us. Call to action buttons are usually prominent and easy to click; the back button helps us go back to the previous page, the menu is located on the top right corner of the page. If the prompts are familiar, we’ll use them without even thinking about it.
What’s more, white space around text increases user attention by 20%, which is also something you might need to keep in mind when trying to design the perfect website.
Design For Closure and Feedback
If you have an eCommerce store or a site that requires users to complete a specific action (e.g., registration), make sure there is a beginning, middle, and end to the process. This helps your users feel secure that they’ve done all they needed to do. Let’s use the example of an online store.
The shopper finds what they are looking for, adds it to their cart, checks out, and then views a confirmation page that demonstrates that the transaction has been successful and is on its way.
Feedback is associated with the action. Every action should have a reaction. For example, if you press a button on the site, the color should change to notify the user that the interaction was successful. This confirms that the user’s desired action was completed.
Reversible Actions
Your users should be able to reverse any actions they make on the site without deleting their progress. Reverse actions relieve anxiety and frustration and allow users to explore the website. If they’ve clicked on a page they don’t like, they should be able to jump back to the previous page. If they’ve added too many products to the cart, they should be able to remove them.
Also, make sure to design an interface in such a way that users can’t make a serious error, e.g., lose all of their information or their entire cart if they accidentally click away. There should always be room for recovery too.
This is especially important where users have to edit text or graphics. Your undo function lets you go back step by step through any changes they made and want to remove. You can also use an undo function like an emergency exit. Gmail’s notification message (that comes with an undo option) allows you to undo your action if you accidentally delete an email.
Control
It’s a good idea to give your users a sense of control over the interface. This means that the interface should respond to their actions in a way that they expect. Unfamiliar behavior, lengthy and unnecessary data-entry sequences, hidden information, and other inconveniences negatively impact user experience. If you run an eCommerce site, allow your visitors to check out with a guest account rather than forcing login upfront. Ask for their personal information at the end of the process once they’ve made a purchasing decision.
Accessibility
When designing your interface, you should use language and concepts users are familiar with. Giving an action or item a clever new name and hoping your users will pick up on your lingo might mean they can’t find what they are looking for.
Information should be presented logically and use words that everyone is familiar with. In general terms, it’s a good idea to use phrases at a fourth-grade level. Remember that not everyone will be familiar with your local vernacular or technical jargon, so keep your wording accessible and easy to read.
Display System Operations
Suppose your site requires processing (like payments or installation). In that case, it’s vital to keep your users informed of system operations with a highly visible and easy to grasp status. This should be displayed on the screen within a few seconds. If you can add a time estimate for the download (e.g., 15 minutes remaining), do so. If you don’t, your user might unnecessarily abandon or restart the process, causing frustration (and errors) that will be hard to reverse.
The Three-Click Rule
Try to reduce the number of actions a user needs to take to achieve their goal. Consider the three-click rule. Users should find the information or item they are looking for in no more than three mouse clicks. It’s not to say that users will abandon the site if they hit the fourth click, but the principle is sound. Make it easy and fast to find information.
Verdict
Now that you know more about UI, you can start applying these tips to your own website. Remember, your user interface will drive all of the transactions and actions on your site, and it’s essential to get this right from the start. When designing or choosing your UI, keep your customers front and center in the process. You should ask yourself, what would they like to know or achieve on every page? Their needs should guide the aesthetic in every possible way for the site to succeed.
If you still feel like you need a bit of a helping hand, feel free to check out some easy-to-follow but highly effective guides.