Joel on Software Joel om mjukvara

Användargränssnitt för programmerare
Kapitel1
Kapitel2
Kapitel3
Kapitel4
Kapitel5
Kapitel6
Kapitel7
Kapitel8
Kapitel9

Andra "Joel on Software"-artiklar på svenska

Andra "Joel on Software"-artiklar på engelska

Skicka e-post till författaren (enbart engelska)

Det är inte lätt att ta fram ett användargränssnitt som matchar användarnas mentala modell av programmet med programmets faktiska modell. Det är inte säkert att användarna ens har en bestämd uppfattning om hur programmet fungerar eller vad det kan förväntas göra. I sådana situationer måste du hitta sätt att ge ledtrådar till hur programmet fungerar.

I ett grafiskt gränssnitt löser man oftast detta med metaforer, men alla metaforer är inte lika bra och det är viktigt att veta varför de fungerar så att du känner igen en bra metafor när du ser den.

Den mest kända metaforen är Skrivbordet, som används både i Windows och i MacOS. Det finns små mappar med små filer i, som du kan flytta omkring. Att den fungerar beror till stor del på att de små bilderna av mappar faktiskt ser ut som mappar, vilket gör att användarna förstår att de kan lägga filer i dem.

Det här är en skärmdump från Kai's Photo Soap. Kan du gissa hur man gör för att zooma in i bilden?

Det är inte särskilt svårt. Förstoringsglaset är en metafor från den verkliga världen, och vad sådana gör vet de flesta. Det är heller ingen risk att zoomningen ändrar storlek på bilden, för det är inte det som förstoringsglas gör.

En metafor, även en ungefärlig sådan, fungerar mycket bättre än att inte ha någon alls. Kan du lista ut hur man zoomar i Microsoft Word?

Det finns två små förstoringsglas i det här gränssnittet, men ett av dem siter på "Förhandsgranska utskrift"-knappen (av någon anledning) och den andra på "Dokumentöversikt" - vad det nu är. Zoomar gör man med den lilla menyn till höger där det just nu står "100%". Här finns det ingen som helst metafor att luta sig mot, och därför är det svårare för användarna att gissa hur man gör. Det behäver inte vara ett problem, gissningsvis är det inte så viktigt att kunna zooma i ett ordbehandlingsprogram att det motiverar samma skärmutrymme som Kai använder. Men det är rätt säkert att fler Photo Soap-användare än Word-användare kommer att kunna zooma i ett dokument.

Värst av allt är dock en dålig metafor. Någon som minns "Portföljen" från Windows 95? Denna vackra lilla ikon tog upp ett par kvadratcentimeter på allas skärmar i ett par år innan Microsoft insåg att ingen ville ha den. Och det var ingen som ville ha den därför att det var en direkt felaktig metafor. Tanken var att det skulle vara en portfölj där man lade filer man ville ta med sig hem. Men när du väl skulle ta hem filerna måste du fortfarande lägga dem på en diskett.

Skulle man lägga filerna i portföljen eller på disketten? Jag vet inte. Jag begrep mig aldrig på portföljen, kunde aldrig få den att fungera.

Affordance

Väl formgivna föremål räcker det med att titta på för att förstå hur de fungerar. Ta till exempel en dörr med en stor metallplatta på, i lagom armhöjd. Det är inte mycket du kan göra med en platta annat än att trycka på den. Med Donald Normans ord kallas det affordance, plattan inbjuder dig att trycka till för att öppna dörren. Andra dörrar har stora runda handtag som inbjuder till dragande - affordance igen.

Sedan finns det föremål som inte är lika lättolkade. Det typiska exemplet är plastfodralet som en CD ligger i, som bara kan öppnas genom att man placerar tummarna exakt rätt och trycker till i rätt riktning. Om du inte känner till knepet får du helt enkelt inte upp den.

Bästa sättet att åstadkomma affordance är att efterlikna en hand, eller snarare ett handavtryck. Titta gärna närmare på den (utmärkta) digitalkameran Kodak DC-290 här nedanför:

Handtaget på framsidan ser precis ut som om det var gjort för fingrarna på högerhanden. Och det blir ännu bättre: på baksidan, nere i vänsta hörnet, finns en liten grop som är misstänkt lik ett tumavtryck. Sätt vänstertummen där och pekfingret glider automatiskt in under linsen på framsidan, där det får stöd av ytterligare ett gummigrepp.

Kodaks ingenjörer försöker få dig att hålla i kameran med bägge händerna, i ett läge så att kameran blir så stabil som möjligt. I förbifarten ser de till att att inga spretande fingrar lägger sig över linsen. Inget av dessa gummigrepp har något med kamerans egentliga funktion att göra, de finns bara där för att göra det lättare att hålla kameran på rätt sätt.

Bra datorgränssnitt drar också nytta av affordance. För ungefär tio år sedan började man rita knappar på skärmen i "3D". Med hjälp av gråa skuggor fick man dem att stå ut från skärmen. Det gjorde man inte för att det skulle se vackert ut utan för att tredimensionella knappar inbjuder till att tryckas på. Tyvärr tycks många webbsidor numera vara gjorda utan känsla för hur viktigt det är med affordance. De använder hellre coola knappar än tryckbara; enda effekten är att man får leta runt för att hitta någonstans att klicka. Som i den här bannerannonsen:

"Go"- och "Log On"-knapparna står ut och ser verkligen ut som om det går att klicka på dem. Knapparna "Site map" och "Help" däremot ser precis ut som "Quotes"-etiketten som inte är klickbar.

Det är fyra år sedan nu som de flesta fönster började stoltsera med tre små upphöjningar i nedre högra hörnet. De ser verkligen ut som ett tumgrepp, som något man skulle sätta på något som ska dras för att öka friktionen. De ber praktiskt taget att få bli dragna i, för att göra fönstret större.

Till slut då, ett av de bästa exemplen på affordance: dialogrutan med flikar ("tabbed dialog"). Så här såg Inställningar-dialogen ut i en gammal Macintosh:

Den byggde på att du valde en av ikonerna från rullistan till vänster. När du klickade på den ändrades högra delen av dialogrutan. Av någon anledning var denna indirekta adressering helt logisk för programmerarna som konstruerade den, men många användare begrep den inte. Bland annat missade de att det gick att rulla listan för att hitta fler möjligheter än de fyra översta. Vad värre var så var det många som över huvud taget inte förstod sambandet mellan ikonerna och resten av dialogrutan - ikonerna ser faktiskt ut som om de bara var ytterligare en inställning.

Runt 1992 försvann den typen av dialogrutor, för att ersättas av en uppfinning som kallades flikar:

Flikar har hög affordance, det är glasklart från den här bilden att du har sex flikar att välja på; det är lika klart vilken flik som är aktiv och hur du byter till en annan flik. När Microsoft började göra användbarhetstester på flikarna sköt siffran upp från 30 procent (den gamla Mac-modellen) till 100 procent. Bokstavligt talat varenda testperson lyckades lista ut hur flikarna fungerade.

Med tanke på hur framgångsrika dialogrutor med flikar har varit, och att koden för att göra dem ingår i Windows, är det konstigt att det fortfarande finns program som inte använder dem. Sådana program lider av faktiska, mätbara användbarhetsproblem bara för att de vägrar att anpassa sig till den nya tiden.