Inmatning - Uppsala University...De Facto (emacs, QWERTY, TCO-95) Kommersiella (Microsoft, IBM CUA,...
6
1 Interaktionsdesign 1MD115 Design av användargränssnitt Jan Gulliksen Interaktionsdesign Informationsteknologi 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 Interaktionsdesign Informationsteknologi Institutionen för informationsteknologi Vilken information är viktig? Interaktionsdesign Informationsteknologi Institutionen för informationsteknologi Inmatning Mänsklig inmatning är en långsam process Typiska uppgifter Kan 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ätt resultat? etc. Hur tillfredsställande upplever användaren att det är? Interaktionsdesign Informationsteknologi Institutionen för informationsteknologi Vad skulle ni mata in här? Interaktionsdesign Informationsteknologi Institutionen för informationsteknologi Bra eller dåligt?
Transcript of Inmatning - Uppsala University...De Facto (emacs, QWERTY, TCO-95) Kommersiella (Microsoft, IBM CUA,...
1
Interaktionsdesign 1MD115
Design av användargränssnitt
Jan Gulliksen
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Vilken information är viktig?
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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?
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Vad skulle ni mata in här?
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Bra eller dåligt?
2
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Alignments
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
3
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Kodning av feber
38,82°C
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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.
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
FATAL
ERROR!
illegal operation
File not
found
OBJECT NOT FOUND
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
4
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Vad betyder följande ikoner?
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
5
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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”
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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.
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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 principles
Part 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.
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
6
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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.
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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.
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
In
form
ati
on
ste
kn
olo
gi
Institutionen för informationsteknologi
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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?
Insti
tuti
on
en
fö
r in
form
ati
on
ste
kn
olo
gi
04-03-27Interaktionsdesign
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?
![Tripodpowerappz.tripod.com/tutorial/fortran77.pdf · ! #"$ % '& &)(* + , -.'/'021354%.627 89, -.;:=? @BADC.;,FE.5< > .;:;697 G H%H 82IKJ9.;L9: M235: ?ON;P%P%Q RSUTWVYXZ\[^]](https://static.fdocument.pub/doc/165x107/5fd234b2bc14b70cbd5670b3/-021354627-89-badcfe5-.jpg)
