Navigering

Navigeringen ska kännas naturlig och bekant och bör inte dominera gränssnittet eller dra fokus från innehållet.

Global navigering låter användare växla mellan olika delar av en webbplats. Hierarkinivån och tillståndet bevaras när användaren navigerar mellan de olika delarna.

Tab Bar

1. Tab Baren visar viktigaste huvudingångarna. En Mer-knapp (•••) visas automatiskt om det finns fler huvudingångar. Användaren trycker på Trafikinfo.

2. Användaren kommer direkt till huvudingången för Trafikinfo.

Sidebar

1. Användaren trycker på Sidebar-knappen.

2. En Sidebar öppnas. Sidebaren visar alla huvudingångar. Användaren trycker på SJ Prio.

3. Sidebaren stängs. Användaren kommer direkt till huvudingången för SJ Prio.

Interaktiva element som kort, listor och länkar tillåter människor att navigera till djupare nivåer i hierarkin. Djupare nivåer i hierarkin har en bakåtknapp i det övre vänstra hörnet som leder tillbaka till föräldern.

1. Användaren trycker på Stockholm Central.

2. En undersida för Stockholm Central öppnas. Användaren trycker på Tillbaka-knappen.

3. Användaren är tillbaka på Trafikinfo-sidan.

Använd modaler för att slutföra en uppgift. Att låsa fokus samtidigt som användaren gör val och anger input hjälper användaren att nå sina mål utan distraktion. Det minimerar också risken att av misstag överge flödet genom att trycka på ett annat element eller den globala navigeringen.

1. Användaren trycker på Logga in-knappen.

2. En modal öppnas. Användaren trycker på Stäng-knappen (X).

3. Modalen stängs och användaren är tillbaka på Dina resor-sidan.