1.
Workshop Usability
Erklärung einiger wichtiger Grundbegriffe und Regeln

2.
Usability
 Engl. für Gebrauchstauglichkeit, Benutzerfreundlichkeit
 Bezeichnet die Möglichkeit ein Produkt möglichst effizient und
effektiv zu benutzen, um die vorgegebene Ziele
zufriedenstellend zu erreichen.
 Software-Ergonomie: Ergonomie für Informatiker.
 Neuer Begriff: User Experience.

3.
User Experience (UX)
 engl. für Nutzererfahrung, Anwendungserfahrung
 Bezeichnung für die Erfahrungen des Benutzers bei der
Interaktion mit Software oder Webseite
 Das Modell „The Elements of User Experience“ (J.J. Garrett)
 Strategy (Zielgruppe und Ziele der Website)
 Scope (Umfang, was will ich abbilden?)
 Structure (Wie will ich es abbilden? Brauche ich eine Website, einen Blog,
eine Community?)
 Skeleton (Das Gerüst, Sitemap meiner Website)
 Surface (Welche Farben, Schrifttypen verwende ich? Oberflächendesign,
bunte Tapete)

4.
Informationsarchitektur
Informationsarchitektur ist die Brücke zwischen Design (Ästhetische
Wirkung der Seite) und Programmierung (Technische
Realisierung der Abläufe).
Some Web sites "work" and some don't. Good Web site consultants know
that you can't just jump in and start writing HTML, the same way you
can't build a house by just pouring a foundation and putting up some
walls. You need to know who will be using the site, and what they'll be
using it for. You need some idea of what you'd like to draw their attention
to during their visit.
Zitat Louis Rosenfeld, Peter Morville

5.
Gestaltgesetze
 Gesetz der Nähe
 Näher zueinander liegende Elemente
werden als zusammengehörig
wahrgenommen
 Gesetz der Ähnlichkeit
 Ähnlich aussehende Elemente werden
auch als zusammengehörig
wahrgenommen
 Gesetz der Geschlossenheit
 Ergänzung der nicht vorhandenen
Teile einer Figur

6.
Gestaltgesetze
 Gesetz der Prägnanz
 Die wahrgenommene Elemente stellen
eine einfache und einprägsame Gestalt
dar
 Gesetz der Symmetrie
 Symmetrisch geordnete Elemente
werden als eine Einheit wahrgenommen
 Gesetz der guten Fortsetzung
 Elemente, die sich auf einer
durchgehenden Linie befinden, nimmt
man als zusammengehörig wahr

7.
Zehn Daumenregeln für Usability - 1
 Visibility of system status
 Match between system and the real world
 User control and freedom
 Consistency and standards
 Error prevention

8.
Visibility of system status
Der Nutzer sieht, in welcher Phase der Flugbuchung er sich befindet.
Quelle: http//www.ryanair.com

9.
Visibility of system status
Das System informiert den Nutzer stets darüber, was geschieht. Bei längeren
Ladezeiten denkt der Nutzer so nicht, dass sich das System evtl.
„aufgehängt“ hat.
Quelle: http//www.parlameter.zdf.de

10.
Match between system and real world
Die Seite spricht die Sprache seines Nutzers. Das Beispiel zeigt eine Website,
auf der ausgebildete Heizungsfachkräfte Bauteile bestellen können.
Die Verwendung von Fachsprache ist hier angemessen.
Quelle: http://www.weinmann-schanz.de

11.
Consistency and Standards
Der Nutzer fragt sich, ob verschiedene Begriffe oder
Symbole dasselbe bedeuten.
Quelle: http://bibli.com

12.
Error Prevention
Das System verlangt eine Bestätigung des
Nutzers, um Fehler zu vermeiden.
Quelle: http://www.sag-zu.de

13.
Zehn Daumenregeln für Usability - 2
 Recognition rather than recall
 Flexibility and efficiency of use
 Aesthetic and minimalistic design
 Help users recognize, diagnose and recover from errors
 Help and documentation

14.
Recognition rather than recall
Objekte, Optionen und Aktionen sind sichtbar und sollen nicht aus früheren
Abschnitten erinnert werden.
Quelle: http://www.parlameter.zdf.de

15.
Flexibility and efficiency of use
Individuelle Konfiguration des Browsers: Häufig besuchte Websites werden
als Lesezeichen gespeichert.
Quelle: http:/www.facebook.com

16.
Aesthetic and minimalistic Design
Durch ein schlichtes Design werden zentrale Elemente hervorgehoben
(Logo und Spenden-Button). Quelle: http://www.drk.de

17.
Aesthetic and minimalistic Design
Quelle: http://www.oxfam.de

18.
Help users recognize, diagnose and
recover from errors
Die Fehlermeldung gibt Hinweise, was die Ursache für die Nicht-
Auffindbarkeit der Seite sein kann.
Quelle: http://www.zdf.de

19.
Help and Documentation
Kein Vorschlag für die Problemlösung

20.
Barrierefreiheit nach BITV
 Barrierefreie Informationstechnik-Verordnung zum
Bundesgleichstellungsgesetz.
 Zielt grundsätzlich darauf, Sonderlösungen für behinderte Menschen oder für
einzelne Gruppen behinderter Menschen zu vermeiden. Die Erstellung eines
Internetangebots, das für alle Benutzergruppen gleichermaßen uneingeschränkt
nutzbar ist, hat Vorrang insbesondere vor einer "Nur-Text-Lösung" als Alternative
zum eigentlichen Internetangebot, da eine solche Darstellung in erster Linie nur für
bestimmte Benutzergruppen von behinderten Menschen, etwa für Benutzer von
Braille-Zeilen oder Screen-Readern, Barrierefreiheit erreicht. (Nr. 11.3, Anlage 1)

21.
Barrierefreiheit – Beispiele 1
 Einstellbarkeit der Schriftgröße, Kontraste (Farbenblindheit?)
 Der Nutzerin/dem Nutzer sind Informationen zum Kontext und zur
Orientierung bereitzustellen (Suche, Hilfe & Sitemap)
 Navigationsmechanismen sind übersichtlich und schlüssig zu
gestalten.
 Konventionen einhalten
 Was steht wo, was finde ich wo?
 Äquivalente für Audio- oder visuellen Inhalt, z.B. Textversion oder
Alt-Tag, Flash

22.
Barrierefreiheit – Beispiele 2
 Inhaltliche Barrierefreiheit („Einfache Sprache“, Abkürzungen,
Sprachwechsel kennenzeichnen für Screenreader)
 Technische Barrierefreiheit / Webstandards einhalten
 unabhängig vom Eingabegerät oder Ausgabegerät nutzbar
 Kompatibilität vor allem mit älteren Geräten, Browsern
 HTML/ CSS entsprechend der vorgegebenen Standards,
Vereinbarungen
 „valides HTML → fehlerfrei bestätigtes Markup“, der Browser muss
nicht raten, welche Art der Darstellung er wählen soll.
 http://validator.w3.org

23.
EN ISO Norm 9241-11
Anforderungen an die Gebrauchstauglichkeit
Die Gebrauchstauglichkeit einer Software ist von ihrem Nutzungskontext
abhängig. Im Teil 11 der ISO 9241 werden drei Leitkriterien für die
Gebrauchstauglichkeit einer Software bestimmt:
 Effektivität zur Lösung einer Aufgabe,
 Effizienz der Handhabung des Systems,
 Zufriedenheit der Nutzer einer Software.

24.
EN ISO 9241-110
Grundsätze der Dialoggestaltung
Benutzungsschnittstellen von interaktiven Systemen, wie Webseiten oder
Software, sollten vom Benutzer leicht zu bedienen sein. Der Teil 110 der DIN
EN ISO 9241 beschreibt die Grundsätze für die Gestaltung und
Bewertung einer Schnittstelle zwischen Benutzer und System.

25.
EN ISO 9241-110
Grundsätze der Dialoggestaltung - I
 Aufgabenangemessenheit – geeignete Funktionalität, Minimierung
unnötiger Interaktionen
 Selbstbeschreibungsfähigkeit – Verständlichkeit durch Hilfen /
Rückmeldungen
 Lernförderlichkeit – Anleitung des Benutzers, Verwendung geeigneter
Metaphern, Ziel: minimale Erlernzeit
 Steuerbarkeit – Steuerung des Dialogs durch den Benutzer

26.
EN ISO 9241-110
Grundsätze der Dialoggestaltung - II
 Erwartungskonformität – Konsistenz, Anpassung an das Benutzermodell
 Individualisierbarkeit – Anpassbarkeit an Benutzer und an seinen
Arbeitskontext
 Fehlertoleranz – Intelligente Dialoggestaltung zur Fehlervermeidung
seitens der Benutzer steht an erster Stelle; ansonsten: erkannte Fehler
des Benutzers verhindern nicht das Benutzerziel, unerkannte Fehler:
leichte Korrektur durch den Benutzer

27.
Gestaltungselemente für Websites
 Fließtext
 Überschriften
 Grafische Elemente und Hintergrund (z.B. Logo)
 Navigationsmenüs (Gruppierung einzelner Menüpunkte)
 Contentlinks
 Eingabefelder
 Buttons
 Icons
 Bilder und Thumbnails
 Leerflächen und Abstände
 Muster / Farben / Schriftarten / Größen

28.
Menüführung
Zu viele gleiche Punkte auf kleiner Fläche
Quelle: http://www.reformiert.de

29.
Menüführung

30.
The F-Shape or Golden Triangle
Schließen X

31.
The F-Shape or Golden Triangle
F
Schließen X

32.
The F-Shape or Golden Triangle

33.
Aufmerksamkeit und Lesen

34.
Blickverlauf

35.
Blickverlauf

36.
Gestaltung von Benutzerinteraktion
 Benutzer scannt.
 Benutzer liest.
 Benutzer klickt einen Link.
 Benutzer gibt etwas ein.
 Benutzer sendet ab.
 Benutzer denkt nicht nach.
 Benutzer denkt nach.

37.
Suchen und Filtern
Mehr Filter

38.
Suchen und Filtern
Weniger Filter

39.
Zielgruppenanalyse
 Interviews / Beobachtung von realen Benutzer der Website
 Ableiten von typischen Benutzerprofilen (Personas)
 Anwendungsfälle für Personas beschreiben
 Ablaufschritte einzeln dokumentieren
 User klickt Link
 User landet auf Seite XY
 User klickt Button...
 User landet auf...

40.
Personas
 Fiktive Benutzer, die auf Charakteristiken von realen Benutzer
basieren
 Werkzeug zur effektiven und effizienten Identifizierung der
Bedürfnisse der Benutzer
 Unterscheidung
 Primäre: Benutzer, auf denen der Hauptfokus liegt
 Sekundäre: weitere „mögliche“ Benutzer

41.
Vorstellung einiger Usability-Methoden
 Test: Wie gut lässt sich meine Website bedienen?
→ Thinking Aloud
 Test: Wo klicken meine Nutzer wirklich?
→ Screencasting
→ Clickheat Erstellung eines „Wärmebilds“
→ Wie betrachten meine Nutzer die Seite? Eye Tracking
 Benutzerfreundliche Menüstruktur
→ Card Sorting
 Design und Aufbau von zentralen Bausteinen meiner Website
→ Paper Prototyping

42.
Thinking Aloud
 „lautes Denken“
 Testpersonen beschreiben laut, warum sie nun
welche Aktionen durchführen
 Ziel: Verständnis der Denkweise des Benutzers
 Oft einzeln aber auch in Gruppen durchgeführt

43.
Screencasting
 Videoaufnahme der Aktionen am Bildschirm
 Software:
 Silverback (für Mac OS)
 CamStudio (kostenlos, http://www.camstudio.org)
 Capture Fox

44.
Capture Fox
 Add-On für Mozilla Firefox
 Kostenlos
 einfache Bedienung

45.
Card Sorting
 Eine Methode, um eine benutzergerechte Sortierung von
Begriffen zu ermitteln. (Hierarchie, Zugehörigkeit, Reihenfolge)
 Ziel: besucherfreundliche Gestaltung der Menüführung.
 Die Methode ist einfach und effektiv.
 Wann wird sie gebraucht? Ganz zu Beginn der
Konzeptionsphase.

46.
Paper Prototyping
 Skizzierung der Website / der Software-Bedienungsoberfläche
mit Hilfe eines ausgedruckten (oder von Hand skizzierten)
Papier-Prototypen
 Eine Person fungiert als „virtueller Computer“ und unterstützt die
Testperson.
 Ziel: Schnelles und effektives Testen zur Ermittlung der
Probleme der Oberfläche.
 Kann parallel zu anderen Entwicklungsphasen durchgeführt
werden.

47.
Quellen
 http://www.useit.com - Webseite von Jakob Nielsen
 http://www.marcel-zimmermann.de/seminar.htm - Vorlesung „Ergonomie für Informatiker“
 http://www.informatik.uni-bremen.de/~fmike/multilern/gestaltgesetze.html
 http://www.flow-usability.de/gestaltgesetze
 http://www.tg8.eu/webseiten/gestaltgesetze.html
 http://www.usability.de - Goodbye Golden Triangle: Eye Tracking Studie (Sep. 2009)
 http://dmt.fh-joanneum.at/projects/ebus2/
 http://www.barrierefreies-webdesign.de
 Don‘t make me think : Web usability - das intuitive Web / Steve Krug. Übers. aus dem
Amerikan. von Jürgen Dubau – Bonn : mitp-Verl., 2002 – ISBN: 3-8266-0890-9
 DIN EN ISO 9241 Ergonomie der Mensch-System-Interaktion

48.
Ansprechpartner
Ponton-Lab GmbH
Wiebke Müller
Junior Projektleiterin
Goseriede 4
30159 Hannover
0511 / 89 7009 0
wiebke.mueller@ponton-lab.de
www.ponton-lab.de