Your SlideShare is downloading. ×
Design av små displayer i
system med begränsade
    inputmöjligheter
        Niclas Siljedahl
Sammanfattning
Små displayer förekommer på en mängd vanliga produkter, däribland mobil-
telefoner och handdatorer, men har...
Innehållsförteckning
1 INLEDNING                                                                    1
 1.1 SYFTE          ...
1 Inledning




                                  1
                             Inledning
Elektroniska produkter med små ...
Design av små displayer i system med begränsade inputmöjligheter


fokus låg på designen av själva displayen, som dock i m...
2 Teoribakgrund




                                 2
                       Teoribakgrund
I detta kapitel beskrivs tidig...
Design av små displayer i system med begränsade inputmöjligheter


& Kolers anser själva att deras resultat är väsentligt ...
2 Teoribakgrund


Swierenga (1990) skriver att menystrukturers effektivitet minskar när
hierarkierna är djupa (pga att det...
Design av små displayer i system med begränsade inputmöjligheter


Marcus et al (ibid) nämner även ett användartest av ett...
2 Teoribakgrund


gäller handdatorer. När skärmstorleken minskas och mindre info kan visas på
den måste användare därför m...
Design av små displayer i system med begränsade inputmöjligheter


på mobiltelefoner) underlättas webbläsning genom att te...
2 Teoribakgrund


   • Navigering och sajtstruktur – Vissa WAP-sajter ansågs involvera allt-
     för många val och förfly...
Design av små displayer i system med begränsade inputmöjligheter


arbete som inte kräver någon visuell uppmärksamhet, har...
2 Teoribakgrund


menystrukturen mot webbsidor skrivna i WML, så att de som har lärt sig att
navigera med en WML-browser k...
Design av små displayer i system med begränsade inputmöjligheter


2.3.1 Generella riktlinjer
Tullis (1997) sammanfattar e...
2 Teoribakgrund


   • Proportionerlig bokstavsbredd ger snabbare läsning av listor med
     enstaka ord.
   • Paging har ...
Design av små displayer i system med begränsade inputmöjligheter


2.4 Ikoner och symboler
En klassisk semiotisk syn (Peir...
2 Teoribakgrund


Mycket forskning om ”ikoner” och ”symboler” har gjorts, varav ett urval
redovisas nedan. Emellertid är t...
Design av små displayer i system med begränsade inputmöjligheter


     • Simplicity – enkelt, men ändå konsekvent, med al...
2 Teoribakgrund


Maguire (1990) sammanfattar möjliga anledningar att använda ikoner/gra-
fiska symboler inom människa-dat...
Design av små displayer i system med begränsade inputmöjligheter


     • De ska vara lätta att identifiera, vilket är anv...
2 Teoribakgrund


– representationella piktogram är mindre tvetydiga. Det viktigaste med en
symbol är att den är identifie...
Design av små displayer i system med begränsade inputmöjligheter


1990). Användare verkar vänta sig att WAP-sajters navig...
2 Teoribakgrund


representeras på olika sätt (Hemenway 1982, Sanders & McCormick 1992,
Hirst 1995). En ikon behöver dock ...
Design av små displayer i system med begränsade inputmöjligheter




                                 3
                  ...
3 Metod


medan en anslutning etablerades (och därmed avbryta den pågående anslut-
ningen), samt välja en dittills okänd k...
Design av små displayer i system med begränsade inputmöjligheter




                  Figur 2: Skiss på symbolbaserat grä...
3 Metod




                 Figur 4: Skiss på helt textbaserat gränssnitt

En annan tanke var ”sökning” först och sedan p...
Design av små displayer i system med begränsade inputmöjligheter




            Figur 5: Skiss där klienter visas när sök...
3 Metod


Horisontella displayer är det användare är mest bekanta med, från såväl
mobiltelefoner som datorer och TV-appara...
Design av små displayer i system med begränsade inputmöjligheter


3.3 Jämförelse av lofi-prototyper
Enkla lofi-prototyper...
3 Metod




                Figur 8: Lofi-prototyp med horisontell display.
                Statusinformation i symbolform...
Design av små displayer i system med begränsade inputmöjligheter


Vy för inmatning av PIN med siffror ordnade i en rad (f...
3 Metod


Statusinformation i symbolform i nedre kanten (figur 12): Två personer
var tveksamma till symbolen i figurerna 9...
Design av små displayer i system med begränsade inputmöjligheter


3.3.3 Följder av jämförelsen
De horisontella displayern...
3 Metod


andra testdeltagaren, som kallade symbolen för ”sol”, noterade att symbolen
”pekar i en enda riktning” och trodd...
Design av små displayer i system med begränsade inputmöjligheter


markerad på varje displaybild och konstaterade direkt v...
3 Metod


reverse video samt en ruta. Eftersom den första deltagaren ansåg att marke-
ringen vid reverse video syntes bra,...
Design av små displayer i system med begränsade inputmöjligheter


huvudstudien, där även en kortare ruta som deltagare 1 ...
3 Metod


3.7.2 Anslutning pågår
En person ritade ”en sladd som rör sig” (16a), en annan samma sak och ett
timglas (16d). ...
Design av små displayer i system med begränsade inputmöjligheter


menus) användes, vilket innebar att förflyttning nedåt ...
3 Metod


3.8.2 Användarinput
Den knapp som skulle användas för input i systemet hade mekaniskt sett en
funktion vid nertr...
Design av små displayer i system med begränsade inputmöjligheter




                 Figur 21: Kortare version av rammark...
3 Metod


displayen användes en dubbelpil (som pekade åt båda hållen), också den i
nedre högra hörnet (figur 23 visar en v...
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Design av små displayer i system med begränsade inputmöjligheter
Upcoming SlideShare
Loading in...5
×

Design av små displayer i system med begränsade inputmöjligheter

1,569

Published on

"Design av små displayer i system med begränsade inputmöjligheter" - D-uppsats i Kognitionsvetenskap (2002)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,569
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Design av små displayer i system med begränsade inputmöjligheter"

  1. 1. Design av små displayer i system med begränsade inputmöjligheter Niclas Siljedahl
  2. 2. Sammanfattning Små displayer förekommer på en mängd vanliga produkter, däribland mobil- telefoner och handdatorer, men har ändå inte studerats i någon större utsträckning. Denna uppsats utforskar faktorer som påverkar en liten displays användbarhet. Undersökningen som ligger till grund för den genomfördes inom ramen för ett uppdrag, vars syfte var att utveckla ett användbart användargränssnitt till en liten mobil enhet. Användarinput i systemet skulle ske med en multifunktionsknapp och systemets output skulle presenteras på en liten grafisk display. Den allmänna frågeställningen för uppsatsen gällde hur ett gränssnitt för en liten display bör vara utformat så att det är lätt att utföra enkla uppgifter. Efter en litteraturgenomgång och ett antal tester med lofi-prototyper, som bekräf- tade vad som var intressant att undersöka, formulerades mer preciserade frågeställningar. Dessa berörde hur systemet borde vara strukturerat så att navigering och användarinput uppfattas som enkla att förstå och utföra, respektive vilka typer av visuell representation som är lämpliga. En hifi- prototyp designades och en kvalitativ utvärdering genomfördes med dator- vana deltagare. Användbarhetsmålen gällde aktivering av en specifik klient i systemet, inmatning av tecken (PIN-kod och text), ändring av vissa system- inställningar, samt förståelse för, och bedömning av systemet, dess struktur, markeringar och representationer. Samtliga användbarhetsmål uppfylldes till fullo, utom det som berör inmatning av tecken, som uppfylldes till hälften. Testdeltagarna var positivt inställda till gränssnittet och ansåg att det gick fort och lätt att använda, men att det krävde en viss tid för tillvänjning, eftersom de var vana vid större inputmöjligheter. Resultaten visar att en hierarkisk menystruktur med scrollning fungerar väl på små displayer. Inmatning av en fyrasiffrors PIN-kod kan ske snabbt och lätt, men inmatning av text är svårare och troligen olämpligt när systemets inputmöjligheter också är starkt begränsade. Vidare tyder resultaten på att både pilar och numrering kan användas för att underlätta navigering och att det i hög grad är individuellt vilka representationer av dynamiska skeenden som är lämpliga, men att de bör vara animerade.
  3. 3. Innehållsförteckning 1 INLEDNING 1 1.1 SYFTE 2 1.2 RAPPORTÖVERSIKT 2 1.3 TACK 2 2 TEORIBAKGRUND 3 2.1 TIDIGA STUDIER OM SMÅ DISPLAYER 3 2.2 SENARE STUDIER OM SMÅ DISPLAYER 5 2.3 TRADITIONELL SKÄRMDESIGN 11 2.4 IKONER OCH SYMBOLER 14 2.5 TEORISAMMANFATTNING 19 3 METOD 22 3.1 BESKRIVNING AV SYSTEMET 22 3.2 TIDIGA SKISSER 23 3.3 JÄMFÖRELSE AV LOFI-PROTOTYPER 28 3.4 TEST MED LOFI-PROTOTYPER 32 3.5 FRÅGESTÄLLNINGAR 34 3.6 MARKERINGSTEST 34 3.7 ILLUSTRATION AV DYNAMISKA SKEENDEN 36 3.8 DESIGN AV HIFI-PROTOTYP 37 3.9 HUVUDSTUDIEN 49 4 RESULTAT 56 4.1 INLÄSNING OCH ANSLUTNING 56 4.2 INMATNING AV TECKEN 58 4.3 ÄNDRING AV INSTÄLLNINGAR 62 4.4 REPRESENTATION AV NAVIGERING 64 4.5 STRUKTUR OCH MARKERINGAR 65 4.6 REPRESENTATION AV DYNAMISKA SKEENDEN 67 4.7 NAVIGERINGSVARIANTER 72 4.8 AVSLUTANDE DISKUSSION OM TESTDELTAGARNAS UPPFATTNING 73 4.9 RESULTAT AV ILLUSTRATIONSUPPGIFTEN 74 4.10 RESULTATSAMMANFATTNING 76 5 DISKUSSION 82 5.1 HUR BÖR SYSTEMET VARA STRUKTURERAT SÅ ATT NAVIGERING OCH ANVÄNDARINPUT UPPFATTAS SOM ENKEL ATT FÖRSTÅ OCH UTFÖRA? 83 5.2 VILKA TYPER AV VISUELL REPRESENTATION ÄR LÄMPLIGA PÅ EN LITEN DISPLAY? 89 5.3 OM SYMBOLERNA 94 5.4 FÖRSLAG PÅ FRAMTIDA FORSKNING 96 6 REFERENSER 99
  4. 4. 1 Inledning 1 Inledning Elektroniska produkter med små displayer blir allt vanligare. Två exempel på sådana, som redan idag är vanligt förekommande, är mobiltelefoner och handdatorer. Trots detta har små displayer utforskats förhållandevis lite, vilket noteras av bl a Marcus et al (1998). Enligt Jones et al (2000) har mycket arbete lagts ner på att lösa teknologiska problem och utveckla marknads- strategier för den typen av produkter, medan effektiva användargränssnitt för dem, vilket är lika viktigt, inte alls har utforskats i samma utsträckning. Den studie som beskrivs i denna uppsats genomfördes inom ramen för ett uppdrag som syftade till att utveckla ett användbart användargränssnitt till en konceptprodukt. Produkten var en liten mobil enhet där input från användaren skulle ske med en multifunktionsknapp och output från systemet skulle presenteras på en liten grafisk display. Enhetens display (figur 1) var storleksmässigt ungefär i nivå med mobiltelefoners (vyarean var 32,6x17,6 mm) och betydligt mindre än de som är vanliga på handdatorer. De uppgifter som skulle utföras med enheten var bl a aktivering av klienter, ändring av vissa systeminställningar och inmatning av tecken. Figur 1: Displaybild ur hifi-prototypen (Utförlig beskrivning följer i kapitel 3) Uppdraget från beställaren var att förfina de funktionsrelaterade krav som berörde användargränssnittet, samt designa det grafiska gränssnittet. (Syste- mets komponenter och funktionalitet beskrivs i avsnitt 3.1.) Studien vidgades dock för att vara generellt intressant för utvecklingen av produkter som mobiltelefoner, handdatorer och andra med små displayer. Undersökningens 1
  5. 5. Design av små displayer i system med begränsade inputmöjligheter fokus låg på designen av själva displayen, som dock i många avseenden påverkas av de begränsade möjligheterna till användarinput. 1.1 Syfte Syftet med undersökningen har varit att utforska faktorer som påverkar en liten displays användbarhet. Den allmänna frågeställningen för uppsatsen är: ”Hur bör ett gränssnitt för en liten display vara utformat så att det är lätt att utföra enkla uppgifter?” Mer preciserade frågeställningar för undersökningen lämnades därhän tills en litteraturstudie hade företagits och ett antal lofi- undersökningar hade genomförts. 1.2 Rapportöversikt Uppsatsen är indelad i fem kapitel. Deras innehåll beskrivs kortfattat i tabell 1 nedan. Kapitel Innehåll 1 Inledning Uppsatsens syfte och en översikt av innehållet. 2 Teoribakgrund Tidigare forskning som är relevant för studien. Kapitlet sammanfattas utförligt i avsnitt 2.5. 3 Metod Beskrivning av systemet, skisser, lofi- prototyper och tidiga tester, preciserade frågeställningar, design av hifi-prototyp, samt huvudstudiens upplägg och genom- förande. 4 Resultat Huvudstudiens resultat. Kapitlet samman- fattas utförligt utifrån användbarhetsmålen i avsnitt 4.10. 5 Diskussion Besvarande av frågeställningarna, diskus- sion om resultaten, samt förslag på fram- tida forskning. Tabell 1: Rapportöversikt 1.3 Tack Författaren vill tacka Arne Jönsson (Institutionen för datavetenskap, Linkö- pings universitet), Harald Ripa (Precise Biometrics), samt Jenny Ohlson. 2
  6. 6. 2 Teoribakgrund 2 Teoribakgrund I detta kapitel beskrivs tidiga studier om små displayer och senare studier, som i första hand berör mobiltelefoner och/eller handdatorer, varav många är speciellt inriktade på webbläsning på små displayer. Handdatorers displayer är vanligen större än displayen i denna studie och är avsedda både för enkla och tämligen komplexa uppgifter. Deras gränssnitt bygger vanligen på direktmanipulering av displayobjekt med någon form av pekverktyg, medan mobiltelefoner har siffertangenter för input. Eftersom inget av detta finns tillgängligt här är det intressant att undersöka i vilken utsträckning forskning som berör sådana är relevant för den här typen av display. Då displayens storlek är så begränsad är det av stor vikt att undersöka hur innehållet borde struktureras och hur förflyttning på displayen skulle kunna ske, varför även studier som berör struktur och navigering gås igenom. Det finns också en mängd forskning om design av skärmar av traditionell storlek, avsedda för skrivbordsarbete, och det är tänkbart att vissa sådana resultat kan gälla även små displayer. Därför görs en kortare genomgång av allmän skärmdesign, inklusive markeringar, vilket är nödvändigt för att användare ska kunna arbeta med specifika displayobjekt (t ex klienter). Möjligheten att statusrepre-sentationer och annat kan vara i symbolform motiverar också en genomgång av allmän forskning om ikoners och symbolers roll i gränssnitt- sammanhang. Kapitlet avslutas med en sammanfattande text om den tidigare forskning som är av störst intresse för denna uppsats. 2.1 Tidiga studier om små displayer En tidig undersökning var Duchnicky & Kolers (1983), som studerade hur läsbarhet av text som scrollades (rullades) på terminaler med visuella displayer påverkades av radbredd, teckendensitet och fönsterhöjd. Duchnicky 3
  7. 7. Design av små displayer i system med begränsade inputmöjligheter & Kolers anser själva att deras resultat är väsentligt för designen av elektro- niska displayer med bara ett fåtal rader (t ex miniräknare, portabla display- enheter och kontrollpaneler med ont om ledigt utrymme). De fann att text med 80 tecken per rad lästes 30 % snabbare än text med 40 tecken per rad. Vidare fann de att rader med full bredd (18,7 cm) och 2/3-bredd (12,5 cm) lästes 25 % snabbare än rader med 1/3 (6,2 cm) skärmbredd. (Vid 80 teckens densitet rymdes 78, 52 och 26 tecken per rad, vid 40 teckens densitet 39, 26 och 15 tecken per rad.) Att variera höjden påverkade betydligt mindre. Text med en fönsterhöjd på fyra rader lästes lika effektivt som text i 20-raders fönster. Fönster med 1 eller 2 rader (som det inte var någon skillnad mellan) lästes bara 9 % långsammare än 4 och 20 rader. Läsförståelse påverkades inte alls av fönsterstorleken, troligen för att försökspersonerna bibehöll en konstant nivå av förståelse genom att variera sin läshastighet. Duchnicky & Kolers tolkar sina data som att folk kan läsa och förstå kontinuerlig text som presenteras i fönster med en enda rad med 15 tecken, även om det inte går lika bra som med större fönster. De skriver också att vilken teckenstorlek som är optimal på en displayterminal beror på många faktorer, inklusive skärmupp- lösning, avstånd och displayanvändarens uppgift. Dillon et al (1990) undersökte hur displaystorlek (20 rader och 60 rader) och uppdelning av meningar över flera skärmar påverkade läsares manipulering, förståelse och subjektiva intryck (när det gäller en akademisk artikel som presenterades på en skärm). Ingen av variablerna påverkade läsförståelse signifikant, men det mindre fönstret manipulerades mer. Uppdelning av meningar gjorde att läsarna gick tillbaka till föregående sida för att läsa om text i större utsträckning. Dessutom föredrog de större skärmar. Dillon et al tolkar resultatet som att skärmstorlek och uppdelning av meningar inte är något som man kan identifiera klara och tydliga riktlinjer för. Många artiklar refererar till denna studie som ett exempel på undersökningar av små displayer (Jones et al 1999 och 2000, Jones & Marsden 1999, Buchanan et al 2001 m fl), trots att författarna själva medger att den ”lilla” skärm de använde egentligen inte är särskilt liten. Dillon et al skriver: ”…it must be reiterated that the ‘small’ screen was a 20-line display, which is close to the typical PC size and therefore cannot be described as genuinely small.” (s 224). Eftersom alla försökspersoner hade erfarenhet av att läsa text på PC-skärmar är det också osannolikt att de skulle ha betraktat presentationen som särskilt liten. Vidare betonar Dillon et al att deras resultat endast hänvisar till detaljerad läsning av en lång akademisk artikel och att man inte utan vidare ska anta att dessa resultat går att överföra till andra uppgiftsdomäner med andra typer av text. 4
  8. 8. 2 Teoribakgrund Swierenga (1990) skriver att menystrukturers effektivitet minskar när hierarkierna är djupa (pga att det mänskliga korttidsminnet är begränsat). Fördelar med scrollning är att användaren inte behöver komma ihåg den nödvändiga sekvensen för att komma åt information och att fler rader kan få plats på samma displayyta än när beröringskänsliga ytor används för menyval. Swierenga utvärderade alternativa metoder för att komma åt information med en beröringskänslig inputenhet. Det hon testade var en hierarkisk meny- struktur och tre metoder för scrollning – rad-för-rad, halv skärm och helskärm – och hur bekantskap med det eftersökta ordet respektive storleken på fönstret (12 eller 24 rader) påverkade prestationen. Hon fann att när ordet var bekant för användare var den hierarkiska menyn snabbast (följd av rad-för-rad- scrollning), medan rad-för-rad-scrollning var snabbast när ordet var obekant. Storleken på fönstret innebar ingen signifikant skillnad. Swierenga föreslår att hybridstrukturer, som innehåller både menyer och scrollningsmetoder, kan vara den optimala lösningen om användare har olika mycket erfarenhet eller om databasen som man söker i är tämligen stor. 2.2 Senare studier om små displayer Whatis.com (2001a) definierar en handhållen dator som en dator som kan förvaras i en ficka och som kan användas medan man håller den. Dagens handhållna datorer kallas också Personal Digital Assistants (PDA) och kan delas in de som hanterar handskrift som input (varav den första var Apples Newton och den mest populära idag är 3Coms PalmPilot) och de som har små tangentbord (vilka tillverkas av Philips, Casio, NEC m fl). I uppsatsen används genomgående ordet ”handdator” för PDA och liknande enheter. Marcus et al (1998) har en egen term för de små displayer som återfinns på mobiltelefoner och handdatorer – ”baby faces”. Dessa lider ofta av begrän- sade möjligheter till input och output, vilket ökar användares behov av navigering. Designen måste tillhandahålla en överblick och en kontext samt tala användarens språk. Som ett exempel på sådana gränssnitt nämns Nokias gränssnitt för mobiltelefoner (vars målgrupp sträcker sig från noviser till datorvana), som har åstadkommit tydliga och intuitiva sätt att komma åt alla funktioner med hjälp av en välstrukturerad meny. En av deras viktigaste utmaningar har varit att tillhandahålla informativa och kompletta displaytexter med tydliga teckensnitt och på det språk användaren föredrar. Textlayouten och grafiken har designats för att underlätta navigeringen och göra meny- strukturen lätt att lära. Displayens begränsade storlek och upplösning har även lett till vissa svårigheter att designa grafik som indikerar status i olika situationer. Detta har lösts genom att endast visa de indikatorer som är viktigast för varje situation och uppgift. 5
  9. 9. Design av små displayer i system med begränsade inputmöjligheter Marcus et al (ibid) nämner även ett användartest av ett gränssnitt för ett smart-car-system utfört av AM+A för Motorola. Resultatet av det visade att en tredjedel av användarna ville ha vägvisning med hjälp av kartor, en tredjedel föredrog pilar och en tredjedel enbart ord (i textform). Jones et al (1999) diskuterar tidigare forskning om hur en displays storlek påverkar interaktionen med den. En undersökning de nämner är Han & Kwahk (1994, i Jones et al 1999), som fann att sökning efter menyföremål på display med en enda rad fungerade dåligt. Av denna och andra under- sökningar drar Jones et al slutsatsen att om displayen inte är väldigt liten blir effekten inte katastrofal vid enkla uppgifter. Efter sitt eget försök (med 15 raders displayhöjd, 75 tecken i bredd) konstaterar de att det är stor risk för mycket scrollning vid användning av små displayer på webbsidor, vilket avbryter den primära uppgiften. Scrollning kan dock reduceras genom att placera navigational features (såsom menu bars) nära sidornas topp, på en fast plats (t ex till vänster på alla sidor), och även placera viktig info nära toppen. Jones et al (2000) har de senaste åren arbetat med att förstå vilka gränssnitts- krav handhållna enheter med små displayer har och har fokuserat sin forsk- ning främst på visuell output med ”peka-och-klicka”-input. En sak de kommit fram till är att man inom detta område inte bör förbise tidigare forskning om gränssnittsdesign (”traditionell” kunskap om MDI, människa-datorinter- aktion). De noterar att många utvecklare av mobil webbteknologi verkar tro att deras produkter är så olika konventionella system att MDI-metoder inte är relevanta, men detta är alltså fel. Designers bör dock inte anta att allting automatiskt kan överföras effektivt från skrivbordsmiljö till handhållen miljö. (Jones et al nämner även att det fortfarande är vanligt att MDI-metoder ignoreras för att de kan öka utvecklingskostnaden utan att deras positiva följder är lätta att se och marknadsföra.) 2.2.1 Webbläsning På senare år har det utförts en del forskning om tekniker för webbläsning med små displayer på mobiltelefoner och handdatorer. Kamba et al (1996) skriver att handdatorernas framväxt visar att användare kan stå ut med små, svårlästa displayer, begränsade sparmöjligheter och batterilivslängd, långsam CPU- hastighet och besvärlig dataöverföring. Det som huvudsakligen begränsar förbättringar av handdatorer är två faktorer: textens och skärmens storlekar. Dessa kommer antagligen inte att förändras så mycket, eftersom användare inte kan urskilja alltför små teckensnitt (särskilt inte vid låg upplösning). Gränsen för läsbarheten ligger för de flesta mellan 9 och 12 punkter när det 6
  10. 10. 2 Teoribakgrund gäller handdatorer. När skärmstorleken minskas och mindre info kan visas på den måste användare därför med nödvändighet öka interaktionsnivån för att komma åt önskad info. Kamba et al (ibid) föreslår att små displayers effektivitet maximeras genom en kombination av text och halvtransparenta kontrollobjekt (widgets) med en fördröjningseffekt (delayed response). Kontrollobjekt måste vara stora nog att kunna skiljas från textinnehållet och varandra och riskerar därför att ta upp mycket skärmutrymme om de ofta visas. Om de görs halvtransparenta kan de istället placeras ovanpå texten, och med hjälp av en fördröjningseffekt blir det möjligt att arbeta med både innehållet och kontrollobjekten utan att växla fram och tillbaka mellan de båda lagren. Deltagarna i Kamba et al:s studie föredrog lägsta möjliga fördröjningstid och väntade sig dessutom att de skulle kunna interagera med alla synliga objekt (dvs alla objekt i ett lager som inte överlappade med objekt i det andra lagret), varför fördröjningen inte bör användas på sådana objekt. Det senare förvånade Kamba et al som hade väntat sig att en konsekvent distinktion mellan de två lagren skulle göra det enklare att förstå hur de fungerade. Jones & Marsden (1999) diskuterar interaktionsproblem som uppstår när ett gränssnitt presenteras på en skärm med en annorlunda displaystorlek än designern avsett, vilket de enligt egen utsago var först att utforska. Jones & Marsdens undersökning visar att användare av en liten display (640x240 pixlar) var 50 % mindre effektiva än användare av en större display (1074x768 pixlar). Dessutom scrollade de mycket mer och var tveksamma att utforska sajten, kanske pga den höga kostnaden för att arbeta sig genom en följd av sidor. Användare föredrog direkta sökmöjligheter, vilket Jones & Marsden menar är ett tecken på att fokuserade mekanismer är nödvändiga för att hjälpa användare att upptäcka de delar av en sajt som kan vara användbara. Buyukkokten et al (2001) beskriver en annan teknik för webbläsning på handdatorer, mobiltelefoner och andra produkter med små displayer. En motivering till att utveckla en ny teknik är att läsning av webbsidor på en liten display blir mycket jobbigt därför att det innebär omfattande scrollning. Buyukkokten et al:s lösning är att dela upp informationen i mindre bitar. Tekniken gäller End-Game Browsing (där användare är nära, eller på, målsidan och undersöker den i detalj snarare än följer länkar), men de tror att den även kan användas i navigeringsfasen. De kallar den accordion summari- zation, vilket innebär att webbsidan först presenteras med en kort samman- fattning och sedan kan användaren krympa eller expandera sidan som ett dragspel. Eftersom det får plats så få rader (13 rader på handdatorer, 8 rader 7
  11. 11. Design av små displayer i system med begränsade inputmöjligheter på mobiltelefoner) underlättas webbläsning genom att textenheterna organi- seras hierarkiskt, i en trädstruktur. Vid varje summeringsrad finns en mar- kering som, beroende på hur ”ifylld” den är, visar hur mycket en sida kan expanderas eller krympas, eller om den redan är expanderad (helt ifylld = en rad, till hälften = 3 rader, tom = alla rader). Tekniken leder till snabbare webbläsning och minskade ansträngningar vid användarinput. Eftersom det på en liten display är lätt att användare blir desorienterade när en webbsidas innehåll ändras abrupt testade Buyukkokten olika lösningar för att komma till rätta med det. De fann att användare föredrog att en rad i taget försvann genom scrollning och att det inte var någon highlighting av nya rader. HDML (Handheld Device Markup Language) är ett språk, som skapades av Unwired Planet (senare Phone.com) i mitten av 1990-talet för att definiera hypertextliknande innehåll speciellt för handhållna enheter med mycket små displayer (t ex 4 rader med 20 tecken) och begränsad datorkraft och band- bredd. Man ansåg att HTML (Hypertext Markup Language) – det vanligaste språket för visning av webbsidor – krävde ansenlig kontext för att vara användbart och därför inte var lämpligt för handhållna enheter (de ansågs t ex inte ha utrymme för Prev- och Next-knappar). Därför utvecklades en navi- geringsmodell som bygger mindre på visuell kontext. Istället använder den en gränssnittsmetafor baserad på ”kort” som användaren interagerar med. Ett HDML-kort kan explicit definiera vad som ska hända när en specifik tangent trycks ner. Språket är inte avsett för vanlig webbsurfning, utan för att komma åt sidor med diskreta, textbaserade datamängder, exempelvis väderrapporter, prislistor, e-post mm. (Unwired Planet 1997) HDML utvecklades senare till WML (Wireless Markup Language) som är en del av WAP (Wireless Application Protocol), ett protokoll som syftar till att standardisera det sätt på vilket trådlösa enheter kan användas för Internet- access. Buchanan et al (2001) utförde vad de tror är den första större användarstudien om WAP som publicerats. Utifrån den identifierade de tre upplevda problem med telefonbaserad WAP (de fokuserade på information som den presenteras på de mest populära mobiltelefonskärmarna, men anser att de flesta slutsatserna passar även andra plattformar): • Skärmstorlek – Detta är den överlägset mest kritiserade faktorn, vilket Buchanan et al tror sig delvis kunna härleda till alltför högt ställda an- vändarförväntningar, kanske orsakade av överentusiastiska påståenden i marknadsföringen. Själva jämför de WAP-telefoners små displayer med Post-it-lappar – båda är effektiva för kort, fokuserad information, men olämpliga för längre eller komplexa meddelanden. 8
  12. 12. 2 Teoribakgrund • Navigering och sajtstruktur – Vissa WAP-sajter ansågs involvera allt- för många val och förflyttningar. I en undersökning utförd av Heylar (2000, i Buchanan et al 2001) blev vissa försökspersoner överraskade av att navigeringen på WAP-sajter inte fungerade på samma sätt som de hierarkiska telefonmenyer de var vana vid. • Inputmetod – Användarinput är arbetskrävande på de flesta moderna WAP-telefoner, och om textinput krävs störs flödet ännu mer. Ett test som utfördes av Buchanan et al (ibid) berörde vilken metod för att presentera nio rubriker på en begränsad display (sex textrader á ca 20 tecken) som var mest användbar på en WAP-telefon. De testade tre metoder som ansågs representativa för en mängd olika designmöjligheter. Dessa var horisontell scrollning, där fragment av alla rubriker syntes med relativt lite scrollning; vertikal scrollning, där de första sex textraderna syntes men användare var tvungna att scrolla displayen för att se alla rubriker (vilket innebar mer scrollning än den horisontella); samt paging, där tryckning på en Next-knapp innebar förflyttning till nästa sida etc. Alla tre gränssnitten ledde till få användarfel, dock något fler med paging. Man fann att den vertikala scrollningsmetoden var bäst för de flesta användarna. Utifrån sin analys av de uppfattade problemen med WAP, användaråsikter och fallstudier har Buchanan et al (ibid) identifierat ett antal utvecklings- principer för (framför allt mobiltelefonbaserade) WAP-tjänster. Till dessa hör att man bör: • Minska navigeringen från sida till sida och använda enkla hierarkier som liknar telefonmenyer som användaren redan är bekant med. • Minska mängden vertikal scrollning genom att förenkla texten (undvika ordrika meddelanden och använda handlingsorienterade nyckelord). • Minska antalet tangenttryckningar. Detta kan ske genom att förenkla navigeringen eller ersätta textinput med andra typer av interaktions- metoder (t ex val från en lista). Ett antal artiklar de senaste åren (del Galdo et al 1998, flera av Kristoffersen & Ljungberg) har hävdat att direktmanipulering (med filer etc) och skriv- bordsmetaforer i PC-stil inte alltid passar mobila datorer. Detta är för att användare ofta sysslar med sådant som kräver visuell uppmärksamhet utanför datorn, samtidigt som de utför sin uppgift. Dessutom förflyttar de sig och använder sina händer till att hålla redskap eller annat. Eftersom det är mindre fysiskt utrymme för interaktion på skärmen riskerar också gränssnittet att bli så komplext att det kan begränsa användares åtkomst till vanliga funktioner. Kristoffersen & Ljungberg (1999a) föreslår istället ett system för mobilt 9
  13. 13. Design av små displayer i system med begränsade inputmöjligheter arbete som inte kräver någon visuell uppmärksamhet, har strukturerad taktil input och ger auditiv återkoppling. Dahlbom & Ljungberg (1999) gör gällande att användare förväntar sig samma prestanda som på stationära datorer, eftersom sådana hittills har influerat mobila datorer i hög grad (operativsystemen är ofta baserade på en skriv- bordsmetafor och många program är miniatyrversioner av vanliga kontors- program). Att användarna därmed blir besvikna har setts som ett konceptuellt problem snarare än ett teknologiskt (Kristoffersen & Ljungberg 1999b). 2.2.2 Struktur och navigering De flesta mobiltelefoner har idag en hierarkisk meny för att stödja den på senare år utökade funktionaliteten. Detta innebär att ett antal möjliga val presenteras på skärmen och när ett av dem väljs visas ett antal underval osv. Menyer kom ursprungligen till för att utnyttja det faktum att människor är bättre på att känna igen kommandon från listor än att komma ihåg ett specifikt namn. Eftersom mobiltelefoner har begränsade tangentbord och displaystorlek är menyer överlägsna både kommandoradsystem och musbaserade grafiskt gränssnitt. (Marsden & Jones 2001) Buchanan et al (2001) skriver att forskning har visat att användares prestation bara försämras måttligt vid förminskning av displayen och att dramatiska skillnader bara inträffar när displayen är så liten att den bara kan visa ett val i taget. De anser att detta tyder på att användare av moderna mobila enheter med vallistor borde klara sig skapligt, förutsatt att det finns mer än en textrad. Marsden & Jones (2001) skriver att mobiltelefoner som visar mer än ett val i taget (idealiskt tre eller fler) fungerar ungefär lika bra som skrivbordsbaserade system. Marsden & Jones (ibid) skriver att expertanvändare lätt kan hantera meny- strukturer och hitta det de söker, eftersom de både har lärt sig hur strukturen fungerar och känner till en funktions exakta namn. Noviser måste däremot fatta beslut om menykategorier på en högre nivå för att avgöra om deras målfunktion finns på en specifik undermeny, vilket försvåras av att alla val pga displaystorleken inte är synliga. För att utforska vilken funktionalitet systemet har måste de också leta igenom hela trädet, vilket kan ta många tangenttryckningar. För att underlätta dessa problem poängterar Marsden & Jones att framtida system bör visa mer än ett val i taget. Träden bör också vara breda och grunda hellre än smala och djupa, men ännu bättre än det med konkava strukturer, dvs ett brett val vid roten och på löven (vilket är vanligt på mobiltelefoner). Marsden & Jones förespråkar dock att på sikt byta ut 10
  14. 14. 2 Teoribakgrund menystrukturen mot webbsidor skrivna i WML, så att de som har lärt sig att navigera med en WML-browser kan använda den för att surfa på Internet. Detta för att mobiltelefoners kraft kommer att öka stadigt i framtiden och göra menystrukturer än mindre lämpliga. Nokia introducerade (fr o m 5110-modellen) wrapped menus för att minska antalet tangenttryckningar. Detta innebär att man vid förflyttning nedanför en menys sista alternativ hamnar på det första alternativet på menyn. Ovana användare tenderar att fastna i längre menyer och loopa igenom valen till de ger upp. Marsden & Jones (ibid) menar att vidare forskning behövs för att avgöra om detta problem kan minskas genom att visa mer än ett val i taget (som är fallet i Nokias huvudmenyer), eller genom att minska det maximala antalet val till sju (för att utnyttja det mänskliga korttidsminnet). Manualer är i detta fall av begränsad nytta eftersom användare troligen inte bär med sig sådana och det faktiskt har visat sig att det är mindre chans att yngre använ- dare (under 35) slutför en uppgift om de använder manual. Menyanvänd- ningen kan dock förbättras genom att ge användare visuell återkoppling om var i menystrukturen de befinner sig med bl a isolerade ikoner, kontextikoner eller kontextinformation. Isolerade ikoner används för att öka förståelsen av ett specifikt menyobjekt. Exempelvis har Nokias menysystem fr o m 5110-modellen en ikon bredvid varje val på huvudmenyn. Senare Nokia-modeller använder animerade versioner av dessa ikoner. Eftersom de inte kan manipuleras och inte används i någon annan kontext menar Marsden & Jones (ibid) att de är en ren marknadsföringsattraktion som tillför inget eller väldigt lite till användbar- heten. Kontextikoner används för att markera ett specifikt val bland ett antal möjliga alternativ. Dessa kan nyttjas för att visa alla alternativ på en enda rad eftersom de kan få plats där textrepresentation inte ryms. Moderna Ericsson- telefoner använder sådana tillsammans med textbeskrivningen av varje menyval. Marsden & Jones anser att överflödig info kan vara hjälpsamt men att skärmutrymmet bättre skulle kunna användas t ex för att tillhandahålla ett extra menyval eller en hjälplinje för scrollning. Kontextinformation, någon sorts återkoppling om var man befinner sig inom en struktur, är nödvändigt för att noviser ska kunna navigera framgångsrikt, särskilt som vissa mobil- telefoner använder väldigt djupa trädmenyer. 2.3 Traditionell skärmdesign Som tidigare nämnts rekommenderar Jones et al (2000) att man inte ignorerar traditionell MDI-forskning vid design av små displayer. När det gäller designen av ”vanliga” (normalstora) skärmar finns det mycket mer forskning. Det är oklart hur mycket av detta som även gäller små displayer. 11
  15. 15. Design av små displayer i system med begränsade inputmöjligheter 2.3.1 Generella riktlinjer Tullis (1997) sammanfattar en mängd forskning om vad som är lämpligt när det gäller designen av en skärms objekt. Dit hör bl a att: • Den totala informationsmängden på varje skärm bör minimeras. Endast det som är nödvändigt för användare vid varje tillfälle i interaktionen ska presenteras och formuleras kortfattat, eftersom extra data minskar användares förmåga att extrahera relevant info. Onödiga detaljer som t ex många decimaler bör undvikas. Förkortningar kan användas när de sparar utrymme och är välkända för användare. Bekanta formuleringar och dataformat, t ex namn, adress osv, bör användas. • Information bör placeras i grupper som är ”lagom” till antalet och stor- leken. En grupp är en teckenmängd som kan kopplas samman genom att länka alla teckenpar som separeras av max ett mellanslag hori- sontellt och inga tomma rader vertikalt. Förutom spatial närhet kan även färg, grafiska gränslinjer och highlighting användas för gruppe- ring. • När det gäller informationens placering och sekvens är nyckelordet konsekvens – det skapar förväntningar hos användare. Specifika skärmdelar bör reserveras till vissa typer av information. Eftersom man i västvärlden inleder visuell sökning i övre vänstra hörnet är det bra som ”startpunkt”. Att följa konventioner är också bra och viktiga ele- ment ska ha prominent position. Generella element bör placeras före specifika. De element i t ex en meny som används oftast ska vara nära toppen. Om det inte är logiskt att följa dessa riktlinjer bör man använda alfabetisk eller kronologisk ordning. • Text bör idealiskt sett presenteras med både gemener och versaler. Enstaka ord med enbart versaler drar uppmärksamhet till sig, men bara versaler blir svårläst. Man bör dessutom använda ett proportionerligt sans-serif-teckensnitt på minst 8-10 punkter, i en högkontrastiv färg- kombination med mörka tecken på ljus bakgrund. Antal tecken per rad bör vara 26-78 och det ska vara lika mycket utrymme mellan raderna som raderna själva är höga. Bindestreck är inte bra, men det är inte heller lämpligt med ojämna rader. När ett icke-proportionerligt (fixed- width) teckensnitt används bör det vara jämna mellanrum mellan ord, även om högermarginalen då blir ojämn. Även Muter (1996) sammanfattar mycket forskning (i första hand om läsning av kontinuerlig text på skärm) och listar flertalet saker som även nämns av Tullis. Dessutom tillför han bl a att: • Läsbarheten minskar ju färre ord det är per sida. 12
  16. 16. 2 Teoribakgrund • Proportionerlig bokstavsbredd ger snabbare läsning av listor med enstaka ord. • Paging har i flera test visat sig bättre än scrollning, både vad gäller prestation och användarpreferens. • Effekten av en variabel beror på andra variablers nivå. Ett grid är enligt Löwgren (1993) ett mycket viktigt element i designen. Detta består av ett antal tänkta horisontella eller vertikala linjer som delar upp det tillgängliga utrymmet i visuella enheter, vilket ger visuell och konceptuell integritet. Ibland räcker det att gruppera ihop men i andra situationer kan riktiga visuella linjer behövas. 2.3.2 Markeringar Tullis (1997) rekommenderar att highlighting-tekniker, oavsett vilka, ska användas sparsamt, eftersom överanvändning motverkar deras syfte. Element som ska markeras bör därför väljas noggrant. Allra bäst verkar färg vara, men reverse video är också en mycket effektiv metod, om den används sparsamt. Den kan dra användares uppmärksamhet till specifika element på en skärm, och är praktiskt taget standardmetoden för att indikera att något för när- varande är ”valt” i t ex menyer eller listboxar. Ett problem med den är dock att tecken i kanten kan bli mindre läsbara, men detta åtgärdas med en buffer zone av blanka tecken på vardera sidan. Andra metoder för highlighting av information som Tullis nämner är ljusstyrka eller fetstil, men dessa kan bara användas i två nivåer (ljust/dunkelt respektive fet/normal stil) pga att användare kan ha olika skärminställningar. Ett vanligt exempel på sådan är dunklare för data levels och ljusare för data items. Även understrykning kan användas, för t ex rubriker, men endast om det inte stör läsbarheten. En alternativ metod är att använda dashes (streckade linjer). Flashing är ett säkert sätt att få uppmärksamhet, men kan också irritera om det används för mycket eller inte går att stänga av. Det ska därför bara användas vid brådskande meddelanden, och kanske inte alls. Det finns olika tekniker för detta: 1) meddelandet är helt av och på (för att inte minska läsbarheten bör det vara ”på” minst halva tiden); 2) växla ljusstyrka och 3) växla mellan normal och reverse video. Sanders & McCormick (1992) skriver att highlighting endast ska användas när validiteten är hög, dvs när rätt sak är markerad, och att blinkande text bör undvikas. 13
  17. 17. Design av små displayer i system med begränsade inputmöjligheter 2.4 Ikoner och symboler En klassisk semiotisk syn (Peirce 1985) är att ett tecken är något som står för något (dess objekt) på något sätt och riktar sig till någon, dvs det skapar i den personens sinne ett ekvivalent eller mer utvecklat tecken, vilket kallas för det första tecknets interpretant. Ett tecken kan enligt samma syn antingen vara en ikon, ett index eller en symbol: • En ikon kan förklaras som ett tecken som skulle inneha den karaktär som gör den signifikant även om dess objekt inte existerade (t ex ett pennstreck som representerar en geometrisk linje). • Ett index är ett tecken som omedelbart skulle förlora den karaktär som gör den till ett tecken om dess objekt avlägsnades, men inte om det inte fanns någon interpretant. Ett exempel är en substans med ett kulhål i som ett tecken på ett skott. Utan skottet skulle det inte finnas något hål, men det finns ett hål där vare sig någon attribuerar det till ett skott eller inte. • En symbol är ett tecken som skulle förlora den karaktär som gör den till ett tecken om det inte fanns någon interpretant (t ex ett yttrande i tal som signifierar det det gör endast om man förstår att det har den signi- fieringen). Sassoon & Gaur (1997) utgår istället från Oxford Companion to the English Language som förklarar ”ikon” som en term som betyder likeness eller image. Om något är ikoniskt representerar det något annat på ett ”konventionellt” sätt (t ex vägar och broar på kartor, eller onomatopoetiska ord i serier). En ”symbol” kan enligt samma källa antingen vara ett betecknande tecken eller märke (t ex “x” för ett okänt tecken inom algebran, eller ”O” för syre inom kemin) eller vad som helst (som kan representera vad som helst). Författarna ser en ikon som en del av en ikonografi (iconography), vilket de i sin tur definierar som ett symbolsystem som skapats för att förmedla idéer oberoende av ord och därmed av språk. Det kan finnas en bildassociation mellan tecknet och idén men det är inte nödvändigt. En ikonografi eller ikon behöver inte ens vara universellt igenkännbar för att fungera väl. Historiskt sett har ikoner inte alltid varit igenkännbara och även i vår tid behöver t ex vägskyltar läras in. I gränssnitt på datorer är ”ikon” den vedertagna beteckningen för en grafisk bild som representerar en applikation eller funktion, eller något annat koncept eller specifikt väsen/entitet som betyder något för användaren. Den är ofta valbar men kan också vara t ex en logotyp. På webben är ikoner ofta grafiska bilder som fungerar som hypertextlänkar till andra webbsidor (whatis.com 2001b). 14
  18. 18. 2 Teoribakgrund Mycket forskning om ”ikoner” och ”symboler” har gjorts, varav ett urval redovisas nedan. Emellertid är termerna sällan definierade i litteraturen och det kan därför vara oklart exakt vilken betydelse författarna avser med dem. I denna uppsats används för enkelhets skull ”symbol” som beteckning för en grafisk bild, men ingen klar distinktion görs mellan symboler och ikoner. Löwgren (1993) skriver att text ibland är bättre än symboler, men att bra grafiska symboler är mer underhållande och tilltalande än text, och därför kan vara viktiga för marknadsföringen av en produkt. Det är mycket viktigt med visuell konsekvens – och denna påverkas av om former är svängda eller kantiga, hur tjocka linjer är, grå ytor, 3D-effekter och annat. En viss symbol kan också betyda olika saker för olika individer och i olika kulturer. Även om man tror att man vet vad en symbol har för kulturell implikation måste den testas på användare så att man inte har missat uppenbara feltolkningar. Enligt Hemenway (1982) beror en ikons effektivitet på om användaren kan uppfatta vad den avbildar och vad som avses med den. Om ikonen inte är en direkt representation beror dess effektivitet på analogins kvalitet. Sanders & McCormick (1992) menar att symbolskyltar är bättre än skyltar med ord, förutsatt att symbolen verkligen visuellt avbildar det den ska representera. Detta beror på att symboler inte kräver omkodning, som ord gör. Hur stark association symbolen har till sin referent beror antingen på en tidigare etablerad association (igenkänning) eller hur lätt man lär sig en ny association. För att välja kodningssymboler kan man undersöka: • Recognition – presentera symboler och fråga försökspersonen vad de betyder • Matching – presentera flera symboler och be försökspersonen välja eller matcha • Preferences and opinions – försökspersonen tillfrågas om sin upp- fattning Det är också viktigt att de symboler som används är lätta att lära sig, även om de inte omedelbart är igenkännbara. Vidare ger generaliseringar av ett test med exitsymboler att ”fyllda” figurer är mycket bättre än outlined, cirkel- figurer är svårare att identifiera än fyrkantiga och att enkla figurer med få element är bra. Sanders & McCormick nämner också principer för bra symboler hämtade ur Easterby (1970, i Sanders & McCormick 1992): • Figure to ground – stabil form, t ex ingen streckad linje bakom • Figure to boundaries – solid form • Closure – fullständig form, dvs inte en del av en figur 15
  19. 19. Design av små displayer i system med begränsade inputmöjligheter • Simplicity – enkelt, men ändå konsekvent, med alla nödvändiga features • Unity – solida figurer inuti en yttre figur (rörelse markeras t ex inuti figuren, inte utanför) Tullis (1997) skriver att ikoner kan visa komplex information på lite utrymme och att de bästa är de som föreställer konkreta objekt som man arbetar med. Grafik kan överhuvudtaget vara bra även för att representera bl a verkliga eller påhittade bilder, numeriska data och direktmanipuleringsobjekt. Dessutom kan grafik representera komplexa system i verkliga världen, vanligen stiliserat eller med symboler. Det är då viktigt att bestämma vad de grafiska symbolernas standardbetydelser är och sedan använda dessa konsekvent. Ibland kan det även vara bra för enklare system och för inlärning av system. Baecker et al (1991) undersökte om animerade ikoner kunde hjälpa användare att förstå funktionaliteten hos olika verktyg i ett bildbehandlingsprogram. De animationer de använde sig av var begränsade till 10-20 sekunder långa sekvenser på 22x20 pixlar. Resultaten visade att animationerna klargjorde verktygets syfte och funktionalitet bättre än statiska ikoner. I samtliga fall där statiska ikoner inte var begripliga lyckades de dynamiska ikonerna förmedla verktygets syfte. Dessutom uppskattade alla försökspersoner de animerade ikonerna och fann dem användbara. Baecker et al upptäckte att det var viktigt att hålla animationerna enkla, både visuellt och konceptuellt. När det gäller längd, innehåll, ordning och visuell representation finns det dock få regler som garanterar effektiva animationer. Detta gäller i synnerhet verktyg med mer abstrakt funktionalitet. Morrison & Tversky (2000) jämförde hur inlärning påverkades av enbart text, text tillsammans med statisk grafik, respektive text tillsammans med animerad grafik. Resultatet pekar på att grafik i vissa fall är mer effektivt vid inlärning än text, men att animerad grafik inte ökar effektiviteten. Grafik och text är dessutom mer effektivt än enbart text, men animerad grafik tillför inget extra. En jämförelse av uppfattningen av navigeringsknappar för hypertext gjordes av King et al (1996). Knapparna var märkta med text, symboler eller både text och symboler. Resultatet var signifikant mindre förvirring med både symboler och text än med bara symboler, samt signifikant mindre förvirring med text än med symboler. Detta innebär att enbart symboler kan förvirra användare vid navigering. 16
  20. 20. 2 Teoribakgrund Maguire (1990) sammanfattar möjliga anledningar att använda ikoner/gra- fiska symboler inom människa-datorinteraktion. Jones (1984, i Maguire 1990) har skrivit om att de är visuellt mer distinkta än ett antal ord, kan representera mycket information på lite utrymme och kan föredras rent subjektivt framför text. Van Dam (1984, i Maguire 1990) har också konstaterat att ett gränssnitt baserat på menyer och ikoner föredras av de flesta framför ett strikt alfa- numeriskt gränssnitt. Detta beror på att ikonerna verkar mer naturliga, är lättare att lära sig, inte kräver mycket memorering och leder till färre misstag, under förutsättning att de är väl designade. En nackdel med ikoner är dock att de kräver att man lär sig och minns deras betydelse. Maguire ger även ett antal råd för hur designers bör förhålla sig till ikoner i datorsystem, främst inom menyer. Till dessa hör: • Ikoner är bäst för konkreta objekt och mest effektiva som miniatyr- representationer av det fysiska objekt de refererar till. • Ju mer abstrakt koncept, desto svårare att hitta en acceptabel ikon. • När en ikon väljs ska återkoppling ges genom inverse video. • Om displayen har låg upplösning (så att ikonen alltså är otydlig) bör man överväga att byta ut ikoner mot text. • Om produkten ska säljas i andra länder bör man se till att ikonerna är begripliga där. • Tillhandahåll (avstängningsbara) ikontexter för noviser och för upp- gifter som sällan utförs. Ett alternativ är att tillhandahålla en nyckel till ikonerna. Hirst (1995) lät studenter med olika nationalitet och datorvana utvärdera ett online-bibliotekssystem med olika typer av ikoner i tre storlekar. 90 % av användarna föredrog ikoner i medelstorlek (1x1 tum). Ungefär lika många tyckte att identifieringen av ikonernas funktioner orsakade problem (men när experimentet upprepades trodde många att det var en fråga om vana). Trots svårigheterna föredrog två tredjedelar ikoner framför ord som funktions- representationer eftersom de fann dem mer attraktiva och användarvänliga. De flesta tyckte dock att ikoner och ord kompletterade varandra och skulle ha föredragit ett gränssnitt där båda användes. Hirst (ibid) skriver att ikoner är bra för att de stöder mönsterigenkänning (vilket människor är bra på), är språkoberoende, minskar den mentala belastningen och det nödvändiga utrymmet för presentation av information och gör en display mer attraktivt, subjektivt sett. Han sammanfattar också effektiva ikoners attribut från olika källor: 17
  21. 21. Design av små displayer i system med begränsade inputmöjligheter • De ska vara lätta att identifiera, vilket är användarens första uppgift. Ett hus, som kan stå för ”hem”, måste första kännas igen som ett hus. Huruvida det fungerar beror på storlek, upplösning och designerns artistiska förmåga. • Därefter behöver de lätt kunna associeras med sin betydelse. Hirst refererar till Rogers (1989, i Hirst 1995), som presenterar fyra sätt som en ikon kan representera sitt underliggande koncept på: 1. Resemblance icons ger en direkt eller analog bild av funktioner eller själva konceptet, t ex en vägskylt med ”fallande stenar”. 2. Exemplar icons visar exempel på en typisk objektklass, t ex kniv och gaffel för ”restaurang” – de är de mest grundläggande attributen för vad som sker där. 3. Symbolic icons förmedlar en underliggande referent som är på en högre abstraktionsnivå än bilden själv, t ex en bild av vinglas med skada för ”omtålighet”. 4. Arbitrary icons har ingen relation till den tänkta betydelsen, utan associationen måste läras in, t ex symbolen för ”miljöfara/bio- hazard”. De väljs för att vara så unika som möjligt och behöver inte nödvändigtvis vara dåliga för att de är godtyckliga. • Vidare ska ikoner inte vara för komplexa och de ska kunna urskiljas från andra symboler. Det är dock bra med visuell konsekvens som t ex att en upp-pil liknar en ner-pil. • De ska passa olika kulturer (vara okontroversiella) och överensstämma med internationella eller andra standarder och konventioner: Om det finns existerande ikoner är det bättre att använda sådana än att hitta på nya. Helbing et al (1993) skriver om hur ikoners färg, perspektiv och detaljnivå påverkar användarpreferens, samt tid för igenkänning och sökning. De fann bl a att användare föredrog färg, 3D-vyer och en stor mängd (men inte för mycket) detaljer. Mealing & Yazdani (1990, i Sassoon & Gaur 1997) skriver att ikoner bl a bör vara grafiskt tydliga, semantiskt otvetydiga, enkla (möjligen skapade inom en matris på 32x32 pixlar), möjliga att modifiera för att uttrycka förändrad betydelse, samt inte vara kulturellt bundna. Sanders & McCormick (1992) skriver att piktogram/symboler ofta är effektiva meningsbärare och att de dessutom har den positiva effekten att man inte behöver kunna språket för att förstå en display som använder sådana. Det är dock svårt att förmedla komplexa eller abstrakta betydelser med symboler 18
  22. 22. 2 Teoribakgrund – representationella piktogram är mindre tvetydiga. Det viktigaste med en symbol är att den är identifierbar, dvs att folk kan känna igen det avbildade objektet eller konceptet och avgöra referenten. Med vissa symboler kan det vara så att symbolen lätt känns igen, men att referenten missförstås. Symbol- displayer har den fördelen framför alfanumeriska displayer att interaktionen blir snabbare och innebär mindre ”databehandling” – och under försämrade omständigheter är de mycket snabbare. 2.5 Teorisammanfattning Det är svårt att konstruera riktlinjer för skärmdesign och ett resultat kan inte automatiskt överföras till andra uppgiftsdomäner (Dillon et al 1990). Tidigare forskning har dock visat att användare troligen kan läsa och förstå text som presenterades i en enda rad med så lite som 15 tecken, men att användningen då kan vara mindre effektiv än med större displayer (Duchnicky & Kolers 1983, Jones & Marsden 1999). Användare verkar störas av den begränsade skärmstorleken vid WAP-surfning, vilket kan bero på att de har för höga förväntningar (Buchanan et al 2001). Dessa förväntningar kan sin tur bero på att stationära datorsystem har influerat mobila datorer i stor utsträckning (Dahlbom & Ljungberg 1999). Undersökningar har dock visat att användare av mobila enheter med vallistor bör klara sig tämligen väl om displayen har mer än en textrad (Jones et al 1999, Buchanan et al 2001). Mobiltelefoner som visar mer än ett val i taget (helst tre eller fler) kan till och med fungera ungefär lika bra som skrivbordsbaserade system (Marsden & Jones 2001). Användares förståelse verkar inte påverkas så mycket av displaystorleken (Duchnicky & Kolers 1983, Dillon et al 1990) och det är väldigt liten skillnad på läshastigheten vid höjdförändringar. Däremot läses rader med få tecken och låg teckendensitet långsammare än rader med hög densitet och många tecken (Duchnicky & Kolers 1983). 2.5.1 Struktur och navigering Eftersom läsbarheten på små displayer har en gräns ökar behovet av navi- gering (Marcus et al 1998) och det blir risk för mycket manipulering från användarens sida (Dillon et al 1990, Kamba et al 1996, Jones et al 1999, Jones & Marsden 1999). Scrollning är en bra accessmetod och rad-för-rad- scrollning fungerar väl både när det ord som söks är bekant och obekant (Swierenga 1990, Buyukkokten 2001). Vertikal scrollning har visat sig vara en mer användbar navigeringsmetod för en liten display på en WAP-telefon än både horisontell scrollning och paging. Det bästa strukturen för små displayer kan vara en kombination av menyer och scrollning (Buchanan et al 2001). Navigering kan underlättas av hierarkiska trädstrukturer (Buyukkokten et al 2001) men effektiviteten minskar när hierarkierna är djupa (Swierenga 19
  23. 23. Design av små displayer i system med begränsade inputmöjligheter 1990). Användare verkar vänta sig att WAP-sajters navigering ska fungera på samma sätt som hierarkiska telefonmenyer och sådana kan användas för att förbättra WAP-tjänster (Buchanan et al 2001). Mobiltelefoners hierarkiska menyer är överlägsna både kommandoradsystem och musbaserade gränssnitt, men kan ändå vara svåranvända för noviser. För att underlätta novisers genomsökning av strukturen bör systemen visa mer än ett val i taget och strukturerna bör vara konkava (Marsden & Jones 2001). Scrollning kan reduceras med hjälp av ”navigational features” på en fast plats, och genom att viktig info placeras nära en sidas topp (Jones et al 1999). Novisanvändare tenderar att fastna i mobiltelefoners wrapped menus, men det är möjligt att detta problem kan minskas genom att visa mer än ett val i taget (Marsden & Jones 2001). 2.5.2 Representation av navigering och dynamiska skeenden Menyanvändning kan också förbättras genom att ge användare visuell återkoppling med isolerade ikoner (men vissa sådana verkar inte hjälpa användbarheten, vare sig de är statiska eller animerade), kontextikoner och/eller kontextinformation (Marsden & Jones 2001). Några av de största utmaningarna med gränssnitt för mobiltelefoner var att designa grafik för att underlätta navigeringen och för att indikera status i olika situationer. Huru- vida grafik är lämpligast för sådant är tveksamt. En undersökning rörande vägvisning visade att lika många användare ville ha hjälp enbart via text som de som ville ha hjälp med pilar eller med kartor (Marcus et al 1998). Symboler och ikoner har dock många fördelar framför text. De stöder mönsterigenkänning och minskar den mentala belastningen (Sanders & McCormick 1992, Hirst 1995), är språkoberoende, ökar den subjektiva attraktionen av displayen (Hirst 1995) och är lättare att lära sig och minnas (Maguire 1990). Dessutom kan de visa komplex information på lite utrymme, vilket minskar det nödvändiga utrymmet för presentation (Maguire 1990, Tullis 1997, Hirst 1995). De mest effektiva ikonerna är de som föreställer konkreta objekt, medan abstrakta koncept är svårare att representera (Sanders & McCormick 1992, Maguire 1990, Tullis 1997). Det finns många principer för bra symboler, bl a att de ska vara ”fyllda” (Sanders & McCormick 1992), visuellt konsekventa (Löwgren 1993, Hirst 1995), grafiskt tydliga och semantiskt otvetydiga (Mealing & Yazdani 1990, i Sassoon & Gaur 1997). Många menar att enkla figurer är bra (Sanders & McCormick 1992, Hirst 1995, Mealing & Yazdani i Sassoon & Gaur 1997), men användare föredrar en hel del detaljer (Helbing et al 1993). Det är viktigt att symbolen går att identifiera och associera med sin betydelse, som kan 20
  24. 24. 2 Teoribakgrund representeras på olika sätt (Hemenway 1982, Sanders & McCormick 1992, Hirst 1995). En ikon behöver dock inte vara universellt igenkännbar, eller ha en bildassociation med sitt koncept, för att fungera väl (Sassoon & Gaur 1997), men den bör kunna skiljas från andra symboler, överensstämma med konventioner och passa olika kulturer (Hirst 1995). Navigeringsknappar med både symboler och text eller enbart text orsakar mindre förvirring än enbart symboler (King et al 1996). Även om text är ”bättre” kan grafiska symboler dock vara mer underhållande och tilltalande (Löwgren 1993). Faktiskt föredrar vissa användare ikoner framför text även om det är svårt att identifiera ikonernas funktioner. Text kan dock vara att föredra vid låg upplösning (Maguire 1990). Där statiska ikoner inte är begripliga kan dynamiska ikoner vara det, men det finns få regler för vad som gör animationer effektiva (Baecker et al 1991). I något fall har det dock visat sig att grafik kan vara mer effektivt än text, men att animerad grafik inte ökar effektiviteten (Morrison & Tversky 2000). 2.5.3 Traditionell skärmdesign När det gäller design av normalstora datorskärmar finns det en mängd forskning, och denna kan vara relevant även för små displayer (Jones et al 2000). Det är t ex mer eller mindre vedertaget att information bör placeras konsekvent på vissa specifika platser, i lagom stora och många grupper mm. Text ska på vanliga datorskärmar helst presenteras med både gemener och versaler, med ett proportionerligt sans-serif-teckensnitt på minst 8-10 punkter med mörka tecken på ljus bakgrund (Tullis 1997). Vissa saker verkar dock skilja sig åt, eftersom paging i flera fall visat sig vara bättre än scrollning, både vad gäller prestation och användarpreferens (Muter 1996), vilket motsäger Buchanan et al (2001). Markeringar av valbara eller viktiga alternativ kan fungera väl, men ska användas sparsamt och bara när rätt objekt är markerat (Tullis 1997, Sanders & McCormick 1992). 21
  25. 25. Design av små displayer i system med begränsade inputmöjligheter 3 Metod Här följer en genomgång av det praktiska arbete som utfördes: lofi-prototyper och tidiga tester, design av en hifi-prototyp, samt huvudstudien. Kapitlet inleds med en kortfattad beskrivning av det system gränssnittet var avsett för (avsnitt 3.1) och de tidiga skisser på gränssnittet som framställdes (avsnitt 3.2). Därefter beskrivs de lofi-prototyper som utvecklades och testades med slumpvis valda personer (avsnitt 3.3-3.4). Prototyptesterna syftade till att fastställa ett grundläggande upplägg för gränssnittet, samt formulera precise- rade frågeställningar för studien (avsnitt 3.5). Sedan ytterligare två mindre tester (avsnitt 3.6-3.7) hade genomförts designades en hifi-prototyp (avsnitt 3.8) för att undersöka frågeställningarna. Kapitlet avslutas med en beskriv- ning av hur denna undersökning gick till (avsnitt 3.9). 3.1 Beskrivning av systemet Systemet skulle bestå av en liten, mobil enhet som fungerade som serverdel, samt en klientdel. Användarinput i systemet skulle ske med en multi- funktionsknapp, som mekaniskt sett hade en funktion vid intryckning samt två funktioner både vid uppåt- och nedåtvridning (vid 11 respektive 21,5°), med möjlighet att införa ytterligare funktioner. Efter vridning återgick knappen till ursprungsläget. Output skulle ske på en monokrom LCD-display med en vyarea på 32,6x17,6 mm (106x56 punkter). När enheten startade skulle den börja söka efter klienter (elektronisk utrust- ning). Klienter som enheten hittade skulle användare kunna ansluta till, för att sedan verifiera att man ville aktivera dem. Minst 20 tecken skulle vara tillgängligt för att identifiera en klient och minst två rader á 16 tecken med mer specifik information om klienten när den verifierades. Verifiering skulle kunna ske med inmatning av en fyrasiffrors PIN-kod, vilket skulle gå fort (max fem sekunder). Sedan en anslutning etablerats skulle det även vara möjligt att inte verifiera den. Det skulle också gå att byta till en annan klient 22
  26. 26. 3 Metod medan en anslutning etablerades (och därmed avbryta den pågående anslut- ningen), samt välja en dittills okänd klient som hittats av sökningen. Displayen skulle indikera att 1) sökning pågick, 2) en känd eller okänd klient hittats (i det senare fallet skulle den visas sist på displayen), 3) en anslutning höll på att etableras mellan klienten och systemet, 4) anslutningen var etablerad och 5) en verifiering hade skett. Förutom dessa systemtillstånd skulle det även finnas någon form av indikator för hur mycket batterikraft som återstod. Användaren skulle också kunna ändra ett antal systeminställningar. Till dessa hörde att växla mellan vänster- och högerhänthet och välja huruvida enheten skulle fortsätta söka efter klienter sedan en anslutning etablerats. Information kring genomförda verifieringar (datum, tid och klient) skulle automatiskt arkiveras och vara åtkomlig för användaren. Systemet skulle på det stora hela uppfattas som lätt att förstå och använda och det skulle gå snabbt (max ett par minuter) att förklara dess grundläggande funktionalitet. Målgruppen för systemet var vana datoranvändare och teknikintresserade. 3.2 Tidiga skisser En tidig idé var ett symbolbaserat gränssnitt (figur 2 presenterar två varianter av sådana). En närliggande tanke var en sorts symbolisk representation med förstoring eller liknande för att representera de klienter som användaren för närvarande arbetar med (figur 3). Detta hade haft den fördelen att det inneburit att gränssnittet blivit "universellt" såtillvida att det inte varit språkberoende. Det visade sig dock olämpligt eftersom vissa möjliga klienter hade varit mycket svåra att representera symboliskt och med den relativt låga upplösningen hade det dessutom blivit problematiskt att skapa ett stort antal symboler som lätt kunde skiljas från varandra. 23
  27. 27. Design av små displayer i system med begränsade inputmöjligheter Figur 2: Skiss på symbolbaserat gränssnitt Figur 3: Skiss på symbolisk representation med förstoring För att komma tillrätta med ovanstående problem skissades det sedan på ett helt textbaserat gränssnitt med en hierarkisk meny med scrollning (figur 4). Detta är vanligt på mobiltelefoner och föreslås av Swierenga (1990), vars resultat pekar på att rad-för-rad-scrollning fungerar bra. Även Buchanan et al (2001) har funnit att vertikal scrollning är lämpligast. 24
  28. 28. 3 Metod Figur 4: Skiss på helt textbaserat gränssnitt En annan tanke var ”sökning” först och sedan presentation av alla klienter som svarat (figur 5). Detta bedömdes som olämpligt, eftersom det kunde leda till onödigt lång väntetid, om den klient användaren var intresserad av var den som systemet fann först. Dessutom riskerade det att bli desorienterande för användaren, eftersom det är möjligt att alla klienter annars inte skulle ha fått plats på displayen samtidigt. Istället beslutades att systemet skulle kunna visa klienter på två sätt. Det som verkade mest passande för att minimera des- orientering och fördröjning var att visa klienterna allteftersom de hittades. Inläsning och placering av funna klienter i ”omvänd” ordning hade visat upp en klient i taget, genom att knuffa ner alla klienter så fort en ny dök upp. Det bedömdes dock som olämpligt eftersom det riskerade att bli ännu mer desorienterande att alla klienter hela tiden bytte plats. Som en kompromiss fastställdes som den primära visningsmetoden att systemet skulle rada upp dem en och en, den ena efter den andra. Det skulle också vara möjligt att ställa in så att samtliga kända klienter istället visades från start. Med den senare inställningen skulle användaren alltså inte behöva vänta på att klienterna skulle hittas av sökningen. 25
  29. 29. Design av små displayer i system med begränsade inputmöjligheter Figur 5: Skiss där klienter visas när sökningen är klar Det bestämdes relativt tidigt att den mest passande lösningen för PIN- kodsinmatning var att användaren fick navigera genom representationer av siffrorna 0-9 (figur 6). Figur 6: Skiss på PIN-kodsinmatning 26
  30. 30. 3 Metod Horisontella displayer är det användare är mest bekanta med, från såväl mobiltelefoner som datorer och TV-apparater, och det har visat sig att minskning av displaybredd försämrar prestationen mer än minskning av displayhöjd (Duchnicky & Kolers 1983). En horisontellt orienterad display var det som förekom i de flesta skisserna, men även ett antal skisser med vertikala displayer togs fram (figur 7), och det beslutades att båda varianterna skulle undersökas i lofi-prototyper. Figur 7: Skisser på horisontella och vertikala displayer Om det senare skulle visa sig att horisontell display var mest lämpligt fastställdes redan på detta stadium antalet textrader till tre. Fyra eller fler visade sig bli alltför trångt med tanke på att statusinformation och någon form av navigeringshjälp behövde få plats. Studier har visat att det inte behövs mer än ett fåtal rader för att användare ska kunna prestera acceptabelt (Jones et al 1999, Buchanan et al 2001 m fl). En kombination av text och bild bedömdes som olämplig för att representera dynamiska skeenden, eftersom åtminstone det ena, och kanske bådadera, skulle ha blivit för smått för att klart gå att urskilja. Det beslutades alltså att statusinformation behövde vara antingen i text- eller bildform. 27
  31. 31. Design av små displayer i system med begränsade inputmöjligheter 3.3 Jämförelse av lofi-prototyper Enkla lofi-prototyper som föreställde möjliga ”skärmdumpar”, displaybilder, framställdes och undersöktes. Dessa presenterades sedan i tur och ordning för tre slumpvis utvalda personer med varierande bakgrund och ålder (från 20- till 50-årsåldern) men som alla hade viss eller stor datorvana. Testdeltagarna blev informerade om att prototyperna föreställde en sorts fjärrkontroll som kunde styra olika typer av apparater och att bilderna föreställde en monokrom display och en knapp, som kunde tryckas ner och vridas till två lägen åt två håll. De fick även en kortfattad beskrivning av de viktigaste funktionerna och ombads berätta vad de tyckte bra om, respektive mindre bra om, på var och en av prototyperna. Därefter fick de jämföra de olika uppläggen med varandra och kritisera ytterligare. Syftet var att besluta om ett grundläggande upplägg beträffande displayorientering och displayobjekt, som kunde användas i senare tester. 3.3.1 Horisontella displayer Statusinformation i symbolform i nedre kanten (figur 8): Testdeltagarna uppskattade horisontell display eftersom de ansåg att det skulle få plats mer text på en enda rad med sådana. Man tyckte också att det var bra att klienterna började listas i toppen av displayen. En deltagare menade att det var bra att det inte fanns något avdelningsstreck på dessa bilder. Pilen var begriplig och bra, men en person menade att den borde ha stannat på samma plats hela tiden, t ex längst ner i högra hörnet. Symbolerna verkade svårbegripliga. Handen kunde fungera, men i så fall menade någon att det borde vara två händer som möts. En deltagare menade att ”om symbolen inte är intuitiv är det bättre med text”. 28
  32. 32. 3 Metod Figur 8: Lofi-prototyp med horisontell display. Statusinformation i symbolform i nedre kanten Statusinformation med andra symboler i nedre kanten under en avdel- ningslinje (figur 9): De horisontella displayerna ansågs allmänt trevligare och mer tilltalande än de vertikala. Den avdelningslinje som användes för att förtydliga grupperingen, vilket enligt Löwgren (1993) kan vara nödvändigt, verkade dock störande vid horisontell display; det tycktes ta ”en himla plats”. Här användes fetstil för att markera den klient som man höll på att ansluta till. En testdeltagare menade att fetstilsmarkeringen var ”skarp” och syntes tydligt, medan de båda andra tyckte att det var för lite skillnad för att den skulle fungera som egen markering. Som komplement till en annan markering kunde den dock vara extra tydlig, men också extra irriterande – ”den ploppar ut från skärmen, liksom i relief”. Figur 9: Lofi-prototyp med horisontell display. Statusinformation med andra symboler i nedre kanten 29
  33. 33. Design av små displayer i system med begränsade inputmöjligheter Vy för inmatning av PIN med siffror ordnade i en rad (figur 10): Detta var den överlägset mest populära vyn för PIN-inmatning. En person menade att det var enklare att markera när alla siffror stod på en rad om inputmöjlig- heterna är begränsade, de andra två föredrog den av estetiska skäl. Figur 10: Lofi-prototyp med horisontell display. Vy för inmatning av PIN med siffror ordnade i en rad 3.3.2 Vertikala displayer Statusinformation i textform i övre kanten. Texten flyttar sig uppåt när det inte finns någon statusinformation (figur 11): En av deltagarna tyckte inte att det var bra att statusinformation stod längst upp från början, utan ville att klienterna skulle placeras där. Att klienterna flyttade sig uppåt när statusinformationen försvann uppskattade hon inte heller. Hon menade att om status beskrevs med text skulle den vara längst ner. En annan deltagare tyckte att det fungerade bra och att text var bättre än symboler. Hon ansåg också att den vertikala displayen var lite bättre än den horisontella, men inte mycket. Figur 11: Lofi-prototyp med vertikal display. Statusinformation i textform i övre kanten 30
  34. 34. 3 Metod Statusinformation i symbolform i nedre kanten (figur 12): Två personer var tveksamma till symbolen i figurerna 9 och 12. Den ene tyckte att även denna föreställde en sol medan den andra sade att fler skulle kunna begripa text. Den tredje deltagaren tyckte dock att den vore bra om den rörde på sig och på så sätt illustrerade ett ”skeende” tydligare. Figur 12: Lofi-prototyp med vertikal display. Statusinformation i symbolform i nedre kanten Statusinformation i textform i nedre kanten under en avdelningslinje, som försvinner när det inte finns någon statusinformation (figur 13): En person märkte varken att avdelningslinjen fanns eller att den försvann, men tyckte att det gav ett ”sammanhållet intryck” när statusinformationen var placerad längst ner. En annan ansåg att det var ”bättre, mer logiskt” att man såg längst ner om systemet sökte eller frågade. Den tredje deltagaren tyckte att det var bra att statusinformationen stod längst ner och att det var tämligen bra att den var avskild från klienterna, men att det kunde bli irriterande om den plötsligt dök upp. Därför menade hon att det antingen borde vara streck hela tiden eller inte alls. Vy för inmatning av PIN med siffror ordnade i fyra rader (figur 13): En person tyckte att streck var bra här för att det skulle vara klart avskilt. En person saknade ”Skriv in” för att det var tydligare med sådan text och menade att ”ju mer det står, desto tydligare blir det.” Figur 13: Lofi-prototyp med vertikal display. Statusinformation i textform i nedre kanten. Vy för inmatning av PIN med siffror ordnade i fyra rader 31
  35. 35. Design av små displayer i system med begränsade inputmöjligheter 3.3.3 Följder av jämförelsen De horisontella displayerna (figurerna 8-10) var på det hela taget mer omtyckta än de vertikala (figurerna 11-13), så två av de förstnämnda (figu- rerna 8 och 10) användes i nästa lofi-försök. Att deltagarna föredrog dessa underlättade utvecklingen, eftersom horisontella displayer visserligen rymmer färre klienter än vertikala (i prototypen 3-4 rader jämfört med ca 8 rader) men också har plats för betydligt fler tecken per klientnamn (ca 20 respektive ca 10 tecken). Eftersom systemet behövde ha utrymme för 20 tecken per klientnamn hade det vid vertikal display fordrats två rader per klient, vilket skulle ha minskat utrymmet och lett till en mindre tilltalande markering. Deltagarnas uppfattning av displayobjekten och deras placering låg till grund för den hifi-prototyp som senare konstruerades. 3.4 Test med lofi-prototyper Två personer utan några tidigare kunskaper om systemet (även här med viss eller stor datorvana) fick samma förklaring som i ovanstående test, med den skillnaden att systemets specifika funktioner inte avslöjades. De ombads sedan att beskriva vad de trodde hände i varje läge (dvs på varje displaybild) eller vad som hade förändrats sedan förra läget. Deltagarna fick under testets gång se tidigare, men inte kommande lägen. Syftet var att undersöka den grundläggande interaktionen med systemet och utröna om de faktorer som identifierats som viktiga i tidigare studier (se avsnitt 2.5) var relevanta även för detta system. Resultaten skulle i sin tur leda till preciserade fråge- ställningar. Prototyptesternas resultat, som beskrivs nedan, överensstämmer väl med tidigare studier. Några av de faktorer som verkar viktiga för att ett system av den här typen ska kunna användas på en liten display är representation av dynamiska skeenden och navigering, samt markeringar. Dessa aspekter verkar därför fruktbara att utforska i större utsträckning. 3.4.1 Representation av dynamiska skeenden I lofi-prototypen användes statiska symboler för funktionerna ”söker efter klienter” och ”ansluter till en klient”. Symbolerna var tämligen godtyckliga – för ”söker” användes en symbol som enligt symbols.com (2001) har betydelsen searchlight/comet, medan ”ansluter” illustrerades med en utsträckt hand. Den ena testdeltagaren trodde att ”söker”-symbolen (figur 8) betydde ”strålkastare” eller i alla fall någon form av belysning. Detta berodde delvis på att symbolen såg ut att sända ut i en enda riktning. Några minuter senare bytte testdeltagaren uppfattning av symbolen och trodde att den betydde ”inkopplad/ström” och att systemet nu kunde ta emot kommandon. Även den 32
  36. 36. 3 Metod andra testdeltagaren, som kallade symbolen för ”sol”, noterade att symbolen ”pekar i en enda riktning” och trodde att den betydde att produkten var avstängd. För att en liknande symbol skulle kunna användas för funktionen borde den därför kanske se ut att sända i flera riktningar. Handen som användes för ”ansluter” (figur 8) antogs av ena testdeltagaren betyda ”hand- havande” och den andra antog att den betydde att användaren kunde trycka ner och därmed stänga av. Om symboler ska användas bör de möjligen vara animerade för att tydligare förmedla sin betydelse, i ”söker”-symbolens fall att det inte är frågan om en specifik ”utsändning” av t ex ljus. 3.4.2 Representation av navigering För att visa att det var möjligt att komma åt klienter utöver de som för tillfället syntes på displayen användes pilar som pekade uppåt respektive nedåt. Vid förfrågan antog en av testdeltagarna mycket riktigt att den nedåtpekande pilsymbolen betydde att användaren ska ”trycka nedåt för att välja [en annan klient]”. En annan förstod inte alls vad pilarna kunde betyda. Hur navigeringen bör representeras på displayen verkar vara en intressant fråga. 3.4.3 Markeringar Valda klienter markerades med en ram runt omkring. En testdeltagare antog att ramen betydde att det var den klienten man kunde arbeta med, medan den andra trodde att klienten nu var aktiverad. Detta verkar tyda på att två olika markeringar kan behövas för att skilja dessa båda betydelser åt. För att ”få ner” rutan från ”TV” till ”Video” trodde en testdeltagare att någon form av tryckning behövdes. Den andra trodde att förflyttning skedde genom att först trycka ner knappen och sedan vrida åt det håll man vill ha markören. På PIN-kodsdelen av testet utgick den ena testdeltagaren från att förflyttning av markeringen från en siffra till en annan åstadkoms genom att ”bläddra på något vis”. Det var uppenbart att systemet när siffran 1 var markerad frågade ”vill du skriva in en etta?”. Testdeltagaren hade dock vissa problem med att förstå vilka siffror som ”matats in” på varje displaybild. Efter att ha fått höra exemplets korrekta PIN-kod var trodde testdeltagaren dock att han hade blivit ”lurad av att skärmdumparna [sågs i] omvänd” ordning, alltså att han upplevde det som att något skedde mellan övre och nedre halvan av en displaybild, vilket inte var fallet. Den andra deltagaren upplevde PIN- kodsdelen av testet som betydligt mer intuitiv än första delen och gick snabbt igenom den. Testdeltagaren trodde att man måste markera en siffra med hjälp av inputknappen för att välja den, utpekade genomgående ”rätt” siffra som 33
  37. 37. Design av små displayer i system med begränsade inputmöjligheter markerad på varje displaybild och konstaterade direkt vilken den korrekta PIN-koden var. 3.5 Frågeställningar Utifrån litteraturstudien och resultaten av lofi-undersökningarna formulerades mer preciserade frågeställningar för studien. Den övergripande frågan är: • Hur bör ett gränssnitt för en liten display vara utformat så att det är lätt att utföra enkla uppgifter? (Till dessa uppgifter hör att aktivera klienter, ändra vissa systeminställningar och utföra inmatning av tecken.) Denna kan delas in i två huvudsakliga underfrågor: • Hur bör systemet vara strukturerat så att navigering (förflyttning) och användarinput uppfattas som enkla att förstå och utföra? • Vilka typer av visuell representation är lämpliga på en liten display? Den senare frågan kan i sin tur delas in i ett antal mer specifika frågor: • Hur bör dynamiska skeenden representeras så att de uppskattas av användare? (I vissa fall föredrar användare text framför symboler, i andra tvärtom – vilkendera föredras här? Spelar det någon roll om representationen är animerad eller statisk?) • Hur bör valbara objekt markeras? • Hur bör navigering representeras? 3.6 Markeringstest En markeringsjämförelse genomfördes för att se hur de tre deltagare som jämfört lofi-prototyper (avsnitt 3.3) uppfattade olika typer av markeringar på en liten display, som presenterades på en vanlig datorskärm. Tullis (1997) föreslår som tidigare nämnts bl a färg, ljusstyrka, fetstil, understrykningar och reverse video. Samtliga utom den sistnämnda bedömdes som olämpliga av olika skäl. Skillnader i färg och ljusstyrka var i detta fall omöjligt eller svåranvänt eftersom displayen var monokrom. Fetstil ströks eftersom två av de tre deltagarna i prototyptesterna ogillade den. Olika typer av understryk- ning verkade opassande eftersom markeringen var tänkt att utskilja något ur en vertikal lista och en sådan markering då riskerade att göra det aningen otydligt vilken klient som åsyftades. Ytterligare en typ av markering som övervägdes var versaler. Även denna ströks dock på planeringsstadiet, eftersom klienter därmed inte kunde skrivas i versaler från start (som t ex ”TV”). De markeringar som testades var prick framför klienten, kursiv stil, 34
  38. 38. 3 Metod reverse video samt en ruta. Eftersom den första deltagaren ansåg att marke- ringen vid reverse video syntes bra, men texten blev svårläst breddades markeringen på såväl reverse video- som rutmarkeringen, varpå testet upprepades. Att en sådan buffer zone kan behövas noteras av Tullis (ibid). Figur 14 återger de markeringar som testades. I tabell 2 återges representativa citat för deltagarnas respektive omdömen av de fyra markeringarna. Figur 14: Markeringar (prick framför, kursiv stil, reverse video och ruta) Prick framför Kursiv stil Ruta Reverse video Deltagare 1 ”Rätt bra […] ”Syns när ”Mest läsbar ”Markeringen skulle kunna man klickar […] bäst […] syns bättre än vara en till, men på med ruta […] här stör det prick” grund av stor- inte att rutan för lång ram, leken syns det är större än bara ordet ska dåligt sen […] orden för vara markerat sämst för den […] lyser orden ’fyller syns inte bra” upp” upp’ rutan olika mycket” Deltagare 2 ”Värdelös ”Dålig, märks ”Rätt bra […] ”Bäst […] ger […] sämst… för dåligt” frågan är mest” syns för vilken som är dåligt” bäst av den och rutan” Deltagare 3 ”Tycker om ”Syns för lite ”Okej, men ”Helt okej, den […] liten, skillnad, syns sämre än syns tydligt” diskret och sämst […] rutan […] syns tydligt… alla andra är syns tydligt” favorit” gångbara” Tabell 2: Deltagarnas kommentarer om markeringarna Sammanfattningsvis visade markeringstestet att rutan var mest uppskattad och att kursiv stil ansågs sämst, medan reverse video ansågs tämligen bra och prick tämligen dålig. En testdeltagare föreslog att rutan kunde användas som markering innan något ”valts” och reverse video efteråt. Just detta användes i 35
  39. 39. Design av små displayer i system med begränsade inputmöjligheter huvudstudien, där även en kortare ruta som deltagare 1 föreslog vid reverse video, testades. 3.7 Illustration av dynamiska skeenden Fyra personer (de tre deltagarna i jämförelsetesten, samt ytterligare en datorvan person) ombads illustrera tre begrepp med papper och penna, medan de beskrev hur de föreställde sig dessa. Begreppen var ”sökning pågår” (i betydelsen ”anrop”, inte sökning efter en specifik fil eller liknande), ”anslut- ning pågår” samt ”batteri/kraftmängd”. Det sistnämnda kan egentligen inte sägas vara ett dynamiskt skeende, men det behandlas i uppsatsen tillsammans med de två begreppen, eftersom det i likhet med dessa handlar om en typ av statusinformation som kan representeras både i text- och symbolform. Syftet med illustrationerna var att undersöka hur användare tycker att dynamiska skeenden bör representeras. Teckningsmomentet var huvud- sakligen till för att deltagarna lättare skulle kunna visualisera sina tankar (och beskriva den bildassociation de fick av begreppet). Sanders & McCormick (1992) anger direkt utfrågning av deltagare om deras preferenser och uppfattning som en möjlig metod för att avgöra hur starka symbolers associationer är. (En annan metod, recognition, används i huvudstudien – deltagarna tillfrågas om vad symboler betyder.) Figurerna 15, 16 och 17 är sammanfattande avritningar av deltagarnas illustrationer. 3.7.1 Sökning pågår Här ritade deltagarna olika saker, men flera hade ändå gemensamma element. Två stycken (15a & b) visar någott runt i mitten, med någon sorts rörelse utåt, vilket ger runda vågor. Ett annat förslag (15c) var ett blinkande öga (dyna- miskt), eller en ficklampa – ”visuell sökning i skogen” sade deltagaren att bilden skulle föreställa. Nästa bild (15d) avbildar ett förstoringsglas, eller en radiomast som sänder ut en signal. De flesta av bilderna innehåller en direkt illustration av rörelse – vågor, ljusstråle, radiosändning – som utgår från den huvudsakliga bilden. a b c d Figur 15: Illustrationer av ”sökning pågår” 36
  40. 40. 3 Metod 3.7.2 Anslutning pågår En person ritade ”en sladd som rör sig” (16a), en annan samma sak och ett timglas (16d). Ytterligare en deltagare ritade ena änden av en sladd, en blixtsymbol och också två händer som möts (16c) (en hand fanns med i en av lofi-prototyperna). En annan deltagare tyckte att ”något som blinkar” var lämpligt (16b), alltså en dynamisk representation. a b c d Figur 16: Illustrationer av ”anslutning pågår” 3.7.3 Batteri/kraftmängd Dessa illustrationer var snarlika. Två personer ritade en ”kraftlednings- symbol” – blixt och batteri (17a & b). En person ritade ett batteri och menade att det skulle vara ”mest kraft när det är fullt vid pluspolen” som är till höger i bild (17c). Detta syns tydligt på den fjärde bilden (17d), men här är kraften inte ”enheter” utan en viss mängd. Dessutom är illustrationen stående och liknar mer en behållare med vätska. Pluspolen är riktad uppåt. a b c d Figur 17: Illustrationer av ”batteri/kraftkälla” 3.8 Design av hifi-prototyp Baserat på resultaten av lofi-testerna och litteraturstudien konstruerades en hifi-prototyp. För prototypens text användes, i enlighet med Tullis (1997), ett sans-serif-teckensnitt på 9 punkter. Teckensnittet var dock fixed-width istället för proportionerligt för att garantera att 20 tecken alltid skulle få plats. En menystruktur med scrollning användes (figur 18). Sedan inläsning av klienter avslutats var alla klienter omarkerade (figur 18a), så att aktiv input från användaren krävdes för att få fram markeringen. Vilken input som helst innebar att det första alternativet markerades (figur 18b). Loopning (wrapped 37
  41. 41. Design av små displayer i system med begränsade inputmöjligheter menus) användes, vilket innebar att förflyttning nedåt från figur 18d innebar en återgång till figur 18b. a b c d Figur 18: Menystruktur med scrollning 3.8.1 Placering av Settings Eftersom inställningar var något som relativt sällan behövde användas (jämfört med klienterna) och därför kunde sägas ”slösa utrymme” övervägdes möjligheten att ha det ”gömt” på något sätt, dvs inte ha det som ett valbart alternativ på displayen. Detta bedömdes dock som onödigt komplicerat. Istället beslutades det att placera Settings först på menyn vid start (figur 19a), så att alternativet omedelbart kunde väljas om det var vad användaren var ute efter, och låta menyalternativet ”knuffas ner” allteftersom klienter lästes in och placerades efter varandra (figur 19). På så sätt var det inte i vägen i den dagliga användningen, men eftersom det alltid var placerat sist i menyn var det lätt att hitta när det behövdes. a b c d Figur 19: Placering av Settings 38
  42. 42. 3 Metod 3.8.2 Användarinput Den knapp som skulle användas för input i systemet hade mekaniskt sett en funktion vid nertryckning samt två åt varje håll vid vridning (vid 11° respektive 21,5°). Det fanns dock möjlighet att införa ytterligare funktioner, exempelvis hålla knappen nedtryckt en viss tid. I den huvudsakliga, scenario- baserade, delen av hifi-prototypen användes enbart tre ”huvudfunktioner”. Här fanns åtminstone tre logiska möjligheter till interaktion: 1. Navigering (förflyttning av markeringen) med knapptryckning, accep- tera ett val med knapptryckning 2. Navigering med vridning (klickning uppåt/nedåt), acceptera ett val med knapptryckning 3. Navigering med vridning (kontinuerligt intryckt), acceptera ett val med knapptryckning Det andra alternativet valdes för hifi-prototypen, därför att det verkade mer intuitivt att en tryckning användes enbart för att bekräfta något. Därmed skilde det sig tydligt åt från själva navigeringen och felrisken minimerades. Eftersom det tredje alternativet kan ses som en ”utvidgning” av det andra alternativet bedömdes det andra alternativet som mest lämpligt att testa. Det tredje kunde istället diskuteras med testdeltagare för att möjligen användas om det andra alternativet uppfattades som otillräckligt. I hifi-prototypen representerades samtliga funktioner av en knapp med olika klickbara ytor som motsvarade förflyttning uppåt respektive nedåt, samt vanlig ”knapptryckning”. Eftersom knappen kunde ha upp till fem funktioner hade dock fler kunnat användas. Två sådana möjligheter testades separat, som alternativa navigeringsvarianter, i försöket. 3.8.3 Markeringar De markeringar som fick bäst resultat i omdömestestet valdes till hifi- prototypen. Lofi-testerna visade att rammarkering var begripligt och mest populärt, varför det användes för att visa att något hade valts (som i figur 18), medan reverse video användes för att visa att en anslutning till denna klient höll på att ske (figur 20a). Även en kortare version av ramen framställdes för att kunna undersökas (figur 21). a b Figur 20: Anslutning till en klient 39
  43. 43. Design av små displayer i system med begränsade inputmöjligheter Figur 21: Kortare version av rammarkeringen När anslutning hade skett fick användaren mer detaljerad information av vad klienten var, tillsammans med en förfrågan om han ville aktivera den (figur 20b). Användaren skulle trycka på knappen för att gå vidare till verifiering (med t ex PIN-kod), eller vrida åt någondera hållet för att återgå till läget före anslutning (i detta fall till figur 18b). 3.8.4 Placering av statusinformation och avdelningslinje De flesta av lofi-testdeltagarna tyckte att det var bättre och mer ”logiskt” med statusinformation längst ner på displayen. De flesta verkade föredra att det inte var någon avdelningslinje mellan statusinformation (och navigerings- representation) och klienter/menyalternativ. Detta genomfördes därför i hifi- prototypen. Eftersom resultatet av lofi-testerna dock inte var entydigt – vissa hade motsatta åsikter och flera deltagare var tveksamma – testades både statusinformation överst (figur 22a) och en avdelningslinje som alternativa vyer (figur 22b). a b Figur 22: Statusinformation överst (a) och under en avdelningslinje (b) 3.8.5 Representation av navigering En ”rullningslist” (ej direkt manövrerbar) för indikering av position över- vägdes, men ströks på designstadiet därför att en sådan skulle ha tagit utrymme ifrån klienterna (dvs 20 tecken per klient) och inneburit att man hade fått minska teckensnittet. Lofi-testerna visade att hörnpilar för att indikera att det fanns fler klienter än de som för närvarande syntes på displayen var begripligt för de allra flesta (men inte samtliga). En åsikt som kom fram var dock att de borde ha stannat på samma plats hela tiden, t ex i nedre högra hörnet. Detta genomfördes i hifi-prototypen, eftersom det också sparade utrymme att ha pil enbart på samma rad som upptogs av statusinformation. För att visa att det fanns klienter både ovanför och nedanför de som syntes i 40
  44. 44. 3 Metod displayen användes en dubbelpil (som pekade åt båda hållen), också den i nedre högra hörnet (figur 23 visar en vy i Inställningar, där dubbelpilen kom till användning). Figur 23: Dubbelpil som representation av navigering Eftersom lofi-testerna inte var odelat positiva till pilarna användes även en alternativ representationsmetod, nämligen numrering av varje enskild klient samt redovisning av hur många klienter det fanns totalt i en meny (figur 24). Figur 24: Numrering som representation av navigering 3.8.6 Representation av dynamiska skeenden Fem skilda representationer av skeendena ”sökning” och ”anslutning” ska- pades – en med statisk text, två med animerad text, en med statiska symboler och en med animerade symboler. Statisk text: Denna visade texten Scanning eller Connecting följt av tre punkter (figur 25). Figur 25: Statisk text Diskret textanimation: Tre punkter tillades stegvis efter texten Scanning eller Connecting. Efter att de tre punkterna var på plats (figur 26d – identisk med figur 25) började animationen om igen (figur 26a). Varje steg i anima- tionen visades i 50/100-dels sekund. 41

×