Navigering
Användare tenderar att vara omedvetna om en apps navigering tills den inte uppfyller deras förväntningar.
Ditt jobb är att implementera navigering på ett sätt som stödjer strukturen och syftet med din app utan att dra uppmärksamhet till sig själv. 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 app. Hierarkinivån och tillståndet bevaras när användaren navigerar mellan avsnitten.
Exempel
Användaren navigerar till ett annat avsnitt.
Användaren trycker på knappen ”Konto”.
Avsnittet ”Konto” visas.
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.
Exempel
Användaren navigerar till en djupare nivå i hierarkin.
Användaren trycker på kortet ”Stockholm Central–Göteborg Central”.
En djupare nivå i hierarkin visas.
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.
Exempel
Användaren öppnar en modal.
Användaren trycker på knappen ”Logga in”.
En modal öppnas.
Interaktiva element som kort, listor och länkar tillåter människor att navigera till djupare nivåer i hierarkin även i moduler. Djupare nivåer i hierarkin har en bakåtknapp i det övre vänstra hörnet som leder tillbaka till föräldern.
Exempel
Användaren navigerar till en djupare nivå i hierarkin.
Användaren trycker på knappen ”Liggvagn”.
En djupare nivå i hierarkin visas.
Det kan verka kontraintuitivt att använda modaler för flerstegsuppgifter, men syftet är att förstärka fokus genom att dölja den globala navigeringen. Detta hindrar användare från att flytta runt i appen innan uppgiften är klar.
Exempel
Användaren navigerar till nästa steg i en modal med flera steg.
Användaren fyller i formuläret och trycker på knappen ”Sök resa”.
Nästa steg i flödet visas.