-
Gute User-Experience in 11 Beispielen (Teil 1)
Viele der erfolgreichsten Websites sind nicht besonders schön. Erfolgreich sind sie, weil sie den Nutzer ins Zentrum stellen. Weil sie eine gute «User Experience» (UX) bieten.
User-Experience ist nicht, wie eine Website aussieht – sondern wie sie funktioniert; wie sie sich anfühlt. Was sich richtig anfühlt, das brauchen die Nutzer, das brauchen sie gern und immer wieder. Gute User-Experience ist damit ein relevanter Erfolgsfaktor für dein nächstes Online-Projekt und der Grund, weswegen erfolgreiche Websites nicht unbedingt gut aussehen (müssen).
Hier einige Highlights, die Nutzer glücklich machen – direkt aus unserem Agenturalltag:
Beispiel 1
Registration: Die Sonnencrème des Web
Registrations- und Anmeldeprozesse sind die Sonnencrème des Webs: Ein notwendiges Übel. Wie häufig hast du schon eine Buchung oder einen Kauf abgebrochen, weil er zu mühsam war – und bist dann nie wieder auf die Website zurückgekehrt? Lass uns daraus lernen.
Beispiel
Du kennst das – es ist mir vor Kurzem beim SwissPass der SBB passiert: Du besuchst eine Website, willst dich registrieren, füllst dazu sieben Formularfelder aus. Dann klickst du «Registrieren» – und es erscheint die Meldung: «Nutzer ist bereits registriert». Formular für nichts ausgefüllt. Von der Website bleibt ein schlechter Eindruck – und damit auch von dem Unternehmen dahinter.
SwissPass könnte von Eventbooster lernen: Da gibt die Nutzerin ihre Mail-Adresse ein; falls sie bereits registriert ist, zeigen wir ihr das Passwort-Feld für den Login an. Falls sie noch nicht registriert ist, zeigen wir ihr das Registrationsformular an. Kein einziges Feld füllt sie unnötigerweise aus. 💪
«Kein Nutzer mag persönliche Daten preisgeben, bevor er Vertrauen in deine Website gefasst hat.»
Beispiel 2
Passwort2: Vulnerability by Design
Sichere Passwörter sind wichtig und kompliziert einzugeben, besonders auf Smartphones. Beim Setzen des Passworts musst du dieses häufig wiederholen. Damit sollen Falscheingaben entdeckt werden. Dumm nur: Wer gibt ein kompliziertes Passwort schon doppelt ein? Die Wiederholung verleitet dazu, ein einfaches und damit unsicheres Passwort zu wählen.
Beispiel
Bei Eventbooster kannst du dir das Passwort beim Setzen anzeigen lassen. Das erspart die doppelte Eingabe – und stellt sicher, dass du das Passwort nicht doppelt falsch eingibst.
Beispiel 3
Keine Ausreden für Anreden
Den meisten Vornamen können wir eine Anrede zuordnen. Dennoch musst du bei Formularen häufig deinen Vornamen und die Anrede angeben. Wiiiiesoo? Weil zu viele Webdesigner nicht denken, da hilft keine Ausrede.
Beispiel
Bei der Registration für Eventbooster fragen wir zuerst Vor- und Nachnamen, erst dann die Anrede ab. Sobald du deinen Vornamen eingegeben hast, erfragen wir die Anrede bei einer offenen Web-Schnittstelle und füllen das Formular entsprechend aus. Die Anrede kannst du jederzeit manuell ändern.
Beispiel 4
Feedback, zack zack!
Du füllst ein Formular aus und erst beim Absenden zeigt es dir an, dass eine Eingabe falsch war. Du musst raufscrollen, den Fehler suchen, beheben, runterscrollen und das Formular erneut absenden. Spass geht anders.
Felder können mehrere Validatoren aufweisen (z.B. «Muss mit einem Grossbuchstaben beginnen» und «Nicht mehr als vier Grossbuchstaben in Folge»).
Um dir das Leben möglichst einfach zu machen, validieren wir die Eingaben in Echtzeit. Die Fehlermeldungen sind hilfreich und kurz, ungültige Werte kannst du so rasch beheben.
Beispiel
Bei Eventbooster validieren wir Eingaben auf verschiedenste Weise, weil die angeschlossenen Medien qualitativ hochwertige Daten verlangen: Grösse von Bildern, Länge von Texten, Anzahl Grossbuchstaben in Folge, Wörter auf einem Index.
Felder können mehrere Validatoren aufweisen (z.B. «Muss mit einem Grossbuchstaben beginnen» und «Nicht mehr als vier Grossbuchstaben in Folge»).
Um dir das Leben möglichst einfach zu machen, validieren wir die Eingaben in Echtzeit. Die Fehlermeldungen sind hilfreich und kurz, ungültige Werte kannst du so rasch beheben.
«Verfasse hilfreiche Fehlermeldungen: ‹Mind. 7 Ziffern› ist klarer als ‹Eingabe fehlerhaft›.»
Beispiel 5
Heute Abend in meiner Nähe
Du willst einen Kinofilm schauen gehen oder suchst die Filiale eines Geschäfts. Häufig befinden sich die relevanten Resultate in deiner Nähe – richtig? Dafür gibt’s Geolocation im Browser. Der Klick auf einen Button genügt, um Filialen oder Filme nach der Distanz zu deinem aktuellen Aufenthaltsort zu sortieren.
Beispiel
Beim Kino-Kalender von Cornèrcard haben wir bereits 2014 die Möglichkeit geschaffen, nach Filmen in deiner Nähe zu suchen – und zwar heute Abend, weil dies die häufigste Suchanfrage ist. Auch hier: Smart Defaults 😍!
Hast du Fragen?
User-Experience ist keine exakte Wissenschaft. Wenn du anderer Ansicht bist oder eine bessere Lösung hast, hören wir sie gern. Und wenn du eine UX-Herausforderung hast, die es zu lösen gibt, erarbeiten wir gern einen Vorschlag dafür. Eine E-Mail an Felix genügt.
Lust auf mehr?
Weitere Beispiele findest du im zweiten Teil dieses Blog-Beitrags.