SlideShare a Scribd company logo
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 ä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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

More Related Content

Viewers also liked

BESÖK - Styrgrupp 6 mars 2012
BESÖK - Styrgrupp 6 mars 2012BESÖK - Styrgrupp 6 mars 2012
BESÖK - Styrgrupp 6 mars 2012Niclas Siljedahl
 
Pres: que es una wiki
Pres: que es una wikiPres: que es una wiki
Pres: que es una wiki
chelosblues
 
Violencia intrafamiliar
Violencia intrafamiliarViolencia intrafamiliar
Violencia intrafamiliar
JDRV33
 
BESÖK: Basutbildning i tillgänglighet 6 sep 2012
BESÖK: Basutbildning i tillgänglighet 6 sep 2012BESÖK: Basutbildning i tillgänglighet 6 sep 2012
BESÖK: Basutbildning i tillgänglighet 6 sep 2012
Niclas Siljedahl
 
Alejandra Teorias
Alejandra TeoriasAlejandra Teorias
Alejandra Teorias
guestd92e92e1
 
BESÖK: Projekt Synliggör biblioteket 17 sep 2012
BESÖK: Projekt Synliggör biblioteket 17 sep 2012BESÖK: Projekt Synliggör biblioteket 17 sep 2012
BESÖK: Projekt Synliggör biblioteket 17 sep 2012
Niclas Siljedahl
 
CTU June 2011 - Opalis: Orchestrating your Data Center
CTU June 2011 - Opalis: Orchestrating your Data CenterCTU June 2011 - Opalis: Orchestrating your Data Center
CTU June 2011 - Opalis: Orchestrating your Data Center
Spiffy
 
La wed 2.0.3216+5
La wed 2.0.3216+5La wed 2.0.3216+5
La wed 2.0.3216+5
RICHARD_ANANCOLLA
 
TechEd_OFC305
TechEd_OFC305TechEd_OFC305
TechEd_OFC305
Rodolfo Roim
 
Game Changer Final
Game Changer FinalGame Changer Final
Game Changer Final
The Wolfsonian-FIU
 
Curso sig basico_i
Curso sig basico_iCurso sig basico_i
Curso sig basico_i
monasio
 

Viewers also liked (11)

BESÖK - Styrgrupp 6 mars 2012
BESÖK - Styrgrupp 6 mars 2012BESÖK - Styrgrupp 6 mars 2012
BESÖK - Styrgrupp 6 mars 2012
 
Pres: que es una wiki
Pres: que es una wikiPres: que es una wiki
Pres: que es una wiki
 
Violencia intrafamiliar
Violencia intrafamiliarViolencia intrafamiliar
Violencia intrafamiliar
 
BESÖK: Basutbildning i tillgänglighet 6 sep 2012
BESÖK: Basutbildning i tillgänglighet 6 sep 2012BESÖK: Basutbildning i tillgänglighet 6 sep 2012
BESÖK: Basutbildning i tillgänglighet 6 sep 2012
 
Alejandra Teorias
Alejandra TeoriasAlejandra Teorias
Alejandra Teorias
 
BESÖK: Projekt Synliggör biblioteket 17 sep 2012
BESÖK: Projekt Synliggör biblioteket 17 sep 2012BESÖK: Projekt Synliggör biblioteket 17 sep 2012
BESÖK: Projekt Synliggör biblioteket 17 sep 2012
 
CTU June 2011 - Opalis: Orchestrating your Data Center
CTU June 2011 - Opalis: Orchestrating your Data CenterCTU June 2011 - Opalis: Orchestrating your Data Center
CTU June 2011 - Opalis: Orchestrating your Data Center
 
La wed 2.0.3216+5
La wed 2.0.3216+5La wed 2.0.3216+5
La wed 2.0.3216+5
 
TechEd_OFC305
TechEd_OFC305TechEd_OFC305
TechEd_OFC305
 
Game Changer Final
Game Changer FinalGame Changer Final
Game Changer Final
 
Curso sig basico_i
Curso sig basico_iCurso sig basico_i
Curso sig basico_i
 

More from Niclas Siljedahl

Serieprat
SeriepratSerieprat
Serieprat
Niclas Siljedahl
 
BESÖK: Jämställdhetsintegrering 7 sep 2012
BESÖK: Jämställdhetsintegrering 7 sep 2012BESÖK: Jämställdhetsintegrering 7 sep 2012
BESÖK: Jämställdhetsintegrering 7 sep 2012
Niclas Siljedahl
 
BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011
BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011
BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011Niclas Siljedahl
 
BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011
 BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011 BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011
BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011Niclas Siljedahl
 
BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011
BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011
BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011Niclas Siljedahl
 
BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011
BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011
BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011Niclas Siljedahl
 
BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011
BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011
BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011Niclas Siljedahl
 
BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011
BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011
BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011Niclas Siljedahl
 
BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011
BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011
BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011Niclas Siljedahl
 
BESÖK - Chefsmöte 12 okt 2011
BESÖK - Chefsmöte 12 okt 2011BESÖK - Chefsmöte 12 okt 2011
BESÖK - Chefsmöte 12 okt 2011
Niclas Siljedahl
 
Digitalisering och kopiering: Om musik, e-böcker, fildelning och nutiden
Digitalisering och kopiering: Om musik, e-böcker, fildelning och nutidenDigitalisering och kopiering: Om musik, e-böcker, fildelning och nutiden
Digitalisering och kopiering: Om musik, e-böcker, fildelning och nutiden
Niclas Siljedahl
 
Användningstester med barn
Användningstester med barnAnvändningstester med barn
Användningstester med barn
Niclas Siljedahl
 
Bibliotekspersonalens trygghet med teknik
Bibliotekspersonalens trygghet med teknikBibliotekspersonalens trygghet med teknik
Bibliotekspersonalens trygghet med teknik
Niclas Siljedahl
 
Distansutbildning och arbetsplatslärande
Distansutbildning och arbetsplatslärandeDistansutbildning och arbetsplatslärande
Distansutbildning och arbetsplatslärande
Niclas Siljedahl
 
IT-utbildning 2010
IT-utbildning 2010IT-utbildning 2010
IT-utbildning 2010
Niclas Siljedahl
 
Att göra användningstester
Att göra användningstesterAtt göra användningstester
Att göra användningstester
Niclas Siljedahl
 
Om serier
Om serierOm serier
Om serier
Niclas Siljedahl
 
Fildelning
FildelningFildelning
Fildelning
Niclas Siljedahl
 

More from Niclas Siljedahl (19)

Serieprat
SeriepratSerieprat
Serieprat
 
BESÖK: Jämställdhetsintegrering 7 sep 2012
BESÖK: Jämställdhetsintegrering 7 sep 2012BESÖK: Jämställdhetsintegrering 7 sep 2012
BESÖK: Jämställdhetsintegrering 7 sep 2012
 
SWOT Kinda (12 dec 2011)
SWOT Kinda (12 dec 2011)SWOT Kinda (12 dec 2011)
SWOT Kinda (12 dec 2011)
 
BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011
BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011
BESÖK - SWOT-intro för Länsbibliotek Östergötland 20 dec 2011
 
BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011
 BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011 BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011
BESÖK - SWOT-intro för Söderköpings bibliotek 14 dec 2011
 
BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011
BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011
BESÖK - SWOT-intro för Motala bibliotek 7 dec 2011
 
BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011
BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011
BESÖK - SWOT-intro för Finspångs bibliotek 6 dec 2011
 
BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011
BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011
BESÖK - SWOT-intro för Vadstena bibliotek 5 dec 2011
 
BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011
BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011
BESÖK - SWOT-intro för Norrköpings stadsbibliotek 21 nov 2011
 
BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011
BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011
BESÖK - SWOT-intro för Mjölby bibliotek 16 nov 2011
 
BESÖK - Chefsmöte 12 okt 2011
BESÖK - Chefsmöte 12 okt 2011BESÖK - Chefsmöte 12 okt 2011
BESÖK - Chefsmöte 12 okt 2011
 
Digitalisering och kopiering: Om musik, e-böcker, fildelning och nutiden
Digitalisering och kopiering: Om musik, e-böcker, fildelning och nutidenDigitalisering och kopiering: Om musik, e-böcker, fildelning och nutiden
Digitalisering och kopiering: Om musik, e-böcker, fildelning och nutiden
 
Användningstester med barn
Användningstester med barnAnvändningstester med barn
Användningstester med barn
 
Bibliotekspersonalens trygghet med teknik
Bibliotekspersonalens trygghet med teknikBibliotekspersonalens trygghet med teknik
Bibliotekspersonalens trygghet med teknik
 
Distansutbildning och arbetsplatslärande
Distansutbildning och arbetsplatslärandeDistansutbildning och arbetsplatslärande
Distansutbildning och arbetsplatslärande
 
IT-utbildning 2010
IT-utbildning 2010IT-utbildning 2010
IT-utbildning 2010
 
Att göra användningstester
Att göra användningstesterAtt göra användningstester
Att göra användningstester
 
Om serier
Om serierOm serier
Om serier
 
Fildelning
FildelningFildelning
Fildelning
 

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

  • 1. Design av små displayer i system med begränsade inputmöjligheter Niclas Siljedahl
  • 2.
  • 3. 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.
  • 4.
  • 5. 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
  • 6.
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. 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