Vorlesung Usability and Interaction. Sommersemester 2009

Transkript

1 Vorlesung Usability and Interaction Sommersemester 2009 Dr.-Ing. Thomas Schlegel Leiter Team und Forschungsgebiet Interaktive Systeme Institut für Visualisierung und interaktive Systeme Universitätsstraße Stuttgart Büro: Raum 1.461, Sprechzeiten nach Vereinbarung 1

2 Konzeption Konzeption Mockups / Prototyping Realisierung / Implementierung Rollout / Launch Anforderungsanalyse Ziele tragfähiges Konzept für das User Interface, Interaktions- und Navigationsstruktur, Layout und Design Erfüllung der Nutzeranforderungen Unterstützung von Designentscheidungen durch Nutzerdaten Post-Release / After-Sales 2

3 Systemgestaltung Design concepts von Donald A. Norman ( The design of everyday things ) Affordances ( Angebotscharakter, z.b. Fenstergriff) Wahrgenommene Charakteristika, die die Steueraktionnahelegen Mappings ( Zuordnung/Abbildung, z.b. rot und blau beim Wasserhan als warm und kalt) Beziehung zwischen Operation und Gerätezustand t Feedback ( Rückmeldung, z.b. Lichtschalter mit Kontrolleuchte) Sichtbarkeit des Systemzustands: Was kann ich hier tun? Rückmeldung: Wie schnell reagiert das System? Mode ( Modus/Zustand, z.b. unterschiedliche Funktionen von Tasten je nach Kontext!) Die Reaktion hängt vom Zustand hat (vgl. Automaten, Caps-Lock-Taste etc.) 3

4 Eine kurze Checkliste: Aufgabenstellung UI-Konzeption Content und Funktionalität Spezifikation und Priorisierung Strukturierung des Contents Navigation und Interaktion Informationsarchitektur: Begriffshierarchie und Wording Site Map interaktive Abläufe Mediendesign und Präsentation Layout Templates Design Patterns Bedienelemente Anwendungsfälle abgebildet? Nutzeranforderungen und -erwartungen erfüllt? 4

5 Vorgehensweise Eigenständige UI-Konzeption, nicht nur softwaretechnische Architektur 1 Festlegung Grundstruktur der Navigation, z.b. Primäre Sichten und Dialoge Web-Navigation; Vor- Zurück, Links... Menü-Navigation mit Softkeys 2 Auswahl zentraler Objekte und Contents; Verwendung häufiger Begriffe aus den Anwendungsfällen oder Szenarien 3 Festlegung Hauptsichten 4 Festlegung g sekundäre Sichten und Aktionen 5 Konsistenter Bezug zwischen Menüeinträgen und Sichten 5

6 Styleguides 6

7 Beispielhafte Themenstruktur eines ergonomie-orientierten Styleguides 7

8 Hersteller-Styleguides für große Betriebssysteme, Platformen dienen im Usability Engineering und Interaktionsdesign der Standardisierung von Produkten, einheitliches Look & Feel von Applikationen auf der jeweiligen Platform; Standardisierung v.a. von Bedienelementen, Sichtenlayouts, Standard- Dialogen und Abläufen der teilweisen Standardisierung bis auf die grafische Ebene Als Bibliothek, Nachschlagewerk für das Design dienen in der HCI als Sammlung von UI-Design-Wissen 8

9 Firmenspezifische Styleguides Nutzen Erleichterung neuer Entwicklungen Verständigung unter Entwicklern Erreichung von Wettbewerbsvorteilen Berücksichtigung softwareergonomischen Gestaltungswissens Einhaltung der Corporate Identity Konsistenz zwischen verschiedenen Programmen Standardisierung und Vereinheitlichung der Benutzungsschnittstelle 9

10 Firmenspezifische Styleguides Anforderungen Anforderungen an firmenspezifische Styleguides Software-ergonomische Erkenntnisse berücksichtigen Als Nachschlagewerk konzipieren Eventuell rechnerunterstützt anbieten Klare Basis definieren, auf die der Styleguide aufbaut Abweichungen begründen Einhaltung überprüfbar gestalten 10

11 Produkt- bzw. applikationsspezifische Styleguides teilweise stark orientiert auf visuelles Design können ein Interaktionskonzept umfassen dienen im Usability Engineering und Interaktionsdesign der Standardisierung di i von Produkten, einheitliches itli h Look & Feel von Applikationen auf der jeweiligen Platform; der Auswahl von Regeln aus Platform-Styleguides: z.b. welche Bedienelemente der inhaltlichen Standardisierung: Interface-Objekte, Wording und Terminologie, Abläufen i.d.r. der Standardisierung bis auf die grafische Ebene als Bibliothek, Nachschlagewerk für das Design 11

12 Hersteller-Styleguides für große Betriebssysteme, Platformen 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 12

13 Firmenspezifische Styleguides Nutzen Erleichterung neuer Entwicklungen Verständigung unter Entwicklern Erreichung von Wettbewerbsvorteilen Berücksichtigung softwareergonomischen Gestaltungswissens Einhaltung der Corporate Identity Konsistenz zwischen verschiedenen Programmen Standardisierung und Vereinheitlichung der Benutzungsschnittstelle 13

14 Firmenspezifische Styleguides Anforderungen Anforderungen an firmenspezifische Styleguides Software-ergonomische Erkenntnisse berücksichtigen Als Nachschlagewerk konzipieren Eventuell rechnerunterstützt anbieten Klare Basis definieren, auf die der Styleguide aufbaut Abweichungen begründen Einhaltung überprüfbar gestalten 14

15 Produkt- bzw. Applikationsspezifische Styleguides teilweise stark orientiert auf visuelles Design können ein Interaktionskonzept umfassen dienen im Usability Engineering und Interaktionsdesign zu Standardisierung di i von Produkten, einheitliches itli h 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 In der Regel Standardisierung bis auf die grafische Ebene Bibliothek, Nachschlagewerk für das Design 15

16 Competence Center Human-Computer Interaction Applikationsspezifische Styleguides Zur Sicherung der Konsistenz innerhalb einer Applikationen innerhalb von Produktfamilien über Versionen hinweg Beispiele Dialogspezifikation in einem Styleguide für Java-Applikationen (Fraunhofer IAO) Styleguide und UI- Spezifikation für SAiMotion-Karten (Fraunhofer IAO) Entscheidend für den erfolgreichen Einsatz: konkrete Styleguides zusätzlich zu allgemeinen Standards d SAP Style Guide for Styleguides pflegen White-Collar Worker Verbindlichkeit im Team PDAs kommunizieren i Einhaltung kontrollieren 16

17 Styleguides und Standards für mobile Endgeräte Produkt-spezifische UI-Styleguides PalmSource, Inc. (2002) Palm OS User Interface Guidelines. Nokia Styleguides, z.b. Nokia 9210 Communicator Styleguide, Nokia Series 60 UI Style Guide Apple Computer Inc. (1996). Newton 2.0 User Interface Guidelines. Symbian Ltd. Symbian UIQ style guide, 2002 Quasi-Standards prominenter Anwendungen z. B. MS Pocket Applikationen als Guideline für Pocket PC Allgemeine Richtlinien zum UI-Design für mobile Geräte Weiss (2002). Handheld Usability. John Wiley & Sons. Weir & Noble (2001) A Window in Your Pocket: Design Patterns for mobile UIs Klassische Desktop-Standards Microsoft Press (1999). Microsoft Windows User Experience. Sun Microsystems Inc. (2001) Java Look and Feel Design Guidelines. 17

18 Bedienelemente und Styleguides Erwartungskonform Konsistent zu gängigen Standards und Styleguides Bezüglich Anwendung, Grafische Gestaltung und Interaktionsverhalten sollten Bedienelemente grundsätzlich gemäß gängiger Standards und Guidelines verwendet werden. Siehe: Windows Vista