Designmönster för navigation på små skärmar

En rapport från An Event Apart i Boston 2012, del 2

När vi började processen med omgörningen av svt.se och Play-tjänsten så var en parameter att vi skulle arbeta enligt mobile first-principen. Att utgå ifrån det minsta läget gör att man tvingas identifiera det som är viktigast. Innehållet borde vara det viktigaste men hur kommer det då sig att det första man ofta möter är en navigation som tar upp större delen av skärmytan? Är det viktigare att kunna navigera bort från sidan man befinner sig på än att upptäcka innehållet?

Foto: Jakob Rahm

Luke Wroblewski ägnade en del av sin föreläsningstid på An Event Apart i Boston åt att gå igenom exempel på olika navigeringslösningar, och framför allt hur dessa ter sig i mindre skärmstorlek.

Ett exempel som känns spännande är att lägga navigationen i botten. I topp lägger man en ankarlänk som skickar användaren till rätt position och längst ned på sidan kan man lägga ytterligare en ankarlänk som skickar användaren tillbaka till toppen.

Man kan på detta sätt ge menyn det utrymme som den kräver, inklusive stora klickytor etc. och det blir även en naturlig avslutning på sidan. En annan fördel är att denna lösning inte kräver någon form av JavaScript och kräver inga kostsamma operationer.

Ytterligare ett exempel är lägga menyn utanför den synliga ytan (”off canvas”). Detta är en av mina personliga favoriter. När man väljer att visa menyn så skjuts menyn in i den synliga ytan medan innehållet skjuts ut enligt bild nedan.

Detta bryter lite mot mönstret där man ofta staplar element ovanpå varandra, vilket jag tror kan ge en känsla av balans och lugn.

Vidare pratade Josh Clarke i sin föreläsning “Buttons are a hack” om nya beteenden som kommer med touch-enheter. Om man t.ex. använder en surfplatta så förväntar, i alla fall jag, att man kan använda swipe för att röra element till höger och vänster i en horisontell lista. Detta beteende kan högst troligt komma att utvecklas så att man t.ex. kan använda inzoomning respektive utzoomning (pinch-zoom) för att navigera i en hierarkisk struktur.

Hur vi än kommer att lösa navigering i fortsättningen så hoppas jag att det kommer bli ett iterativt arbete där vi kan exprerimentera, betatesta och försöka hitta en så bra lösning som möjligt.

Till del 1 – Bra design måste börja med innehållet
Till del 3 – Ansvarsfull webbutveckling