Patterns - Navigation

Patterns

Usage

Arrange your layout based on the content and tasks you want users to access. Highlight important destinations using tabs or side navigation, and reduce the prominence of less important content by placing it in less noticeable areas.

Principles

Ensure your navigation is easy to follow and predictable. Both new and returning users should effortlessly navigate your digital product.

Group content

Organize content into meaningful groups that highlight relationships.

Guide actions

Lead users through paths between scenes, encouraging specific actions or free exploration.

Direct attention

Design your navigation to spotlight important content and tasks.

To choose the right navigation approach, understand your users, their common pathways, and desired interactions. For example, in a digital service, users might seek account management, game options, or support resources. Aligning with user priorities will ensure your navigation effectively serves their needs.

Prioritize

Rank common user tasks as high, medium, or low priority. Make high-priority tasks stand out in the UI and adjust as user needs shift.

Example: When designing navigation for a game product, the highest priority tasks may include placing bets or exploring game details.

Sequence and pathways

When a user wants to discover a favourite game or access a new one, both paths lead to viewing game details. Ensure that frequently used paths to these destinations (such as search or favorites) are easily accessible.

Identify paths

Analyze user journeys, understand common routes and adjust the navigation to user needs.

Prioritize destinations

List and prioritize order for commonly used places in your navigation.

Group tasks

Group similar tasks together in navigation.

Break it down

Split complex tasks into smaller actions. These smaller steps are often used, easier to understand, and better match user needs.

For instance, dividing search into actions like searching by name, location, or popularity might suggest adding these to navigation.

The broader task of “Discover new games” may hide smaller actions like: Browse categories, Search by name, and Browse popular. Integrating these simple actions into your navigation aids users in searching.

Hierarchy

Navigation organizes content by placing it within a hierarchy. Key scenes are at the top, leading users to scenes lower in the hierarchy in a structured flow. This guides users smoothly through your digital products.

Home screen

This is the entry point, introducing navigation. It can display personalized content based on users previous interaction.

Parent-Child hierarchy

In a hierarchical structure, the upper level is (A) the "parent," containing the lower levels referred to as (B) "children." For example, the home screen functions as a parent to other screens.

When you navigate more deeply into an digital environment, you descend from a higher level of hierarchy to a lower one.

A - Moving in: Descending from parent to child.

B - Going back: Ascending from child to parent.

Siblings

Views that start from the same place are called siblings. Digital environment with various tasks, all equally important, often have many sibling scenes. Navigating between these scenes is known as lateral navigation.

Collections

Collections are groups of related elements, such as three cards in a view. Each card may represent different items like products, articles, or images, but they're grouped based on a shared parent or category.

Links

A – Links allow users to move quickly between scenes that are not right next to each other in the structure.
Crosslinks are links that take users anywhere within your product.

B – External links lead users to a different website, providing access to external content. They're valuable for referencing authoritative sources, citing research, or offering extra resources beyond the current page.

Reverse navigation involves moving users backward between screens. This movement can take users through their recent screen history in chronological order or lead them upward through an specific hierarchy. On the web, browsers have an embedded "go back" button, eliminating the need for additional back buttons.

Menus, logic, and hierarchy

For cases where information needs to be positioned deeper within the content hierarchy, the following approach illustrates how to work with various menus and levels.

We use four levels, and the fourth one has the most detailed information. This strategy helps you organize menus and levels when you have lots of information to sort. The levels go from 1 to 4.

Example of Navigation Hierarchy in the digital product “Ombudsportalen.”

The navigation structure can vary based on the product and layout.

Navigation in Lottos digital environment (Svenska Spel Tur)

Navigation in Stryktipset digital environment (Sport & Casino)

We offer two distinct navigation options. One is accessible at all times, even when not logged in (located on the left). The other, on the right, becomes personalized and available when logged in. This approach to navigation ensures that both logged-in and non-logged-in users can easily access relevant features. It optimizes the user experience by offering different navigation options based on the user's status.

A – Navigation accessible for everyone (Always positioned on the left side)
B – Personalized navigation only accessible with your SVS account. (Always positioned on the right side)

Search

Search allows users to quickly navigate and access screens anywhere within the information architecture.

Example of how the search appears in our internal Design Systems Platform. Below the designated search area, you'll find related search results.

Navigation