Utforma webbplatsmenyn efter konkreta användaruppgifter
Koppla befintliga sidor till besökarnas uppgifter. Ett exempel tydliggör menytexter, målsidor och den efterföljande granskningen.
Planera webbplatsmenyn utifrån vad besökarna vill göra. Du behöver veta vilket innehåll som finns och vilken fråga varje målsida besvarar. Företagets avdelningsnamn är till en början bara en möjlig indelning.
Koppla befintligt innehåll till en uppgift
Följande exempel är påhittat. En programvaruleverantörs webbplats har en integrationssida, ett formulär för projektförfrågningar och hjälp för portalprogramvara som redan används. Koderna avser våra egna exempelsidor, inte faktiska ASES-rutter.
Tabellen visar en del av navigationen. Menytexterna är förslag; kopplingen till målsidor är en förväntan att granska senare, inget resultat från en användarstudie.
Uppgift | Befintligt innehåll | Föreslagen menypunkt | Målsida |
|---|---|---|---|
Ta reda på om leverantören kan överföra kunddata mellan CRM och ERP. | Systemintegration med dataflöden, begränsningar och kontaktväg. | Koppla ihop system |
|
Beskriva en planerad webbapplikation och ange egna kontaktuppgifter. | Projektförfrågan med uppgifter om projektet och kontakten. | Skicka projektförfrågan |
|
Läsa hur en filexport fungerar i den portalprogramvara som redan används. | Portalhjälp med motsvarande instruktion. | Portalhjälp |
|
Målsidan måste uppfylla menypunktens löfte. En allmän tjänsteöversikt räcker exempelvis inte om den efterfrågade integrationsinformationen saknas. Granska innehållet innan du bara byter namn på länken.
Undersök menytexter med uppgifter
GOV.UK rekommenderar konkreta, trovärdiga testuppgifter som inte avslöjar lösningen. Ge exempelvis en lämplig testperson den första uppgiften i tabellen. Säg inte vilken menypunkt personen ska välja. Observera den valda texten, omvägar och resultatet på målsidan.
Fråga sedan om informationen som hittades besvarar uppgiften. Ett första klick bevisar inte det på egen hand. Dokumentera observation och tolkning var för sig: Fel målsida kan bero på texten, grupperingen eller saknat innehåll. Ett enda försök visar inte hur ofta uppgiften lyckas i allmänhet.
Bevara orienteringen på små skärmar
WAI:s menyhandledning beskriver semantisk struktur och konsekventa synliga menypunkter mellan skärmstorlekar. En utfällbar mobilmeny ska stödja samma uppgifter. Punkter som syns i båda vyerna ska ha samma ordning, ordalydelse och mål; den aktuella sidan måste gå att känna igen.
Planera uttryckligen för långa översättningar och flera navigationsnivåer. Att flytta en punkt till en undergrupp är ett innehållsbeslut som handlar om mer än utrymme. Undersök om de tre exempeluppgifterna fortfarande går att lösa där utan förklaring.
Granska även hur navigationen används
WAI-ARIA-exemplet skiljer vanlig webbplatsnavigation från en applikationsmeny med särskild tangentbordsstyrning. Rollen menu passar inte automatiskt för vanliga navigationslänkar. Använd begripliga länkar och lämpliga kontroller för att fälla ut avsnitt; deras tillstånd och fokus ska vara tydliga.
Kontrollera tangentbordsanvändning, förstoring och en lämplig skärmläsarkonfiguration i den implementerade versionen. Granskningen av de tre målsidorna ersätter inte denna tekniska kontroll. Använd menytexter och grupper när uppgiftsförståelse, målinnehåll och användning passar ihop; håll olösta fynd synliga.
Källor
Läs vidare
Alla artiklar
Design & UX med ASES
Användarupplevelse, gränssnitt och varumärke