🌈 UI - Navigation
This note is about navigational elements on a user interface.
Navigation is about finding something. User is not using navigation to look at fancy animations, they are looking for something. Always keep communication the first priority when designing navigation.
Navigation should always be top or left. Other places are confusing and hard to find. Navigation may be subtle or even hidden under a hover action, but it must always have consistent placement.
+--+-----------------------------+ |1. 2. 3.| 1. Top left to top right. Default. | |-----------------------------+ 2. Top center. OK, but artsy. | | | 3. Top right to top left. OK. |4.| | 4. Top left to bottom left. OK. | | | | | | | | | | | | | | | | | | +--+-----------------------------+
Web site logo should always direct to the Home section. Home is considered to be the / of the domain or subdomain. Additional Home button is optional in the navigation.
domain home
example.com => http://example.com/
www.example.com => http://www.example.com/
blog.example.com => http://blog.example.com/, not http://example.com/
Highlight current state in navigation. Where the user has been and where the user is currently.
home products ABOUT
Don't use generic section names. Be as specific as you can, but mind the item length.
What We Do is bad, might mean: Products About Us Blog
Get In Touch is bad, might mean: Contact Request Quotations
Products is not optimal, divide it into: Shirts Shoes Socks
Don't use names that can be confused with normal web page terms.
--[FURNITURE EXTREME]-- Office | Home | Garage | Sale -> Home can be confused with the front page, use "Homeware".
Don't have more than 7 items in a single navigation level.. Avoid over 4 levels deep navigation menus. The more you have options, the longer it takes to decide. E-commerce sites can have mega dropdown navigations.
Individual navigation items should never be over 3 words.
This Is Why What We Do is really bad.
Navigation item content should be left-aligned. Don't use centered text, left-aligned is the easiest to read.
# NO # YES | Home | | Home | | Brands | | Brands | | Webshop | | Webshop | | About | | About |
Navigation item order should depend on the access frequency. The most frequently accessed items should be near top-left. Rarely accessed items shouldn't be in the navigation menu. For larger category navigation, alphabetical sorting is the best.
Top-to-bottom lists are read from top to bottom. With multiple top-to-bottom lists, the leftmost is read first. Gird listing is read line-by-line from left to right.
Prefer text links over buttons. Buttons mean action, underlined text means navigation. You may use one button to highlight the link you want visitor to press.
Home Products About [Sign Up]
Test your navigation hierarchy. Use card sorting to create logical navigation hierarchy.
Consider using breadcrumbs. Breadcrumbs are good if you have at least three or more levels of depth. Use slash / as the separator. All steps should be clickable links except the current page.
Home / Questions / How should a breadcrumb behave?
Keep your navigation consistent. Avoid changing look of placement of your navigation. Never change order of the navigation items.
Don't use symbols inconsistently. Understand what the symbols mean.
> = Dropdown menu opens right on mouse click or hover. Not a link. v = Dropdown menu opens down on mouse click or hover. Not a link. + = The menu expands to show child elements on mouse click. three lines = The main menu opens up on click.
Avoid mouse hover interaction on navigation. Touch devices don't have a hover action, only act on mouse clicks. Additionally hover increases mistakes and frustration.
Having transparent navigation background hints users not to click it. Background image isn't more important than navigation so don't use transparent background if you want users to use the navigaiton. But if you want users to ignore the navigation bar and just scroll down, using transparent background is right.