Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

48
Workshop Usability Erklärung einiger wichtiger Grundbegriffe und Regeln

description

Diese Folien geben einen Überblick über die Anforderungen und Grundlagen einer benutzerfreundlichen Websitegestaltung. Die Präsentation war Bestandteil eines Einsteiger-Workshops mit dem Titel Schreiben fürs Web/Optimierung der Usability am 08.03.2010 in Hannover. Mehr Infos / Ansprechpartner finden Sie unter www.ponton-lab.de

Transcript of Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Page 1: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Workshop Usability

Erklärung einiger wichtiger Grundbegriffe und Regeln

Page 2: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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.

Page 3: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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)

Page 4: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 5: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 6: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 7: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 8: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Der Nutzer sieht, in welcher Phase der Flugbuchung er sich befindet.

Visibility of system status

Quelle: http//www.ryanair.com

Page 9: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 10: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 11: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Der Nutzer fragt sich, ob verschiedene Begriffe oder Symbole dasselbe bedeuten.

Quelle: http://bibli.com

Consistency and Standards

Page 12: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Das System verlangt eine Bestätigung des Nutzers, um Fehler zu vermeiden.

Quelle: http://www.sag-zu.de

Error Prevention

Page 13: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 14: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 15: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Individuelle Konfiguration des Browsers: Häufig besuchte Websites werden als Lesezeichen gespeichert.

Quelle: http:/www.facebook.com

Flexibility and efficiency of use

Page 16: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Aesthetic and minimalistic Design

Page 17: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Quelle: http://www.oxfam.de

Aesthetic and minimalistic Design

Page 18: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 19: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Kein Vorschlag für die Problemlösung

Help and Documentation

Page 20: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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)

Page 21: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 22: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 23: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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.

Page 24: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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.

Page 25: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 26: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 27: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 28: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Menüführung

Zu viele gleiche Punkte auf kleiner Fläche

Quelle: http://www.reformiert.de

Page 29: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Menüführung

Page 30: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Schließen X

The F-Shape or Golden Triangle

Page 31: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Schließen X

The F-Shape or Golden Triangle

F

Page 32: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

The F-Shape or Golden Triangle

Page 33: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Aufmerksamkeit und Lesen

Page 34: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Blickverlauf

Page 35: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Blickverlauf

Page 36: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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.

Page 37: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Suchen und Filtern

Mehr Filter

Page 38: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Suchen und Filtern

Weniger Filter

Page 39: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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...

Page 40: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 41: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 42: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 43: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Screencasting

Videoaufnahme der Aktionen am Bildschirm

Software:

Silverback (für Mac OS)

CamStudio (kostenlos, http://www.camstudio.org)

Capture Fox

Page 44: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Capture Fox

Add-On für Mozilla Firefox

Kostenlos

einfache Bedienung

Page 45: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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.

Page 46: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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.

Page 47: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

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

Page 48: Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"

Ponton-Lab GmbH

Wiebke MüllerJunior Projektleiterin

Goseriede 430159 Hannover

0511 / 89 7009 [email protected]

Ansprechpartner