34
Akademie: Web-Usability Eva-Maria Erps 21.04.2016

Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Akademie: Web-Usability

Eva-Maria Erps

21.04.2016

Page 2: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Inhalt

Definition Usability nach ISO-Norm 9241-11

Definition Usability nach Jakob Nielsen

Warum ist Web-Usability so wichtig?

Gründe für eine schlechte Websitegestaltung

Auszug allg. Gestaltungsrichtlinien

Usability-Testing als TEMA-Dienstleistung

Beispielanalyse an ausgewählten Richtlinien

Literatur

21.04.2016 2

Page 3: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Definition Usability

21.04.2016 3

Page 4: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Definition Usability – 1

Nach ISO-Norm 9241-11:

„Usability ist das Ausmaß, in dem ein Produkt von einem

bestimmten Benutzer verwendet werden kann, um bestimmte

Ziele in einem bestimmten Kontext effektiv, effizient und

zufrieden stellend zu erreichen.“

21.04.2016 4

Page 5: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Definition Usability – 1a

Effektivität: die Genauigkeit und Vollständigkeit, mit welcher

Benutzer ein bestimmtes Ziel erreichen

Effizienz: Verhältnis der Genauigkeit und Vollständigkeit vom

eingesetzten Aufwand, mit welcher Benutzer ein bestimmtes

Ziel erreichen

Zufriedenheit: Freiheit von Beeinträchtigung und positive

Einstellungen gegenüber der Benutzung des Produkts

21.04.2016 5

Page 6: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Definition Usability – 2

Nach Jakob Nielsen:

„Usability is the measure of the quality of the user experience

when interacting with something - whether a Web site, a

traditional software application, or any other device the user

can operate in some way or another.”

21.04.2016 6

Page 7: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Definition Usability – 2a

Erlernbarkeit: Wie einfach ist es für Benutzer, grundlegende

Aufgabenstellungen zu erledigen, wenn sie das erste Mal dem Design

begegnen?

Effizienz: Wenn Benutzer das Design einmal erlernt haben, wie schnell

können sie Aufgaben damit ausführen?

Einprägsamkeit: Wenn Benutzer das Design für eine Weile nicht benutzt

haben, wie einfach können sie ihre Kenntnisse wiederherstellen?

Fehlertoleranz: Wie viele Fehler machen Benutzer, wie schwerwiegend

sind diese Fehler und wie einfach können sie wiedergutgemacht

werden?

Zufriedenstellung: Wie angenehm ist die Benutzung des Designs?

21.04.2016 7

Page 8: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Warum ist Web-Usability so wichtig?

21.04.2016 8

Page 9: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Warum ist Web-Usability so wichtig?

Usability ist wichtiger denn je:

User-Tests zeigen, dass B2B-Websites eine geringere

Usability aufweisen als B2C-Websites

Zur Leadgenerierung ist es unabdingbar die Usability-

Richtlinien zu befolgen

Diese machen es Interessenten einfacher, Angebote und

Produkte zu finden

Benutzerfreundlichkeit im Web ist entscheidend!

(Quelle Jakob Nielsen http://www.nngroup.com/articles/b2b-usability/)

21.04.2016 9

Page 10: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Gründe für eine schlechte Websitegestaltung

21.04.2016 10

Page 11: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Gründe für eine schlechte Websitegestaltung

Geschäftsmodell

Informationsarchitektur

Seitendesign

Inhaltliches

Verknüpfungsstrategie

21.04.2016 11

Page 12: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Auszug allg. Gestaltungsrichtlinien

21.04.2016 12

Page 13: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Auszug allg. Gestaltungsrichtlinien – 1

Farben

Kontrastreiche Kombination

Blendfreiheit

Nicht rot-grün

Alle Informationen auch ohne Farben verständlich

Schrift

Schriftgröße relativ definieren

Serifenlose Schrifttypen verwenden

Standardabstand zwischen Buchstaben nicht verringern

Formatierung durch Style Sheets

Effekte, Video- und Audiosequenzen

Steuerungsmöglichkeiten (Anhalten)

Zusätzlich textliche Beschreibung

Kein Flackern oder Aufblitzen im Bereich von ca. 4-59 Hertz

Kein Lauftext

Ggf. Transkripte für Videosequenzen

21.04.2016 13

Page 14: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Auszug allg. Gestaltungsrichtlinien – 2

Bilder

Text nicht als Bild-Datei einbinden

Immer beschreibender Text dazu

Informationen in Textform wiederholen

Imagemaps: zusätzliche Liste mit Übersicht über Anzahl und Ziel aller Links

Client-seitige statt Server-seitige Imagemaps erstellen

Links/Navigation

Inhaltsbezogene Bezeichnung

Alle Links mit der Tab-Taste ansteuerbar

Konsistente Positionierung

Wichtige Navigationselemente am Anfang der Seite platzieren

Evtl. Shortcuts für wichtige Links anbieten

Applets und Scripte

Nutbarkeit nicht von Endgeräten abhängig machen – Alternativen anbieten

Nutzbarkeit bei ausgeschalteten Applets und Scripten testen

Quellen: Jakob Nielsen oder Levitt und Shneiderman

21.04.2016 14

Page 15: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

HOME-RUN

Wichtigste Voraussetzung für gute Web-Usability – Gestalten Sie

kundenorientiert

HOME RUN

Hight quality content – Hohe Qualität des Inhalts

Often updated – Oft updaten

Minimal download time – Minimale Downloadzeiten

Ease to use – Einfach zu nutzen

Relevant to the user needs – Relevant für den Benutzer

Unique to the online medium – Unikal, einzigartig für das Online-Medium

Net-centric corporate culture – Netzzentrierte Unternehmenskultur

21.04.2016 15 TEMA Akademie

Page 16: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Usability-Testing als TEMA-Dienstleistung

21.04.2016 16

Page 17: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Ziel des Usability-Testings

Ziel des Usability-Testings ist es, ein Produkt benutzerorientiert zu

gestalten bzw. ein vorhandenes Produkt auf diese Kriterien hin zu

überprüfen.

21.04.2016 17

Page 18: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Usability-Testing als Life-Cycle

2. Konzeption

Festlegung des Interaktionsdesign

3. Umsetzung

Iteratives Testen und Optimieren von Prozessen und Funktionalitäten

4. Inbetriebnahme

Untersuchung des Status Quo und Ausloten von Potenzialen

1. Planung

Verstehen von Nutzerbedürfnissen

Iterative

Evaluation

21.04.2016 18

Page 19: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Methoden des Usability-Testings

Verschiedene Methoden:

Experten-Evaluation

Kognitiver Durchgang (Cognitive

Walkthrough)

Fokus Gruppen

Laut Denken

Aufmerksamkeitsanalyse

Fragebogenuntersuchung

21.04.2016 19

Page 20: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Test-Auswertung

Zur Auswertung werden die Probleme analysiert und

entsprechend ihrer Bedeutung für den Erfolg der Website

gewichtet.

Meist werden Probleme in den folgenden Bereichen aufgedeckt:

Missverständnisse bei Begriffen

Übersehen von Steuerungselementen

Orientierungsverlust

Technische Probleme

21.04.2016 20

Page 21: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Beispielanalyse

21.04.2016 21

Page 22: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Beispielanalyse an ausgewählten Richtlinien

Die Bildschirmfläche

Navigation

Links

Plattform- /Auflösungsunabhängiges Design

Für das Web schreiben

Scanbarkeit des Textes

Lesbarkeit des Textes

Seitentitel/Reitertitel

21.04.2016 22

Page 23: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Die Bildschirmfläche

Inhalte dominieren – Navigation ist

lediglich notwendiges Übel

Regel: Inhalt sollte 50 % der

Seitengestaltung ausmachen

Einfachheit setzt sich gegenüber

Komplexität durch

21.04.2016 23

Page 24: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Navigation

Benutzer verstehen Websitestruktur

erst, wenn sie wissen, wo sie sind

Eindeutige Navigationsmöglichkeiten

zeigen, wohin ein Benutzer gehen

kann

Leitmotiv für das Navigationsdesign:

Es existiert ein über die gesamte Site einheitliches Navigationsdesign

21.04.2016 24

Page 25: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Links

Links sind die wichtigsten

Bestandteile von Hypertexten

Sie sind im Navigationsprozess

ein Schlüsselfaktor

Wo war ich, wo bin ich und

wohin kann ich gehen

Links ohne Farbänderung

erzeugen Verwirrung bei der

Navigation

21.04.2016 25

Page 26: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Plattform- /Auflösungsunabhängiges Design

Benutzer greifen mit

unterschiedlichen Geräten auf

das Web zu

Optimierte Gestaltung für die

gängigsten Browser und

Endgeräte anstreben

21.04.2016 26

Page 27: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Für das Web schreiben

Schreibt man für das Web, beeinflusst man

nicht nur den Inhalt, sondern auch das

gesamte Surferlebnis.

Die drei wichtigsten Richtlinien für Texte im

Web sind:

Nicht mehr als 50 Prozent Text einer

gedruckten Publikation verwenden

Kurze Absätze, Zwischentitel und

Aufzählungen benutzen

Verwendung von Hypertext, um die

Information aufzuteilen

21.04.2016 27

Page 28: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Scanbarkeit des Textes

Bildschirmtexte liest man 25 Prozent

langsamer

Lange Bildschirmtexte werden

ungern gelesen

Benutzer scrollen nicht gern

21.04.2016 28

Page 29: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Lesbarkeit des Textes

Dicht gedrängte Textblöcke sind ein

Hauptgrund für das Verlassen einer

Website

Webtexte sollten kurz, scannbar und

zugänglich sein

Mit dem Fazit beginnen

Seitenüberschriften verwenden

Artikel durch Überschriften strukturieren

Textabschnitte durch Aufzählungen

oder ähnliche Gestaltungselemente

aufbrechen

Hervorhebungen für wichtige Wörter

nutzen

21.04.2016 29

Page 30: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Seitentitel/Reitertitel

Eindeutige Formulierungen nutzen

Nicht mehr als 30 Buchstaben verwenden

Informationstragende Wörter an den Anfang stellen

Bestimmte und unbestimmte Artikel vermeiden

Titel für schnelles Überfliegen optimieren

21.04.2016 30

Page 31: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Literatur

21.04.2016 31

Page 32: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Interessante Links zum Thema Usability – Bücher

Research-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman

Designing Web Usability: The Practice of Simplicity; Jakob Nielsen

Mobile Usability: Für iPhone, iPad, Android, Kindle; Jakob Nielsen,

Raluca Budiu Don´t Make Me Think! A Common Sense Approach to

Web Usability; Steve Krug

Usability praktisch umsetzen; Handbuch für Software, Web, Mobile Devices und andere interaktive Produkte, Sven Heinsen, Petra Vogt

Usability Engineering; Jakob Nielsen

Prioritizing Web Usability; Jakob Nielsen, Hoa Loranger

Eyetracking Web Usability (Voices That Matter); Susan Rimerman (Herausgeber), Kara Pernice (Autor), Jakob Nielsen (Autor)

...

21.04.2016 32

Page 33: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Interessante Links zum Thema Usability – Websites

http://www.usability.eresult.de/index.html

http://www.fit-fuer-usability.de

http://www.usability-umsetzen.de

http://www.nngroup.com/services/testing.html

http://www.nngroup.com/reports/prototyping/video_stills.html

http://www.useit.com/papers/heuristic/heuristic_list.html

http://www.useit.com/papers/heuristic/heuristic_evaluation.html

http://www.contentmanager.de/magazin/artikel_339_usabilitytests.html

http://www.torbar.de/usability-test.html

http://www.usability.at/produkte/analyse.html

http://experience-nw.fhbb.ch/cases/experience.nsf/volltext/swissguide

21.04.2016 33

Page 34: Akademie: Web-UsabilityResearch-Based Web Design & Usability Guidelines; Michael O. Leavitt, Ben Shneiderman Designing Web Usability: The Practice of Simplicity; Jakob Nielsen Mobile

Vielen Dank für Ihre Aufmerksamkeit!

21.04.2016 34