leitet om webb

I del 2 i min artikelserie om vanliga design-, layout- och utvecklingsmissar som görs på webbsajter ska jag ta upp problematiken med att aktiva meyalternativ ofta är omarkerade.

Regel 2) Markera alltid aktivt menyval

Bakgrund:

I princip samtliga webbapplikationer kräver någon form av navigationssystem, webben bygger trots allt på användarens möjlighet att navigera via hyperlänkar. Vad skiljer då ett bra navigationssystem från ett mindre bra? Jakob Nielsen (Nielsen, 2001:188) sammanfattar att ett navigationsgränssnitt måste besvara tre grundläggande frågor för användaren:

• Var är jag?
• Var har jag varit?
• Vart kan jag gå?

Vidare menar Nielsen att den första frågan är den viktigaste. ”Var är jag?”. Nielsen menar att för att få en förståelse för en webbsidas struktur krävs det att vi vet var i strukturen vi befinner oss.

Man måste vara medveten om att användare idag väldigt ofta dyker rakt in i vår webbapplikation ”utan att passera Gå”, det vill säga, utan att först besöka startsidan för att sedan följa en av oss utstakad väg till aktuell sida. Istället trillar användare ofta in mitt i vår applikation på grund av sökningar i sökmotorer, inlänkningar från andra webbplatser eller besök via bokmärken. Av denna anledning är det viktigt att vår webbplats tydligt förmedlar användarens aktuella position i förhållande till: (Nielsen, 2001:189)

• Webben som helhet
• Wepplatsens struktur

Den första punkten trycker på vikten av att användaren oavsett vilken undersida man är inne på, tydligt kan se vilken sajt man besöker. Något som ofta är problematiskt i frameade lösningar.

Jag ska dock fokusera denna artikel på vikten av att klargöra var användaren befinner sig i förhållande till webbplatsens struktur.

Varför markera aktivt menyval?

Det finns många fördelar med att markera aktivt menyalternativ. Först och främst så har vi redan nu klargjort vikten av att låta användaren tydligt veta var denne befinner sig för att lättare få en överblick över
webbplatsen men det finns även andra finesser med att markera menyalternativet.

Den ouppmärksamme
Om webbplatsen följer konstens alla regler och använder en enhetlig layout på samtliga sidor och dessutom är snabb för användaren att ladda in så kan effekten bli att användaren klickar på en länk i menyn men inte hinner uppfatta att innehållet laddats in. Om då inte det aktiva menyalternativen är markerade är risken stor att användaren klickar flera gånger på samma länk innan användaren uppmärksammar att man faktiskt redan bytt sida.

Den noggranne
Många användare söker systematiskt igenom webbplatsen, menyalternativ efter menyalternativ, för att hitta vad som söks. Om då aktivt menyalternativ inte är markerat i kombination med en större meny och att det inte finns något som utmärker redan besökta sidor kan användaren ha svårt att indentifiera vilket som är nästa länk i ordningen.

Den upptäckande
Användare som navigerat till den webbplats via till exempel en sökmotor har stor hjälp av att veta vilken sida som man befinner sig på i menyhierarkin. Användaren har i detta fall inte själv gjort valet av att klicka på menylänken och har därför ingen möjlighet att veta var man befinner sig.

Den handikappade
Vissa former av kognitiva funktionshinder kan leda till att användaren har svårt att navigera i tid och rum. Detta gör det extra viktigt för oss att ge användaren tydlig information om var denne befinner sig.

Bakåtsträvaren
Om en användare navigerat under en tid på din webbplats och sedan vill backa tillbaka till en sida som denne läst tidigare är det mycket lätt att följa det markerade menyalternativet i takt med att man klickar på tillbaka knappen. Givetvis är det också viktigt att använda tydliga sidtitlar så att användaren direkt kan välja en tidigare sida med avseende på dess titel, men det är en helt annan historia.

Plus många, många fler anledningar till att markera aktivt menyval…

Hur bör ett markerat menyval se ut?

Med anledningarna till att ha väl markerade menyalternativ klargjorda kan vi nu gå över och titta på hur menyvalen ska utformas.

Det viktigaste är att det aktiva menyvalet klart och tydligt skiljer sig från mängden. Jag har en svag förälskelse i flikmenyer då dessa är mycket tydliga på denna punkt. Inte bara kan man se till att färgen skiljer sig åt, man kan även skapa effekten av att aktiv flik befinner sig framför de övriga menyalternativen. Betrakta följande bild som är tagen från en kurshemsida skapad av Mats Loock:

Här råder det ingen som helst tvekan om vilken sida som användaren besöker just nu. Lite mer tvekan är det dock på undermenyn. Är användaren inne på ”Laborationsuppgifter” eller ”Stegtest”? Rätt svar i detta fall är ”Laborationsuppgifter”.

När man använder färger för att särskilja menyalternativ gäller det dock att man är uppmärksam på hur dessa färger uppfattas om i svartvitt. Alltså vilken kontrast som färgerna har i förhållande till varandra.

Betrakta följande exempel:

Här är det väldigt svårt att se skillnad på de olika färgerna när man ser dem i svartvitt medan de i färg är tydliga. Cirka 10% av männen och ett fåtal procent av kvinnorna (Surfa utan hinder) har svårt att urskilja färger på ett eller annat sätt, även kallat färgblinda. Det är därför viktigt att ha tydliga kontraster mellan alternativen. Betrakta istället följande meny:

Här ser vi att alternativen tydligt är skilda från varandra oavsett om menyn är i färg eller i svartvitt.

Hur du väljer att utforma din markering av aktivt menyval är helt upp till dig själv så länge som det är tydligt vilket val som är aktivt.

Tekniskt

Hur går man då tillväga rent tekniskt för att uppnå detta. Vanligast och helst uppnår man dessa effekter med hjälp av CSS. Typiskt gör man det genom att i sin HTML-kod tilldela aktivt menyalternativ en CSS-klass som man sedan låter överskugga övriga menyalternativ.

HTML:

<ul>
	<li><a href="sida1.html">Sida 1</a></li>
	<li><a href="sida2.html">Sida 2</a></li>
	<li class="active">Sida 3</li>
	<li><a href="sida4.html">Sida 4</a></li>
</ul>

CSS:

.active {
  background-color:#125471;
}

Observera att jag här även valt att ta bort länken från aktivt menyval. Det gör att detta menyval inte heller är klickbart om man redan besöker sidan. Bonusen här är att menyalternativet även blir markerat då man besöker sidan utan stilmallar.

Det finns andra sätt att uppnå ovanstående effekter på. Bland annat skriver Jeffery Zeldman om ett angreppssätt som lämpar sig bättre då man har dynamiskt genererat innehåll. (Zeldman 2007:268)

Källförteckning:

Nielsen, Jakob, 2001. Användbar webbdesign. Stockholm: Liber

Zeldman, Jeffery, 2007. Designing with web standards second edition. Berkeley: New Rider

Tidigare artiklar:

Regel 1) Se till att ha tydliga rätt- och felmeddelanden