User interface (UI) design helps combine different functions that make your site a user-friendly experience. The entire focus of UI design is creating a usable and engaging site for visitors. You’ll want to focus on a few specific things to make your site as user-friendly as possible.
Here are 24 UI design tips to get you started. They cover topics such as overall design, how to integrate with mobile and other common elements involved with making your site more engaging to users.
1. Check Your Default Settings
The law of defaults states that users will rarely change the default settings of a site. If your shopping page lands on your most popular seller, the user is most likely to either buy that item or not. What if you made it land on a new product instead? Your conversions might drop because the user will still either buy the item or not rather than changing the default landing page.
2. Use Color and Weight for Hierarchy
Instead of using size to create a hierarchy, use color and boldness to show the user what elements are most important and how they align on your site. Instead of using only font size to indicate that text is essential, also use two or three different colors and weight the important topics a bit heavier to make them stand out.
3. Know Your Audience
Knowing your audience is vital when it comes to writing an article for your site, marketing online and succeeding with UI design. If you don’t understand the people who visit your site inside and out, it’ll be hard to know what UI design features are important to them.
The best way to gather data about your audience is to study site analytics. You can also poll your customers and do A/B testing as you try out different UI designs.
4. Predict User Error
Humans make errors. Predict which errors people might make while on your site, and figure out the easiest way for them to undo a mistake. If you run an eCommerce site, this setup might include features such as ones that allow users to easily delete an item from the shopping cart or fix an incorrect zip code on the order form.
5. Optimize for Mobile
More and more people are using smartphones to access the internet, so optimize your site for mobile. About 79 percent of people will leave a site if they’re browsing on mobile devices and the site isn’t responsive.
6. Listen to Your Users
If your site visitors complain about some aspect of your site’s interface, listen to what they have to say, and fix the issues. Good UI design is about changing what isn’t working and trying something new. When ESPN gathered suggestions from their online community and integrated them into their homepage redesign, their revenue went up 35 percent.
7. Respond Immediately
If a consumer went into a store and asked a question, the answer would be almost immediate and face-to-face. Figure out how to speed up feedback to your consumers. If someone asks a question, how long does it take you to respond? Have systems in place for email answers, live chat and responses on social media. Make it your goal to answer as rapidly as humanly possible.
8. Use Standard Practices
There are some things that users just expect to see on a website. For instance, the logo should be near the top and link back to the home page. Navigation should be near the top of the page and make sense. The Contact Us button is almost always on the far right of the navigation bar. Once you understand what most people expect, it’s much easier to create a UI design that users find intuitive.
9. Use the Rule of Seven
The average person can hold only five to nine pieces of information in their mind before forgetting some of it. Your UI design will be much more effective if you group items into like categories and limit the number of choices to no more than seven.
10. Study Heat Maps
You might think your UI design is the most brilliant in your industry. Perhaps you’ve studied what competitors are doing and added all the elements a user might want. However, the facts may tell a different story. Take the time to study heat maps for your landing page and see where visitors are clicking. The results may surprise you. Removing choices that you don’t want the user to make can up your conversion rates.
11. Display a Clear Call to Action
One study discovered that 70 percent of small business websites (200 in the sample) didn’t have clear calls to action (CTAs). Without a clear CTA, the user won’t know what action you want them to take. You’ll lose conversions, and you may even lose visitors as they chase down rabbit trails instead of becoming the solid leads you seek. Simply adding a CTA with the right wording can boost your conversion rates.
12. Create Consistency
Around 90 percent of people use more than one screen at the same time. A visitor might be on your site on their laptop and also browsing from their mobile device. While they might not look at the same site on both devices, they also could. It’s best to make sure you’re offering a consistent experience no matter what type of device the person is on.
13. Update Frequently
The perfect UI design of yesterday may not be the perfect UI design of today. Standards and technology change rapidly. Take the time to study what other designers are doing, see the trends in design and update your site on a regular basis. Updating your site shows visitors that you care if it’s functional for them.
14. Speed up Your Site
Page load times make a big difference in the user experience of your site. If your site is too slow, it may even be almost unusable. The average load time for mobile sites is 22 seconds, but about half of your visitors will leave if a page doesn’t load within three seconds. Do everything you can to speed up your site — especially on mobile devices — to keep visitors from bouncing away.
15. Reduce the Opacity of White Text
Have you ever been on a site with a dark background and bright text that hurts your eyes? This setup is a design flaw that makes a site seem harsh and may cause visitors to look away. If you want to avoid this issue, simply reduce the white text’s opacity slightly so that the background comes through the tiniest bit. You’ll need to experiment to find just the right percentage.
16. Increase Spacing Between Elements
You don’t always have to add a shadow or a border to separate elements on a page and create a clear structure. You can also increase the overall spacing, adding more negative space around elements you wish to highlight for the user.
17. Optimize Your Images
About 39 percent of users will abandon your page if the images don’t load quickly. Take the time to optimize all your photos so that they load quickly online and your page is fleshed out within seconds of the user clicking on it.
18. Align Your Text
Aligning your text defines columns and gives your site an aesthetically pleasing look. People make a judgment on your site within mere milliseconds of landing on your page, so anything you can do clean it up and make it more beautiful will benefit you.
19. Make Content Scannable
Today’s modern person is extremely busy. They often commute to work, put in a full day, come home, run to activities with the kids and cook dinner somewhere in there. They tend to scroll through websites. Make yours scannable to accommodate their habits. Break up long paragraphs, and use bullet points for easy reading.
20. Add a Search Feature
What about the site visitor who lands on your page looking for something specific but isn’t sure where it’s at? A search feature in your navigation bar is a simple solution that makes your site more usable.
21. Remember the Z-Pattern
Keep in mind that most readers read in a Z pattern. Your most important elements should be placed in this pattern. A typical user will start in the top left corner, scan across the page, skip down the page and then scan left to right again. Place important elements in these areas to highlight them.
22. Trade out Your Bullet Points
Users get used to seeing the same thing over and over again. One way to grab attention is to use a checkmark or some other symbol in place of the typical round bullet point. Just be sure to remain consistent with whatever format you choose.
23. Test Your Icons
Icons speed things up for the user, who instantly recognizes the meaning behind the image and knows where to navigate. However, if the icon isn’t easily recognizable, it may only create confusion. Test your icons, and make sure that readers understand their meaning with a quick glance.
24. Limit Choices
Every option you offer adds to the time the user takes to make a decision. If you want them to make a decision quickly so that you don’t risk them bouncing away, you should limit the number of options they find.
Good UI Design
UI design considers the entire impact on the user and if the page meets the goal the business has set for it. Every element plays into how usable the page is, including the time the page takes to load, how it looks and what’s highlighted on it. Start with these 24 tips, then expand from there until your site has a strong interface that’s better than any competitor’s site.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.