Phase UI-Entwurf - Hilfsmittel: Richtlinien, Styleguides, Design Patterns

Transkript

1 Competence Center Human Computer Interaction Vorlesung Mensch-Rechner-Interaktion II SS 2008 UI-Konzeption Hilfsmittel: Richtlinien, Styleguides, Design Patterns Workshop Prof. Dr.-Ing. Dieter Spath Thomas Schlegel Dr. Fabian Hermann Institut für Arbeitswissenschaft und Technologiemanagement Fraunhofer-Institut für Arbeitswirtschaft und Organisation IAO Competence Center Human-Computer Interaction Nobelstraße 12 D Stuttgart iao.fraunhofer.de, iao.fraunhofer.de, Competence Center Human-Computer Interaction Phase UI-Entwurf - Hilfsmittel: Richtlinien, Styleguides, Design Patterns 1

2 Normen und allgemeine Richtlinien dienen im Usability Engineering und Interaktionsdesign zu Struktur und Prüfkriterien für die Systemevaluation Hilfestellung bei Auswahl von Designlösungen Empfehlungen für Design und Gestaltung in der HCI allgemein anerkanntes Schema Lehrmaterial Folie 3 Richtlinien: Nielsen s Ten Usability Heuristics Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY. ic/heuristic_list.html Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation Folie 4 2

3 Richtlinien: Shneiderman's "Eight Golden Rules of Dialog Design" Ben Shneiderman, Designing the User Interface - Strategies for Effitive Human-Computer Interaction, second edition, Reading, MA: Addison-Wesley Publishing Company, Strive for consistency: Consistent sequences of actions in similar situations; identical terminology in prompts, menus, and help screens; and consistent commands; 2 Enable frequent users to use shortcuts: Abbreviations, function keys, hidden commands, and macro facilities. 3 Offer informative feedback: For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial. 4 Design dialog to yield closure: Sequences of actions should be organized into groups with a beginning, middle, and end. Feedback at the completion of a group of actions Folie 5 Richtlinien: Shneiderman's "Eight Golden Rules of Dialog Design" 5 Offer simple error handling. As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple mechanisms for handling the error. 6 Permit easy reversal of actions. errors can be undone. The units of reversibility may be a single action, a data entry, or a complete group of actions. 7 Support internal locus of control. Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions. 8 Reduce short-term memory load. Displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions. Folie 6 3

4 Richtlinien Mayhew's "General Principles of User Interface Design Deborah J. Mayhew, Principles and Guidelines in Software User Interface Design, Englewood Cliffs, NJ: Prentice Hall, WYSIWYG. Try to make what you see on the screen is what you get on printed output or stored files. 11 Flexibility. Allow more user control and accommodates variations in user skill and preferences. 13 Invisible technology. Hide the technology from users. Only present the functionality that users need to know. IBM's "Design Principles for Tomorrow" basieren auf object-oriented user interface design (OOUI) Koyani et al. (2002). Research-Based Web-Guidelines Folie 7 ISO-Normen zur Ergonomie der Mensch-System- Interaktion Die meist zitierten: ISO : Grundsätze der Dialoggestaltung (ISO :2006); Deutsche Fassung ISO : Dialogue principles (ISO :2006) ISO 13407: Benutzer-orientierte Gestaltung interaktiver Systeme (ISO 13407:1999) ISO 13407, Human-centred design processes for interactive systems (ISO 13407:1999) (zukünftig ISO ) ISO : Anforderungen an die Gebrauchstauglichkeit; Leitsätze (ISO :1998); Deutsche Fassung ISO : Guidance on usability. (ISO :1998); Folie 8 4

5 ISO-Normen zur Ergonomie der Mensch-System- Interaktion ISO , BeuthVerlag Berlin 2006 Folie 9 ISO-Normen zur Ergonomie der Mensch-System- Interaktion Folie 10 5

6 ISO Grundsätze der Dialoggestaltung Empfehlungen z.b. zur Fehlertoleranz: Die Prüfung auf Gültigkeit und Korrektheit von Daten sollten stattfinden, bevor das interaktive System die Eingabe verarbeitet. BEISPIEL 1 Ein -client prüft die korrekte Schreibweise einer -adresse, bevor er diese im Adressbuch speichert. BEISPIEL 2 In einem Nutzungskontext, in dem Benutzer dazu neigen zu vergessen, Dateien anzuhängen, die sie eigentlich anhängen wollten, prüft ein -client die Mitteilung auf die Wörter anhängen, angehängt und Anhang und bietet vor der Absendung der Mitteilung einen Hinweis an: Wollen Sie Ihrer Mitteilung eine Datei anhängen? Folie 11 ISO-Normen zur Ergonomie der Mensch-System- Interaktion Folie 12 ISO , BeuthVerlag Berlin

7 ISO Grundsätze der Dialoggestaltung Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Steuerbarkeit Erwartungskonformität wenn es den Benutzer unterstützt, seine Arbeitsaufgabe zu erledigen; Funktionalität und Dialog basieren auf den charakteristischen Eigenschaften der Arbeitsaufgabe, anstatt auf der eingesetzten Technologie. wenn dem Benutzer zu jeder Zeit offensichtlich ist, in welchem Dialog, an welcher Stelle im Dialog er sich befindet, welche Handlungen unternommen werden können und wie diese ausgeführt werden können. wenn der Benutzer in der Lage ist, den Dialogablauf zu starten sowie seine Richtung und Geschwindigkeit zu beeinflussen, bis das Ziel erreicht ist. wenn er den aus dem Nutzungskontext heraus vorhersehbaren Benutzerbelangen sowie allgemein anerkannten Konventionen entspricht. Folie 13 ISO Grundsätze der Dialoggestaltung Fehlertoleranz Individualisierbarkeit Lernförderlich wenn das beabsichtigte Arbeitsergebnis trotz erkennbar fehlerhafter Eingaben entweder mit keinem oder mit minimalem Korrekturaufwand seitens des Benutzers erreicht werden kann. wenn Benutzer die Mensch-System-Interaktion und die Darstellung von Informationen ändern können, um diese an ihre individuellen Fähigkeiten und Bedürfnisse anzupassen. wenn er den Benutzer beim Erlernen der Nutzung des interaktiven Systems unterstützt und anleitet. Folie 14 7

8 Hersteller-Styleguides für große Betriebssysteme, Plattformen dienen im Usability Engineering und Interaktionsdesign zu Standardisierung von Produkten, einheitliches Look & Feel von Applikationen auf der jeweiligen Platform; Standardisierung v.a. von Bedienelementen, Sichtenlayouts, Standard-Dialogen und Abläufen teilweise Standardisierung bis auf die grafische Ebene Bibliothek, Nachschlagewerk für das Design in der HCI Sammlung von UI-Design-Wissen Folie 15 Hersteller-Styleguides Apple - Macintosh Human Interface Guidelines IBM Object-Oriented Interface Design: IBM Common User Access Guidelines, (CUA) 1992 Styleguide für IBM OS2, Basis für das erste MS Windows Microsoft Windows Vista UX Guide Microsoft Windows User Experience für Windows 98, Windows NT 4.0 und Windows 2000 SAP - R/3 Style Guide Folie 16 8

9 Produkt- bzw. Applikationsspezifische Styleguides teilweise stark orientiert auf visuelles Design können ein Interaktionskonzept umfassen dienen im Usability Engineering und Interaktionsdesign zu Standardisierung von Produkten, einheitliches Look & Feel von Applikationen auf der jeweiligen Platform; Auswahl von Regeln aus Platform-Styleguides: z.b. welche Bedienelemente Inhaltliche Standardisierung: Interface-Objekte, Wording und Terminologie, Abläufen i.d.r. Standardisierung bis auf die grafische Ebene Bibliothek, Nachschlagewerk für das Design in der HCI -- Folie 17 Applikationsspezifische Styleguides Zur Sicherung der Konsistenz innerhalb einer Applikationen innerhalb von Produktfamilien über Versionen hinweg Entscheidend für den erfolgreichen Einsatz: konkrete Styleguides zusätzlich zu allgemeinen Standards Styleguides pflegen Verbindlichkeit im Team kommunizieren Einhaltung kontrollieren Beispiele Dialogspezifikation in einem Styleguide für Java- Applikationen (Fraunhofer IAO) Styleguide und UI- Spezifikation für SAiMotion-Karten (Fraunhofer IAO) SAP Style Guide for White-Collar Worker PDAs Folie 18 9

10 Themenstruktur eines ergonomie-orientierten Styleguides Folie 19 User Interface Design-Patterns sind Beschreibungen typischer Gestaltungslösungen ( Pattern, Muster ) haben eine typische Struktur der Beschreibung werden zu Sammlungen, strukturierten Katalogen zusammengefasst Folie 20 10

11 Beispiel UI Design Pattern Multiple Entries (Patterns Bibliothek Fraunhofer IAO, FHP) Good Example (SDA): Nachrichten can be choosen via an icon in the top iconbar, activating the softkey Nachrichten or pushing a hardkey (not shown). Folie 21 Struktur User Interface Design Patterns Beispiel Patterns Bibliothek Fraunhofer IAO, FHP ID Name Problem Usability Principle Referencing to the list of graphical design patterns classes. The name of a pattern helps to reference it easily, communicate its central idea quickly, and build a vocabulary. Problems are related to usage of the system and are relevant to the user or any other stakeholder that is interested in usability. Problem descriptions should often be user task oriented. Interaction patterns usually use a principle on which the solutions are based. A complete set of principles is not known yet but an initial set can be given: Visibility, Affordance, Natural Mapping, Constraints, Conceptual Models, Feedback, Safety, etc. Folie 22 11

12 Struktur User Interface Design Patterns Beispiel Patterns Bibliothek Fraunhofer IAO, FHP Solution Examples Known Uses A solution must be described very concretely and must not impose new problems. However, a solution describes only the core of the solution and other patterns might be needed to solve sub-problems. Other patterns relevant to the solution should be referenced to. The example should show how the pattern has been used successfully in a system. An example can often be given using a screenshot and some additional text to explain the context of the particular solution. For structural patterns (e.g. navigation patterns) the usage of wire frame model might be more suitable. If possible, choose uses from DTAG applications. Folie 23 Struktur User Interface Design Patterns Beispiel Patterns Bibliothek Fraunhofer IAO, FHP Related Patterns Rating Specify related pattern link types. Generalization: GDP is a more general version of other GDPs Aggregation: GDP contains other GDPs Specialization: GDP is a more specific version of other GDPs Complementary: GDP needs other GDPs Similarity: GDP is similar to other GDPs Ratings range from In progress Working solution Best Practice The DTAG Folie 24 12

13 User Interface Design-Patterns dienen im Usability Engineering und Interaktionsdesign zu Bibliothek, Nachschlagewerk für konkrete Designlösungen; Ausgangspunkt für Auswahl und Weiterentwicklung eigener UI-Lösungen Standardisierung von Produkten, UIs eines Produkt- Herstellers: modulare Bibliothek konkreter Lösungen implizit: Standardisierung über Hersteller hinweg, z.b. im Web-Design in der HCI Sammlung von UI-Design-Wissen Lehrmaterial: Vermittlung typischer Probleme und typischer Lösungen, Fachvokabular Folie 25 User Interface Design Patterns Weit verbreitet in Lehrbüchern, wiss. Literatur: Tidwell, J. (2005) Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly Media Van Duyne, D., Landay, J., & Hong, J. (2003): The Design of Sites. Addison-Wesley, San Fransisco. Seffah, A. & Javahery, H. (Eds.)(2004): Multiple User Interfaces. Wiley. Chichester. van Welie, M. et al. : (2000): Patterns as Tools for User Interface Design. Accessed June Yahoo Web Design Patterns Folie 26 13