Web UI Conventions

Website UI Conventions

Websites and the ways that people expect to use them have evolved together over the years. Features or layouts that were difficult to use were discarded, and features that worked well became more and more common, further reinforcing user expectations and habits.

You can certainly break from these conventions at your discretion, but it’s good to know all of these conventions. If you break any of these conventions without a really compelling reason, and/or without usability research to indicate that your solution is more effective, you are likely introducing extra user error.

Following Website UI conventions will often help you attain:

• a lower bounce rate
• more pages per visit
• higher conversions

For more information on these measures of user engagement, checkout Website Analytics.

In general, users eye’s scan across the top of the page, and the left of the page before looking anywhere else. Placement in these areas indicates a greater importance to these website elements. This pattern of skimming websites is used to inform where the most important components and content of the site should be placed.

Website Logo

The website logo is typically found at the top left of the screen. If clicked on, it should take the user to the home page.

Search Bar

Search bars have historically been placed in the top right of the page. For websites that are highly search-driven, they have moved in recent years to the top-center of the page, or even right next to the icon in the top left.

If the navigation of your site can be covered comprehensively by your navigation bar, you might not need a search bar, or you might not need your search bar to be placed prominently on your homepage.

However, if your website has enough content that it would be difficult to navigate without using search, then your website would probably be well served with a very prominent search bar.

See this screenshot of the Amazon.com homepage in 2017. Notice how prominent the search bar is! Amazon sells hundreds of millions of different products, and it would be unthinkable to navigate that inventory without a search bar.

Back in 2010, Amazon was still primarily a bookseller, and it did not have search-driven navigation. Moving towards search, rather than a complicated navigation system has been a big trend for e-commerce sites over the last several years.

Navigation Bar

A navigation bar contains links or buttons to the most important and frequently used content of your site. It is conventionally kept visible on every page within the site.

The Navigation bar should be at the top of the site, and it should clearly look clickable.

Hamburger Menus

Hamburger menus became popular in the mid-2010s are more and more users were adopting smartphones, and web designers realized that they would need to come up with navigation systems that would work well with very little screen space.

However, usability tests have suggested that many users don’t realize that hamburger icons contain navigation menus. Even savvy users are unlikely to click on a hamburger menu unless they are given a reason to believe that it contains the information that they are looking for.

This example from The Guardian shows a partial hamburger menu. The hamburger menu is labeled “all sections” on the right of the primary navigation bar. Depending on the size of the user’s screen, there may be many tabs visible in the nav bar (and the hamburger menu doesn’t expand as much) or there might be just a few for a mobile screen (and the hamburger menu will be necessary for most navigation).

Partial hamburgers are generally more successful than hamburger-only menus in usability tests. Listing a few options and then having the word “More” with the hamburger icon is an easy way to highlight the most common navigation options, and highlight what the hamburger icon actually means.

Even if the button that they are looking for isn’t displayed, having a few options helps the user predict the scope of the menu that they will have access too if they click on the hamburger icon. This creates an “information scent” that will help the user get to the right place.

Conclusion

In this article, you learned about some of the most common UI conventions. It’s not mandatory to follow them all of the time, but you should know the rules before you break them.