Design av användargränssnitt. Skärmdisposition och layout

Storlek: px

Starta visningen från sidan:

Download "Design av användargränssnitt. Skärmdisposition och layout"

Ann Martinsson
för 5 år sedan
Visningar:

Design av användargränssnitt Jan Gulliksen Interaktionsdesign 1MD115 Skärmdisposition och layout Skärmytan är en begränsad resurs Behövs verkligen all information som finns på sidan?

1 Design av användargränssnitt Jan Gulliksen Interaktionsdesign 1MD115 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 1

Vilken information är viktig? Inmatning Mänsklig inmatning är en långsam process Typiska uppgifter Kan användaren överhuvudtaget göra uppgiften? Hur lång tid tar det?

2 Vilken information är viktig? 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? 2

3 Vad skulle ni mata in här? Bra eller dåligt? 3

4 Hur kan informationen kodas bättre? South Carolina City Motel/Hotel Phone Single rate Double rate Charleston Best Western $ 26 $ 38 Charleston Days Inn $ 18 $ 24 Charleston Holiday Inn N $ 36 $ 46 Charleston Holiday Inn SW $ 33 $ 47 Charleston Howard Johnsons $ 31 $ 36 Charleston Ramada Inn $ 33 $ 46 Charleston Sheraton Inn $ 34 $ 42 Columbia Best Western $ 29 $ 34 Columbia Carolina Inn $ 42 $ 48 Columbia Days Inn $ 23 $ 27 Columbia Holiday Inn NW $ 32 $ 39 Columbia Howard Johnsons $ 25 $ 27 Columbia Quality Inn $ 34 $ 41 Columbia Ramada Inn $ 36 $ 44 Columbia Vagabond Inn $ 27 $ 38 Förbättrad design Rates S D Motel/Hotel Phone Charleston South Carolina Days Inn Best Western Howard Johnsons Ramada Inn Holiday Inn SW Sheraton Inn Holiday Inn N Columbia South Carolina Days Inn Howard Johnsons Vagabond Inn Best Western Holiday Inn NW Quality Inn Ramada Inn Carolina Inn

5 Ytterligare förbättringar Rates S D Motel/Hotel Phone Charleston South Carolina Days Inn Best Western Howard Johnsons Ramada Inn Holiday Inn SW Sheraton Inn Holiday Inn N Columbia South Carolina Days Inn Howard Johnsons Vagabond Inn Best Western Holiday Inn NW Quality Inn Ramada Inn Carolina Inn 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 stor plats Läsbara fonter Betona det väsentliga Färganvändning Estetiskt tilltalande 5

6 Alignments Informationskodning Ge färger, former, fonter, platser betydelse 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 6

7 Kodning av feber 38,82 C Återkoppling, felmeddelanden Att visa vad som händer Viktigt för säkerhet Tangentnedtryckning, väntetid, vilket tillstånd Tydliga, informativa felmeddelanden 7

8 Exempel på ej informativa felmeddelanden 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. File not found FATAL ERROR! OBJECT NOT FOUND illegal operation 8

9 9

10 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 10

11 Vad betyder följande ikoner? 11

12 Några riktlinjer för design Utnyttja skärmytan effektivt, hellre för mycket än för litet Samtidig informationsvisning alltid effektivare än sekventiell information Minimera inmatning Gör designen klar och begränsa användarens frihet. Skapa effektiva informationsmönster Ytterligare designregler Betona intressant, tona ned oviktigt. Visa översikt och detalj samtidigt Undvik skrollning av text Det finns ingen kunskap i världen som kan ersätta användarsynpunkter 12

13 HAIKU by Else Nygren For every design rule one can find at least one situation where following the rule would be sheer madness Standarder och riktlinjer Standarder är riktlinjer som formaliseras eftersom de anses som tillräckligt viktiga och använda Riktlinjer (Guidelines) är vägledande vid lösning av designproblem 13

14 Standarder De Facto (emacs, QWERTY, TCO-95) Kommersiella (Microsoft, IBM CUA, OSF/Motif) Formella (ANSI kompilatorer, Fortran77) Gränssnittsstandarder baseras på användbarhet och beteende, inte på produkttekniska aspekter. 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 14

15 Internationella standarder ISO 9241 Ergonomic requirements for office work with visual display terminals. Del 1-17 Part 10 Dialogue design principles Part 11 Guidance on usability, Part 12 Presentation of information. ISO Human centred design process for interactive systems. ISO/IEC Multimedia user interface design. ISO/TS Guidance on software accessibility. ISO/IEC Icon symbols and functions. ISO 6385 Ergonomic principles in the design of work system Ergonomics produces and integrates knowledge from the human and technology sciences to match jobs, systems, products and environments to the physical and mental abilities and limitations of people. In doing so it seeks to safeguard safety, health and wellbeing whilst optimising efficiency and performance 15

16 Scenario En fritextformulering av ett händelseförlopp i en användningssituation, användbar för analys, design och utvärdering. Ett medel som användarna förstår bättre än alla dessa formella modeller. Storyboards En grafisk beskrivning av ett systems tilltänkta uppenbarelse utan någon som helst funktionalitet Billiga mock-ups eller mer avancerad visualisering Filmer 16

17 Designuppgift 4 Hur intuitiva är de strömbrytare för belysning som ni finner i lokalerna? Skissa på en användbar lösning på en strömbrytare. 17

18 Designuppgift 5 Skissa på en intuitiv presentation av avgående och ankommande flyg på en flygplats. Hur ser det ut i verkligheten? Designuppgift 6 Användare utökar sällan den uppsättning funktioner som de använder i ett system. Skissa på en lösning hur man skulle kunna utöka användarens kunskap om vad han/hon kan göra. Vad finns idag? Är det bra? 18

Relevanta dokument

Hur kan informationen kodas bättre? Förbättrad design. Ytterligare förbättringar. Läsbarhet och Layout. Alignments. Informationskodning

Hur kan informationen kodas bättre? Förbättrad design. Ytterligare förbättringar. Läsbarhet och Layout. Alignments. Informationskodning Design av användargränssnitt Jan Gulliksen 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