Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
-
Upload
ponton-lab-gmbh -
Category
Health & Medicine
-
view
2.279 -
download
1
description
Transcript of Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Workshop Usability
Erklärung einiger wichtiger Grundbegriffe und Regeln
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.
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)
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
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
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
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
Der Nutzer sieht, in welcher Phase der Flugbuchung er sich befindet.
Visibility of system status
Quelle: http//www.ryanair.com
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
Visibility of system status
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
Match between system and real world
Der Nutzer fragt sich, ob verschiedene Begriffe oder Symbole dasselbe bedeuten.
Quelle: http://bibli.com
Consistency and Standards
Das System verlangt eine Bestätigung des Nutzers, um Fehler zu vermeiden.
Quelle: http://www.sag-zu.de
Error Prevention
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
Objekte, Optionen und Aktionen sind sichtbar und sollen nicht aus früheren Abschnitten erinnert werden.
Quelle: http://www.parlameter.zdf.de
Recognition rather than recall
Individuelle Konfiguration des Browsers: Häufig besuchte Websites werden als Lesezeichen gespeichert.
Quelle: http:/www.facebook.com
Flexibility and efficiency of use
Durch ein schlichtes Design werden zentrale Elemente hervorgehoben (Logo und Spenden-Button). Quelle: http://www.drk.de
Aesthetic and minimalistic Design
Quelle: http://www.oxfam.de
Aesthetic and minimalistic Design
Die Fehlermeldung gibt Hinweise, was die Ursache für die Nicht-Auffindbarkeit der Seite sein kann.
Quelle: http://www.zdf.de
Help users recognize, diagnose and recover from errors
Kein Vorschlag für die Problemlösung
Help and Documentation
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)
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
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
Barrierefreiheit – Beispiele 2
EN ISO Norm 9241-11
Anforderungen an die Gebrauchstauglichkeit
Die Gebrauchstauglichkeit einer Software ist von ihrem Nutzungskontextabhängig. Im Teil 11 der ISO 9241 werden drei Leitkriterien für dieGebrauchstauglichkeit einer Software bestimmt:
Effektivität zur Lösung einer Aufgabe, Effizienz der Handhabung des Systems, Zufriedenheit der Nutzer einer Software.
EN ISO 9241-110
Grundsätze der Dialoggestaltung
Benutzungsschnittstellen von interaktiven Systemen, wie Webseiten oderSoftware, sollten vom Benutzer leicht zu bedienen sein. Der Teil 110 der DINEN ISO 9241 beschreibt die Grundsätze für die Gestaltung und Bewertung einer Schnittstelle zwischen Benutzer und System.
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
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
EN ISO 9241-110
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
Menüführung
Zu viele gleiche Punkte auf kleiner Fläche
Quelle: http://www.reformiert.de
Menüführung
Schließen X
The F-Shape or Golden Triangle
Schließen X
The F-Shape or Golden Triangle
F
The F-Shape or Golden Triangle
Aufmerksamkeit und Lesen
Blickverlauf
Blickverlauf
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.
Suchen und Filtern
Mehr Filter
Suchen und Filtern
Weniger Filter
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...
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
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
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
Screencasting
Videoaufnahme der Aktionen am Bildschirm
Software:
Silverback (für Mac OS)
CamStudio (kostenlos, http://www.camstudio.org)
Capture Fox
Capture Fox
Add-On für Mozilla Firefox
Kostenlos
einfache Bedienung
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.
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.
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
Ponton-Lab GmbH
Wiebke MüllerJunior Projektleiterin
Goseriede 430159 Hannover
0511 / 89 7009 [email protected]
Ansprechpartner