4 Keys to User-Friendly Web Design
This page may contain links from our sponsors. Here’s how we make money.
Having a user-friendly website is as important as having a beautiful original website design. Sadly, in our pursuit of excellence, it’s all too easy to forget about usability and focus instead on aesthetics and originality.
Yet it’s the right combination of beauty, uniqueness, AND a user-friendly design that keeps our clients coming back for more. That’s because a usable website draws and retains readers, making them much more likely to become customers.
Don’t fall into the trap of forgetting about the end-user experience when you design a client website.
The term “Usability” scares me. It’s a small word with a very large meaning. In the context of websites, an entire industry has formed – called User Experience (UX) – around the idea of improving how visitors to your site can interact and consume the content. If you can make it easy to find what they’re looking for, they’re more likely to hang around and continue reading/watching/interacting. Such a huge impact for such an ordinary word.
Keys to User-Friendly Web Design
In light of the big implications of usability, this article discusses some of the higher-level concepts around UX, and in doing so gives you some practical steps to improve the usability of your site today.
So, what makes up a user-friendly web design? In this post, I identify a few major keys that will make any website design more user-friendly. Keep these handy tips in mind to design a more usable site.
Key #1: Navigation
Navigation is one important key to usability. Some would say it’s the most important key. Users need to be able to find what they are looking for quickly and with a minimum of effort on their part.
Studies have shown that most website users are not willing to stick around and figure out a complex navigational scheme. If your menu structure isn’t user-friendly, you’ll lose the user.
Here are just a few navigation mistakes to watch out for:
- Hard to find navigation. The user shouldn’t have to hunt for a way to navigate through the site. Menu bars should be visible and their purpose should be obvious.
- Odd acronyms in the menu. Avoid abbreviations and acronyms unless the meaning is obvious. (Remember that what is obvious to you may not be obvious to the user.)
- Multiple layers of menus. How many sub-menus must the user go through before he or she can perform the task or find the information that they came for?
- No search box. Users are used to searching websites to find what they want. A website without a search box is less navigable.
If you need to learn more about user-friendly navigation, fortunately, there are plenty of resources out there to help you learn more. For example, Toby Biddle shares some navigation bar insights based on A/B test studies in his DesignM.ag post, What Really Matters in Navigation Bar Usability?
Key #2: Readability
Readability is another key factor that makes a website user-friendly. A user should be able to grasp the information on the website quickly and with very little effort.
In fact, studies show that most readers don’t actually read the information on a website at all. They scan it. According to a study from the Nielsen Norman Group, the most information that a reader is likely to read is 28%.
That statistic means that even in a best-case scenario most readers won’t read two-thirds of a website.
So, to reach an audience, a website must be scannable. Here are some design factors that contribute website scannability:
- Color. For a website to be readable, there should be enough contrast between the color used for the text and the color used for the background. Words should be easily read. Jennifer Kyrnin includes a helpful contrast table in her About.com post, Contrasting Foreground and Background Colors, that illustrates the difference between readable and unreadable color combinations beautifully.
- Font. In general, the simpler a font is, the easier it is to read. Fonts designed to look like script or made up of special characters are less scannable. Most design experts agree that san serif fonts work best for online design and serif fonts are better for print design. Also, avoid using too many different fonts in the same design.
- Formatting. The text on a page should make full use of formatting techniques such as headlines, bulleted lists, and bolding to increase scannability. Long chunks of unbroken text are less likely to be read than small chunks of text.
Key #3: Load Time
How long does your site take to load?
If your site takes longer than ten seconds to load, most readers won’t stick around. Associated Press statistics show the average user’s attention span is decreasing, not increasing.
If you’ve forgotten to consider load time in your web design, you’ve forgotten a critical element of a user-friendly site.
Unfortunately, many websites are getting slower rather than faster. In the past, that has been especially true of retail sites, as Amy Gesenhues pointed out in her Marketing Land post, Top Retail Websites Not Getting Faster: Average Web Page Load Time Is 7.25 Seconds [Report].
What that means is that if you design a website that loads quickly, you’re probably giving your client an advantage over the competition. Who doesn’t want that for their clients?
We’re so tempted to spice things up with video and other multi-media that we forget that most web users are in a rush. A slow-loading home page video is probably not the best way to create a user-friendly website that draws readers in. So, stop and think about load time before you add another multi-media element.
Key #4: Mobile Friendly
In my opinion, the key to usability is how your website appears on mobile devices. A user-friendly website is a mobile-friendly website. Every website should have a site that appeals to mobile users.
There’s no doubt that you’ve read a lot about responsive design. We’ve even covered it here on Vandelay Design blog in the post, How to Turn Any Site Into a Responsive Site. Mobile-friendly website design can be accomplished through responsive or adaptive design.
Other Usability Resources
By now, you’re probably convinced that you should incorporate more usability features into your design. And you’re probably right. But you may be unsure about how to accomplish that goal.
One company that I worked for had a usability lab that brought focus groups in to test their screen design. The lab always fascinated me, but most designers are probably not going to have access to that type of resource.
You don’t necessarily need access to a usability lab to create a usable design. There are plenty of other usability resources available to help you stay on top of what the user needs.
Here are a few helpful usability resources to check out:
- The Art of Designing User Driven Websites from John Seibert at Oneextrapixel. This post describes process of designing a usable website.
- UXPA (Usability Professionals’ Association). This organization is for usability professionals and those whose work involves usability including web designers and developers.
- Usability.gov. I didn’t realize the government had a website on usability until I found this site, which is designed for web managers, designers, and usability specialists.
- User Interface Engineering blog. The largest usability research organization has a very helpful blog on usability. They also offer virtual seminars.
More Tips:
Check on Several Versions of Browsers
The browser you use is not the only one that visitors to your site will be using. Make sure that that your website does not look terrible on any browsers, and if it does, make the appropriate changes. For example, check your site on Chrome, Firefox, Internet Explorer, Safari, and use mobile devices (Android and Apple) to see how your site translates. You may find that certain elements don’t load properly, such as Flash, on mobile devices. You may need to build a completely different version of your website for mobile accessibility.
Stick with One Color Scheme
A consistent color scheme not only is more attractive but it will also support your brand. Choose 2-6 colors that work very well together and do not vary them from page to page. Also be sure that the color scheme you choose represents your business well. This is where CSS can play a big part in making it easy to quickly brand or re-brand your site.
Choose Consistent Image Sizes
Your website will make more sense if the image sizes are consistent. Use the same size for all of your thumbnails. Make all of your product pictures the same size. And use the same size for all of your extra images. Of course there are exceptions, such as your header graphics or sidebar images. But keep consistent whenever possible.
Use Minimal Fonts
The more fonts you use, the more cluttered and unprofessional your website will look. Stick with two or three font styles and sizes and use them consistently throughout. For instance, use the same font and size for titles/subtitles and the same font and size for text. Consistency is the key and will improve the ability for users to decide what information on the page is important.
Create Easy Navigation
Using standard navigation elements like a nav bar at the top of the site with common terms like “home”, “about”, and “contact” help users quickly find critical content. Search tools are a must these days as users often have a specific product or service they’re looking for. The key is to make these tools easy to find so visitors can get to the content they want.
Use a Fluid Layout
A fluid layout allows more of your website to be viewed on a larger screen. Fixed layouts can be just inconvenient enough to chase away potential customers. With the use of mobile and handheld devices – generally speaking a much broader array of screen sizes – it’s critical that your site adapts to the user and makes it easy for them to see everything.
Feedback Interaction
Have you ever tried to fill out a form and mistyped your email address, and there was either no explanation for your error or else simply a “form was filled out incorrectly” message without further explanation? This is an example of poor feedback interaction on elements like forms or search results. Take the time to make forms, searches, and more as easy as possible for users.
Final Thoughts
“Usability.” What a nice-sounding word. But visitors will not use nice words to describe your site if the usability is sub-par. Even worse, they will leave never to return. UX is a very important part of website design, so be sure to follow the advice of top UX designers or else hire a professional to ensure that the functionality of your website never gives visitors a reason leave you lonely.
