Bakgrund

Utvärdering av navigering vi har i dag

Design

  • Jag har gjort en utvärdering på kth.se vad gäller navigation (i förhållande till riktlinjer som finns listade nedan):
  • Förslag på ny design för navigationselement som i dag inte förljer riktlinjer:

IA

  • Utvärdera existerande IA
    • Inventera existerande innehåll
    • Utför användarstudier: identifiera användarnas behov och mentala modeller
    • Definiera användarscenarios, personas
  • Define new IA
    • Skapa användarscenarios (task flows)
    • Definera innehåll, grupperingar och namngivning (label)
    • Test IA
    • Refine
    • ...
  • Välj navigation
    • se nedan

Användbarhet navigering

  • Menyer ska vara synliga
    • Luft runtomkring
    • Ta plats
    • Placeras där den förväntas vara
  • Lätta att navigera

    • Tillräckligt stor klickyta

    • Grupperas för att hjälpa användaren att snabbt hitta rätt alternativ

Välj navigation

  • Välj navigering utifrån planerad tillväxt
  • Innehållsrika webbplatser, med djupa strukturer,
    • Global navigering: horisontell meny, lokal navigering: vänstermeny
      • Vanligast, förväntad, standard
      • Tillåter fler element
      • Placerar elementen i en naturlig visuell scanning mönster
  • Innehållsrika webbplatser, men ej djupa struktur, ingen lokal navigering behövs
    • Placera länkar till undersidor inte i vänstermenyn utan där innehållet är, då det är där användaren tittar.
    • Passar även bra för mobil navigering

Global navigering

  • Hjälper användarna att välja en startpunkt
  • Definierar omfattning (scope)
  • Ge tillgång till större kategorier och distrikt
  • Global navigeringskategorier klickas ofta inte på under vanliga användarscenarier:
    • Användaren är oftast bara intresserad av ett ämne
    • Websök leder användaren till rätt kategori och de behöver sedan aldrig byta kategori
  • Fundera på "sticky" menyer för långa sidor.
    • Användare som har nått längst ner på en lång sida kan får scrolla en hel del innan de kan komma tillbaka till menyerna på toppen.
    • Sticky menyer är särskilt välkomna på mindre skärmar.

Landasida för en katagori

På en landasida för en kategori har användaren som syfte att välja en underkategori/ subsida, därför ska innehållet bestå av länkar till subsidor och kort text som förklarar innehåll.

Ingen vänstermeny ska finnas i detta läge för att undvika dubbleringa av länkar till subsidor.

I nästa läge, när användaren valt en subsida är huvudsyftet att läsa innehållet, därför ska sidan vara innehåll och menyn placeras till vänster (se mer nedan, Lokal navigering).

Lokal navigering

Val av lokal navigering till vänster är för att det är upplevs som standard. Tidigare placering av menn till höger har visat sig besvärlig (feedback, användartest KTH Social). 

Olika typer av lokal navigering

Trädstruktur - expanderande menyer utan huvudsida:

  • Fördelar:
    • Man får direkt access till undersidor utan att behöva klicka på huvudsidan
  • Nackdelar:
    • Ingen huvudsida för att ge kontext för undersidorna
      • Många gånger vill användaren bara gruppera sidor och har inget övergripande att tillföra. Sidan blir då tom eller innehåller bla-bla-text eller upprepar länkar som finns i vänstermenyn
      • Användartester har visat att användaren antingen kan missa huvudsidan eller att det finns undersidor (Användartest KTH Social)
      • Vilket leder till att det blir extra viktigt med namngivning av bra sidan.
    • Användaren kan bli disorienterad då man inte får en ny sida utan bara menyn ändras för att visa undersidor
      • Viktigt att fälla ut meny så att det blir synligt
        • Fäll ut menyn under där användaren klickat
    • Meny som är felaktigt intenderad kan göra att man inte seer relationenr mellan subsidor och hindra användaren att hitta informtion
    • Menyrubriker som är långa tar upp fler rader. Behöver göra det för att om inte gör det så tar det plats från innehåll

Val av lokal navigering

Finns tre strategier för stora (djupa) webbplatser:

  • Trädstruktur
    • Rekommenderas ej om har mer än 4 nivåer eller om webbplatsen har olika djup
    • Kan bli överväldigande för djupa webbplatser
  • Mini-navigation
    • Kan fungera om länkar finns under en övergripande text
    • För siter med varierande djup där mini-IA används för de med mer djup
  • Utbytande meny (roll-up)
    • Fördel: Fokuserar på subkategorier

Megameny

  • Ska aktiveras mha hover eftersom effektivare, för mobil och liknande som inte har hover: ändra hover till att aktiveras mha "tap"
  • Var försiktig med att addera för mycket innehåll, ( t ex i form av bilder) så det försvårar navigering 
  • Skilj visuellt på länkar och ej klickbara rubriker
  • Göm inte kritiska element som login och sök i megameny
  • Undvik "clutter"
  • Behöver vara mindre djup än en sida så inte misstas för en sida
  • Megamenyn ersätter inte lokal navigering utan kompletterar den

Utility navigering

  • Innehåller:
    • Login
    • Användarkonto
    • Hjälp
    • Kontakt
  • Även om de flesta användningsfunktionerna är sekundära i naturen är de viktiga för människor under vissa omständigheter.
    • Det är därför viktigt att man placerar de sekundära funktionerna i överensstämmelse med regelbundna webbkonventioner så att användare snabbt kan hitta dem när de behöver.
  • Se https://www.nngroup.com/articles/utility-navigation/

Snabblänkar

Finns i form av Tjänster i Personliga menyn

  • För huvudaktiviteter som användaren ofta använder
  • Bra om går att personalisera

Site map

  • Inkludera i footer och namnge "Site map"

Brödsmula

  • Följ standard:
    • Horisontell linje
    • Visa hieraki för webbplats, inte historik
    • Börja med översta nivån och sluta med lägsta; Home->...->nuvarande sida
    • Länkar för varje nivå men inte för nuvarande sida för att du ska inte ha länkar som inte gör något (du är redan på denna sida)
    • En avdelare mellan nivåer som "/"
    • Om för långa på mobil (mer än två rader?) ta bort brödsmula och erbjud alternativt sätt att vet var man befinner sig i navigationsstrukturen.

Footer

  • "fat footer" förbättrar webbplatsens effektivitet (Nielsen Navigationskurs)
  • Var tydlig med vad som är footer

Flikar

  • Visa tydligt vilken flik som är vald genom storlek, färg, font, att vald tab hänger i hop med innehållet 
  • Det tabbar som inte är valda ska också vara synliga så att användaren förstår att de kan väljas
  • Visa visuellt vilket innehåll som flikarna berör, ska kunna direkt uppfattas.

Feedback Nyheter