Användbarhet

Enkelhet är bra.

Bra webbplatser låter dig gissa adressen

Ibland vill jag få tag i information om ett program, exempelvis Photoshop. Jag vet vilket företag som har gjort programmet och brukar därför bara skriva in företagets domän plus programmets namn i webbläsarens adressfält och trycka enter.

Skriver jag in adobe.com/photoshop skickas jag vidare till http://www.adobe.com/products/photoshop/main.html. Adobe klarar också felstavningar:

Det är helt suveränt! Det är enkelt, tillgängligt och underlättar för mig som besökare. Likadant är det med alla deras program (testa själv med InDesign, Premiere eller Acrobat).

Det går betydligt snabbare att gissa adressen än att leta upp den bland bokmärken eller att söka efter den hos Google (även om det också går ganska snabbt).

Därför är det bra om du:

  • Har ett enkelt domännamn. Om det är lätt att skriva så är det lätt att komma åt (vilket innebär att du säljer mer).
  • Låter besökaren komma åt produkter genom att gissa. Det är väldigt vanligt (i alla fall för mig) att försöka med företagsnamn.se/produktnamn.
  • Tar hänsyn till stavfel. Jag skriver själv både mycket och ofta men även jag gör fel emellanåt (även om det var många år sedan sist ;)).

Användbarhetsexperten Jakob Nielsen ger också några tips om enkla adresser som underlättar för besökaren.

Så utformar du dina länkar

Att länka verkar vara svårt. Därför kommer här en lathund.

  • En viktig sak är att när du klickar på en länk så ska den byta färg. Då vet man var man har varit.
  • Länka bara viktiga ord. Börja alltid med att länka ett viktigt ord. En länk tappar hela sin betydelse om du länkar en lång mening. Länka inte allt: Se en lista med böcker om användbarhet. Länka i stället bara de viktiga orden: Se en lista med böcker om användbarhet.
  • Skriv inte ”klicka här” eller ”läs mer”. Skriv inte: För att ladda ned rapporten om användbarhet, klicka här. Skriv hellre: Ladda gärna ned rapporten om användbarhet. Vi klickar på det vi vill veta mer om, och ingen vill veta mer om ”klicka här”. Tänk också på att skärmläsare (för blinda) kommer att läsa upp alla länkar: ”Det finns tre länkar på den här sidan: klicka här, klicka här och klicka här. Vilken väljer du?”.
  • Länka bara till webbsidor. Alltså html-sidor. Om du länkar till något annat (ett videoklipp, pdf-fil eller zip-fil) så måste du säga det! Skriv exempelvis Ladda ned rapporten (PDF-fil på 45 kB). En ikon som illustrerar filtypen ger ännu bättre effekt. Det finns inget värre än när det händer oväntade saker.
  • Använd attributet title för att beskriva länken. Men skriv något som vi inte redan vet! Allt för ofta ser man beskrivningar som säger samma sak: <a href="filmer.html" title="Lista över mina filmer">Lista över mina filmer</a>. Det fyller ingen som helst funktion. Skriv hellre något nytt: <a href="filmer.html" title="83 st dvd-filmer">Lista över mina filmer</a>. Och du, skriv inte adressen i beskrivningen. Den ser vi ju i statusfältet när vi håller muspekaren över länken.

Interakt lär ut användbarhet men klarar inte själv testet

Jag skickade in min webbplats som ett tips på en resurs till interakt.nu. Som svar ville de även ha en länk tillbaka, så då passar jag på att göra ett annorlunda länkbyte. 😉 Lite webbplatskritik helt enkelt.

När en besökare kommer till en ny webbplats finns det en fråga som ska besvaras så fort som möjligt. Den är:

Vad kan jag göra här?

Det är därför jag har skrivit ”Konsten att bygga webbplatser som är enkla och användbara” i sidhuvudet på alla sidor. Den som hamnar här ska veta direkt att det handlar om att bygga webbplatser. Det går inte att köpa rosa elefanter här.

Titta här på interakts hemsida:

Interakts hemsida

Interakt.nu säger sig handla om användbarhet, informationsarkitektur och interaktionsdesign. Men det framgår inte någonstans på sidan. Hur användbart är det?

Det här tycker jag om interakt:

  • Vad handlar det om? Ingenstans står det vad Interakt är för något, bortsett från i fönstertiteln. Jag måste klicka på ”Om Interakt” i menyn för att få reda på det. Jag hade gärna sett en liten beskrivning under loggan. Det kan stå ”Artiklar om hur du skapar interaktiva produkter”.
  • Vad kan jag göra på Interakt? På förstasidan presenteras nyheter. Tror jag. Men när jag klickar på en nyhet så markeras ”Artiklar” i menyn. Alltså är det artiklar som visas på förstasidan. Varför skrev de inte det från början?
  • Fönstertiteln rapar upp nyckelord. Sökmotorer kanske gillar att höra ”INTERAKT.NU – användbarhet, informationsarkitektur, interaktionsdesign” men inte jag. Det ger mig visserligen lite tips om vilket ämne webbplatsen tar upp, men inte vad det är för slags webbplats (finns här artiklar eller är Interakt ett konsultföretag?). Jag föredrar ”Interakt.nu – artiklar om användbarhet, informationsarkitektur och interaktionsdesign”. Samtidigt skippar jag versalerna som ändå inte fyller någon funktion.
  • Ologisk meny. I toppen har vi huvudmenyn med alternativ som ”Forum”, ”Artiklar”, ”Resurser” och så vidare. I vänstra kolumnen har vi bland annat ”Skriv en artikel” och ”Tipsa om resurs”. I stället för att ta upp värdefullt utrymme på förstasidan hade dessa två länkar kunnat placerats in under respektive kategori. ”Skriv en artikel” skulle alltså ligga under ”Artiklar” och ”Tipsa om resurs” under ”Resurser”. Dessutom är ”Prenumerera” inget upphetsande alternativ. Liknande menyalternativ i en nätbutik hade varit ”Köp”. Det är bättre att skriva vad man ska prenumerera på. Skriv ”Nyhetsbrev” i stället. Vi fattar att man prenumererar på nyhetsbrev.
  • Tråkiga artiklar. På hemsidan möts vi av fyra artiklar, där en av dem heter ”Återupprätta arkitekten”. Jaha? Låter det intressant och får dig att känna ”det här måste jag läsa”? Nej, inte jag heller. Lite mer fokuserade artiklar kanske hade varit på sin plats. Trots att jag är väldigt intresserad av ämnet så känner jag snarare avsky. Ni som behärskar användbarhet skriver inte ens användbara rubriker! Baaaah!

Ska vi ta och titta på tekniken också? Ja, då gör vi det:

  • För liten text. Varför ska alla webbplatser envisas om att köra 10 pixlar som textstorlek? Det är dåligt av två anledningar. För det första kan jag inte förstora texten i webbläsaren Internet Explorer och för det andra så är text till för att läsas. Därför ska text synas bra redan från början.
  • Menyn är av bilder. Menyn i toppen syns knappt, ligger för högt upp och försvinner liksom nästan. Dessutom är den gjord av bilder, men innehåller text. Vad är logiken i det? Det är ingen tidning ni ska försöka trycka, så släpp taget om designen och låt det se lite fulare ut till fördel för tillgängligheten.
  • Väldigt bra alt-texter. Visst är jag negativ i mångt och mycket men Interakts alternativtexter på bilder är suveräna. I menyn (som egentligen ska bestå av ren text) så uppenbarar sig följande text i menyalternativet ”Artiklar”: ”Artiklar kring bl a användbarhet och användingsnytta”. Det fungerar bättre att surfa på Interakt.nu utan bilder, än med. Det är lättare att hitta rätt tycker jag. Vad fyller då bilderna för funktion?

Discshop vet hur en kundvagn ska se ut

Som alla fanatiker av webben har jag en favorit. Min heter Discshop och säljer dvd-filmer. Det är en nästan helt perfekt nätbutik i alla avseenden.

Dessutom är den en av få svenska butiker som verkligen har gjort en användbar kundvagn. Det finns inga som helst fel där.

Så här ser kundvagnen ut tom respektive med några filmer i:
Tom kundvagn
Kundvagn med tre filmer i

Varför tycker jag egentligen att Discshops kundvagn är så bra? Jo, därför att:

  1. Visar tydligt när det inte finns några filmer i den.
  2. Ligger väl synlig och högt upp på sidan (den så kallade ”ettan” i tidningstermer).
  3. Filmerna ligger inte i en drop-down-meny. Jag kan därför lätt överblicka vilka filmer som finns där, utan att klicka. Dessutom ser jag vad varje film kostar, och om priset blir för högt kan jag enkelt sortera bort de filmer som är för dyra.
  4. Den totala summan visas inklusive frakt. Jag får inga överraskningar om hur mycket det kommer att kosta.
  5. Jag kan utan problem ta bort en film genom att klicka på det röda krysset.
  6. Samtidigt kan jag läsa beskrivningen av filmen genom att klicka på titeln.
  7. När jag lägger en film i kundvagnen så hamnar jag på samma sida som jag var på, med ett litet diskret meddelande om att ”Filmen lades till i din kundvagn!”. Jag har alltså kontroll över sidorna.

Drop-down-menyer har återigen visat sig värdelösa för kundvagnar och det är konstigt att de fortfarande används i vissa nätbutiker. För att ta bort en film måste man gå till en separat sida där (oftast) antalet filmer fylls i. För att ta bort en film fyller man i ”0” och uppdaterar listan. Inte speciellt logiskt.

Det hade varit mycket bättre med en knapp där det stod ”Ta bort denna film”. Vill jag köpa flera filmer av samma titel så är det mer logiskt att jag klickar på ”köp” två gånger, än att gå in i kundvagnen och uppdaterar antalet.

Använd inte drop-down-menyer för navigering

Det finns webbplatser som lägger menyn i en drop-down. Det tar upp samma antal pixlar på skärmen, oavsett hur många alternativ det finns i den. Men det ställer också till nya problem.

Titta här på företaget DirektDesigns webbplats:
Meny som drop-down

Drop-down-menyer är särskilt värdelösa eftersom:

  1. De går inte att överblicka. Varje gång man vill överblicka får man klicka på den och skrolla.
  2. De ger ett extra klick. Först måste du klicka på den för att se vad den innehåller. Sedan måste du klicka på det alternativ du väljer. För personer med nedsatt motorik kan det vara ett problem med tillgängligheten.
  3. Kräver javascript. En vanlig länk (<a href="sida.html">Länktext</a>) fungerar i alla typer av miljöer, även de allra äldsta. Javascript är bara ett hinder och sökmotorer hittar inte länkarna.
  4. Går inte att förstora texten. Trots att webbläsare blir allt smartare finns det en del webbläsare som inte kan förstora texten i dessa menyer. Därmed har vi ytterligare ett problem med tillgängligheten.

Om jag hade fått bestämma så hade menyn gjorts om till vanliga länkar.
Meny som länkar
Det kan alla förstå, kräver inte javascript och går snabbt att överblicka. Dessutom är det inga tvivel att dessa länkar går att klicka på.

Flytande eller fast design?

Det är ett dilemma med texten. Ska den vara 600 pixlar bred (fast), eller ska den anpassas efter skärmstorleken, det vill säga 100 procent bred (flytande)?

Fördelen med fast design är att den som gjort sidan kan styra designen precis som han eller hon vill, ungefär som en tidningssida. Fördelen med flytande design är att besökaren kan styra utseendet precis som han eller hon vill.

Men vilket är egentligen bäst?

Kort svar: Det har jag ingen aning om.

Det jag däremot vet är att:

1. Man bör utnyttja Internet, och datorns, styrka.
Därför: flytande design bör användas och låta användaren bestämma över texten.

2. Man har i regel svårt att läsa text som sträcker sig från skärmkant till skärmkant.
Därför: fast design bör användas och låta texten endast vara en viss bredd.

Men hur ska man egenltigen kombinera dessa metoder? Kan man inte få det bästa ur två världar? Det skulle givetvis gå att sätta texten i fast bredd och allt runtomkring flytande, men det kan se konstigt ut, kanske till och med horribelt.

En annan lösning är att alltid använda flytande design. Då kan besökaren själv styra hur sidan ska se ut genom att anpassa webbläsarfönstret. Texten kan också radbrytas precis där man själv vill och den fungerar på samtliga plattformar. Vare sig det är en bildskärm på 12 eller 25 tum, handdator eller projicerad på en jättelik kupol. Det blir fullt möjligt först om flytande layout används. Mitt råd är att alltid använda flytande design om du inte har goda orsaker till att använda fast design.

Jag har dock ingen universallösning på problemet. Har du?

Använd inte ordvitsar, det är inte roligt

Josef på webForum hade en kommentar om menyn här:

Dock tycker jag att ”Användarvänliga böcker” är en otroligt otydlig titel. Borde det inte vara bättre med ”Böcker om användarvänlighet”?

Visst är det så. ”Användarvänliga böcker” är en ordvits från min sida som inte fungerar. Jag har en lista med böcker om användarvänlighet, då ska det stå så också. Inget annat.

Tack för bättringsförslaget Josef. (Detta är ytterligare ett tecken på att man blir blind för sina egna misstag och därför är användbarhetstester ett måste.)

Skriv gärna otydligt och dölj viktiga funktioner

Det måste ha varit ett mål när Smålandsposten byggde sin webbplats.

Vill du ladda ned en fil? Självklart vill du det. Det lockar Smålandsposten nämligen med. Titta själv:
Skärmdump av smp.se - konstigt ordval
En mer lämplig rubrik hade varit ”Videoklipp från festivalen”. Men de ska ha plus i kanten för att de tydligt illustrerar att länkarna går till ett videoklipp av något slag. Det görs både med hjälp av en ikon och texten ”webb-tv”.

Att kunna hitta rätt är viktigt. Det kan sökmotorn Google hoppa upp och sätta sig på. Men det tycker inte Smålandsposten och har därför valt att placera sökfunktionen väl dold i sin meny:
Skärmdump av smp.se - dold sökfunktion
Det är roligt att de kategoriserat sökfunktionen som en tjänst. Det säger tydligt att de utformat funktionen efter deras eget sätt att se på saken, och inte besökaren. En besökare vill ”bara kunna söka”.

Sökfunktioner ska placeras högt upp, ha en bred ruta (just det, en ruta som man kan skriva direkt i, och ingen länk) så att man kan skriva in minst tre medellånga ord. En tumregel: se till att du får plats med ”Får jag plats med detta?” i sökrutan. Därefter ska knapparna döpas till vad som händer när man klickar på den. Skriv ”Sök” och inget annat.

Besökta länkar ska byta färg

När du klickar på en länk ska den byta färg. Då vet besökaren att han eller hon redan varit där.

Då undviker du att besökaren:

  • Råkar besöka samma sida upprepade gånger (man länkar ju inte alltid samma ord eller fraser).
  • Tappar bort sig eftersom förståelsen för varje länks mening ökar.
  • Tar fel på de länkar som redan har besökts, eftersom skillnaden är för liten.
  • Ger upp eftersom besökaren inte får kontrollen och kan navigera som han eller hon själv vill.

Utforma dina länkar så här:

  • Gör länkar understrukna och färgade. Visa aldrig färgad eller understruken text om det inte är en länk.
  • Använd en annan färg för besökta länkar.
  • Placera inte länkar för nära varandra. Då kan det bli svårt att överblicka, och personer med sämre motorik kan ha svårt att klicka på dem.
  • Använd inte liten text. Text är till för att läsas och monitorer är inte bra att läsa ifrån.

Källa: Change the Color of Visited Links och Design Guidelines for Visualizing Links