Usability und UX für Dummies E-Book

Elske Ludewig

• Herausgeber: Wiley-VCH Verlag GmbH & Co. KGaA
• Kategorie: Wissenschaft und neue Technologien
• Serie: ...für Dummies
• Sprache: Deutsch

Seitenzahl: 389

Veröffentlichungsjahr: 2020

Beschreibung

Sie erstellen eine Website und wissen nicht, wie Sie sie sinnvoll aufbauen und designen? Sie möchten Ihre Kunden länger auf Ihrer Website halten? Sie träumen davon, dass mehr Kunden den Kaufen-Button klicken? Steigen Sie mit diesem Buch in das Thema "Benutzerfreundlichkeit" und "Positives Nutzererlebnis" ein. Führen Sie Ihre Kunden schnell und einfach zu ihrem Ziel, vermitteln Sie ihnen ein positives Gefühl und machen Sie ihnen die Kaufentscheidung leicht. Fangen Sie bei der Lesbarkeit der Texte an, achten Sie auf die Auffindbarkeit wichtiger Funktionen und lernen Sie, wie man benutzerfreundliche Formulare entwickelt. Was bei mobilen Websites und Apps anders ist, erfahren Sie natürlich auch.

Leseprobe

Usability und UX für Dummies

Schummelseite

DIE WICHTIGSTEN USABILITY-METHODEN JE ENTWICKLUNGSPHASE

Ein nutzerzentrierter Entwicklungsprozess besteht aus den folgenden vier Phasen. Pro Phase sind diejenigen Methoden aufgelistet, die am häufigsten eingesetzt werden, um die jeweiligen Ziele zu erreichen.

Nutzungskontext verstehen und beschreibenBefragungen (quantitativ)BeobachtungWebtrackingPersonasCustomer Journey MapsFokusgruppenNutzungsanforderungen verstehen und beschreibenAbleitung von Erfordernissen und verschiedenen Arten von Anforderungen, die aus Phase 1 hervorgehen.Gestaltungslösungen entwickelnWireframingPrototypingCard SortingGestaltungslösungen evaluierenUsability-TestExpertenbasierte EvaluationDesign-Test (quantitativ)

DIE ZEHN USABILITY-HEURISTIKEN NACH NIELSEN UND MOLICH

Diese Merkmale von Benutzerfreundlichkeit stammen von zwei Usability-Pionieren und lassen sich in der Praxis leicht anwenden:

Sichtbarkeit des Systemstatus: Der Nutzer sollte erkennen können, in welchem Zustand sich das System befindet und ob seine letzte Aktion erfolgreich war.Übereinstimmung von System und realer Welt: Verwenden Sie Begriffe oder Symbole, die der Nutzer auch abseits von digitalen Anwendungen kennengelernt hat.Benutzerkontrolle und -freiheit: Der Nutzer sollte stets die Hoheit über das System haben und es jederzeit selbst steuern können.Konsistenz und Standards: Das System sollte in sich konsistent sein und sich an allgemein etablierten Standards orientieren.Fehler vermeiden: Das System sollte so gestaltet sein, dass Fehleingaben durch den Nutzer möglichst vermieden werden.Erkennen vor Erinnern: Nutzer sollten sich während der Bedienung nichts merken müssen, sondern die richtigen Eingaben oder Schritte leicht selbst erkennen können.Flexibilität und effiziente Nutzung: Den Nutzern sollten Abkürzungen und individuelle Anpassungen an einem System ermöglicht werden, die seinen Bedürfnissen entsprechen.Ästhetisches und minimalistisches Design: Überflüssige Elemente und Funktionen sollten vermieden werden, damit das System übersichtlich bleibt.Unterstützen beim Erkennen und Beheben von Fehlern: Bei Fehleingaben sollte die Ursache direkt ersichtlich sein, sodass der Nutzer sie schnell und einfach korrigieren kann.Hilfe und Dokumentation: Hilfestellungen und Anleitungen sollten dem Nutzer bei Bedarf ergänzend zur Verfügung gestellt werden.

SECHS TIPPS FÜR BENUTZERFREUNDLICHE FORMULARE

Damit Ihre Nutzer Eingabefelder und Formulare vollständig und erfolgreich ausfüllen, gilt es Folgendes zu beachten:

Fragen Sie nur wirklich benötigte Informationen ab. Alles was Sie nicht unbedingt wissen müssen, sollten Sie weglassen.Verwenden Sie verständliche und allgemein übliche Bezeichnungen für die Formularfelder. Diese sollten links oder oberhalb eines Felds stehen.Ordnen Sie die Felder und deren Namen übersichtlich an. Achten Sie dabei auf Bündigkeit und angemessene Abstände.Kennzeichnen Sie Pflichtfelder zum Beispiel mit einem Stern-Symbol und vergessen Sie die Legende nicht. Bei sehr wenigen optionalen Feldern können Sie auch diese statt der Pflichtfelder kennzeichnen (natürlich nicht mit einem Stern).Bieten Sie Hilfestellungen für die richtigen Formate an und bei Bedarf auch für die korrekte Eingabe, insbesondere wenn es sich um fachspezifische Daten handelt (kenntlich gemacht zum Beispiel mit einem Info-Icon).Achten Sie auf eindeutige, höfliche und verständliche Fehlermeldungen. Außerdem sollten diese so platziert sein, dass der Nutzer sofort sieht, wo und was für ein Fehler aufgetreten ist.

Usability und UX für Dummies

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

© 2020 WILEY-VCH Verlag GmbH & Co. KGaA, Weinheim

Wiley, the Wiley logo, Für Dummies, the Dummies Man logo, and related trademarks and trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries. Used by permission.

Wiley, die Bezeichnung »Für Dummies«, das Dummies-Mann-Logo und darauf bezogene Gestaltungen sind Marken oder eingetragene Marken von John Wiley & Sons, Inc., USA, Deutschland und in anderen Ländern.

Das vorliegende Werk wurde sorgfältig erarbeitet. Dennoch übernehmen Autoren und Verlag für die Richtigkeit von Angaben, Hinweisen und Ratschlägen sowie eventuelle Druckfehler keine Haftung.

Coverfoto: © Chaosamran_Studio – stock.adobe.com

Korrektur: Claudia Lötschert, Neuss

Print ISBN: 978-3-527-71633-3

ePub ISBN: 978-3-527-82391-8

Über die Autorin

Elske Ludewig studierte Soziologie, Psychologie und Informatik an der Friedrich-Schiller-Universität in Jena. Nach ihrem Studium entdeckte sie das Themenfeld Usability für sich, das sie nicht mehr losließ. Bei der in Göttingen gegründeten Agentur für User Experience mit dem Namen »eresult« lernte sie nicht nur die theoretischen Grundlagen in aller Gründlichkeit, sondern sammelte vor allem sehr viel Praxiserfahrung.

Sie wendete die Methoden aus den Fächern Soziologie und Psychologie im Kontext von Websites und Apps an: Befragungen, Interviews, Evaluations- und Testverfahren sowie statistische Analysen standen anfangs im Fokus.

Elske Ludewig ist heute im 13. Jahr für eresult tätig und hat viele namhafte Kunden aus verschiedenen Branchen zu den Themen Usability, UX und UX Design beraten. Dabei setzt sie das gesamte Methodenportfolio eines UX Consultants ein, um gemeinsam mit ihren Kunden benutzerfreundliche und nachhaltig erfolgreiche Anwendungen zu gestalten.

In Form von Seminaren, Blogbeiträgen, Fachartikeln und Vorträgen gibt sie ihr Wissen weiter und versucht, gute UX in die Welt zu tragen. Sie ist zudem aktives Mitglied der German Usability Professionals Association (UPA) und organisiert regelmäßig das sogenannte »Usability Testessen« in ihrer Stadt.

Inhaltsverzeichnis

Cover

Über die Autorin

Einleitung

Über dieses Buch

Was Sie nicht lesen müssen

Törichte Annahmen über den Leser

Wie dieses Buch aufgebaut ist

Symbole, die in diesem Buch verwendet werden

Wie es weitergeht

Teil I: Usability und User Experience im Überblick

Kapitel 1: Grundbegriffe und Kriterien verstehen

Usability

User Experience

Customer Experience oder die Summe aller Berührungspunkte

Wo anfangen? Eine Einstiegshilfe

Kapitel 2: Websites und Apps bewerten lernen

Leitlinien zur Gestaltung von Benutzungsschnittstellen

Heuristiken nach Nielson und Molich

Usability-Regeln anwenden – die heuristische Evaluation

Kapitel 3: Die wichtigsten Methoden zur Optimierung von Websites und Apps

So führen Sie Usability-Reviews durch

Usability-Tests erfolgreich einsetzen

Teil II: Den Nutzer verstehen und sein Verhalten beeinflussen

Kapitel 4: So tickt der Nutzer – Informationsverarbeitung und Entscheidungsprozesse

Der »Energiespar-Kopf«

Was Nutzer wirklich sehen, wenn sie eine Website betrachten

Wie sich das Gehirn einen Reim auf Strukturen macht

Wie Nutzer Informationen verarbeiten und bewerten

Wie Nutzer einfacher und besser Entscheidungen treffen

Kapitel 5: Wie der Nutzer tut, was Sie gern hätten

Das Problem mit dem Entscheiden

Besitz schafft Wert

Wenn nur das Ergebnis zählt

Der Herdentrieb

Künstliche Verknappung

Wie du mir, so ich dir

Warum Ausnahmen keine Regeln bestätigen

Die Lotto-Falle

Sympathie macht großzügig

Der Ankereffekt

Bloß nichts abgeben

Mehr Schein als Sein?

Kapitel 6: So messen und erheben Sie Nutzerverhalten

Webtracking – der Klassiker unter den Messmethoden

Dem Nutzer über die Schulter schauen: Teilnehmende Beobachtung

Standardisierte Online- oder Onsite-Befragungen

Die Erkenntnisse richtig nutzen

Teil III: Methoden zur Bewertung und Optimierung von Usability und UX

Kapitel 7: Der nutzerzentrierte Gestaltungsprozess (User Centered Design)

Bevor es losgeht: Den Prozess planen

Ziele und Wettbewerbsumfeld definieren

Den Ablauf festlegen

Die Qual der Wahl: Welche Methoden brauche ich?

Die Ressourcenplanung

Zeitplanung

Eine Checkliste zum Schluss

Kapitel 8: Methoden zum Kennenlernen und Verstehen des Nutzers

Den Nutzungskontext verstehen und beschreiben (Phase 1)

Die Nutzungsanforderungen spezifizieren (Phase 2)

Anforderungsanalyse – was nun?

Kapitel 9: Methoden zum Entwickeln von benutzerfreundlichen Lösungen

Inhalte für die geplante Anwendung festlegen

Inhalte strukturieren

Skizzen anfertigen

Skizzen verfeinern und zu konkreten Entwürfen weiterentwickeln

Prototypen erstellen und testen

Entwürfe und Prototypen optimieren bis zur finalen Anwendung

Erfüllt die Anwendung die Nutzungsanforderungen?

Kapitel 10: Methoden zur kontinuierlichen Erfolgskontrolle

Variantentests und multivariates Testing

Usability-Fragebögen

Regelmäßige Usability-Tests

Teil IV: DIY – Usability-Optimierung für den Alltag

Kapitel 11: Alles an Ort und Stelle: Der richtige Website-Aufbau

Zentrale Elemente richtig platzieren

Navigationselemente richtig positionieren

Der Aufbau mobiler Websites

Kapitel 12: Lesbarkeit und Textgestaltung

Verständlich schreiben

Schriftarten und Textstrukturierung

Kapitel 13: Links und Buttons richtig gestalten

Gut verlinkt ist halb geblinkt

Drück mich! Links mit Aufforderungscharakter

Kapitel 14: Formulare, die nicht nerven, sondern abgeschickt werden

Struktur und Anordnung

Arten von Eingabefeldern

Kennzeichnung von Pflichtfeldern

Hilfreiche Fehlermeldungen

Kapitel 15: Suchen und Finden: So unterstützen Sie Ihre Nutzer zielgerichtet

Das Eingabefeld

Die Ergebnisseite: Aufbau und Interaktionsmöglichkeiten

Teil V: Spezialwissen für Apps und mobile Websites

Kapitel 16: Responsives Design: Die unendliche Vielfalt von Bildschirmgrößen

Wie funktioniert responsives Design?

Eine responsive Website konzipieren

Responsive Websites und Apps optimieren

Kapitel 17: Nicht klicken, sondern tippen: Die speziellen Anforderungen von Touch-Devices

Finger statt Maus: Das ist anders

So werden Bedienelemente »Touch-freundlich«

Teil VI: Der Top-Ten-Teil

Kapitel 18: Die 10 besten Link-Tipps rund um Usability und User Experience

Usabilityblog

Produktbezogen

User Experience Blog

German UPA

Psyconversion

YouTube-Kanal »Indra Burkart«

Nielsen Norman Group

UsabilityGeek

UXmatters

UX Booth

Stichwortverzeichnis

End User License Agreement

Tabellenverzeichnis

Kapitel 2

Tabelle 2.1: Beispiel-Protokollbogen für eine heuristische Evaluation

Kapitel 6

Tabelle 6.1: Einsatzbereiche und Grenzen von Webtracking

Kapitel 7

Tabelle 7.1: Methodenauswahl für die Planungsphase

Tabelle 7.2: Haben Sie an alles gedacht? Wenn Sie überall einen Haken g...

Illustrationsverzeichnis

Kapitel 1

Abbildung 1.1: Der Unterschied zwischen Usability und User Experience (©...

Abbildung 1.2: Die Bedürfnispyramide der User Experience (eigene Darste...

Kapitel 2

Abbildung 2.1: Das Registrierungsformular der Website

xing.com

verzichtet auf ...

Abbildung 2.2: Die 1-Click®-Bestellung von Amazon ist aufgabenangemesse...

Abbildung 2.3: Im Onlineshop von Douglas ist der aktuelle Standort durch den...

Abbildung 2.4: Im Bestellprozess von Bonprix sind der aktuelle sowi...

Abbildung 2.5: Dynamische Ladeanzeigen verdeutlichen dem Nutzer, dass das Sy...

Abbildung 2.6: Der Onlineshop otto.de ist erwartungskonform – links di...

Abbildung 2.7: Hilfe-Symbole, die dort eine Erklärung bereithalten, wo ...

Abbildung 2.8: Themenbühne auf der Website des Bundesministeriums für ...

Abbildung 2.9: Bei dieser Newsletter-Anmeldung kann der Nutzer beeinflussen, ...

Abbildung 2.10: Wenig hilfreiche Fehlermeldungen: unscheinbare Meldung unter...

Abbildung 2.11: Aussagekräftige Fehlermeldung mit zahlreichen Hinweisen...

Abbildung 2.12: Nach Klick auf den Link »Artikel merken« erhäl...

Abbildung 2.13: Begriffe aus der realen Welt machen Funktionen auf Websites ...

Abbildung 2.14: Die Möglichkeit, den Onlineantrag für diese Versic...

Abbildung 2.15: Laut einer Studie der eresult GmbH aus dem Jahr 2014 wä...

Abbildung 2.16: Dieses Formular vermeidet Fehleingaben, indem es dem Nutzer ...

Abbildung 2.17: Durch eine passende Hilfestellung an der richtigen Stelle mu...

Abbildung 2.18: Gutscheincodes sollte sich der Nutzer nicht merken...

Abbildung 2.19: Individuelle Ansichten, wie hier in Microsoft Word, ermö...

Abbildung 2.20: Wenn das Passwort nicht den Anforderungen entspricht, sollte...

Abbildung 2.21: Verschiedene Hilfsangebote auf der Website eines Mobilfunkan...

Abbildung 2.22: Ein Chat gehört zu den weit verbreiteten Kontaktmö...

Abbildung 2.23: Beispiel für die Kennzeichnung eines gefundenen Problem...

Kapitel 3

Abbildung 3.1: Vergleich zwischen einem Usability-Review und einem Usability...

Abbildung 3.2: Usability-Test-Situation mit Probandin (links) und Interviewe...

Abbildung 3.3: Mit etwas Geschick und Übung können sogar selbst ge...

Abbildung 3.4: Der Anteil der gefundenen Probleme nach der Anzahl der Proban...

Abbildung 3.5: Vor- und Nachteile der Doppelrolle als Interviewer, der gleic...

Abbildung 3.6: Manchmal ist es gar nicht so einfach, sich nicht anm...

Kapitel 4

Abbildung 4.1: Der fixierte Bereich ist kaum größer als eine Euro-...

Abbildung 4.2: Nutzer verweilen auf Text- oder Trefferseiten mit den Blicken ...

Abbildung 4.3: Top-down-Verarbeitung anhand von Vorwissen: Das Gehirn sucht ...

Abbildung 4.4: Nähe erzeugt den Eindruck von Zusammengehörigkeit.

Abbildung 4.5: Die Texte können nicht so leicht den Bildern zugeordnet ...

Abbildung 4.6: Äußerlich ähnliche Elemente werden als zusamme...

Abbildung 4.7: Das weiße Dreieck wird vom Gehirn konstruiert, weil es g...

Abbildung 4.8: Diese Website ist zwar sehr lang, durch die relativ klare Gli...

Abbildung 4.9: Die Anordnung in eingerahmten Kacheln ist eine gute Mögl...

Abbildung 4.10: Links müssen beim Lesen immer wieder Entscheidungen get...

Kapitel 5

Abbildung 5.1: Filterfunktionen helfen, die große Auswahl einzuschrän...

Abbildung 5.2: Produktvergleiche sollen dem Nutzer helfen, eine gute Entsche...

Abbildung 5.3: Die Überschrift soll Ihnen suggerieren, dass die Reise s...

Abbildung 5.4: Besonders die Kosmetik-Industrie betont immer wieder das Erge...

Abbildung 5.5: Kundenbewertungen und Weiterempfehlungsraten funktionieren, w...

Abbildung 5.6: Verknappung, und sei sie künstlich erzeugt, kann Nutzer ...

Abbildung 5.7: Gewinnspiele funktionieren, weil wir uns Ereignisse viel bess...

Abbildung 5.8: Sympathie wird auch erreicht, wenn ein Unternehmen seine Kund...

Abbildung 5.9: Da der ursprüngliche Preis den Anker für den Wert d...

Abbildung 5.10: Wütende Gesichter werden schneller und effizienter vera...

Kapitel 6

Abbildung 6.1: Google Analytics bietet eine App, mit der Sie auch unterwegs ...

Abbildung 6.2: Exemplarische Trichter-Analyse, die mit Web-Analytic...

Abbildung 6.3: Analytics-Tools geben detailliert Auskunft darüber, wie ...

Abbildung 6.4: Mouse-Tracking ist eine Spezialform von Web Analytics und bie...

Abbildung 6.5: Beobachtung bei der Nutzung einer Transaktions-App in natü...

Abbildung 6.6: Beispiel für eine standardisierte Frage mit festgelegten...

Abbildung 6.7: Im unteren Seitenbereich befindet sich der Hinweis auf die Be...

Kapitel 7

Abbildung 7.1: Der menschzentrierte Gestaltungsprozess laut DIN ISO 9241-210...

Abbildung 7.2: Geeignete Methoden je Entwicklungsphase im menschzentrierten ...

Abbildung 7.3: Ablauf eines Entwicklungsprozesses anhand eines praktischen B...

Kapitel 8

Abbildung 8.1: In Phase 1 und 2 im menschzentrierten Gestaltungsprozess nach...

Abbildung 8.2: Interviewsituation eines Kontextinterviews in natürliche...

Abbildung 8.3: Schematischer Aufbau einer Fokusgruppe und ihrer Vorteile

Abbildung 8.4: Gruppendiskussionsplatz mit Einweg-Spiegel und Monitor zu Dem...

Abbildung 8.5: Aufbau und Inhalte eines Moderationskonzepts für Fokusgr...

Abbildung 8.6: Solche Notizen helfen später, die Aussagen besser einord...

Abbildung 8.7: Beispiel für eine Persona aus dem Versicherungskontext

Abbildung 8.8: Statistische Daten sind wichtig, aber wenig hilfreich, um sic...

Abbildung 8.9: Exemplarische Gegenüberstellung verschiedener Cluster-L...

Abbildung 8.10: So könnte der Ablauf eines Projekts zur Erstellung von ...

Abbildung 8.11: Personas-Tabelle im Poster-Format (Beispiel aus dem Finanzko...

Abbildung 8.12: Customer Journey Maps zeigen das gesamte Szenario, über...

Abbildung 8.13: Exemplarische Vorlage für eine Customer Journey Map

Abbildung 8.14: Gegenüberstellung von Mapping-Methoden

Abbildung 8.15: Zusammenhang zwischen den Methoden, Erfordernissen und Nutzu...

Abbildung 8.16: Der menschzentrierte Gestaltungsprozess laut DIN ISO 9241-21...

Kapitel 9

Abbildung 9.1: Die Phasen 3 und 4 im menschzentrierten Gestaltungsprozess (l...

Abbildung 9.2: Ergebnis eines Card Sortings: Die zahlreichen Inhalte (kleine...

Abbildung 9.3: Schematischer Aufbau eines geschlossenen Card Sorting. In die...

Abbildung 9.4: Exemplarische Mind Map, erstellt mit dem kostenfreien Tool XM..

Abbildung 9.5: Einfaches Scribble für eine Smartphone- und eine Tablet...

Abbildung 9.6: Am Computer erstelltes Scribble mit Smartphone-Rahmen aus Pap...

Abbildung 9.7: Beispiel für einen Wireframe

Abbildung 9.8: PowerMockup ist eine nützliche Zusatzanwendung in PowerP...

Abbildung 9.9: Exemplarischer Ablauf eines Rapid Prototypings mit drei Itera...

Abbildung 9.10: Arten von Remote-Usability-Tests und ihre wichtigsten Eigens...

Abbildung 9.11: Exemplarisches Ergebnis eines Design-Tests. Die Varianten wu...

Abbildung 9.12: Navigationsstruktur eines Onlineshops

Abbildung 9.13: Ansicht für einen Probanden im Tree-Test: links der bis...

Abbildung 9.14: Eine Möglichkeit der Ergebnisdarstellung für eine ...

Abbildung 9.15: Der menschzentrierte Gestaltungsprozess (laut DIN ISO 9241-2...

Kapitel 10

Abbildung 10.1: Die tageweise Auswertung ist nur eine von vielen und liefert...

Abbildung 10.2: Exemplarisches Ergebnis einer UEQ-Erhebung mit der Original...

Abbildung 10.3: Die Kurzversion des VisAWI-Fragebogens von Moshagen & Ti...

Kapitel 11

Abbildung 11.1: Startseite mit wechselnden Bildern, ebenfalls sehr groß...

Abbildung 11.2: Kontaktangebote am rechten Seitenrand vor und nach Über...

Abbildung 11.3: Gut genutzter Footer mit allen wichtigen Elementen (Quelle: ....

Abbildung 11.4: Gestaltungsraster helfen beim Einhalten von Abständen u...

Abbildung 11.5: Ausschnitt der Website

www.uni-tuebingen.de

mit ...

Abbildung 11.6: Zurück-Links sollten stets oben links platziert sein, g...

Abbildung 11.7: In Prozessen können Zurück-Links auch unten links ...

Abbildung 11.8: Dieselbe Website auf zwei verschiedenen Endgeräten: obe...

Kapitel 12

Abbildung 12.1: Einen solchen Text liest niemand gern.

Abbildung 12.2: Das Bild beziehungsweise die Form eines Worts hilft dem Nutz...

Abbildung 12.3: Die linksbündige Ausrichtung (rechts im Bild) ist f...

Abbildung 12.4: Zum Vergleich: links einfacher, in der Mitte anderthalbfache...

Abbildung 12.5: Bei wikipedia.de wird auf die Zeilenlänge kein besonder...

Abbildung 12.6: Die Zeile eines Texts sollte zwischen 45 und 85 Zeichen habe...

Abbildung 12.7: Eingerahmte Textpassagen lockern das Erscheinungsbild des Te...

Abbildung 12.8: Prozessbeschreibungen mit Nummerierungen und Illustrationen ...

Abbildung 12.9: Ein gut strukturierter Text wird von Nutzern häufiger u...

Abbildung 12.10: Beispielhafte Darstellung eines sogenannten Akkordeons

Abbildung 12.11: Oben eine horizontale Reiterlösung, unten eine vertika...

Kapitel 13

Abbildung 13.1: Verlinkungen bei wikipedia.de: auf der linken Seite ohne Mau...

Abbildung 13.2: Bei solchen Teasern ist ein »mehr«-Link erlaubt.

Abbildung 13.3: Verschiedene Gestaltungsmöglichkeiten für Buttons

Abbildung 13.4: Wichtige, weiterführende Buttons (hier: »ZUR KASSE...

Abbildung 13.5: Durch unterschiedlich stärke Färbung werden die Bu...

Abbildung 13.6: Vor dem Löschen fragt

dropbox.com

den Nutzer zur ...

Abbildung 13.7: In den Programmen von Microsoft (oben Outlook und unten Wind...

Abbildung 13.8: In iOS von Apple ist der weiterführende Button rechts p...

Abbildung 13.9: Empfehlungen für die Smartphone-Buttongröße u...

Abbildung 13.10: Tooltip im Chrome-Browser, der bei Berührung des Hä...

Abbildung 13.11: Bei Checkboxen sollte sich auch der nebenstehende Text ankl...

Abbildung 13.12: Radiobuttons sind eine »Entweder-oder«-Auswahl. ...

Abbildung 13.13: Umschaltflächen können ganz unterschiedlich gesta...

Kapitel 14

Abbildung 14.1: In Formularen mit vielen virtuellen Linien finden sich Nutze...

Abbildung 14.2: Zwischenüberschriften oder Gruppierungen geben einem Fo...

Abbildung 14.3: Das gleiche Formular in zwei Bildschirmauflösungen: Auf...

Abbildung 14.4: Das Geburtsdatum wird in einem Textfeld abgefragt, aber das ...

Abbildung 14.5: Formular mit Drop-down-Menü, einzeiligem und mehrzeilig...

Abbildung 14.6: Solche Kalender eignen sich für Termine, nicht abe...

Abbildung 14.7: Radiobuttons und Checkboxen werden am besten für wenige...

Abbildung 14.8: Stern-Symbole kennzeichnen in der Regel Pflichtfelder.

Abbildung 14.9: Im Moment des Ausfüllens wird geprüft, ob die Eing...

Abbildung 14.10: Zwei hilfreiche und höfliche Fehlermeldungen

Kapitel 15

Abbildung 15.1: Die Suchfunktion in Onlineshops wurde bereits im Jahr 2014 o...

Abbildung 15.2: Auf der Website europcar.de ist das Suchfeld sehr groß ...

Abbildung 15.3: Das Suchfeld ist durch seine Gestaltung in Verbindung mit de...

Abbildung 15.4: Die Hilfestellung zur Sucheingabe verschwindet, wenn der Nut...

Abbildung 15.5: Eine gute Vorschlagsfunktion mit Produktgruppen und Einzelpr...

Abbildung 15.6: Beispiel für Filterfunktionen im Modebereich

Abbildung 15.7: Um den Nutzer nicht zu überfordern, sind die Filterkrit...

Abbildung 15.8: Die gesetzten Filter sind gut sichtbar und über ein x-S...

Abbildung 15.9: Eine Sortierfunktion wird rechts oben erwartet.

Abbildung 15.10: Trotz eines Tippfehlers hat die Website passende Treffer au...

Abbildung 15.11: Dem Nutzer werden hilfreiche Vorschläge zur weiteren V...

Kapitel 16

Abbildung 16.1: Gängige Bildschirmauflösungen für verschieden...

Abbildung 16.2: Mögliche Gestaltungsraster für verschiedene Bildsc...

Abbildung 16.3: Bilder können je nach Bildschirmauflösung mit unte...

Abbildung 16.4: Die von den Geräten bereitgestellten Funktionen sollten...

Abbildung 16.5: Drei Navigationsebenen können auch auf mobilen Endger...

Abbildung 16.6: Verschiedene Varianten für das Symbol, das auf kleinen ...

Abbildung 16.7: Nach Tipp auf das Hamburger-Icon werden die Hauptnavigations...

Abbildung 16.8: Eine gute Möglichkeit, die Navigationsstruktur auf klei...

Kapitel 17

Abbildung 17.1: Die reaktive Fläche von Elementen ist meist größ...

Abbildung 17.2: Bei einhändiger Bedienung eines Smartphones sind die Be...

Abbildung 17.3: Nicht alle Bereiche eines Smartphone-Displays sind mit dem D...

Abbildung 17.4: Die Navigation kann in Apps und auf mobilen Websites auch un...

Abbildung 17.5: Der Warenkorb-Button ist hier im Verhältnis zur Bildsch...

Abbildung 17.6: Innerhalb einer Liste können E-Mails oder Produkte mit ...

Orientierungspunkte

Cover

Inhaltsverzeichnis

Fangen Sie an zu lesen

Seitenliste

1

2

3

7

8

9

19

20

21

22

23

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

301

302

303

304

305

306

307

309

311

312

313

315

316

317

318

Einleitung

Wenn mich jemand fragt, was ich beruflich mache, habe ich mindestens drei verschiedene Antworten parat. Je nach Hintergrund und Wissensstands meines Gegenübers versuche ich, eine passende Antwort zu geben. Und doch kann ich in den Gesichtern häufig lesen, dass die Antwort auch nach zwölf Jahren Übung nicht ganz verständlich war.

Zum einen ist »Usability« ein Wort, das selbst diejenigen oft nicht kennen, die zumindest fürs Verreisen einen ordentlichen englischen Wortschatz erworben haben. Zum anderen ist dies ein Feld, von dem viele nicht wissen, dass es überhaupt existiert (selbst wenn man es komplett auf Deutsch erklärt).

Nach ausführlicher Beschreibung meiner Tätigkeiten höre ich dann oft Sätze wie »Was es alles gibt …«. Aber dennoch pflichten mir die meisten bei, dass sie sich auch schon einmal geärgert haben, wenn etwas am Computer nicht funktioniert oder im Internet so richtig nervt.

Und nach ein paar amüsanten Beispielen stimmt mir dann eigentlich jeder zu, dass es sinnvoll ist, sich damit zu beschäftigen. Und da Sie zumindest gerade überlegen, ob Sie das Buch lesen sollten, werden Sie der gleichen Meinung sein.

Vielleicht war es gar nicht Ihre Idee, sich Wissen zu dem Thema anzueignen. Aber in jedem Fall werden Sie merken, wie spannend es sein kann, diesen neuen Blickwinkel einzunehmen. Und hier kommt auch gleich die schlechte Nachricht: Sie werden nach dem Lesen dieses Buchs wohl nie wieder eine Website oder App nutzen können, ohne Usability-Fehler zu finden. Sie werden deutlich kritischer und intoleranter gegenüber schlechter Bedienbarkeit. Sie werden vielleicht sogar zum Nörgler – oder positiv formuliert: zum Optimierer.

In jedem Fall tun Sie vielen Menschen etwas Gutes, wenn Sie an einer Website oder App arbeiten und diese besser bedienbar wird:

Die Nutzer kommen schneller zum Ziel und sind nach der Nutzung zufriedener. Dadurch ist es wahrscheinlicher, dass sie die Anwendung wieder nutzen oder positiv darüber berichten werden.

Als Betreiber einer gut bedienbaren Website haben Sie weniger Abbrüche zu verzeichnen und – falls Sie etwas verkaufen – die Chance auf mehr Umsatz. Zudem müssen Sie weniger Support leisten: Die Anzahl der Nachrichten und Anrufe wegen Rückfragen durch die Nutzer lässt sich deutlich reduzieren.

Im Zusammenhang mit geringeren Kosten für die Behebung von Bedienproblemen spart ein frühzeitiger Einsatz von Usability-Methoden also bares Geld, das in andere Unternehmensbereiche investiert werden kann.

Und auch wenn sich dieses Buch in erster Linie an Menschen richtet, die eine Website oder App betreiben: Ich bin überzeugt davon, dass die Digitalisierung unserer Lebens- und Arbeitswelt erfolgreicher wäre, wenn das Thema User Experience und damit die wahren Bedürfnisse der Nutzer stärker in den Vordergrund rücken würden. Lassen Sie uns gemeinsam einen kleinen Schritt in diese Richtung gehen und hier und heute mit diesem Buch starten!

Über dieses Buch

Sie können in diesem Buch an verschiedenen Stellen einsteigen, je nachdem ob Sie an fundierten Hintergrundinformationen oder an praktischen Tipps interessiert sind. Es war mir wichtig, auch die theoretische Seite von Usability und User Experience zu beleuchten. Denn diese Grundlagen helfen, ein tiefer gehendes Verständnis für das Thema zu entwickeln und dieses selbstständig in die Praxis zu übertragen.

Deshalb finden Sie in diesem Buch sowohl Definitionen und ausführliche Methodenbeschreibungen als auch handfeste Empfehlungen zur sofortigen Umsetzung auf Ihrer eigenen Website.

Ich bin beim Schreiben davon ausgegangen, dass Sie selbst vielleicht eine Website oder App betreiben und noch nicht allzu viel über Usability wissen. Da Sie dieses Buch in den Händen halten, haben Sie jedoch die Erwartung, dass die Verbesserung der Benutzungsfreundlichkeit Ihrer Anwendung mindestens zu zufriedeneren Nutzern führt und im besten Fall sogar zu mehr Umsatz.

Vielleicht studieren Sie auch oder bereiten sich auf eine Weiterbildung zum Thema Usability vor. Oder eine solche hat Ihr Interesse an dem Thema geweckt. Dann soll das Buch Ihnen helfen, zu verstehen, was es mit Usability und User Experience auf sich hat und wie man das Wissen praktisch anwendet.

Im Buch werde ich stets von »dem Nutzer« sprechen und auch in anderen Fällen meist die männliche Form verwenden, um es einfach und gut lesbar zu halten. Selbstverständlich sind immer auch weibliche und ebenso diverse Formen eingeschlossen.

Was Sie nicht lesen müssen

Texte mit diesem Symbol müssen Sie nicht unbedingt lesen, um den Inhalt eines Kapitels zu verstehen.

Törichte Annahmen über den Leser

Um sicherzugehen, dass Sie von diesem Buch bestmöglich profitieren, setze ich einige wenige Dinge voraus, die sich wie folgt beschreiben lassen:

Sie mögen das Internet und sind grundsätzlich offen gegenüber digitalen Entwicklungen. Sie nutzen zudem regelmäßig Smartphones und haben keine Angst vor Ticketautomaten und sprechenden Autos.

Sie sind grundsätzlich der Ansicht, dass es sinnvoller ist, Anwendungen am Nutzer auszurichten, als zu erwarten, dass alle Nutzer jede noch so komplizierte Software erlernen können müssen.

Sie wissen, was der Unterschied zwischen einer Website und einer App ist. Sie wissen zudem, wie man einen Computer mit einer Maus bedient, und haben ebenso Erfahrungen mit Programmen und Geräten gemacht, die man mit dem Finger bedient.

Sie sind offen dafür, eigene Überzeugungen über den Haufen zu werfen, weil Sie sich ernsthaft dafür interessieren, was in einem Nutzer vorgeht und warum er Websites oder Apps auf eine bestimmte Art und Weise bedient.

Sie haben selbst schon einmal (leise) geflucht, weil ein Computer oder ein anderes digitales Produkt nicht so reagierte, wie Sie es wollten oder erwarteten. Sie wissen also, dass es jede Menge Anwendungen gibt, die noch nicht optimal bedienbar sind. Vielleicht haben Sie sogar schon einmal kurz darüber nachgedacht, wie viel Zeit und Geld man sparen könnte, wenn dem Thema Usability mehr Aufmerksamkeit geschenkt werden würde.

Wie dieses Buch aufgebaut ist

Dieses Buch ist in verschiedene Teile aufgeteilt, die nicht zwingend aufeinander aufbauen, sondern verschiedene Schwerpunkte behandeln:

Teil I: Usability und User Experience im Überblick

Dieser Teil ist zunächst eine theoretische Einführung in Usability und User Experience und behandelt darüber hinaus folgende Themen:

Woran man gute und schlechte Usability erkennt

Welche Regeln und Checklisten es gibt, um Websites und Apps zu bewerten

Mit welchen Methoden Sie selbst Bewertungen vornehmen können

Teil II: Den Nutzer verstehen und sein Verhalten beeinflussen

Nachdem Sie in Teil I Definitionen und Basiswissen gelernt haben, widmet sich der zweite Teil psychologischen Grundlagen. Im Einzelnen lernen Sie:

Wie Nutzer Websites betrachten und deren Informationen verarbeiten

Wie Sie den Nutzer überzeugen können und welche Gründe es dafür gibt

Wie Sie messen können, was Nutzer wirklich auf Ihrer Website tun

Teil III: Methoden zur Bewertung und Optimierung von Usability und User Experience

In diesem Teil geht es um den mustergültigen Prozess zur Erstellung von benutzungsfreundlichen Anwendungen. In diesem Zuge werden Methoden erklärt, die Sie auch anwenden können, wenn Sie den Prozess nicht nach Lehrbuch durchlaufen. Im Detail geht es um folgende Dinge:

Wie Sie vorgehen, wenn Sie eine Neuentwicklung planen

Wie Sie analysieren, was Ihre Nutzer wirklich brauchen, und dies auf Ihre geplante Anwendung übertragen

Wie Sie Konzepte erstellen und evaluieren

Was Sie im laufenden Betrieb tun können, um immer besser zu werden

Teil IV: DIY-Usability-Optimierung für den Alltag

Dieser Teil greift sich ein paar Spezialthemen heraus, die für fast jede Website oder App relevant sind. Dabei gebe ich praktische Tipps, was Sie mit einfachen Mitteln umsetzen können, um wichtige Details zu optimieren. Im Einzelnen geht es um folgende Themen:

Der richtige Aufbau von Websites und Apps

Texte, Links und Symbole nutzerfreundlich gestalten

Formulare verbessern, um Abbrüche zu reduzieren

Suchfunktion und Filterfunktionen optimieren

Teil V: Spezialwissen für Apps und mobile Websites

In diesem Teil gehe ich noch einmal explizit auf die Besonderheiten von Apps und anderen Anwendungen ein, die auf kleinen Bildschirmen und vor allem mit dem Finger bedient werden. Sie lernen:

Was es mit responsivem Design auf sich hat

Wie Ihre Nutzer auch ohne Maus sicher zum Ziel kommen

Teil VI: Der Top-Ten-Teil

Weil das Buch hoffentlich ganz viel Lust auf mehr macht, finden Sie am Ende noch weitere Quellen zum Thema Usability und UX:

Die 10 besten Link-Tipps

Darunter einen Link-Tipp mit Link-Tipps

Symbole, die in diesem Buch verwendet werden

Damit Sie dieses Buch einfacher lesen und leichter benutzen können, machen Symbole auf bestimmte Informationen aufmerksam.

Dieses Symbol kennzeichnet eine formelle Definition eines Begriffs, den Sie kennen sollten oder zumindest hier in korrekter Beschreibung nachlesen können.

Informationen mit diesem Symbol führen oft weiter oder tiefer ins Thema und sind daher als optionale Zusatzinformationen zu betrachten, die Sie nicht unbedingt lesen müssen.

Hier gebe ich Ihnen einen praktischen Tipp oder berichte, was meiner Erfahrung nach in der Praxis gut funktioniert hat.

Mit diesem Symbol kennzeichne ich Dinge, sie Sie lieber lassen, oder auch typische Fallen, in die Sie nicht tappen sollten.

Wie es weitergeht

Wenn Sie sich wirklich gründlich und ausführlich mit Usability beschäftigen wollen oder eine Prüfung zu dem Thema anstreben, empfehle ich Ihnen, von vorn zu beginnen und vor allem die Teile I und III komplett durchzulesen.

Wenn Sie schon ein bisschen Vorwissen haben und als Hobby-Psychologe gern in den Kopf Ihrer Nutzer schauen wollen, starten Sie gern in Teil II.

Sollten Sie vor einer konkreten Herausforderung stehen und nicht wissen, wie Sie sich dieser annehmen, könnten Sie in Teil III fündig werden.

Die Teile IV und V sind vor allem dann relevant, wenn Sie schon eine Website oder App haben und diese mit eigenen Mitteln Schritt für Schritt verbessern wollen. Hierfür eignen sich auch die Kapitel 2 und 3 als Vorbereitung sehr gut. Und natürlich schadet es nie, sich die Definitionen in Kapital 1 durchzulesen, um zu wissen, womit Sie es eigentlich zu tun haben.

In jedem Fall wünsche ich Ihnen viel Spaß beim Lernen, Verstehen und Verbessern. Denken Sie daran: Sie tun nicht nur sich selbst damit etwas Gutes, sondern vielen Nutzern da draußen ebenso. Also los: Werden Sie nicht nur ein Website-Optimierer, sondern auch ein (Digital-)Weltverbesserer!

Teil I

Usability und User Experience im Überblick

IN DIESEM TEIL …

Was Usability und User Experience bedeutenWie Sie die richtigen Kriterien anwendenWie Websites und Apps einfach bewertet werden können

Kapitel 1

Grundbegriffe und Kriterien verstehen

IN DIESEM KAPITEL

Was ist Usability?Wie unterscheidet sich Usability von User Experience?Was macht eine Website gut bedienbar?

Sicherlich haben Sie auch schon einmal die Erfahrung gemacht, dass bei der Frage, ob eine Website »gefällt«, sehr schnell sehr unterschiedliche Meinungen aufeinanderprallen. Sie sind vielleicht auch manchmal unsicher, ob Ihre eigene Kreation gut genug ist und ob jemand außer Ihnen damit zurechtkommt. Um Ihnen eine Illusion direkt zu nehmen: Die subjektive Meinung Ihres Chefs oder Ihres Ehepartners ist meist nicht relevant. Sehr viel sinnvoller ist es, eine objektive Checkliste abzuarbeiten und zumindest die größten Schwächen der Website selbst zu erkennen. Genau dafür legt dieses Kapitel den Grundstein. In den folgenden Kapiteln des ersten Teils werden Sie Ihre Erkenntnisse dann vertiefen und weitere Methoden zur Bewertung und Optimierung von Website und Apps kennenlernen. Und hier kommen dann tatsächlich auch einmal Kollegen und Freunde ins Spiel – wenn es sinnvoll ist!

Usability

Die Bedeutung des Begriffs »Usability« liefert gleich schon das erste grobe Kriterium für Ihre Checkliste zur Beurteilung von Websites. Der Begriff ist ins Deutsche am ehesten mit »Gebrauchstauglichkeit« oder »Benutzerfreundlichkeit« zu übersetzen. Beide Übersetzungen werden Ihnen jedoch etwas sperrig oder schwammig vorkommen. Denn was heißt schon »benutzerfreundlich«? Das sieht jeder Mensch je nach Erfahrungen und Vorwissen ein bisschen anders. Deshalb ist es sinnvoller, davon zu sprechen, dass möglichst viele Benutzer Ihrer Zielgruppen schnell und ohne viel Aufwand zum Ziel kommen.

Um Usability zu definieren, werde ich hier und an anderer Stelle immer wieder auf die DIN EN ISO 9241 verweisen. Diese Norm wurde ursprünglich formuliert, um ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten zu definieren. Seitdem wurde sie stetig weiterentwickelt und hat trotz der starken Veränderungen von Computern und Geräten sowie des Internets im Allgemeinen dadurch noch immer Gültigkeit. Heute ist die Norm sogar ein internationaler Standard für Richtlinien im Rahmen von Interaktionen zwischen Menschen und Computern. Es ist also letztendlich egal, ob Sie eine Website, eine Spielekonsole oder eine Waschmaschine bedienen: Die Regeln für gute Bedienbarkeit sind tatsächlich immer die gleichen.

Usability sagt aus, in welchem Maße (wie gut) ein Produkt oder ein Dienst von seinen Benutzern bedient werden kann, um Ziele effektiv, effizient und zufriedenstellend zu erreichen.

Die drei enthaltenen Kernmerkmale in dieser vereinfachten Definition sind stets wichtig, um ein Produkt, wie zum Beispiel eine Website, hinsichtlich seiner Usability zu bewerten. Es handelt sich im Einzelnen um:

Effektivität: Erreicht der Nutzer überhaupt sein Ziel?

Effizienz

: Wie schnell (ohne Umwege, unkompliziert und mit möglichst wenig Aufwand) erreicht der Nutzer sein Ziel?

Zufriedenstellend: Wie empfindet der Nutzer den Weg? Stellt ihn die Website zufrieden? Wird das Ergebnis positiv bewertet?

Auch in der Praxis findet diese Definition mit ihren Merkmalen häufig Anwendung. Wir als Usability-Experten verwenden sie, wann immer wir jemandem erklären, was Usability ist und welche Kriterien es gibt. Denn dadurch lässt sich eine subjektive Meinung zu einem Produkt objektivieren.

Ein Usability-Experte kann und darf nicht mit seinem persönlichen Geschmack argumentieren. Wann immer dies passiert, folgt eine unproduktive und unsachliche Diskussion, da andere sich ebenfalls dazu hinreißen lassen, Argumente anzuführen, die sehr subjektiv sind.

Sie werden später noch erfahren, wie man derartige Situationen mithilfe von Usability-Regeln und Wissen über die betreffende Zielgruppe auflösen kann. Dazu gehört unter anderem, überprüfbare Kriterien anzusetzen, um die Usability einer Anwendung zu bewerten.

Eine erste Liste mit Gütekriterien für Usability, die ebenfalls der DIN EN ISO 9241 (Teil 110 aus dem Jahr 2019) entnommen ist, sei hier schon aufgeführt. Sie soll zudem einen noch besseren Eindruck von dem Begriff Usability geben.

Laut der DIN-Norm besitzt ein System ein hohes Maß an Usability, wenn es

der Aufgabe angemessen,

selbstbeschreibend,

steuer- und individualisierbar,

erwartungskonform,

fehlertolerant,

lernförderlich

und motivierend

ist. Sie sehen also, es gibt zahlreiche Ansatzpunkte, die Usability zu optimieren. Was genau hinter den einzelnen Kriterien steckt und wie Sie diese für Ihre Website nutzen können, erfahren Sie im zweiten Kapitel.

Ich habe oben erwähnt, dass die Regeln für gute Usability sowohl auf Websites als auch auf Spielekonsolen und andere Geräte anwendbar sind. Nun werden Sie vielleicht schon infrage gestellt haben, ob denn ein und derselbe Nutzer alle Arten von Geräten auf Anhieb bedienen können muss, damit man von guter Usability sprechen kann.

Was Ihnen vielleicht intuitiv fraglich vorkommt, ist es auch: Die vollständige Definition von Usability berücksichtigt daher immer auch die Zielgruppe und den Nutzungskontext. Für einen Piloten ist ein Flugzeugcockpit vielleicht sehr gut bedienbar. Es erfüllt alle Kriterien der obigen Liste, aber eben nur für Piloten und nur in einem Flugzeug.

Daher lautet die vollständige und offizielle Definition von Usability:

Usability ist das Ausmaß, in dem ein System, ein Produkt oder eine Dienstleistung durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.

Die Zielgruppe und auch der Nutzungskontext, zu dem beispielsweise die Umgebung und die eingesetzten Hilfsmittel gehören, sind also enorm wichtig, wenn es darum geht, die Usability zu bewerten. Wann immer Sie Ihre Website oder App optimieren wollen, sollten Sie sich zunächst Ihre Zielgruppe(n) und deren Kontext vergegenwärtigen, um nicht von Ihrer eigenen Situation oder Ihren eigenen Annahmen auszugehen. Dies ist eine wichtige Basis, um Usability eigenständig zu überprüfen, was Sie in den folgenden Kapiteln lernen werden.

User Experience

Weil sich Usability allein sehr stark auf die tatsächliche Benutzung eines Produkts bezieht und sehr sachlich vor allem auf die Interaktion fokussiert ist, hat sie mit der Zeit einen Begleiter bekommen: Die »User Experience« (Abkürzung: UX). Das wörtlich übersetzte Benutzererlebnis beziehungsweise die Benutzererfahrung bezieht neben emotionalen Empfindungen auch Erwartungen an die Nutzung und das zurückbleibende Bild nach der Nutzung mit ein.

Um das Benutzererlebnis in Gänze zu betrachten, müssen Sie also auch einbeziehen, was der Nutzer vorher über Ihre Website denkt (er hat vielleicht schon Werbung gesehen, oder ein Freund hat ihm von Ihrer Website erzählt) und auch das, woran er sich nachher erinnert, oder welche Meinung er sich gebildet hat.

User Experience umfasst alle Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder erwarteten Benutzung eines Systems (eines Produkts, einer Dienstleistung) resultieren.

Das Zusammenspiel zwischen Usability und User Experience lässt sich gut in der Abbildung 1.1 verdeutlichen: Usability ist das, was während der Nutzung passiert, User Experience bezieht die Phasen vor und nach der Benutzung mit ein.

Abbildung 1.1: Der Unterschied zwischen Usability und User Experience (© ProContext Consulting GmbH)

User Experience ist also der umfassendere Begriff. Das Benutzererlebnis beinhaltet die möglichst reibungslose und zufriedenstellende Aufgabenerledigung im Moment der Nutzung. Es gibt jedoch gute Gründe, sich von Beginn an mit dem »Davor« und dem »Danach« zu beschäftigen.

Zunächst einmal ist kein Nutzer frei von Erwartungen und Gedanken über ein Produkt, auch wenn er es noch nicht genutzt hat. Selbst für den unwahrscheinlichen Fall, dass es ein völlig neuer Gegenstand oder ein noch nicht auf dem Markt befindliches Gerät ist, hat zumindest der Name eine gewisse Ausstrahlung.

Im Falle von Websites und Apps gibt es jedoch immer eine Menge vergleichbarer Anwendungen, sodass eine Vielzahl von Erwartungen vorhanden ist. Sie müssen damit rechnen, dass der Besucher Ihrer Website viele andere Websites zuvor gesehen und genutzt hat. Und mit hoher Wahrscheinlichkeit wird er schon Websites zu ähnlichen Themen wie dem Ihren besucht haben.

All diese Erfahrungen beeinflussen die Erwartungen, die der Nutzer an Ihre Website hat, bevor er sie aufruft. Er hat – ohne groß darüber nachzudenken – ein Bild davon im Kopf, wie eine Website aussieht, was sie für Funktionen hat und wo etwas Bestimmtes zu finden sein wird. Sie können also in dem Maße, in dem Sie diese Erwartungen kennen und ihnen entsprechen, bereits den ersten Eindruck beeinflussen und damit den Grundstein für die Zufriedenheit der Nutzer legen.

Sie ahnen es schon: Es ist im Zweifel immer besser, sich an vorhandene Konventionen zu halten und den Nutzer nicht mit einem völlig ungewohnten Website-Aufbau zu überraschen. Mehr zum Thema Positionierung von Elementen erfahren Sie in Kapitel 11. An dieser Stelle möchte ich betonen, dass es sehr wichtig ist, dass Sie sich mit den Erwartungen Ihrer Zielgruppen beschäftigen und diese kennenlernen.

Gut gemeinte Überraschungen für Ihre Nutzer oder das bewusste Abweichen von etablierten Standards im Internet sollten Sie lassen. Sie ernten damit im günstigsten Fall Verwunderung oder ein Kopfschütteln. Nutzer rufen Websites in der Regel auf, um Ziele zu erreichen. Alles, was sie davon abhält, stellt die Seriosität und Professionalität des Website-Betreibers infrage. Nutzer, die nicht finden, was sie suchen, werden vielleicht nicht wiederkommen und die Website nicht weiterempfehlen.

Dass der Nutzer nach dem Besuch einer Website oder App bestimmte Gedanken und Empfindungen hat, ist leicht vorstellbar. Alles was während der Benutzung erlebt wurde, wird bewusst oder unbewusst verarbeitet und formt das Bild, das nach der Benutzung zurückbleibt. Dieses bezieht sich nicht nur auf die Website oder App (Layout, Bilder, Funktionen) selbst, sondern wird auch auf den Betreiber der Website beziehungsweise die Marke übertragen. Es wird schon lange versucht, den Eindruck, der bleibt, mithilfe von Fragebögen oder Interviews zu erfassen. In diesem Buch werden Sie auch noch erfahren, wie dies gelingen kann.

Doch es bleibt auch eine Art unbewusste Wahrnehmung des Anbieters zurück, ein Gefühl oder eine Empfindung, die nur schwer in Worte zu fassen ist, aber spätere Kaufentscheidungen durchaus beeinflussen kann. Es liegt somit auf der Hand, dass Sie als Website-Betreiber das Erlebnis während der Nutzung so positiv wie möglich gestalten sollten.

Customer Experience oder die Summe aller Berührungspunkte

Um die Reihe der wichtigen Begriffe zu komplettieren, sei an dieser Stelle auch das Konzept der »Customer Experience« (Abkürzung: CX) erwähnt. Es ist ähnlich dem der User Experience, bezieht sich aber insbesondere auf Kunden. Weiterhin bezieht es explizit alle Berührungspunkte ein, die ein Kunde mit einem Anbieter haben kann.

Es geht also nicht nur um die Phasen vor, während und nach der Nutzung, sondern auch um verschiedene Kanäle und Medien, über die ein Kunde mit einem Unternehmen in Kontakt treten kann. Dies kann neben einer Website auch ein gedruckter Katalog, ein Flyer, eine telefonische Hotline, eine E-Mail oder die erhaltene Ware sein.

Das Customer Experience Management versucht, die Wahrnehmung eines Anbieters und die Kundenzufriedenheit über all diese Kanäle hinweg zu optimieren. Die Kanäle beziehungsweise Berührungspunkte werden auch als »Touchpoints« bezeichnet, der gesamte Weg des Nutzers als »Customer Journey«. Diese Begriffe werden uns in Kapitel 8 wieder begegnen und dann ausführlicher erläutert.

Die Relevanz von Customer Experience oder der Betrachtung aller Kanäle ergibt sich letztendlich auch daraus, dass die meisten Unternehmen heute über viel mehr Kanäle mit ihren Nutzern und Kunden in Kontakt treten als noch vor 10 bis 15 Jahren. Hervorheben möchte ich an dieser Stelle nicht nur Websites und Apps, sondern vor allem auch soziale Netzwerke, die noch einmal eine ganz neue Qualität von Kommunikation und Ansprache mit sich bringen.

Auch wenn es in diesem Buch nicht um Social-Media-Strategien geht, rücken soziale Netzwerke immer dann in das Blickfeld von User Experience, wenn sie das »Davor« im Sinne der Definition beeinflussen oder gar einen Ausgangspunkt (in Form einer Verlinkung) für die Nutzung einer Website darstellen. Dann müssen Sie sich in jedem Fall damit beschäftigen, welche Erwartungen dieser Kanal geweckt hat und ob diese auf Ihrer Website erfüllt werden.

Wo anfangen? Eine Einstiegshilfe

Wenn Sie nun bereits nach dem Lesen der ersten Seiten den Eindruck bekommen, dass es sich bei Usability und UX um eine ziemlich komplexe Sache handelt, kann ich Sie beruhigen und muss Ihnen gleichzeitig zustimmen: User-Experience-Optimierung ist sehr komplex, und aus gutem Grund gibt es Profis und Agenturen, die sich auf diese Aufgabe spezialisiert haben.

Auf der anderen Seite gibt es zahlreiche kleine Schritte, die Sie selbst machen können. Jede noch so kleine Verbesserung bringt Ihre Website voran. Unzählige Analysen von bekannten Websites haben bewiesen, dass schon einzelne Worte oder Formulierungen die Kaufwahrscheinlichkeit eines Produkts auf einer Website erhöhen können.

Zum Einstieg sollten Sie sich auf die Usability-Kriterien konzentrieren, vorausgesetzt Ihre Anwendung ist grundsätzlich zugänglich und hat einen Nutzwert (siehe Abbildung 1.2). Im folgenden Kapitel werden Sie dazu einige Anhaltspunkte, Richtlinien und Regeln kennenlernen, mit deren Hilfe Sie Ihre eigene Website oder Entwürfe überprüfen können.

Usability-Optimierung ist wie die Basisarbeit: Sie werden für gute Usability vielleicht keinen Applaus bekommen, aber Sie vermeiden Ärger bei den Benutzern. Das heißt, erst wenn Sie Ihre Hausaufgaben gemacht haben und sich keine groben Usability-Fehler mehr auf Ihrer Website leisten, lohnt es sich, in positive Benutzererlebnisse (Joy of Use) zu investieren. Dies ist dann die Kür.

Kapitel 2

Websites und Apps bewerten lernen

IN DIESEM KAPITEL

Regeln und Checklisten für gute UsabilityDie Regeln verstehen und anwendenErste Schritte in der Usability-Evaluation

Sie haben im ersten Kapitel erfahren, dass es vor allem darum geht, etwas Nützliches bereitzustellen, was ein Benutzer möglichst einfach, schnell und zufriedenstellend bedienen kann. Ihre Website oder App soll einen bestimmten Zweck erfüllen, über den Sie sich sicher viele Gedanken gemacht und ihn somit konkret definiert haben. Falls Sie noch unsicher sind, wie die Konzeption einer Website oder App eigentlich vonstattengehen sollte, empfehle ich Ihnen Teil III dieses Buchs.