Vad karaktäriserar ett bra användargränssnitt? Riktlinjer för gränssnittsdesign. Vad påverkar utformningen av ett gränssnitt? 1.

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "Vad karaktäriserar ett bra användargränssnitt? Riktlinjer för gränssnittsdesign. Vad påverkar utformningen av ett gränssnitt? 1."

Lovisa Danielsson
för 9 år sedan
Visningar:

1 Riktlinjer för gränssnittsdesign Jan Gulliksen Vad karaktäriserar ett bra användargränssnitt? Verksamhetseffektivt Rätt funktioner finns Användarvänligt Lätt att lära Minimerar fel Minimerar onödiga belastningar Är självklart Tillåter användaren att göra jobbet Stödjer kompetensutveckling Är lätt förändringsbart Tillåter organisatoriska förändringar Vad påverkar utformningen av ett gränssnitt? 1. Skärmdisposition Standarder Style Guide Arbetssituationerna Verksamheten Generella designregler Designerns Kompetens/förmåga kreativitet Användarna Kunskaper Erfarenheter Datorer Nätverk Utvecklingsverktyg Bildskärmar Upplösning/Prestanda Skärmytan är en begränsad resurs Väl avgränsade huvuddelar Fasta och genomtänkta positioner Undvik överlappande fönster Betona det väsentliga Kompakt bild 2. Menyer Grafiska objekt i menyerna Bättre på igenkänning än återgivning Fasta positioner Mest frekventa alternativen överst Snabbkommandon och genvägar Breda menyer i stället för djupa Logiskt grupperade 1

lätt förändringsbart Tillåter organisatoriska förändringar Vad påverkar utformningen av ett gränssnitt? 1.

2 3. Orientering och navigering 4. Samtidighet Veta var man är och var man ska Se var man är utan att behöva tänka Se var man är i en lista eller i en bunt Visa översikt och detalj samtidigt Visa om det finns/inte finns mer information Visa hur man når den informationen Bläddring är oftast bättre än scrollning Belastande för korttidsminnet att växla bild All information som behövs i ett beslut skall vara synlig Undvik överlappande fönster Formulär för läsning och skrivning samtidigt Framgår tydligt hur man når information som inte syns. Bra eller dåligt? 5. Inmatningsfunktioner Gäller data, parametrar, menyalternativ, kommandon Minimera inmatning Undvik växling mellan mus och tangentbord Snabbare med tangentbord än med mus Visa vilka fält som är inmatningsbara Kraftigare typsnitt i fält än som rubriker Defaultvärden, snabbkommandon, snabbhopp mellan fält Hur kan informationen kodas bättre? 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 Days Inn Howard Johnsons Ramada Inn Holiday Inn SW Sheraton Inn Holiday Inn N Columbia Days Inn Howard Johnsons Vagabond Inn Holiday Inn NW Quality Inn Ramada Inn Carolina Inn

information Visa hur man når den informationen Bläddring är oftast bättre än scrollning Belastande för korttidsminnet att växla bild All information som behövs i ett beslut skall vara synlig Undvik

3 Ytterligare förbättringar Rates S D Motel/Hotel Phone Vad skulle ni mata in här? Charleston Days Inn Howard Johnsons Ramada Inn Holiday Inn SW Sheraton Inn Holiday Inn N Columbia Days Inn Howard Johnsons Vagabond Inn Holiday Inn NW Quality Inn Ramada Inn Carolina Inn Läsbarhet och Layout Alignments 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 7. Informationskodning Kodning av feber 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 38,82 C 3

883-744-1621 Columbia 23 27 Days Inn 883-736-8888 25 27 Howard Johnsons 883-772-7208 27 30 Vagabond Inn 883-796-6248 32 39 Holiday Inn NW 883-794-9448 34 41 Quality Inn 883-772-8278 36 44 Ramada Inn

4 8. Återkoppling, felmeddelanden Exempel på ej informativa felmeddelanden Att visa vad som händer Viktigt för säkerhet Tangentnedtryckning, väntetid, vilket tillstånd Tydliga, 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. 9. 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 Vad betyder följande ikoner? 4

Programmet okänd har avslutats på grund av ett oväntat fel. Illegal error. 9.

5 Några riktlinjer för design Ytterligare designregler 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 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 Standarder och riktlinjer HAIKU by Else Nygren For every design rule one can find at least one situation where following the rule would be sheer madness 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 Standarder Standardiseringsorgan 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. 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 5

Visa översikt och detalj samtidigt Undvik skrollning av text Det finns ingen kunskap i världen som kan ersätta användarsynpunkter Standarder och riktlinjer HAIKU by Else Nygren For every design rule

6 Internationella standarder ISO 6385 Ergonomic principles in the design of work system ISO 9241 Ergonomic requirements for office work with visual display terminals. Del 1-17 Part 10 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. 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 well-being whilst optimising efficiency and performance Design för användbarhet Designprocessen: Prototyp (enl. Gould & Lewis, 1985) Tidig och kontinuerligt fokus på användare Utvärdering av användbarheten Iterativ design Integrerad design En billig modell av ett tänkt framtida system Utmärkt för användarmedverkan Testar funktionaliteten, effektiviteten Rapid Inkrementell Evolutionär Scenario Storyboards 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. En grafisk beskrivning av ett systems tilltänkta uppenbarelse utan någon som helst funktionalitet Billiga mock-ups eller mer avancerad visualisering Filmer 6

ISO/IEC 14915 Multimedia user interface design. ISO/TS 16071 Guidance on software accessibility. ISO/IEC 11581 Icon symbols and functions.

7 Workspaces as a complex design pattern Examples of workspaces General metaphor for case handling work, solving; the collision of desktop and hypertextmetaphors extensive information needs of the users A complete user interface to a specific work situation for a specific user Each information object can appear in several workspaces Human control of complex systems 5 6 1

needs of the users A complete user interface to a specific work situation for a specific user

Relevanta dokument

Design av användargränssnitt

Design av användargränssnitt Jan Gulliksen Informationskodning Ge färger, former, fonter, platser betydelse Aktivt, valbart, ej valbart Avvikande data, relationer mellan data, kategorisera, etc.. Var konsekvent