Review of Efficiently Simplifying Navigation,Part 3: Interaction Design
when the interactive designer design a app or website, the most important element shows on the page is NAVIGATION MENU, which is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browers,web browers and as a design element of some web sites or apps. when design a navigation bar, the designer should follow six aspects.
- symbols
- target areas
- interaction event
- layout
- levels
- functional context
Symbols
Users usually see some drop-down navigation menu depend on small visual clues , such as icons and symbols to guide them through a website’s interface. It is a way to create a system which let user to communicate with website or app. And also, there are different ways to show the symbols on navigation menu or content. Triangle symbol (“▽”）points in the right direction and let menu or content flies out, it is the familiar way to indicate a drop-down menu and distinguish it from regular links. Plus symbol(“+”) is used to further expand the menu. It is a dynamic way to show more information from menu bar, such as, images and videos. Three-line symbol (“ ≡ ”）which is we called hamburger menu and used on responsive websites. This symbol fit any layout and allow you to change the layout without having to change the icon. Therefore, the hamburger menu would clarify its purpose for many users.
Target Areas
The links show on navigation should be easy to see and activate, which means the link should located obviously and large on the web page. Therefore, this kind of area in the interface typically called target area. Legibility is the most important element before user click a target. If user wants to read a label, the link label should in the center or apparent position with large and contrast with the background, let user comfortably read and distinguish them. Size also consider in the design element, the larger a target is, the easier and faster for user to find and click it.
Interaction Event
The interaction event shows a way for user to perform and interact with interface. There is 4 most common ways in navigation bars. Hovering is the most common interaction event in navigation bar, from this article, the author think the hover is not good for 2 reasons. The first is hover accidentally moving the cursor just inside or outside the target area will immediately activate or close the menu. The second is tooltips, the designer generally use this to explain the options. However, tooltips appear on hover, user might not know that they exist and to click them. And also, It is hard to compare the items. As a consequence, the delay problem will come up. All in all, the author thinks the hover is not a good way for user to interaction with menus. Clicking is a standard way to open a drop-down menu and submenus. The click has a few benefits to yield problems. This would allow or multi-tasking, user could pause navigation and switch to another tab or application, which is helpful and reduce more stress, and then mistakes would amount to zero. Scrolling is for user to see all options when they are using a separate page for a navigation menu. However, Scrolling only for browsing categories, not for navigating categories. Typing is a easy way to search and filter what you want. The purpose of typing to filter is spare users from having to scroll through and read a long list. It is a convenient way for user, because the user would more likely know the particular string they are looking for related to the item they want.
Layout and Levels
Layout is a element for designers to arrange and become meaningful. The first step for layout is sorting items. Sorting alphabetically could help users to find what they want or they belong to. The advantage of alphabetical sorting is that users are able to figure it out immediately and then easy to browsing. The next question is when to use which layout. The type is depend on your content- Labels, pictures and descriptions. For example, if the main focus is the pictures, not the labels, the labels could be show over top of the pictures, which would slightly compromise the space efficiency. Finally, a common type of layout for navigating to content is the tag cloud. A tag cloud uses gradients, font size and positioning to show the relative importance or recurrence of items in category. also, the tag clouds enable users to visualize item both alphabetically and by importance ant the same time.
Functional Context
Functional context is a function way for user to manipulate in a certain situation. In this article, author mainly talk about when users are navigating or to consuming content and they expect navigation and consumption to contrast with each other.
The fist question is duplicate navigation menus, the website content usually shows some pictures, videos ,data and something like that. Do not make them too common when users click a navigation link drops down a submenu. For instance, if user might want to see the same set of data in a different chart types, they need only one type of menu to navigate to the data. The next is animation and navigation, some designers want to show the dynamic way with animations. Animation can be a useful way to explain transitions on the screen.The traditional way to animate navigation is to slide it over top of the content, as mocked up below, which is a simpler, more efficient solution for both developers and users.
The users have to interact with the navigation menu, the first step is choose a appropriate type, the less information that is necessary to explain the options and the less it amount to, the simpler the navigation will be. After read this article, I realize the navigation menu should be designed to be as simple, predictable and comfortable as possible, so that you could get a lot of people to appreciate it.
