Embed Size (px)
Citation preview
1
Interaktionsdesign 1MD115
Design av användargränssnitt
Jan Gulliksen
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Skärmdisposition och layout
Skärmytan är en begränsad resurs
Behövs verkligen all information som finns på sidan?
Hellre för mycket information än för lite
Samtidig informationsvisning kontra sekvensiell
Överblick och detalj
Metaforer
Kollisionen mellan hypertext och skrivbordsmetaforen- eller vem har fönster på sitt skrivbord?
Mönsterigenkänning
Undvik att rulla text – tag vara på spatial information
2
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Vilken information är viktig?In
sti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Inmatning
Mänsklig inmatning är en långsam process
Typiska uppgifterKan användaren överhuvudtaget göra uppgiften?
Hur lång tid tar det?
Hur mycket tid är väntetid och hur mycket tänketid?
Hur mycket fel gör användaren?
Kan man återhämta sig fullständigt från felen?
Hur lång tid tar det att återhämta sig?
Hur pass säker är användaren på att man kommit fram till rättresultat?
etc.
Hur tillfredsställande upplever användaren att det är?
3
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Vad skulle ni mata in här?In
sti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Bra eller dåligt?
4
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Hur kan informationen kodas bättre?
South Carolina
City Motel/Hotel Phone Singlerate
Doublerate
Charleston Best Western 883-747-8961 $ 26 $ 38Charleston Days Inn 883-881-1888 $ 18 $ 24Charleston Holiday Inn N 883-744-1621 $ 36 $ 46Charleston Holiday Inn SW 883-556-7188 $ 33 $ 47Charleston Howard Johnsons 883-524-4148 $ 31 $ 36Charleston Ramada Inn 883-774-8281 $ 33 $ 46Charleston Sheraton Inn 883-744-2481 $ 34 $ 42
Columbia Best Western 883-796-9488 $ 29 $ 34Columbia Carolina Inn 883-799-8288 $ 42 $ 48Columbia Days Inn 883-736-8888 $ 23 $ 27Columbia Holiday Inn NW 883-794-9448 $ 32 $ 39Columbia Howard Johnsons 883-772-7208 $ 25 $ 27Columbia Quality Inn 883-772-8278 $ 34 $ 41Columbia Ramada Inn 883-796-2788 $ 36 $ 44Columbia Vagabond Inn 883-796-6248 $ 27 $ 38
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Förbättrad design
RatesS D Motel/Hotel Phone
Charleston South Carolina
18 24 Days Inn 883-881-188829 34 Best Western 883-796-948831 36 Howard Johnsons 883-524-414833 46 Ramada Inn 883-774-828133 47 Holiday Inn SW 883-556-718834 42 Sheraton Inn 883-744-248136 46 Holiday Inn N 883-744-1621
Columbia South Carolina
23 27 Days Inn 883-736-888825 27 Howard Johnsons 883-772-720827 30 Vagabond Inn 883-796-624829 34 Best Western 883-796-948832 39 Holiday Inn NW 883-794-944834 41 Quality Inn 883-772-827836 44 Ramada Inn 883-796-278842 48 Carolina Inn 883-799-8288
5
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Ytterligare förbättringar
RatesS D Motel/Hotel Phone
Charleston South Carolina
18 24 Days Inn 883-881-188829 34 Best Western 883-796-948831 36 Howard Johnsons 883-524-414833 46 Ramada Inn 883-774-828133 47 Holiday Inn SW 883-556-718834 42 Sheraton Inn 883-744-248136 46 Holiday Inn N 883-744-1621
Columbia South Carolina
23 27 Days Inn 883-736-888825 27 Howard Johnsons 883-772-720827 30 Vagabond Inn 883-796-624829 34 Best Western 883-796-948832 39 Holiday Inn NW 883-794-944834 41 Quality Inn 883-772-827836 44 Ramada Inn 883-796-278842 48 Carolina Inn 883-799-8288
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Läsbarhet och Layout
Logisk gruppering av data
Gruppera med närhet, färger, fonter och ramar
Avläsning i kolumner där varje tecken tar lika storplats
Läsbara fonter
Betona det väsentliga
Färganvändning
Estetiskt tilltalande
6
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
AlignmentsIn
sti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Informationskodning
Ge färger, former, fonter, platserbetydelse
Aktivt, valbart, ej valbart
Avvikande data, relationer mellan data,kategorisera, etc..
Var konsekvent
Starka koder för viktig information
Lås val av koder
Använd starka koder sparsamt
7
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Kodning av feber
38,82°C
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Återkoppling, felmeddelanden
Att visa vad som händer
Viktigt för säkerhet
Tangentnedtryckning, väntetid, vilkettillstånd
Tydliga, informativa felmeddelanden
8
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Exempel på ej informativafelmeddelanden
Ett fel av typen 3 inträffade.
Ogiltigt värde.
Otillåten handling.
Programmet ”okänd” har avslutats pågrund av ett oväntat fel.
Illegal error.
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
FATAL
ERROR!
illegal operation
File not
found
OBJECT NOT FOUND
9
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
10
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Knappar och ikoner
Bra om ikonen är självförklarande
Bättre med enkla än detaljrika ikoner
Gruppera logiskt
Konsekvens vad gäller utseende-funktion
Tillräcklig träffyta
Knappar som används i sekvens nära varandra
Sammanhanget är viktigt
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
11
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Vad betyder följande ikoner?
12
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Några riktlinjer för design
Utnyttja skärmytan effektivt, hellre för mycket än förlitet
Samtidig informationsvisning alltid effektivare änsekventiell information
Minimera inmatning
Gör designen klar och begränsa användarens frihet.
Skapa effektiva informationsmönster
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Ytterligare designregler
Betona intressant, tona ned oviktigt.
Visa översikt och detalj samtidigt
Undvik skrollning av text
Det finns ingen kunskap i världen somkan ersätta användarsynpunkter
13
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
HAIKU by Else Nygren
”For every design rule
one can find
at least one situation
where following the rule
would be
sheer madness”
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Standarder och riktlinjer
Standarder är riktlinjer som formaliseraseftersom de anses som tillräckligt viktigaoch använda
Riktlinjer (Guidelines) är vägledande vidlösning av designproblem
14
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Standarder
De Facto (emacs, QWERTY, TCO-95)
Kommersiella (Microsoft, IBM CUA, OSF/Motif)
Formella (ANSI kompilatorer, Fortran77)
Gränssnittsstandarder baseras på användbarhet ochbeteende, inte på produkttekniska aspekter.
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Standardiseringsorgan
ISO (International Standards Organisation)
ideell organisation, medlemmarna betalar för att fåvara med.
Nationella motsvarigheter STG (Sverige), ANSI (USA),BSI (England), etc.
genomför, kommenterar ISO-standarderna
15
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Internationella standarder
ISO 9241 Ergonomic requirements for officework with visual display terminals. Del 1-17
Part 10 – Dialogue design principlesPart 11 – Guidance on usability,Part 12 – Presentation of information.
ISO 13407 Human centred design process forinteractive systems.ISO/IEC 14915 Multimedia user interfacedesign.ISO/TS 16071 Guidance on softwareaccessibility.ISO/IEC 11581 Icon symbols and functions.
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
ISO 6385 Ergonomic principlesin the design of work system
Ergonomics produces and integratesknowledge from the human and technology
sciences to match jobs, systems, productsand environments to the physical and mentalabilities and limitations of people. In doing soit seeks to safeguard safety, health and well-being whilst optimising efficiency andperformance
16
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Scenario
En fritextformulering av ett händelseförlopp ien användningssituation, användbar föranalys, design och utvärdering.
Ett medel som användarna förstår bättre änalla dessa formella modeller.
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Storyboards
En grafisk beskrivning av ett systemstilltänkta uppenbarelse utan någon somhelst funktionalitet
Billiga mock-ups eller mer avanceradvisualisering
Filmer
17
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Designuppgift 4
Hur intuitiva är de strömbrytare förbelysning som ni finner i lokalerna?
Skissa på en användbar lösning på enströmbrytare.
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
18
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Designuppgift 5
Skissa på en intuitiv presentation avavgående och ankommande flyg på enflygplats.
Hur ser det ut i verkligheten?
Ins
titu
tio
ne
n f
ör
info
rma
tio
ns
tek
no
log
i
06-04-09Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Designuppgift 6
Användare utökar sällan den uppsättningfunktioner som de använder i ett system.Skissa på en lösning hur man skullekunna utöka användarens kunskap omvad han/hon kan göra.
Vad finns idag? Är det bra?
