With over 644 million websites gracing the Internet, it’s not easy to stand out from the crowd. Naturally, designers do their best to avoid mundane, forgettable design and instead create something modern and memorable.
At times, however, these efforts cause problems even for their most loyal users. That’s because in web design, a visual enhancement can sometimes translate into a usability degradation. Before you implement all the stylish techniques in your design repertoire, consider the unintended usability consequences.
In this article, we’ll discuss five common web design techniques and their potential usability problems.
1. Infinite Scrolling
Infinite scrolling enables users to experience an endless stream of content with minimal navigation. When users reach the bottom of the page, they don’t need to hit pagination links—more content is automatically served up.
You may have implemented infinite scrolling because it introduces an elegant fluidity and liveliness to the page.
Problem 1: Disappearing Content
If users have found something interesting on the page today, can they return to that item tomorrow without scrolling their life away in desperate hope of finding it again? Does your site offer users links to visit those recently viewed items? Does your site provide a search function accurate enough to locate that item after entering the few keywords the user may still remember? If the trend of your answers was No, the infinite scroll has robbed your users of the joy of returning to content that was important to them. When you treat your content as a passing phase, you inadvertently devalue your content and your site.
Problem 2: Lack of Searchability
Your users have chosen to visit your website because it contains an item of personal interest or significance to them. When the page loads, they merrily hit Ctrl-F to search for a word or phrase, only to find zero matching results because the content they want has not yet been loaded and therefore cannot be found! If you think that your busy users will patiently scroll until the content they need is loaded, think again. Consider prioritizing searchability over scrollability in your design methodology.
2. Multi-Level Navigation
The multi-level navigation menu presents multiple, nested levels of navigation items. Only when you navigate to an individual item do its child items become available.
You may have implemented the multi-level navigation because your site has multiple nested topic levels and you want to decrease the clutter and page space of a traditional navigation menu in which all of these topic levels are available from the get-go. After all, the multi-level navigation menu maintains interrelationships between topics and does so in a sleek, compartmentalized fashion.
Problem 1: Hidden Complexity
Rather than reducing the complexity of a site with a nested topic hierarchy, the multi-level navigation menu merely hides that complexity from view. Users still have to try to make sense of a morass of topics that are not intuitively classified. Examine your reasons for wanting to minimize and disguise the additional navigation levels. Could it be that your real aim is to flatten the site architecture itself so that topics are presented in a more easily consumable, logically grouped format? If so, don’t be afraid to tackle the root problem and reconsider your information architecture decisions. Remember that the job of a navigation menu is to enable navigation and accessibility, not to hide a lack of navigation or accessibility.
Problem 2: Annoying Hovering
We’ve all seen them—multi-level navigation menus that require users to hover over menu items with the precision of a surgeon in order to locate an item of interest. If your user’s cursor slips off of a menu item, poof, the whole navigation menu collapses out of sight and leaves your users back where they began. Your multi-level navigation menu is now more like a frustrating video game: the most avid and determined users will keep trying to triumph over the navigation menu, but the majority will simply leave and find the information they sought from a more practical source.
3. Ill-Considered Icons
An icon on a website is often interactive and serves as a symbolic visual representation of a function available to users. You may have implemented eye-popping icons on your site to provoke an immediate user response that you think words alone can’t achieve. After all, a picture is worth a thousand words, and icons are used in signage across industries the world over to instantly convey important messages and instructions.
Problem 1: Recognizability
You may have created a dazzling icon set so artful and sophisticated that it could feature on the Dribbble homepage, but if people don’t understand what they mean, you’re better off describing the functions in plain words. When it comes to icons, beauty is only skin deep. The value of icons on your site can be assessed foremost by their relatability and recognizability.
Problem 2: Overshadowing the Text
Your users will focus on the aspects of a site that you feature most prominently. Therefore, if icons are an omnipresent feature on your site, you are conveying to your users that they should give their primary attention to your iconography and secondary attention to the text content. Your users are now starved of relevant content and instead bombarded by visuals that they neither expected nor desired. If that is not your intent, consider elevating the importance of text content on your site by featuring it more prominently and featuring iconography sparingly. Achieving a balance between text and visuals is vital if you are to sustain user interest.
4. Sitemap Footers
A sitemap footer is a footer which contains links to the various topics that your website contains. These links are typically presented in a hierarchy or structure which mimics the actual site structure. This results in the sitemap footer appearing similar to a true sitemap file which search engine crawlers use to assess the cumulative list of pages in a website as well as page relationships.
You may have implemented a sitemap footer because your site contains multiple topics in a hierarchy and you would like to provide users a consolidated, one-stop shop of links that will easily enable them to jump to any topic of their choosing. After all, if your web site has a lot of content, a sitemap footer can prevent users from aimlessly hunting for the link to the content they need.
Problem 1: Jumping to the Footer
Does your sitemap footer contain links to topics that cannot alternately be accessed through another navigation element that appears earlier in the page? If so, after repeated visits your users will train themselves to depend on the footer to find links that they cannot find through other page navigation. Your poor footer is now faced with the high pressure of compensating for a lack of information accessibility on a broader site level. Do you really want your users to gloss over your carefully constructed main content and skip directly to the footer? If not, consider improving the overall link availability and placement on your site. If links to high value topics are made noticeable to users early in the page, both your content and your users will rise to the top.
Problem 2: Lack of Context
Before your users click on a link, they’ll need encouragement from you to provide them the motivation and context to click on that link. The brilliant thing about a navigation menu is that it provides users this very context. It helps users find their way around by providing links to site topics in an orderly, logical fashion. Contrast this with the inherent lack of context in a sitemap footer. The user is at the bottom of the page and is likely to have finished perusing the main content of the page they came for. They have no incentive to continue reading, but are now presented with a barrage of links in the footer. If the links cover every topic on the site from A to Z and no context has been established of their relationship to one another, you cannot reasonably expect users to venture forth into this link wilderness.
5. Ornamental Fonts
An ornamental font is simply a highly stylized, decorated, or pictorial font. We’ve all seen them—sites that use embellished fonts like the fun-filled “Curlz”, the elegant “Voluta Script”, or the innovative “Ecofont”. You may have used an ornamental font on your site because you wanted to breathe new life into ordinary text and thought adding a lively font would achieve that.
Problem 1: Legibility
Few things on the web are more disappointing than a stunningly crafted font that is so illegible on the screen that it simply isn’t worth its font weight. Content is king on your page, so if users cannot read or gain value from your content, they’re unlikely to stay on your page and admire the artistic merit of the font. Use your discretion and conduct a legibility test of any ornamental fonts you use. Can you comfortably read the font in its uppercase, lowercase, bold, and italic variants? If not, consider eliminating the font and replacing it with something more utilitarian. The most effective font is one whose clarity allows it to speak for itself, without heavy-handed embellishments.
Problem 2: Mismatch With Content
Say you’ve decided to implement on your site a body font that looks like your handwriting as a 12-year-old. Let’s also say that your site content is professional in nature and caters to the medical community. Aside from being difficult to read on the screen, your font choice is noticeably misaligned in tone with your content and the overall purpose of your site. Red flags will be sent up to your users as they wonder how to perceive your site when there is such a glaring disconnect between the actual content and the way it’s presented. Your users are not likely to find your font cute and whimsical. Instead, your ill-fitting font has done you a real injustice. If you don’t want your users to experience this, consider choosing a font face which is appropriate and relevant to the overall tone of your content and site.
In web design, not all that glitters is gold, and not all that is memorable, aesthetically pleasing, or even functionally innovative is necessarily usable or accessible. Whether you are a new or experienced designer, with time you will continue to acquire numerous powerful techniques in your design repertoire. As the saying goes, with great power comes great responsibility. Take responsibility for the power of your design and take responsibility for your users by thinking carefully before implementing features that you believe will enhance your site.
Don’t allow your design methodology or information architecture to delay or obstruct your users from finding and using its content. If your users can count on your content and can count on your design to afford them simple access to that content, you can count on them to return to your site for years to come. Now that’s memorable design.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post