Det mänskliga systemet - Användbarhet i praktiken

Denna sida är skrivskyddad. Du kan titta på källkoden, men inte ändra den. Kontakta administratören om du anser att du bör kunna ändra sidan.
====== Appendix A: Introduktion till det mänskliga systemet ======


Kunskaper om hur det mänskliga systemet fungerar är en nödvändig grund för att genomföra expertutvärdering och interaktionsdesign. Du behöver dessa kunskaper för att fatta och motivera bra designbeslut, samt för att formulera nya lösningsförslag.

Symbolen _______ används i detta appendix för att markera tumregler. De beskriver hur kunskap om det mänskliga systemets inbyggda funktioner bör påverka utformningen av användargränssnitt i interaktiva produkter.
Det som presenteras här är baskunskaper om hur människans syn, minne och tanke fungerar och riktlinjer för hur detta bör påverka datorns gränssnitt. För att utforma lösningar med hög användbarhet behövs kunskaper utöver det som presenteras i denna bok. Tips på vidare läsning finner du i kapitel 8.1.
===== Syn =====

Att vi kan se beror på att ögat tar emot ett flöde av impulser. Dessa impulser byggs av hjärnan upp till en tredimensionell bild. Att se eller varsebli något betyder oftast att vi stannat inför en möjlighet att tolka informationen från näthinnan. Att se med ögonen är alltså resultatet av en komplex bearbetning i hjärnan, delvis styrd av erfarenhet och intresse.
Förutsättningen för att vi ska kunna se är att en viss mängd ljus belyser föremålet, eller att föremålet utstrålar ljus.

**Allt registreras**

Vår syn registrerar information automatiskt och mycket snabbt. Vår syn tar in all information på en bild och hjärnan rensar sedan bort sådant som bedöms som onödigt. Denna process kostar självfallet både tid och kraft.

Ta bort onödiga upprepningar, onödig information och element som ej tillför någon information. Ju färre element jag i onödan måste tolka och bedöma, desto bättre.

Utforma ikoner så att de byggs upp av få och väsentliga detaljer. Syftet med ikoner är att skapa omedelbar igenkänning. De detaljer som är informationsbärande ska behållas och förstärkas, medan de detaljer som inte är informationsbärande kan (och i många fall bör) tas bort.

**Ögat söker mönster**

När vi tittar på en bild sveper ögat på ett oregelbundet sätt över bilden och försöker avgöra vad som är väsentligt. Ögat förflyttar sig i medeltal fyra till fem gånger per sekund. Vi försöker snabbt, utan att vi kan styra det, finna vad som är form, vad som är bakgrund och vad som är brus.

Figur  A.1 Ditt öga sveper över bilden och stannar vid informationstäta delar, samtidigt som hjärnan letar efter mönster som du känner igen. Vad föreställer bilden?

{{:bok:img:figur_a_1.png?400|Figur A.1}}

**Gruppering**

Saker som är placerade nära varandra uppfattas som en grupp, även om de är olika. Om du frågar någon vad bilden här nedanför innehåller svarar denna med stor sannolikhet ”tre grupper med ringar och fyrkanter”. Närhet skapar grupper.

Figur A.2 Objekt som är nära uppfattas som en grupp.

{{:bok:img:figur_a_2.png|Figur A.2}}

Om vi inte kan uppfatta naturliga grupper med tomrum mellan, så särskiljer människan objekten genom deras form. Om du frågar någon vad bilden nedan innehåller så säger hon med hög sannolikhet ”Ringar och fyrkanter”. Likhet skapar grupper.

Figur  A.3    Objekt som är lika i form uppfattas som en grupp.

Även om saker ordnas i grupper med visst avstånd mellan så finns det sätt att påvisa olika objekts samhörighet genom exempelvis fyllnad. Om du frågar någon vad bilden nedan innehåller blir svaret sannolikt ”Tre grupper med ringar och fyrkanter, två är fyllda”.

Figur  A.4    Fyllnad kan användas för att gruppera olika objekt som är åtskilda.
'
Gruppering är en mycket kraftfull teknik när det gäller att skapa samhörighet mellan fält. Fält som placeras nära tolkas av människan som logiskt eller funktionellt relaterade. Om detta görs på ett genomtänkt sätt minskas den ansträngning som behövs för att tolka bilden. I exemplet nedan visas två designförslag; ett ogrupperat och ett grupperat.

Figur  A.5    Hjälp människan att tolka bilden genom att presentera grupper med relaterad information och relaterade funktioner.

Skapa grupper genom att använda mellanrum. Om det är platsbrist så kan ramar användas. Dock är detta ofta en dålig idé då ramar är extra information på skärmen, vilken användaren automatiskt registrerar och selekterar bort.

Gruppera saker som hör ihop. Skapa grupper med de fält, knappar, text etc. som hör ihop betydelsemässigt. Placera fält som innehåller liknande information nära varandra. Placera knappar som utför liknande funktioner nära varann.

Om färgkodning används: var konsekvent, använd samma färg till samma sak på alla ställen.

**Läsning på skärm**

Avsökning och läsning underlättas om vi underlättar för ögat att finna linjer som ögat kan följa.

Placera inmatnings- och upplysningsfält i rak vänsterkant.

Ögat registrerar även små skillnader i avstånd. Använd samma avstånd mellan samma typer av objekt och samma avstånd för att skapa grupper. Använd alltså inte olika avstånd mellan knappar i samma grupp.

Vid läsning söker ögat ordbilder. Dessa skapas bäst genom att både versaler (stora bokstäver) och gemener (små bokstäver) används. Läsning på papper underlättas av så kallade seriffer (små linjer som förstärker bokstavens form, exempelvis den lilla foten längst ned på detta ”r”). På grund av att bokstäver på skärmen byggs upp av relativt få punkter är det dock bra att använda typsnitt utan seriffer (så kallad sans seriff) på skärm.      

Figur  A.6    Det är tämligen svårt att läsa raden, eftersom vissa bokstäver är förvillande lika andra som exempelvis h och n.

Figur  A.7    Det är då betydligt lättare att läsa den övre halvan av texten. Orsaken är att där finns den typ av information som vi använder oss av då vi skapar ordbilder.

Figur  A.8    Text som innehåller endast versaler är svårare att läsa än text där både versaler och gemener används, helt enkelt därför att versaler är lika stora/höga och skapar ingen ordbild.

Använd både versaler och gemener.

Läsning på skärm är annorlunda än läsning på papper. Det går normalt 20–30% långsammare att läsa text på skärm än på papper. Vi läser inte heller på samma sätt, utan skumläser först för att skapa oss en uppfattning om innehållet och vad som kan vara relevant. Det finns en hög risk att sådant som bedömts som oväsentligt vid första skumläsningen inte beaktas senare.

Utforma text för skumläsning. Skapa tydliga och korta avsnitt, placera ord som ger rätt associationer i styckerubrikerna och undvik långa meningar med bisatser. Skumläsning underlättas om sidan har hög informationstäthet.

Utforma länkar för skumläsning. Gör det tydligt vad som är länkar. Använd ord som ger rätt associationer i länken. Ge fler ord, eller en hel mening som beskriver länken. Använd redundanta länkar (flera länkar som leder till samma innehåll).

<blockquote>
**Exempel**

”Kapitel 1 hittar du här” är en betydligt bättre länk än  ”Klicka här för att komma till första kapitlet”.

Använd stor typsnittsstorlek. Undvik kursiv text.
</blockquote>

**Signaleffekt**

Ljud, rörelse, storlek, form och färg har stark signaleffekt. Blicken dras till det som rör sig, det största elementet och färglagda texter och bilder. Det är mycket svårt att läsa text på en sida om det finns rörliga element.

Använd ljud, rörelse och grafik främst till att förstärka budskapet. Grafiska element kan också med fördel användas för att organisera text och länkar.

Färg har mycket stark signaleffekt och bör därför användas med försiktighet. Undvik starka färger och kombinationer av blå-röd, grön-röd, blått på svart, blått på grönt, gult på vitt eller vice versa.

Animationer kan med fördel användas för att förklara en process, men gör det då möjligt för användaren att starta och stoppa animeringen.

===== Minne =====

Det finns mycket kunskap om hur människan minns, det som beskrivs här är schematiskt och övergripande. Mänskligt tänkande kan beskrivas som mer eller mindre medvetna processer i minnet.

Figur  A.9    Man brukar tala om tre typer av minnen; sensoriskt register, korttidsminne och långtidsminne. Innan du får en medveten upplevelse i korttidsminnet ställs de mot förkunskaper i långtidsminnet.

Man brukar tala om tre olika typer av minnen;
  * Sensoriskt register som tar emot information från våra sinnen (syn, hörsel, känsel, lukt och smak).
  * Korttidsminnet som tar emot utvalda sinnesförnimmelser och som kan liknas vid det vi kallar ”medvetandet”.
  * Långtidsminnet som lagrar viss utvald information och som i efterhand kan återkalla och vidarebearbeta intryck. Annan information sållas bort.

Sensoriska registret fångar exakt vad som hänt utan att tolka det. Informationen upplöses här på mindre än en sekund.
I nästa steg registreras informationen i förhållande till förkunskaper som finns i långtidsminnet och når sedan korttidsminnet. Först då får jag en medveten upplevelse.

**Korttidsminnet**

Korttidsminnet kan inte hantera hur stora informationsmängder som helst, det är starkt begränsat. Korttidsminnet kan endast hantera ett mindre antal informationsenheter, eller ”klumpar” av information samtidigt. Som tur är så är en ”klump” ingen fast enhet.  

Figur  A.10    Memorera raden i 10 sekunder. Täck över den och skriv ned innehållet på ett papper. Kontrollera sedan hur många rätt du har.

Figur  A.11    Gör på samma sätt här.

Båda raderna innehåller 10 bokstäver, trots det uplever de flesta i vår västerländska kultur att den nedre är mycket enklare att minnas än den övre. Anledningen är at den övre saknar mening – du måste komma ihåg 10 bokstäver – och den nedre raden består av tre ord med betydelse. Det är lättare att minnas 3 betydelsefulla saker än 10 som saknar mening.

Ett problem med informationen i korttidsminnet är att den inte är stabil i sig själv. För att bevara informationen krävs att den upprepas hela tiden, annars bleknar den bort efter 15–30 sekunder.  

Figur  A.12    Memorera koden i 10 sekunder. Täck sedan över den.

Figur  A.13    Lös ekvationen!

Vilken var koden du nyss memorerade? De flesta har stora svårigheter att återge denna eftersom korttidsminnet blev upptaget med att räkna ut ekvationen.

All information som krävs för att genomföra uppgiften ska vara synlig på sidan / i fönstret.

Använd få bildväxlingar eller skapa tydliga kopplingar mellan dem. Användaren tappar lätt bort sig vid bildväxlingar och ställer sig då frågor som ”var är jag?”, ”hur kom jag hit?”, ”varför gick jag hit?”. Däremot upplever användaren att hon har kontroll om hon har (visuell) översikt och (mentalt) grepp på helheten.

**Det är lättare att känna igen…**

Det är betydligt lättare för människan att känna igen än att komma ihåg information. Om du exempelvis ska köpa en av August Strindbergs böcker så är det betydligt enklare om någon (eller en sökmotor) serverar en lista av alla hans böcker än om du måste leta i minnet för att komma ihåg titeln.

För att minnas saker använder långtidsminnet sig av associationer. Detta utnyttjas exempelvis i ikoner, som byggs upp av kännetecken för en viss företeelse som delas av många människor.

Presentera valbara alternativ i en lista istället för att presentera ett tomt inmatningsfält.

Genom att använda både genvägar, menytexter och ikoner för en och samma funktion kan vi underlätta förståelsen för användaren.

===== Tanke =====

Vårt tänkande sker till viss del medvetet, men merparten sker icke-medvetet. I den medvetna delen är vi bra på att bedöma information, att analysera. Här hanteras text och siffror. Ett problem är dock att vi hanterar information sekventiellt och att vi inte kan hantera särskilt mycket information i taget. I den icke-medvetna delen hanteras däremot mycket stora informationsmängder och detta sker på ett automatiskt och samtidigt sätt. Vi är oerhört effektiva på att bedöma helheter och att finna mönster.

Människan bedömer element i gränssnittet efter hur de troligtvis fungerar, baserat på tidigare erfarenheter, värderingar och kulturella aspekter. Det här går blixtsnabbt och utan att vi kan styra det. Just att vi utgår från våra erfarenheter när vi ser något nytt innebär att det inte finns några intuitiva gränssnitt. Kunskap om hur exempelvis musen fungerar, hur en rullist fungerar och att det finns kortkommandon är förvärvade kunskaper och inte alls självklara för den ovane användaren. Däremot finns gränssnitt som på ett elegant sätt tar tillvara redan inhämtad kunskap. God interaktionsdesign tar vara på användarnas befintliga kunskaper.

**Hjärnan prioriterar våra intryck**

Även om hjärnan kan hantera ofantligt stora datamängder kan inte all medveten bearbetning ske samtidigt. Därför sker prioritering.

Figur  A.14    Säg högt och i ganska snabb takt vilken färg texten på varje rad har.

Figur  A.15    Gör på samma sätt här: säg högt och i ganska snabb takt vilken färg texten på varje rad har.

De flesta människor misslyckas med att säga ordets färg istället för själva ordet i den sista kolumnen. Anledningen är att hjärnan registrerar ordets betydelse blixtsnabbt och har sedan svårt att bortse från detta. Hjärnan tenderar att prioritera text över färg.

**Automatisering**

Den mänskliga hjärnan försöker hela tiden (utan att du vet om det) att hitta mönster så att processer automatiseras, vilket i sin tur medför att belastningen minskar.

Skapa enhetliga gränssnitt!

  * Använd samma ord för samma sak överallt.
  * Använd samma färg till samma sak överallt.
  * Använd samma beteende för liknande funktioner överallt.
  * Placera knappar med samma funktion på samma ställe överallt.

Sortera menyval och listor på ett för användaren logiskt sätt. Sortera efter funktion eller logisk betydelse. Använd bokstavsordning om entydig meningsfull ordning saknas.

Anpassa inmatningsfältens längd till det förväntade innehållet. I Sverige bör exempelvis inmatningsfältet för ett förnamn vara kortare än inmatningsfältet för efternamnet.

Undvik modala dialoger (fönster som måste stängas för att användaren skall kunna komma åt resten av systemet) om du inte har behov av att styra användaren i ett visst läge. Att undvika modala dialoger är särskilt viktigt då det gäller hjälprutiner, eftersom användaren ofta behöver tillgång till hjälptext och andra funktioner samtidigt.

Det är mycket viktigt att utformningen av gränssnittet hjälper användaren att finna mönster för hur produkten fungerar. Ett färdigt mönster kan aldrig förmedlas eftersom det skapas i användarens hjärna. Däremot kan gränssnittet hjälpa användaren i processen att skapa mönster, framför allt genom att utformningen är överskådlig och konsekvent, men även genom andra åtgärder:

Använd bara ord och koncept som användaren är väl förtrogen med.

Tillåt användaren att ångra sig. Om produkten uppmuntrar utforskande så lär sig användaren snabbare hur systemet fungerar.

**Återkoppling**

För att användaren överhuvudtaget ska kunna förstå produktens uppbyggnad och beteende krävs relevant återkoppling på användarens handlingar. Återkoppling är också ett viktigt inslag för att skapa mönster.

Tala om för användaren när systemet arbetar.

Tydliggör vilket resultat användaren nådde.

Formulera meddelanden så att användaren förstår dess innebörd och kan agera utifrån budskapet:

  * Tala om vad som hänt. Skriv det viktiga ordet så tidigt som möjligt i meddelandetexten.
  * Tala eventuellt om varför det har hänt.
  * Tala om vad användaren kan göra för att åtgärda problemet.
  * Skriv i positiv form. Undvik orden ”inte” och ”ej”.

När vi har hittat ett mönster kan vi också återskapa detta, vi har ”lärt oss”. Riktigt kraftfulla mönster innebär också att användaren kan förutsäga vad som borde hända. Interaktiva produkter som används sällan måste alltså snabbt förmedla ett mönster som dessutom är enkelt att komma ihåg. 

<blockquote>
**Ett litet exempel från verkligheten**

Exemplet är visserligen snart 10 år gammalt, men i många av dagens produkter finns likartade problem. Fönstret är en del i en produkt för att administrera kommunala tjänster. Användaren kommer till detta fönster efter att först valt en individ (medborgare i kommunen). I detta fönster visas individens alla pågående och avslutade kommunala ärenden. När ett ärende är valt ( i listan) visas detaljer (längst ned).

Övning: Titta på fönstret nedan och fundera på eventuella brister du ser, mot bakgrund av den kunskap om människans syn, minne och tanke som du nu har.

Figur  A.16    Ett fönster som är dåligt anpassat till det mänskliga systemet.

Några av bristerna är:

  * Hjälpinformation ligger fast i bilden och är efter några gångers användande onödig information. All text uppfattas av ögat och måste aktivt väljas bort (tanke). Dessutom är den färglagd och placerad längst upp vilket gör att den pockar på uppmärksamhet (syn). Som text betraktad är den också onödigt ”pratigt” formulerad.
  * Knapparna är placerade i olika ordningsföljder, vilket hindrar användaren från att automatisera (tanke).
  * Ledtexterna är färgsatta medan innehållet är nedtonat, grått. Detta gör att det är svårare att hitta informationen (syn). Stor visuell tyngd vid ledtexter, liten tyngd på innehåll ger att ögat snabbare uppmärksammar ledtexterna. Dessutom brukar grå text eller svart text på grå bakgrund betyda att innehållet är inaktivt (tanke).
  * Ramar används för gruppering. Samma effekt åstadkoms genom att använda mellanrum. (Ögat uppfattar grupper lika snabbt genom avstånd som med ramar).
</blockquote>

====== Sammanfattning ======

Syn, tanke och minne fungerar på ett likartat sätt hos oss människor. Baserat på kunskap om dessa gemensamma mänskliga funktioner har riktlinjer formulerats. Riktlinjerna förklarar på vilket sätt dessa mänskliga egenskaper bör påverka gränssnittets utformning. Dessa riktlinjer är en god startpunkt när du vill utvärdera redan gjorda gränssnitt, och en bas att stå på när du skall utforma nya.
Författare

Facebook

Twitter (@anvandbarhet)
