- Introduction
- Home Page
- General Layout
- Title Bar
- Search
- Top Navigation
- Design & Formats
- Functions
- Left Navigation
- Right Navigation
- Footer Navigation
- Item Detail Page
- Shopping Cart
- Checkout Process
- Virtual Catalog
Top Navigation
Top navigation is usually placed just below the title bar and provides menu, search and navigation functionality.
Key Findings
- Three websites use tab menu and five use drop down menu. Rest 10 websites use a simple menu bar.
- Search box should be placed at right or just below the top navigation unless it is already placed at title bar.
- Describe a menu by a word or two.
- Change shapes, fonts and colors for different item groups if you go with many navigation items.
Design & Formats
The Number of Items in Top Navigation
The graph below shows the number of main items identified at the top navigation. Online stores that have many product categories tend to have more items. However, some companies rely on other means to reach those products. For example, Amazon.com abandoned many product category tabs which are still used at Walmart, and use popup window instead. eBay exclusively relies on search bar for the top navigation.
Tab & Drop Down Menus
It turns out that only three companies use tabs. Five websites use drop down menus. Rest 10 websites do not use either one of them. There are many other top navigation techniques (main/sub menu, like Schwab or two row menu, like EMC), but none of them were observed.
Search Box
Eight out of 18 companies place "Search Box" at the top navigation. Typically, it is located at right or just below the menu item (2nd row). Considering the fact that some websites already place a search box at the title bar, almost all websites place a search box at the very top of the page. We will discuss this topic more in the Search section.
Design Consideration
In top navigation design, one thing which should be noted here is to use shapes, fonts and colors wisely. Let's take a look at the Harry & David's top navigation. Since it has 12 items, it is very difficult to see which item is what. Moreover, it mixes up different types of menus. The first 10 items are for gifts (product categories), but the last two are for the different purpose.
In this case, Walmart does a better job. Walmart color-codes different types of items with different colors.
Another thing is a word choice. Harry & David's item descriptions are long and all upper cases. They are very hard to read. Walmart uses mixed cases and most of them are described by a word or two.
If a company decides to go with many items, like Harry & David or Walmart, it should come up with an easy way of finding items at top navigation. Don't make your customers ponder there.