Good UX Examples


Usability on the Road

Da steh ich vor dem Aufzug und der Aufzug kommt nicht. Warum bloß, ich hab doch auf den Knopf mit dem Pfeil nach oben gedrückt?!?

Schlechte Usability Aufzug

Leider ist hier, was wie ein Knopf zum Drücken aussieht und einen unübersehbaren Pfeil nach oben hat, kein Knopf, sondern lediglich eine Anzeige, in welche Richtung der Aufzug unterwegs ist. Richtig gewesen wäre der „Kommt“ Kopf unterhalb der Pfeile – is klar… Wenn man genau hinschaut, sieht man, dass das mit dem Pfeil schon mehr Leute, auch mit Nachdruck, versucht haben:

Schlechte Usability Aufzug

Ein Usabilitytest hätte dieses Problem vermutlich schon bei der 1. Testperson ans Licht gebracht.

Am selben Tag hab ich dann noch das hier in der S-Bahn gesehen:

Gute Usability: Straßenbahn

Zuerst musste ich wegen des Wortkonstrukts „Sprechstelle“ schmunzeln, dann, weil das Schild ja eigentlich unter einem Knopf hängt und somit eher „Druckstelle“ heißen müsste. Danach sind mir die Leuchten für Warten, Sprechen und Hören aufgefallen, und ich hab mir kurz überlegt, wie ruhig es zu Hause wäre, wenn es an jedem Platz unseres Esstischs so eine Anzeige gäbe… ;-) Im Nachhinein frage ich mich allerdings, wozu diese Sprechstelle eigentlich da ist. Ist das eine Notruf-Anlage oder vielleicht doch eher eine interne Kommunikationsanlage? Hier würde ein kleiner Hinweis nicht schaden – Platz genug für weitere Schilder ist ja noch auf der Metallplatte…

Die absolut positive Ober-Usability-Verbesserung des Tages war aber die Auskunftstafel der Deutschen Bahn AM GLEIS!!! *Tusch* und *Applaus* für diese Verbesserung – endlich muss man nicht mehr bis in die Halle vorrennen, um nachzuschauen, mit welchem Zug man statt des eben Verpassten fahren kann!

Gute Usability: Bahnhof

Jetzt fehlt nur noch die elektronische Wagenstandsanzeige entlang des Bahnsteigs, die auch dann noch funktioniert, wenn die Wagenreihung mal wieder umgekehrt wurde… ;-)


Gut sichtbare AGB Checkbox

Hey, mal wieder ein Blogpost. Hatte die letzte Zeit nur auf meiner Facebookseite gepostet, weil es so bequem ist. Nachdem die Pagefeeds aber zunehmend untergehen, werde ich mich wieder häufiger im Blog äußern (hier ist ein Artikel zum Thema Facebook Page Algorithmen).

Bin heute auf ein nettes Detail gestoßen: am Ende des Bestellprozesses von buttinette.de bekommt man einen Tipp eingeblendet, wenn man mit der Maus über den „Kaufen“ Button fährt und die AGB noch nicht angeklickt hat. Prima Methode zur Fehlervermeidung beim Abschicken des Formulars:

AGB nicht angeklickt Tipp

Krasses Gegenteil hierzu: die Bahn Ticketbestellung. Hier muss man zunächst die Nutzungshinweise zum Kauf eines Onlinetickets bestätigen und auf einer späteren Seite die AGB. Beide Checkboxen gehen aber derart auf der Seite unter, dass ich, obwohl ich die Seiten regelmäßig nutze, oft vergesse einen der Haken zu setzen:

Bahn Buchung AGB 1

Bahn Buchung AGB 2

Woran liegt es? Die Elemente mit den verpflichtenden Angaben sind genauso gestaltet, wie der Rest des Inhalts. Es gibt keine optische Hervorhebung, anhand der Benutzer erkennen kann, dass für diese Elemente eine Eingabe erforderlich ist. Im ersten Beispiel kommt hinzu, dass die Checkbox mitten in der Seite platziert ist, und nicht am Ende. Die meisten Benutzer schauen sich in der Regel aber nur den Anfang und das Ende einer Seite genauer an, der Rest wird überflogen. Dazu ist es eher ungewöhnlich, dass man in der Mitte eines Bestellprozesses überhaupt eine verpflichtende Angabe machen muss.

Besser würde es durch:

  • Hintergrundfärbung der Elemente entfernen, die nur Daten anzeigen (Adressdaten, Reisedaten,…)
  • Verpflichtende Elemente am Ende der Seite platzieren, bevorzugt in der Nähe des „Abschicken“ Buttons wie im Buttinette Beispiel
  • Angaben, die der Kunde aktiv bestätigen muss, am Ende des Bestellprozesses bündeln.

Oh, Umzug auf neuen Rechner…

ist ja nie ein Spaß. Wenn dann aber auch noch solche Sachen dazwischen kommen:

Photoshop Lizenz übertragen

Adobe sagt mir jetzt, wo ich Photoshop auf dem alten Rechner deinstalliert habe, dass ich es vorher hätte deaktivieren müssen. Könnt ihr mir das nicht sagen BEVOR ich das Programm deinstalliere sage oder es bitte gleich automatisch deaktivieren?

Natürlich ist auch genau jetzt auch noch die Website von Adobe offline, so dass sich das Thema auch nicht klären lässt. UuuuuhhhhhX-Katastrophe…

Nachtrag: Gerettet hat das Ganze jetzt letzendlich kompetent und unkompliziert die nette Dame vom telefonischen Support, dafür gibts wieder ein dickes UX+

Nachtrag 2: Bin jetzt wieder am Ende meiner Nerven. Da mir die Dame freundlicherweise die Lizenz erneuert hat, funktioniert der Photoshop jetzt zwar wieder. Ich sollte aber noch die schriftliche Lizenzübertragung des Händlers, von dem ich die Software gekauft habe „hochladen“. O-Ton war: „Loggen Sie sich einfach im Kundenbereich ein, da können Sie das dann hochladen“ … … … Der Kundenbereich ist verdammt groß! Nach langem suchen und vielen Klicks bin ich irgendwann auf der englischen Seite von Adobe gelandet wo mir nach gefühlten 3 Stunden weiterem suchen, angeboten wurde, mir per Chat von einem Mitarbeiter helfen zu lassen. Gerne, dachte ich, der Link, den mir der erneut sehr freundliche Mitarbeiter geschickt hat, hätte vermutlich zur richtigen Seite geführt, wenn nicht zufällig auch diese Seite wieder nicht verfügbar gewesen wäre.

Ich habe jetzt eine Stunde erfolglos in dieses Thema versenkt und werde die Lizenzübertragung deswegen jetzt einfach wieder zu meinen Akten legen und wenn das nächste Mal jemand danach fragt, werde ich sie in einen Briefumschlag packen und per Post verschicken, oder an eine Brieftaube hängen oder in eine Flasche stecken und in den Rhein schmeißen… … .. .


Wacom Bamboo Fun

Ist ja nicht so, dass Grafikdesign zu meinen Kernkompetenzen zählt, allerdings bastel ich doch gern von Zeit zu Zeit mal ein wenig damit rum. Seit längerem liebäugle ich schon mit einem Grafiktablett. Nachdem mir meine lieben Ex-Kollegen einen dicken Amazon-Gutschein zum Ausstand geschenkt haben, hab ich mir das hier gegönnt:

Das Wacom Bamboo Fun Pen & Touch

Hiermit eröffne ich nun auch die erste Kategorie in meinem Blog: UX Reviews. Hier werde ich mit euch teilen, was mir im Alltag an Beispielen gelungener oder weniger gelungener UX begegnet. Die Idee kam mir, als ich das Wacom ausgepackt habe. Das allein hat nämlich schon Spaß gemacht:

1. Verpackung sieht gut aus:

2. Die Verpackung spricht mich sogar freundlich an:

3. Das Produkt sieht klasse aus und fühlt sich prima an (Foto siehe oben)

4. Keine lange Installationsanleitung, sondern nur das Wesentlich (eine Männer-taugliche Anleitung sozusagen… ;-) ):

5. Und dann noch dieses nette Detail: Eine Lasche aus Stoff als Stifthalter. Textilien an technischen Geräten finde ich eine total coole Kombination ;-):

6. Der Produktbereich im Web ist sehr übersichtlich, gut kategorisiert und designer-tauglich gestaltet. Upsell und Selfcare sind auch sehr gut integriert:

Ich würde meinem Ruf als UX-Nörgler nicht gerecht, wenn ich nicht auch noch hier ein paar Haken finden würde… ;-)

1. USB-Kabelsalat: Der sieht nicht nur unschön aus, sondern behindert mich auch bei der Platzierung des Geräts auf dem Tisch:

2. Passwortvergabe für den Produktbereich im Web. Hier soll ich ein Passwort mit mehr als 10 (ja zehn!) Zeichen eingeben. Ich kenne niemanden, außer paranoiden Sysadmins, der derart lange Passwörter verwendet. 98% aller Benutzer (Schätzung meines Bauchs) verwenden ohnehin immer dasselbe Passwort, das garantiert nicht länger als 8 Zeichen ist (das Geburtsdatum, falls es nicht „Passwort“, der Vorname, der Nachname oder der Name der Katze ist). Diese Beschränkung sollte man dem Kunden an dieser Stelle nicht zumuten, da es die Wahrscheinlichkeit der Registierung und des erfolgreichen Wiedereinloggens verringert.

Jetzt stellt sich natürlich noch die Frage, wie sich das Gerät bedienen lässt. Kurz gesagt: ungewohnt aber sehr intuitiv. Definitiv nichts, was man ohne Üben hinbekommt. Aber dafür gibt es auch etliche nette Trainingsprogramme auf der beiliegenden CD. Hab gestern während ich telefoniert habe ein wenig gekritzelt (das was ich sonst auf dem Papier nebenbei machen würde ;-) ). Hier die ersten Ergebnisse:

Das erste nenne ich Frau Holle auf dem Donnerbalken:

Danach kam das Alien-Ding:

Und noch was Abstraktes:

Fazit: 6 UX Bonuspunkte, 2 UX Minuspunkte. Insgesamt ein tolles Gerät, dessen sich der Benutzer allerdings erst noch würdig erweisen muss ;-).