![]() ![]() uses accordions inside a main navigation menu to display subnavigation. This design feels like a “submenu” inside a larger menu. When the primary navigation is hidden inside a pull-down menu, a simple way to implement subnavigation is to use accordions for the primary categories, with each accordion expanding to expose its corresponding subcategories. Accordions (aka “submenus”) inside a main navigation menu, such as a hamburger menu.There are four common ways to design subnavigation on mobile: Discoverability: Users should be able to find the subnavigation UI quickly, with no chance of confusing it with the main navigation.If, on the contrary, most visitors will “live” in a single section of the site (say, the sports section of a newspaper), then the subnavigation should focus on supporting that pattern. Typical-path support: If, within a single session, users are likely to jump from a page in one section to another one in a completely different area of the site, subnavigation should make it easy.That means few taps, little scrolling, and zero page loads if possible. ![]() Minimum interaction cost: Users should be able to access an element of interest in the navigation with as little effort as possible. ![]() When designing subnavigation, aim for the following design goals: Subnavigation: Design Goalsĭefinition: Subnavigation refers to the navigation UI that helps users access lower-level categories in the site’s information architecture (IA). Plus, some of the visual structure afforded by the two-dimensionality of the megamenu will not be easily apparent on mobile, simply because not all subcategories will be visible at the same time. While Cisco’s desktop site can display 30 or more subcategories in its mega menus fairly comfortably, without forcing users to scroll, those categories will not easily fit on a single mobile screen. How should these expandable menus be translated on mobile? The small screen size cannot easily accommodate many subcategories. The mega menu is visually divided into three columns (Products, Solutions, Services) and also contains a list of tabs at the bottom (Enterprise, Service Provider, Small and Medium Businesses ). On mouse hover, each primary category expands as a megamenu with corresponding level-2 and level-3 subcategories. : The desktop site uses a horizontal navigation bar holding the primary categories. While lower-level categories are often shown on desktop in dropdown menus or mega menus, presenting these subcategories on mobile devices is not always straightforward. Many websites have fairly complex information architectures, with many levels of categories. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |