Human-Computer Interaction

Transkript

1 ! Last time you learnt about a lot of different interface styles and technology we can use! This time: How to use all this stuff to build a usable system? 1 Human-Computer Interaction Termin 6: Designing Usable Systems readings: Dahm: Grundlagen der MMI, chapt. 7 and 8 Shneiderman: "Designing the User Interface", chapt. 2 Dix et al.: Human Conputer Interaction, chapt. 5+7 MMI/SS07 2

2 Key questions for today! What is design?! What is a good system?! How can we design and build it? 3 What is design?! Achieving goals within constraints! Goals " What is the purpose of the design we are intending? " Who is it for? " Why do they want it?! Constraints " What material must we use? " What standards must we adopt? " How much can it cost? " How much development time do we have? " Are there health and safety issues? 4

3 Design! Combining goals and constraints leads to trade-offs " Relaxing goals and constraints so that others can be met. The golden rule of design: understand your materials! In context of HCI: " understand computers! limitations, capacities, tools, platforms " understand people! psychological, social aspects, human error 5 Usability! utility - will the system do what is needed functionally?! usability - will the users actually work it successfully? Deutsch: Gebrauchstauglichkeit (zentraler Begriff der Software-Ergonomie) " Shackel (1991): Usability is the capability to be used easily and effectively by the specified range of users, given specified training and user support, to fulfil the specified ranges of task, within the specified range of scenarios. 6

4 ! Shackel (1990): 4 measures " effectiveness - performance in accomplishment of tasks--the access to potential utility " learnability - degree of learning to accomplish tasks - the effort required to access utility " flexibility - adaptation to variation in tasks - the range of tasks for which there is utility " attitude - user satisfaction with system - the manifestation of potential likeability! Nielsen (1993): 5 measures " effective - can do things you want to get done " efficient - can do things with appropriate effort " easy to learn & to remember " safe to operate in all possible contexts " user satisfication 7 DIN EN ISO 9241! DIN Norm Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten! Inhalt: " General Introduction, Guidance on task requirements " Hardware: Visual display requirements, Keyboard requirements, Workstation Layout and postural requirements, Environmental requirements, Display requirements with reflections, Requirements for displayed colours, Requirements for non-keyboard input devices " Dialogues: Dialogue Principles, Usability Statements, Presentation of information, User guidance " Special dialogues: Menu dialogue, Command dialogues, Direct manipulation dialogues, Form filling dialogues 8

5 DIN EN ISO 9241 Usability! Usability = The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments. 1. Effektivität! Genauigkeit und Vollständigkeit mit der die Benutzer ein bestimmtes Ziel erreichen. 2. Effizienz! Aufwand der Benutzer im Verhältnis zur Genauigkeit und Vollständigkeit des erzielten Effekts. 3. Zufriedenheit! Die positive Einstellung der Benutzer gegenüber der Nutzung! Freiheit von Beeinträchtigungen durch das System 9 DIN EN ISO 9241 Dialogue principles Grundlagen der Dialoggestaltung 1. Aufgabenangemessenheit " Der Benutzer soll bei der Erledigung seiner Arbeitsaufgaben unterstützt werden, seine Aufgaben effektiv und effizient zu erledigen 2. Selbstbeschreibungsfähigkeit " Jeder einzelne Dialogschritt ist durch Beschreibungen oder Rückmeldungen unmittelbar verständlich oder er wird auf Anfrage des Benutzers erklärt. 3. Steuerbarkeit " Der Benutzer soll in der Lage sein, den Dialogablauf zu steuern, das heißt Ablauf, Richtung und Geschwindigkeit zu beeinflussen, bis er sein Ziel erreicht hat. weiter 10

6 DIN EN ISO 9241 Dialogue principles 4. Erwartungskonformität " Der Dialog entspricht den Kenntnissen des Benutzers aus seinem Arbeitsgebiet, seiner Ausbildung und seiner Erfahrung. Außerdem ist der Dialog konsistent. 5. Fehlertoleranz " Trotz erkennbar fehlerhafter Eingaben kann das beabsichtigte Arbeitsergebnis mit keinem oder minimalem Korrekturaufwand des Benutzers erreicht werden. 6. Individualisierbarkeit " Der Benutzer kann den Dialog an seine Arbeitsaufgabe, sowie seine individuellen Fähigkeiten und Vorlieben anpassen. 7. Lernförderlichkeit " Der Benutzer wird beim Erlernen der Anwendung unterstützt und angeleitet. 11 Accessibility & acceptability! accessibility (Barrierefreiheit) " is the system always accessible for everybody, esp. for handicapped people? " physical, conceptual, economical, cultural, social! acceptability (Markt-Akzeptanz) " does the system fit into people s life? " politically acceptable, convenient, cultural and social habits, useful (beyond usable, useful in context?), economic 12

7 Engagement / Joy of use System is " accessible " usable " acceptable qualities engagement " memorable " satisfying " enjoyable " rewarding! several key elements (Shedroff, 2001): 1. identity & authenticitiy (are you a Mac person?) 2. adaptivity with change of difficulty, pace, movement 3. narrative (tells a good story) 4. immersion (gives feeling of being wholly involved) 5. flow (gradual change between states, keeps you in) 13 The main goal of interaction design designing for maximum usability there can be other secondary goals, just as important! engagement and fun, e.g. in computer games! 14

8 Designing interactive systems Design interactions not just interfaces! How the user should be working with the system! Think not just of the immediate interaction between user and system, e.g. stapler in office technology changes whole working style! manual: write, print, staple, write, print, staple,! electric: write, print, write, print,, staple Designing interventions not just artefacts " not just the system, but also! documentation, manuals, tutorials! whole experience - what we see, read, say, do, etc. 15 User-centered design (UCD) design philosophy design process " stage 1 attention to " stage 2 attention to " stage... attention to " stage n attention to end user " needs " wants " limitations! a multi-stage problem solving process! requires designers to! analyze and foresee how users are likely to use an interface! test the validity of their assumptions with regards to real user behavior 16

9 Various methods in user-centered design! Field studies (including contextual inquiry)! User requirement analysis! Iterative design! Usability evaluation! Task analysis! Focus groups! Formal heuristic evaluation! User interviews! Surveys! Ranking based on survey among experienced UCD practitioners (103 questionnaires) (Mao et al., 2005) 17 The design process what is wanted participatory design interviews ethnography what is there vs. what is wanted scenarios task analysis analysis evaluation heuristics dialogue notations prototype guidelines principles design precise specification implement and deploy architectures documentation help 18

10 ! set up requirements " what is there and what is wanted! analysis " ordering and understanding " task/activity, scenario/context! design " what to do and how to decide! prototyping & testing! iteration " you ll never get it right the first time " finding what is really needed! implementation and deployment " making it and getting it out there 19 DIN EN ISO Benutzer-orientierte Gestaltung interaktiver Systeme " DIN-Norm für Vorgehensweisen und Wege " Effektivität, Effizienz und Zufriedenstellung des Benutzers als Oberziele (ISO 9241) " Gebrauchstauglichkeit als integraler Bestandteil einer Software " Software-Entwicklungsprozess erweitert um die aktive Beteiligung der späteren Nutzer bei " Verstehen und Festlegen des Nutzungskontexts " Festlegen von Benutzeranforderungen und organisatorischen Anforderungen " Entwerfen von Gestaltungslösungen " Beurteilungen von Gestaltungslösungen gegenüber den Anforderungen 20

11 DIN EN ISO Benutzerbeteiligung! So früh wie möglich im Software- Entwicklungsprozess! Vorteile: " Die entstehenden Systeme sind einfacher zu verstehen und zu benutzen " Höhere Zufriedenstellung der Benutzer, weniger Unbehagen und Stress (auch bei Suboptimalität d. R.) " Höhere Produktivität von Benutzern und Effizienz von Organisationen " Bessere Produktqualität, gesteigerter Anklang bei Benutzern! Wettbewerbsvorteil 21 ISO Interativer Entwicklungsprozess 22

12 EU RACE project (1998): an ideal case study ( IBC = integrated broadband communication ) 23 design rules MMI/SS07 24

13 Pitfalls of prototyping & testing! moving little by little but to where! Teutoburger Wald or the Matterhorn? 1. need a good start point! good design rules 2. need to understand what is wrong! good evaluation 25 why rules?! need a good start point!! design for usability " relies on maximizing benefit of one good design by abstracting out properties that directed it " requires both creative insight and principled practice! design rules " directions for design! design patterns " reuse design knowledge " capture design practice, not theory " essential common properties of good examples 26

14 Standards and norms! set by national or international bodies to ensure compliance by a large community of designers! standards require sound underlying theory and slowly changing technology! hardware standards more common than software! high authority, specific rules, but low level of detail! Example: DIN EN ISO 9241, DIN EN ISO ISO Aufgabenangemessenheit Empfehlung Der Dialog sollte dem Benutzer nur solche Informationen anzeigen, die im Zusammenhang mit der Erledigung der Arbeitsaufgabe stehen. Die angezeigte Hilfe-Funktion sollte von der Aufgabe abhängen. Alle Aufgaben, die sinnvollerweise automatisch vom Dialogsystem erledigt werden können, sollen auch von diesem ausgeführt werden um den Anwender zu entlasten. Beispiel Informationen wie Wochentage oder das Datum sowie Formatierungen in Farbe oder Form werden nur angezeigt, wenn sie die Erledigung der Arbeitsaufgabe erleichtern. Wenn der Anwender beim Editieren die Hilfe aufruft wird beispielsweise eine Liste der Editierbefehle zur Erläuterung angezeigt. Die Positionsmarke wird beim Betreten eines Formulars auf das erste Eingabefeld positioniert. Start und Initialisierungsvorgänge laufen automatisch ab. 28

15 ISO Selbstbeschreibungsfähigkeit Nach jeder Handlung des Benutzers sollte das Dialogsystem dort, wo es zweckmäßig ist, eine Rückmeldung geben. Wenn die Ausführung einer Handlung schwerwiegende Folgen haben kann, sollten vor der Ausführung diese e r l ä u t e r t w e r d e n u n d e i n e Bestätigung verlangt werden. Rückmeldungen und Erläuterungen sollten sich in ihrer Terminologie aus dem Arbeitsgebiet statt aus den technischen Eigenschaften des Dialogsystems ableiten. Werden Daten eingegeben, sollen sie oder die Änderungen, die sie verursacht haben unmittelbar angezeigt werden. Damit wird dem Benutzer geholfen, zu verstehen, was in der Anwendung geschieht und was er beeinflussen kann. Kann das Löschen von Daten nicht rückgängig gemacht werden, soll auf d i e s e u nwiderrufliche Fo l g e hingewiesen werden und eine Bestätigung verlangt werden. Statt einer Meldung mit einen numerischen Fehlercode der USB- V e r b i n d u n g s o l l t e d a r a u f hingewiesen werden, dass der Drucker nicht angeschlossen ist. 29 ISO Steuerbarkeit D i e G e s c h w i n d i g k e i t d e s Dialogablaufs sollte nicht vom Dialogsystem bestimmt werden sondern unter der Kontrolle des Benutzers stehen. Das Dialogsystem sollte dem Benutzer die Kontrolle darüber geben, wie der Dialog fortgesetzt werden soll. Soweit möglich sollten Dialogschritte wieder rückgängig gemacht werden. Eingaben werden erst dann endgültig übernommen, wenn der Benutzer die Gültigkeit mit der (Enter)-Taste bestätigt. Mit den Pfeiltasten kann nicht nur zum nächsten Eingabefeld sondern zu einem beliebigen Eingabe-feld gesprungen werden. Löschungen und Änderungen in geschriebenem Text können wieder ungeschehen gemacht werden. 30

16 ISO Erwartungskonformität Das Verhalten des Dialogsystems und die Informationsdarstellung sollen einheitlich sein. Änderungen und Funktionsaufrufe werden auf einheitliche Art und Weise herbeigeführt. Der Dialog sollte die Terminologie des A n w e n d e r s u n d d e r Arbeitsaufgabe verwenden. Zustandsmeldungen werden immer a n d e r g l e i c h e n S t e l l e ausgegeben. Die Terminologie ist konsistent in allen Meldungen und Bezeichnungen Dialoge werden immer mit der gleichen Taste beendet. Hilfe wird mit der (F1)-Taste aufgerufen. Die richtigen Fachausdrücke werden konsistent verwendet. 31 ISO Fehlertoleranz Das Dialogsystem sollte den Benutzer dabei unterstützen, Eingabefehler zu entdecken und zu vermeiden. Fehler sollten dem Benutzer zu Korrekturzwecken erläutert werden. Wenn Fehler automatisch korrigiert werden können, sollte das Dialogsystem den Benutzer auf den Fehler hinweisen und einen Korrekturvorschlag machen. Das Dialogsystem prüft auf Ziffern, falls nur Ziffern erlaubt sind und weist den Benutzer bei der Eingabe auf Fehler hin. Das Dialogsystem zeigt nicht nur den Fehler an sondern gibt auf Verlangen auch Informationen über Ursache und Möglichkeiten der Korrektur. In einer Textverarbeitung macht die Rechtschreibprüfung Vorschläge, die der Benutzer einfach übernehmen oder modifizieren kann. 32

17 ISO Individualisierbarkeit Das Dialogsystem sollte eine Anpassung an Sprache, kulturelle Eigenheiten und individuelles Wissen und Erfahrung des Anwenders ermöglichen. Für körperlich eingeschränkte Benutzer sollte eine Anpassung des Dialogsystems möglich sein. Der Umfang von Erläuterungen bei F e h l e r m e l d u n g e n o d e r Hilfeinformationen sollte entsprechend dem Kenntnisstand des Benutzers einstellbar sein. Die Sprache des Anwenders sollte in allen Meldungen, Menüs und Beschreibungen einstellbar sein. Für Sehbehinderte sollte die Schriftgröße einstellbar sein oder die Farben angepasst werden können. Der Detailgrad kann global oder pro Dialog eingestellt werden. 33 ISO Lernförderlichkeit Dem Dialogsystem zugrunde liegende Konzepte und Regeln sollen dem Benutzer zugänglich gemacht werden. Wichtige Lernstrategien sollen unterstützt werden, beispielsweise learning-by-doing, Exploration oder verständnisorientiertes Lernen. Das Wiederauffrischen von Gelerntem sollte unterstützt werden. Das Modell wird in der Hilfe oder der Betriebsanleitung beschrieben. Die Hilfe bietet Unterstützung in Übersichten und beschreiben-den Texten. Zusätzlich werden Beispiele und Schritt-für-Schritt- Anleitungen für die wichtigsten Arbeitsschritte gegeben. Auf die Häufigkeit der Nutzung von Kommandos wird geachtet. Für häufig genutzte Kommandos w e r d e n d e m B e n u t z e r Abkürzungen und Vorbelegungen angeboten. 34

18 Principles and guidelines! broad brush design rules! useful check list for good design! better design using these than using nothing!! different collections e.g. " Shneiderman s 8 Golden Rules " Norman s 7 Principles " Nielsen s 10 Heuristics 35 Shneiderman s 8 golden rules of interface design 1. Strive for consistency 2. Enable frequent users to use shortcuts 3. Offer informative feedback 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load 36

19 Shneiderman s 8 rules - detailliert 1. Konsistenz anstreben " Verwende Styleguides und weitere schriftliche Konventionen (Terminologie, Menüs, Farben, Hilfetexte, Layout, GROßSCHREIBUNG, Schrifttypen) 2. Berücksichtige unterschiedliche Erfahrungen " Jedem sollte eine Benutzungsschnittstelle möglichst eine passende Interaktionsform anbieten. " Anfänger über Menüs, Abkürzungen für erfahrene Benutzer, Tastaturkürzel/Shortcuts für Experten 3. Rückmeldungen auf Aktionen des Benutzers " Rückmeldung, dass Aktion bei der Software angekommen " Visuell, taktil, akustisch (selten) " Fehlermeldung klar, positiv und konstruktiv! "unmatched parentheses" statt "syntax error"! nicht "illegal entry", "bad command name" 37 Shneiderman s 8 rules - detailliert 4. Gestalte abgeschlossene Benutzerdialoge " Stelle Operation im Zusammenhang dar, spezifiziere Anfang, Mitte und Ende " Dialogabschluss muss deutlich werden 5. Fehlervermeidung " Verwende Kontrollmechanismen für Benutzereingaben Bsp.: Buchstaben nur in Buchstabenfelder, in Datumsfeld nur eine Zahl im Datumsformat " Verwende Interaktionsstil, der nur korrekte Eingaben erlaubt Bsp.: Menüoptionen deaktivieren " Erfordere minimale Aktionen zur Fehlerbehebung 38

20 Shneiderman s 8 rules - detailliert 6. Es muß ein Zurück geben " Für jede Aktion ein Rückgängig besser als "Wollen sie wirklich?" " beste Lösung: Änderungshistorie, mehrere Rückgängig- Schritte " Ermöglicht exploratives Lernen 7. Benutzer sollen Aktionen initiieren, nicht auf das System reagieren (Kontrollverlust) " Gefühl, die Anwendung steuern, kontrollieren zu können 8. Geringe Belastung des Kurzzeitgedächtnisses " Kapazität 7 +/ 2 Einheiten (Chunks) " Aufbau von Menüs besser breit statt tief 39 Norman s 7 principles of design 1. Use both knowledge in the world and knowledge in the head. 2. Simplify the structure of tasks. 3. Make things consistent and visible: bridge the gulfs of Execution and Evaluation. 4. Get the mappings right. 5. Exploit the power of constraints, both natural and artificial. 6. Design for error. 7. When all else fails, standardize. 40

21 Nielsen s 10 Heuristiken! Discount Usability Engineering: Methodische, anwenderspezifische Aspekte fehlen! Minimal-Gebrauchstauglichkeit 1. Einfache und natürliche Dialoge " Dem Lösungsablauf des Benutzers angepasst 2. Ausdrucksweisen des Anwenders " Verwende Fachsprache des Anwendungsgebiets 3. Minimale mentale Belastung des Benutzers " Kapazität Einheiten 41 Nielsen 2 4. Konsistenz " Gleiche Dinge! gleiche Darstellung " Dialoge folgen immer der gleichen Logik 5. Rückmeldungen " Unmittelbar über Annahme der Aktion " Über Fortschritt der Aktion, wenn die Aktion länger dauert 6. Klare Auswege " Falsche Navigation, Falsche Aktion " Es muss immer klar sein, wie es zu einem festen, bekannten Startpunkt zurück geht " Lange Aktionen müssen abbrechbar sein 42

22 Nielsen 3 7. Abkürzungen " Für geübte Benutzer " Eingabeerleichterung durch Standardwerte und History-Funktionen 8. Gute Fehlermeldungen " konstruktive Rückmeldungen 9. Fehlervermeidung " Besser als Fehlerbehandlung 10. Hilfe und Dokumentation " Bei Anwendung und Einarbeitung unterstützen. " Vollständig und übersichtlich " Korrekt und auf dem aktuellen Stand 43 Further guidelines! more suggestive (e.g. for following one metaphor)! many textbooks and reports full of them! abstract guidelines applicable during early life cycle activities! detailed guidelines (style guides) applicable during later life cycle activities! understanding justification for guidelines aids in resolving conflicts 44

23 Guidelines for screen design and layout! Principles " ask: what is the user doing? " think: what information, comparisons, steps, order " design: form follows function! Tools " grouping of items: logically together! physically together " order of items on screen should follow natural order " decoration: use fonts, boxes etc. to group and order " alignment of items to ease scanning (e.g. align text on left hand side) " white space between items 45 example: physical controls! grouping of items defrost settings type of food time to cook 46

24 physical controls! grouping of items! order of items 1) type of heating 2) temperature 3) time to cook 4) start physical controls! grouping of items! order of items! decoration different colors for different functions lines around related buttons (temp up/down) 48

25 physical controls! grouping of items! order of items! decoration! alignment centered text in buttons? easy to scan? 49 physical controls! grouping of items! order of items! decoration! alignment! white space gaps to aid grouping 50

26 Ok, that s for how to create a good(?) first system Next! How to evaluate and improve?? 51