Studentlitteraturs logga inUse logga
 
 

Skillnader

Här visas skillnader mellan den valda versionen och den nuvarande versionen av sidan.

bok:appendix_a [2010-02-15 09:52]
admin
bok:appendix_a [2010-09-22 09:38] (aktuell)
berndtsson
Rad 1: Rad 1:
-====== Appendix A: Introduktion till det mänskliga systemet ======+====== Det mänskliga systemet ======
 +**Utveckla wikin: Detta kapitel behöver uppdateras.**
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. 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. +Symbolen XXX 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.+ 
 +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 [[http://anvandbarhet.se/bok:vidare_laesning|utöver det som presenteras i denna bok]].  
===== Syn ===== ===== 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.+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((Varseblivning kallas även perception.)) 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. 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.
Rad 23: Rad 26:
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. 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?+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?((Bilden föreställer kossa, sedd från sidan. En känd bild som exemplifierar detta fenomen är ”Spotty dog”, en dalmantin i höstlöv. Vi brukar skämtsamt kalla symtomen att sprida ut fält på en dialog/en sida för just ”dalmantineffekten”. ”Spotty dog” och fler exempel hittar du i Thompson,P., ”Visual Perception: an Intelligent System with Limited Bandwith”, i Monk, A., ed Fundamentals of Human-Computer Interaction, Academic Press, 1986.))
{{:bok:img:figur_a_1.png?400|Figur A.1}} {{:bok:img:figur_a_1.png?400|Figur A.1}}
Rad 33: Rad 36:
Figur A.2 Objekt som är nära uppfattas som en grupp. Figur A.2 Objekt som är nära uppfattas som en grupp.
-{{:bok:img:figur_a_2.png|Figur A.2}}+{{:bok:img:figur_a_2.png?400|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. 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.+Figur A.3 Objekt som är lika i form uppfattas som en grupp. 
 + 
 +{{:bok:img:figur_a_3.png?400|Figur A.3}}
Ä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”. Ä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. +Figur A.4 Fyllnad kan användas för att gruppera olika objekt som är åtskilda. 
-'+ 
 +{{:bok:img:figur_a_4.png?400|Figur A.4}} 
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. 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.+Figur A.5 Hjälp människan att tolka bilden genom att presentera grupper med relaterad information och relaterade funktioner. 
 + 
 +{{:bok:img:figur_a_5.png?600|Figur A.5}}
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. 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.
Rad 63: Rad 72:
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.       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.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.+{{:bok:img:figur_a_6.png?600|Figur A.6}}
-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.+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. 
 + 
 +{{:bok:img:figur_a_7.png?600|Figur A.7}} 
 + 
 +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. 
 + 
 +{{:bok:img:figur_a_8.png?600|Figur A.8}}
Använd både versaler och gemener. 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.+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((Mills, C.B. och Weldon, L.J., Reading text from computer screens, ACM Computing Surveys, 1987 nr 4.)). 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 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.
Rad 82: Rad 97:
”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”. ”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.+Använd stor typsnittsstorlek.((Se sammanställning av Human Factors International,  
 +http://www.humanfactors.com/library/feb02.asp.)) Undvik kursiv text.
</blockquote> </blockquote>
Rad 99: Rad 115:
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. 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.+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. 
 + 
 +{{ :bok:img:figur_a_9.png?400|Figur A.9}}
Man brukar tala om tre olika typer av minnen; 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).   * 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”.+  * Korttidsminnet((I dagligt tal ”närminnet”.)) 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.   * Långtidsminnet som lagrar viss utvald information och som i efterhand kan återkalla och vidarebearbeta intryck. Annan information sållas bort.
Rad 111: Rad 129:
**Korttidsminnet** **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.  +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.((Begreppet klump, eller ”chunk”, myntades av George A. Miller 1956. Se “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information” i The Psychological Review, vol. 63, pp. 81–97, 1956.)) 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.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.+{{:bok:img:figur_a_10.png?400|Figur A.10}} 
 + 
 +Figur A.11 Gör på samma sätt här. 
 + 
 +{{:bok:img:figur_a_11.png?400|Figur A.11}}
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. 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.
Rad 121: Rad 143:
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.   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.12 Memorera koden i 10 sekunder. Täck sedan över den. 
 + 
 +{{:bok:img:figur_a_12.png?200|Figur A.12}} 
 + 
 +Figur A.13 Lös ekvationen!
-Figur  A.13    Lös ekvationen!+{{:bok:img:figur_a_13.png?250|Figur A.13}}
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. 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.
Rad 143: Rad 169:
===== Tanke ===== ===== 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.+Vårt tänkande((Ett annat begrepp för tanke är kognition.)) 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. 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.
Rad 151: Rad 177:
Även om hjärnan kan hantera ofantligt stora datamängder kan inte all medveten bearbetning ske samtidigt. Därför sker prioritering. Ä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.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.+{{:bok:img:figur_a_14.png?100|Figur A.14}}
-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.+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. 
 + 
 +{{:bok:img:figur_a_15.png?100|Figur A.15}} 
 + 
 +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.((Detta kallas för Stroop-effekten.))
**Automatisering** **Automatisering**
Rad 174: Rad 204:
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. 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:+Det är mycket viktigt att utformningen av gränssnittet hjälper användaren att finna mönster((Den modell av produkten som byggs upp i användarens huvud brukar kallas mental modell.)) 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. Använd bara ord och koncept som användaren är väl förtrogen med.
Rad 204: Rad 234:
Ö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. Ö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.+Figur A.16 Ett fönster som är dåligt anpassat till det mänskliga systemet. 
 + 
 +{{:bok:img:figur_a_16.png?350|Figur A.16}}
Några av bristerna är: Några av bristerna är:
 
 

Författare

Bild på författareb Johan BerndtssonBild på författareb Ingrid Domingues

Facebook

Twitter (@anvandbarhet)

 
Creative Commons-licens

Användbarhet i praktiken - wiki by Ingrid Dominques/Johan Berndtsson is licensed under a Creative Commons Erkännande-IckeKommersiell 3.0 Unported License. Based on a work at anvandbarhet.se.