Beispiel 6

Weniger Felder – mehr Umsatz

Du musst dich registrieren – und dafür neun Formularfelder ausfüllen. Selbst deine Telefonnummer wird verlangt – ohne offensichtlichen Grund. An diesem Punkt suche ich häufig nach Alternativen: Wenn der Website-Betreiber einen kundenunfreundlichen ersten Eindruck hinterlässt, wie wird dann erst der zweite sein?

Beispiel

Bei Eventbooster kannst du Veranstaltungen eintragen und Promotionen buchen, er verfügt deswegen über einen Checkout. Dabei kannst du dich mit Mail-Adresse und Passwort registrieren, mehr wollen wir nicht wissen 😍. Erst ganz am Ende des Checkouts fragen wir nach weiteren Angaben – und sagen, wieso wir diese brauchen.

Beispiel 7

66% Rabatt auf's Zurücksetzen von Passwörtern

Du willst ein Passwort zurücksetzen. Viel zu häufig geht das «à la 1999». Aus zwanzig Jahren nichts gelernt.

1. Du registrierst dich.
2. Du merkst, dass deine Mail-Adresse bereits registriert ist.
3. Du wechselst zur Anmelde-Maske.
4. Du gibst deine Mail-Adresse ein und klickst «Passwort zurücksetzen».
5. Du erhältst eine Mail mit einem Reset-Link.
6. Du klickst auf den Link.
7. Es öffnet sich ein neues Browser-Fenster.
8. Du gibst das Passwort ein.
9. Du wiederholst das Passwort (Doppeleingabe).
10. Du klickst «Speichern».
11. Du kommst auf eine Anmeldemaske.
12. Du gibst deine Mail-Adresse ein.
13. Du gibst dein Passwort ein.
14. Du meldest dich an.
15. 🤦

Beispiel

Wir schenken Nutzern zwei Drittel ihrer Zeit und machen das bei Eventbooster so:

1. Du gibst deine Mail-Adresse ein. Wir zeigen dir direkt an, dass du bereits registriert bist.
2. Du klickst «Passwort zurücksetzen».
3. Wir versenden einen One-Time-Code an deine Mail-Adresse.
4. Du gibst den One-Time-Code und das neue Passwort ein (im Browser-Fenster, das du bereits geöffnet hast).
5. Du klickst «Speichern» – wir ändern dein Passwort und melden dich gleichzeitig an.
6. 🏁

Beispiel 8

PLZ: Perfekte Lokalisations-Zahl

Du bestellst Turnschuhe. Dazu musst du Postleitzahl, Ort, Kanton und Land angeben. Warum zur Hölle? Die PLZ würde reichen: Daraus erkennen wir Ort und Kanton – und das Land wird fast immer die Schweiz sein für einen Schweizer Online-Shop.

Beispiel

Wenn du auf Eventbooster einen neuen Veranstaltungsort erfasst, musst du diesem eine Ortschaft zuordnen. Dafür gibst du die PLZ ein – fertig. Wir füllen die Ortschaft für dich aus.

Beachte dabei: Zu einigen PLZ, beispielsweise 3018 für Bern, gehören verschiedene Ortsnamen – diese zeigen wir in einem Dropdown an.

Bonus: Damit sind nicht nur unsere Nutzer glücklicher, auch unsere Daten sind besser strukturiert: Statt «Wangen a.A.», «Wangen a/A», «Wangen a. d. Aare» und «Wangen an der Aare» haben wir eine einzige Ortschaft, die mit unseren Veranstaltungsorten verknüpft ist.

Beispiel 9

Mach Vergleichbares vergleichbar

Vorwärts- und zurücknavigieren ist mühsam. Besonders, wenn du dir eine Übersicht über Dinge verschaffen willst, die vergleichbar und dir noch unbekannt sind.

Vergleichbar und unbekannt wie Filme in einem Kinoprogramm. Die ersten Sekunden eines Trailers, das Genre und das Rating von IMDB genügen häufig, um zu wissen, ob sich der Kinobesuch lohnt.

Wenn du für den Trailer jedes Mal auf eine neue Seite geleitet wirst und danach zurücknavigieren musst, verlierst du unnötig Zeit – und Nerven. Wieso wird’s trotzdem so gemacht? Häufig, weil mehr Werbeeinblendungen möglich sind.

Beispiel

Beim Kino-Kalender von Cornèrcard zeigen wir alle aktuellen Filme auf einer Seite an, eine simple Liste mit Kinopostern als visuelle Aufhänger.

Ein Klick öffnet die Detail-Ansicht des Films mit Rating und Trailer; ein Klick spielt den Trailer ab und ein weiterer Klick (oder die Pfeil-Tasten auf der Tastatur) öffnen bereits den nächsten Film.

Aus Platzgründen funktioniert dies nicht wirklich auf Smartphones; dort kommen wir um die klassische Navigation nicht herum.

Beispiel 10

Animationen

Animationen sind dank requestAnimationFrame, CSS3-Animationen und -Transitions ziemlich einfach zu implementieren. Sie können Spielerei sein – oder den Nutzer unterstützen, zu verstehen, was auf dem Bildschirm passiert. Beide Anwendungen sind gerechtfertigt, solange die Performance darunter nicht leidet.

Beispiel: Infect

Bei Infect werden Antibiotika und Bakterien in einer Matrix dargestellt, wobei der Schnittpunkt die aktuelle Resistenz des Bakteriums gegenüber dem Antibiotikum anzeigt. Die Matrix kann nach Eigenschaften von Antibiotika oder Bakterien gefiltert werden. Wenn Zeilen oder Reihen ein- oder ausgeblendet werden, animieren wir dies, damit der Nutzer nachvollziehen kann, was beim Filtern geschieht.

Beispiel: Regio Energie

Das Energiequiz der Regio Energie Solothurn macht Messebesucher zu Energie-Profis. Den Übergang von einer Frage zur nächsten haben wir animiert, damit der Nutzer den Wechsel bewusst wahrnimmt und optisch nachvollziehen kann, was inhaltlich geschehen ist.

Beispiel 11

Kontrast

Zum Schluss das vielleicht Wichtigste: Kontraste. Tiefe Kontraste können ganz nett aussehen. Und sie sind ein Zeichen von schlechtem Webdesign.

Wieso das? Nicht nur ältere Personen und Menschen mit Sehbehinderung können die kontrastarmen Inhalte nicht erkennen. Auch auf schlechten Bildschirmen oder bei einem Tablet, das draussen im Sonnenlicht verwendet wird, verschwinden Inhalte mit ungenügendem Kontrast.

Beispiel

Nicht nur Farben machen Kontraste. Wenn du Schriftgrösse, -art und -stärke gut wählst, erhöhst du die Lesbarkeit. Wenn du den Detailgrad von Icons reduzierst, erhöhst du deren Erkennbarkeit. Bei Cornèrcard Emotions haben wir die Icons im Menu vereinfacht, bis sie auf allen Bildschirmen klar erkennbar waren. Und wir stellen sie dar in rot oder schwarz auf weiss. Kontrastverhältnis 4.85:1 resp. 21:1 – WCAG 2.1 AA konform.

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 ersten Teil dieses Blog-Beitrags.