UI Patterns: Navigation (Part 1)

09 / Jun / 2017 by Quamar Alam Quamar 0 comments

A design pattern is a formal way of documenting a solution to a common design problem. The idea was introduced by an architect Christopher Alexander for use in urban planning and building architecture. This has been adapted for various other disciplines, including teaching and pedagogy, development organization and process, as well as for software architecture and design.

It can be defined in another way. Design patterns are the best practices used by experienced design professionals which allow providing a solution to give design problems.

Usage of Design Patterns
Design Patterns have two major usages:

  1. A common platform for developers- Design patterns provides a standard terminology in a specific scenario. For example, Tab explains that user can switch between sections being on the same level. That means switching between the tab will allow the user to explore contents available at the same level without moving ahead in the hierarchy.

  2. Best Practices- Design patterns has been evolving over a period of time using research, by capturing user’s behavior by a different industry expert. It provides the best possible solution to a certain problem during software product development. It also allows creating a re-usable component to ease out the development.

There are mainly four types of UI Design Patterns, as Jared Spool describes in the book “Anatomy of Design Decision”-

  1. Input & output – These patterns deal with how the users interact with a system and how the system respond. These can further be divided into various categories:
    Untitled-1
  2. Navigation – These will help the users to the sites and application. It helps to ensure that the users are properly oriented and how to find their way if lost. Going further these can be divided into following types:
    2
  3. Content Structuring – Content is the King. Content is one of the most valuable assets of your website/application. Users visit your website/application because they are looking for some solution and it should be your main goal to provide them with the information/solution they are looking for. Following are few patterns to achieve the same:
    3
  4. Social Media – It helps the users to associate and communicate with other people online. The user wants to get an overview of recent actions in a system that are interesting from his or her perspective. It helps to increase the social engagement. Below mentioned are few patterns achieving same:
    4

In this blog, we will be exploring different navigation patterns.

In order to understand why and when to use which navigation pattern, let’s understand the possibilities. Below are the quick examples of different navigation patterns:

Tab
If you have limited section in your application and/or website, Tab becomes one of the options. It allows users to quickly switch between sections while having all options available at once. However, the art is knowing how to contain multiple features with limited Tabs.

Tabs are the simplest navigation pattern. However, there are few things which should be considered while designing a tab:

  • The tab should be of 2 – 9 sections of content that need a flat navigation mode for larger devices like Desktop, Laptop, TV Apps, iPad.
  • The tab should not be more than 5 in a count for mobile.
  • One of the tabs should be active all the time and visually separated with other inactive tabs.
  • The first tab has to be landing screen, and another tab has to be logically ordered in a way so that user can understand the flow.
  • Tabs can be displayed on the bottom or the top depending on content and context.
  • Tabs should be labeled correctly. An iconic representation of tabs works only when the icons are generic and well known. For example Home, Setting, Bell (for notification) etc.

Examples:

5
6
7

Tabs with more option
If you have more than 5 sections to be displayed, this alternative solution becomes helpful. The first four most prioritize section will be individual tabs and rest can be fitted into a fifth tab. This has become handier in mobile app design, but depending on various contexts/needs websites and web apps can also be designed with Tabs and More. This design pattern is a combination of Tabs and Drop Down Menu.

8

Hidden items can be shown on a separate screen and/or a drop-down menu.

An argument can occur that when we have to hide fewer sections, Hamburger Menu isn’t easy. However, if the prioritization is done correctly, most users will be looking at 4 tabs. It helps to improve the navigation experience for the majority of the users. Facebook does it nicely.

9

Collapsing Menu
Look at Collapsing Menu as another variant for “Tab + More” option.

The menu adapts according to the resolution and device screen. It shows as much tab as possible, and the rest fits as part of “More Menu”. It works brilliantly well by writing a small piece of HMTL5 code, making the tab UI, fluid enough to transition from a full blown view (on a website) to a restricted view (on a small handheld device).

A quick tip here remains to pay attention to tab ordering.

10

BBC website does it brilliantly. When you view it on the desktop, it will show all menu items upfront while on mobile, it will display a limited tab (with More).

11

Scrollable Navigation
Unlike the Tab+More option, if we need to design tab without a significant distinction in priorities, Scrollable navigation pattern becomes helpful. This navigation pattern will have navigation items in scrollable view:

12

However, this solution also has some downside. The user will not see all the items at once even if the priorities are similar.

It’s also difficult for Visual Designer to provide Visual Hints to suggest that there are more items available on a scroll. It can be achieved by fading away last visible element and/or positioning the last elements in such a way that some parts of it are visible to users. Below are a few examples:

13

Navigation Hub
The Navigation Hub is an independent page (usually a Home Page or Dashboard) where all the navigations are listed. In order to navigate to a specific page, the user has to click on one of the listed items. It works well in task-based applications.

Go Ibibo, Yatra and few other travel booking app who does it brilliantly.

14

By far we have discussed various types of Tabs. Let’s move to another type of navigation which is “Menu”.

A website/application navigation menu is the place on each page where links to other pages on your website are displayed. Let’s deep dive into types of Menu:

Hamburger Menu
Norm Cox appears to be the original designer of the hamburger menu icon, designed when he was at Xerox PARC in the 1980s.

The hamburger button or hamburger menu is a button placed typically on the top corner of a graphical user interface. Selecting (tapping or clicking) this button results in a menu being revealed (sliding out or popping up), which distinguishes it from a menu bar and is always on display. Use of this icon as a graphical shortcut originated in order to save space on smaller devices (like smartphones).

Exposing and/or Hiding navigation in Hamburger Menu has both Pros and Cons. Luckily, more and more sites are experimenting with alternatives. None of the below-listed solutions is better than other, but their performance and viability is dependent on Content and Context.

Though Hamburger Menu has less discoverability and is recommended to consider above mentioned alternative Navigation Pattern. However, Hamburger Menu becomes an appropriate solution when we have to design Secondary Navigation in the same system.

Myntra, Flipkart etc. does it quite beautifully. These are e-commerce applications, and they deal with multiple categories. Their primary navigation contains the Main categories, Offers, etc. in tabs and other formats. They also provide “Search” as the main navigation along with Cart. And rest of the secondary items are grouped into hiding Hamburger Menu.

15

Another classic example of the same is “OLA App”. By Ola, App Primary Navigation is designed around a user flow and related action items which are available on the screen up front. Since primary need of this app is of booking cabs and not checking history, settings, etc. that’s why these are grouped in a Hamburger Menu.

16

Vertical Dropdown Menu
A Drop-down Menu is a graphical control element, similar to a list box. When a dropdown is inactive, it displays a single value. However, once active, it displays the hidden navigational value.

Vertical Dropdown Menu possibly can be used when users need to navigate among sections of a website, but space to show such navigation is limited. Below is an example:

17

Horizontal Dropdown Menu
A Horizontal Drop-down Menu is also a type of graphical control element, similar to a list box. The only difference is that sub-menu gets opened horizontally when active. This can also be used in the similar scenario, but depending on the context.

18

Accordion Dropdown Menu
The accordion is graphical control element which contains stacked list of items. Each item can be expanded once at a time to reveal the content associated with it.

This pattern can be used in below-listed scenarios:

  • When a design requires the benefits of a normal sidebar menu, but do not have the space to list all options.
  • When there are more than 2 main sections on a website each with 2 or more subsections.
  • When the design has less than 10 main sections.
  • When you only have two levels to show in the main navigation.

Below are few examples of Accordion Dropdown:

19

These are few Navigation Pattern which is being used across the web and mobile UI design industry by design experts. The list does not end here.

We will discuss the below-mentioned navigation in next part:

  1. Content Based Navigation
  2. Hierarchical Navigation
  3. Gesture

Stay Tuned…!

Image/Screenshot source:
www.google.com, www.flipkart.com, http://www.facebook.com, http://www.bbc.com/#orb-footer, https://en.wikipedia.org/wiki/Design_pattern , www.myntra.com, https://material.io/guidelines/

FOUND THIS USEFUL? SHARE IT

Leave a comment -