• Bör
• www.anvandbart.se/ab/visa-framsteg

När användaren håller på med någon slags process som gör att hon behöver passera ett antal webbsidor, är det viktigt att ge henne en uppfattning om hur långt hon kommit och framförallt hur långt hon har kvar. Att inte göra detta ökar väsentligt risken för att hon avbryter.

Det kan göras mycket enkelt, genom att skriva något i stil med
”Sid 4 (av 6)”. Det kan med fördel göras visuellt, till exempel som i 0 .

Klicka bakåt

De olika stegen i en visuell framstegsindikator får gärna vara klickbara så att användaren har friheten att gå tillbaka till ett tidigare steg. Det kan dock finnas hinder för detta, till exempel att olika steg är beroende av varandra eller att det skulle vara alltför krånglig att genomför rent tekniskt. Mer om detta i Låt användaren gå tillbaka och ändra sina inmatningar, sid 292.

Processer som grenar sig

Om processen kan ta olika vägar beroende på användarens inmatningar kan det vara svårt att göra en framstegsindikator eftersom man inte vet vilka sidor det blir eller kanske inte ens hur många de är.

Ibland kan då framstegsindikatorn visa både de möjliga vägarna (och på kuppen förvarna användaren om att hon kommer att behöva göra ett val), men ofta är det en lösning som alltför mycket komplicerar en inte särskilt central detalj i gränssnittet. Ibland kan indikatorn ändras beroende på vilken väg användaren väljer. Och ibland tvingas man helt enkelt avstå från den, eftersom ingen riktigt bra lösning finns.

• Tips
• www.anvandbart.se/ab/sokvag-avskilj

För att göra sökvägen bättre för användare med skärmläsare är det viktigt att också följa Använd inte HTML-text som symboler, pilar eller bilder, sid 421.

Kategori

En utvidgad variant av vägen hem kan användas när webben navigeras via kategorier (se Ämne eller kategori, sid 161). Då visas alla kategorier som sidan tillhör, tillsammans med överkategorierna. En sida kan med andra ord ha flera olika kategorisökvägar.

Denna variant placeras vanligen långt ner på sidan, eftersom den kan ta upp mycket utrymme.

Stig

Den ovanligaste användningen är paradoxalt den som gett upphov till namnet ”brödsmulor”. Det kommer från när Hans och Greta i sagan lämnade efter sig ett spår av brödsmulor när de gick in i skogen, för att kunna hitta tillbaka igen.

Stigen visar vilken väg användaren verkligen gått (vilket inte alls alltid är raka vägen från ingångssidan, eller ens något som börjat där).

• Bör
• www.anvandbart.se/ab/sokvag-kontext

Man ser ibland webbplatser där sökvägen inte slutar med den aktuella sidan. Förmodligen är tanken att den informationen redan finns där, i form av sidans rubrik. Det är dock bättre att låta den synliga sökvägen visa ett avslutat sammanhang (vägen från ingångssidan till sidan där jag är nu), istället för att tvinga hjärnan att pussla ihop den med rubriken för att avsluta tanken.

Den aktuella sidan skall inte vara länkad.

• Tips
• www.anvandbart.se/ab/gor-sakregister

En annan idé att stjäla från böckernas värld är det sakregister som ofta finns längst bak i en fackbok. En alfabetisk sammanställning av webbplatsens innehåll.

Funktionen hos ett sakregister överlappar i hög grad webbplatsen sökning. För många användare fungerar dock ett sakregister bättre, det talar om för dem vilka termer som finns att ”söka” på, och är registret välgjort är alla hänvisningar relevanta, inte bara ord som i förbigående råkar nämnas på sidan.

Detta är dock ett betydligt större jobb att ge webbplatsen ett sakregister än att göra en innehållsförteckning. Det låter sig inte heller automatiseras på något bra sätt – de ”automatiska” program som finns producerar sakregister som mest av allt liknar vanliga sökningar. Att göra sakregister tycks än så länge kräva mänskligt omdöme.

Det är inte heller ett jobb som låter sig decentraliseras till artikelförfattarna. Skall ett sakregister få kvalité krävs att en eller ett fåtal människor, gärna med någon slags biblioteks- eller arkivutbildning, gör indexeringen.

Folksonomier

En variant vars popularitet ökar är att låta sidförfattaren själv hitta på de ord som sidan skall hittas via – istället för att som för ett traditionellt sakregister hämta dessa från en förutbestämd lista eller taxonomi. Detta kallas en folksonomi – en ordlek med folklighet och taxonomi.

Folksonomin gör det möjligt att decentralisera jobbet. Den fungerar dock bara om det inte är viktigt att kunna hitta allt material som handlar om en viss sak. Den fungerar till exempel utmärkt på väldigt stora webbplatser, där man ändå får mer än man behöver på de flesta ord.

• Bör
• www.anvandbart.se/ab/gor-innehall

En utmärkt idé att stjäla från böckernas värld är innehållsförteckningen. En sida där hela webbplatsen samlas och där användaren får både överblick och genvägar till innehållet.

Innehållsförteckningen bör inte innehålla varje sida i webbplatsen, utan istället vara en avvägning mellan detaljnivå och överblick.

Om det finns speciella funktioner för att förbättra tillgängligheten, peka gärna ut och förklara dem i anslutning till innehållsförteckningen.

Se även Har webbplatsen innehållsförteckning eller sakregister skall det finnas en länk dit från varje sida, sid 122, och WCAG 13.3 (prioritet 2), sid 368. Vad gäller innehållsförteckning för en enstaka sida, se Ge långa sidor en sid­inne­hålls­för­teck­ning , sid 230.

• Bör
• www.anvandbart.se/ab/permalink

Att länka till en löpsedel där det finns en intressant puffnotis är som att skriva i vatten. Snart har puffnotisen rullat av löpsedeln och länken blir felaktig.

Därför har det börjat bli populärt att även ge varje puffnotis en egen sida, med en beständig webbadress. Vid puffnotisen på löpsedeln finns en läk till denna. Ofta används ordet ”permalänk” (en förkortning av ”permanent länk”), men ibland ser man även# eller en liten bild av ett ankare som länk.

Länken måste få en title-text, som berättar vart den leder (annars blir den till besvär för synskadade, se Låt inte identiskt formulerade länkar leda olika, sid 116).

• Tips
• www.anvandbart.se/ab/viktigt-lop

Löpsedlar sorteras normal så att det nyaste läggs överst.

Ibland kan det dock finnas puffnotiser som är så viktiga att de bör ligga kvar i toppen av löpsedeln istället för att tryckas ner av nyare material.

• Skall
• www.anvandbart.se/ab/forteckning-tom

På samma sätt som för menyer gäller att man kan behöva hålla vakt mot förteckningar som genereras av datorn, så att dessa inte blir helt tomma eller löjligt korta. Se Menyer får inte vara tomma, sid 133, och Listor utan något innehåll, sid 246.

• Tips
• www.anvandbart.se/ab/forteckning-nasta

Ett problem med förteckningar är att från en sida måste användaren upp till förteckningen för att kunna klicka sig ner på nästa. Samma sak upprepas för varje sida hon vill titta på. Detta kallas ibland jojonavigation.

För att komma runt detta brukar förteckningar kombineras med en boktopologi (sid 198) och 'nästa sida'-länkar (sid 122).

Ibland förekommer även 'föregående sida'-länkar för att ytterligare öka användarens möjlighet att snabbt ta sig runt.

• Tips
• www.anvandbart.se/ab/meny-forteckning

Det finns ingen hård motsättning mellan att använda menyer och att använda förteckningar. Tvärtom ser man ofta menyer sida vid sida med löpsedlar (som är en slags förteckningar), och det är inte ovanligt att man navigerar sig fram till rätt plats med menyn men att man sedan går via en förteckning för att komma till de enskilda sidorna. Detta eftersom sidornas ibland långa rubriker är svåra att hantera i en meny men inte ställer till med problem i en förteckning.

Det finns dock anledning att vara uppmärksam på hur övergången från meny till förteckning fungerar. Om inte övergången från ena formen till den andra är väl genomtänkt uppstår risk för förvirring.

• Skall
• www.anvandbart.se/ab/tillganglig-valboxmeny

Ett dilemma med valboxmenyn är att den för de flesta användare fungerar smidigast om den med hjälp av javascript reagerar direkt när hon valt en etikett och släpper musknappen. Detta gör den emellertid nästan helt omöjlig att använda för funktionshindrade användare. Anledningen är att när man börjar stega nedåt i valboxen med piltangenten, kommer javascriptet att hugga direkt och välja det första alternativet i listan, innan man haft en chans att bläddra vidare. (Det finns ett sätt att komma runt detta i Windows, men få användare känner till hur man gör.)

Använd därför inte javascript i detta fall, utan sätt ut en skicka-knapp bredvid menyn. Använd inte javascript som förutsätter att användaren har mus, sid 429.

Se även WCAG 6.4 (prioritet 2), sid 358, och 9.3 (prioritet 2), sid 362.

• Bör
• www.anvandbart.se/ab/rullfunktion

Det finns starka konventioner för hur en rullgardinsmeny skall fungera, inhamrade genom att användaren ständigt möter dem i alla program hon använder. Om dina rullgardinsmenyer fungerar på ett annat sätt går de på tvärs mot användarens vanor och blir ett irritationsmoment.

• Blanda inte rullgardinsmenyns och den vanliga menyns sätt att fungera.

En rullgardinsmeny får inte innehålla länkar som går direkt till en sida. Alla länkar i en rullgardinsmeny måste fälla ut en meny. Om de inte gör det finns det inget sätt för användaren att förutse resultatet av sitt klick, och fram till dess sidan växlar svävar hon i ovisshet om hennes klick lyckades eller ej.

Att ha små pilar eller andra indikatorer för att skilja dem som är vanliga länkar från dem som rullar ut en undermeny hjälper inte; det är för diskreta tecken för att ta sig in i användarens medvetande och minska hennes osäkerhet.

• Ovanstående gäller för första nivån. I de menyer som faller ut kan däremot menylänkar som ger resultat direkt blandas med sådana som fäller ut undermenyer (på samma sätt som denna blandning är vanlig i datormenyer).

Bild 37. På Trelleborgs webbplats finns denna rullgardinsmeny. (Skärmdumpen är manipulerad för att menyn skall synas tydligare.) Œ Första nivån (som också fungerar som global meny). Från denna faller en meny ut. Ž Menyn kan i sin tur ha undermenyer som denna. (www.trelleborg.com)

Funktion

Det finns också starka konventioner för hur en rullgardinsmeny fungerar.

• Man måste klicka på en länk för att menyn under den skall falla ner. Menyn skall inte falla ner bara för att musen passerar över den (detta är viktigt inte bara av konventionsskäl utan också för att webbmenyer brukar vara placerade en bit in på sidan, till exempel under logotypen, och det där är lätt att råka passera över dem).

• Menyn förblir utfälld till dess man gör något av följande:

• Klickar på en länk i menyn och därmed antingen går till en sida eller fäller ut en annan meny.
• Klickar någonstans på sidan.
• Trycker en tangent på tangentbordet.

• Om det finns undermenyer markeras dessa med en pil i högerkanten av menyn.

• När pekaren förs över en menylänk med pil faller undermenyn ut när pekaren befunnit sig över länken i en halv sekund. Den förblir utfälld så länge pekaren är över länken, och förblir sedan utfälld en halv sekund efter att pekaren lämnat det. (Tanken med detta är att man skall kunna gå rakt till en länk på undermenyn, inte behöva anstränga handen genom att tvingas gå i räta vinklar.)

• När man letat upp rätt menylänk, väljer man den genom att klicka. (Länkar med undermenyer skall inte reagera när man klickar på dem.)

Bild 38. Valboxmenyn liknar på många sätt rullgardinsmenyn, men byggs med annan teknik och brukar inte vara fler än en. En vanlig användning är den som syns här, för att ge användaren genvägar till populära delar av webbplatsen. (www.tele2.se)

• Undermenyerna kan i sin tur ha undermenyer. Dessa beter sig på samma sätt. (Men var medveten om att en webbplats med flera nivåer av undermenyer ofta upplevs som svårnavigerad.)

• Delar av menyn får inte försvinna in under webbläsarfönstrets kant och därigenom bli oåtkomliga.

• Länkarna i en meny kan grupperas med hjälp av horisontella linjer.

Återkoppling

Rullgardinsmenyn ger feedback på följande sätt:

• När man pekar på någon av de menylänkar som har en undermeny skall det markeras på något sätt. Här finns ingen stark konvention eftersom olika program fungerar på olika sätt, men till exempel genom att en mörkblå färgplatta visas bakom länken och dess text blir vit, eller genom att skuggor läggs runt länken så att den liknar en knapp. Den grafiska profilen bör fastslå vilken variant ni använder.

Använd inte samma markering som när man för pekaren över en vanlig länk.

• När en menylänk på första nivån klickats på och dess undermeny faller ut, kan (men behöver inte) dess markering ändras.

• Menylänkar med pil reagerar genom att fälla ut sin undermeny och bli markerad.

• Klickbara menylänkar reagerar på pekaren på samma sätt som andra länkar, till exempel genom att bli röda och understrukna (se Länken bör reagera när pekaren förs över den, sid 118).

Det måste finnas sätt för den som inte kan använda mus att ändå navigera på webbplatsen. Helst genom att menyn går att styra med piltangenterna, eller i nödfall genom att samma länkar finns tillgängliga på annat sätt. Detta är ett tillgänglighetskrav, se WCAG 9.3 (prioritet 2), sid 362.

Tyvärr gör webbläsartekniken att det inte är möjligt att ge menylänkarna kortkommandon (utan att samtidigt riskera blockera samma kommandon för webbläsaren, vilket skulle vara till­gäng­lig­hets­mäs­sigt dumt). Se Kort­komman­don , sid 231.

• Skall
• www.anvandbart.se/ab/flik-bevara

När flikar används för att navigera i flersidiga formulär och webbapplikationer finns det en sak som måste fungera: om man matar in något under en flik och sedan byter flik får inte det man matat in gå förlorat. Detta är en konvention som användarna lärt av de vanliga datorprogrammen och att bryta mot den väcker stor frustration.

Det finns flera olika sätt att klara detta.

Ett är att ge varje flik ett skyddsnät. Se sid 279.

Ett annat att använda lager för de olika flikarna, så att det som för användaren ser ut som olika sidor i själva verket på ett tekniskt plan är en.

Att använda javascript för att låta flikbyte automatiskt OK:a formuläret är däremot sällan att rekommendera. Sådan automatisk klurighet gör det svårt för användaren att förstå hur formuläret fungerar och om hon skickat sin inmatning eller ej.

Ytterligare en konvention är att de olika flikarna skall ha en gemensamma OK- och avbryt-knappar. Denna är dock inte alls lika viktig som den föregående.