Tesla User Interface Sitzheizung

Eigentlich gut gelungen, die Steuerung diverser Fahrzeugfunktionen und Einstellungen auf einem einzigen Bildschirm. Ich war positiv überrascht! Aber dem Usability Engineer entgeht natürlich nichts und so musste ich bemerken, dass man immer wieder versehentlich die Sitzheizung einschaltet, wenn man die Temperatur senken will.

Der Abstand zwischen dem Icon für die Sitzheizung und dem Pfeilchen für die Temperatur sieht im Foto zwar ausreichend aus, in der Realität und wenn man ein Auto fährt und nicht genau hinsehen kann, reicht er aber nicht.

Lustigerweise schaltet man also des öfteren die Sitzheizung versehentlich ein, wenn man es gerade zu warm findet :D.

Lösung: Mehr Abstand zwischen den Icons lassen.

Ungetestete Websites – sofort ertappt

Einer Website, die nicht auf Usability getestet wurde, sieht man das spätestens auf den zweiten Klick an. Gerade eben über briefbutler.at gestolpert – unmöglich, dass User diese Seite getestet hätten – kann ich mir nicht vorstellen.

Zuerst fragt man sich, wo der „Login“-Button ist – ich habe ihn bis jetzt nicht gefunden. Ok, war sowieso nicht registriert, also zur Registrierung. Dort trifft man auf einen zwar optisch hübschen, aber überraschend umständlichen Prozess für die Anmeldung.

Screenshot der Länderauswahl auf briefbutler.at

Für etwas so Triviales wie die Eingabe des Landes und danach die Eingabe ob Person oder Unternehmen etc. werden jeweils eigene Seiten eines Wizards verwendet.

Wäre interessant zu hören, was Testpersonen beim Usability Test dazu sagen würden.

Und obwohl zuvor angekündigt worden war, dass man die Handy-Signatur verwenden kann, werden am nächsten Screen alle persönlichen Daten abgefragt.

Das kommt eher unerwartet. Erst DANACH kommt der Screen für die Handysignatur. Dort gibt man ein zweites Mal die Telefonnummer ein – und fragt sich, warum aus der Handysignatur nicht wenigstens der Name übernommen werden könnte.

Empfehlung 1: Da die Registrierung NUR mittels Handy-Signatur möglich ist, sollte dies unbedingt schon vor dem Start des Prozesses für den User deutlich ersichtlich sein. Sonst klickt sich der User durch, gibt Daten ein und stellt danach fest, dass alles umsonst war.

Empfehlung 2: Es gibt bereits sehr viele Seiten, die die Handy-Signatur für die Registrierung anbieten. Einfach mal umsehen, die meisten lösen das ganz gut, – die Handy-Signatur erfolgt als erster Schritt.

Wenn man die Website noch weiter evaluiert, fallen noch viele andere Probleme auf. Z.B. teils extrem kleine, blaue Schrift am Smartphone. Für mich kaum lesbar.

Oder der Umstand, dass man nach der Aktivierung auf briefbutler.com gelenkt wird und die Seite jetzt plötzlich ganz anders aussieht. Das ist verwirrend.

Zu allem Überfluss ist die Website auch nicht WAI-konform.

Also am besten: Mit Usern testen, Usability Probleme beheben und Barrierefreiheit umsetzen, dann wird alles gut.

Sehr lange Webseiten

Momentan in Mode: Riesige Schrift, riesige Eingabefelder, viel White Space dazwischen. White space ist ja an sich etwas Positives für Usability und sollte z.B. verwendet werden, um Gruppen zueinander gehöriger Elemente (information chunks) voneinander abzutrennen. Allerdings, wenn zu viel White space verwendet wird – zwischen allen Elementen – und auch sehr große Elemente (z.B. auch riesige Bilder) verwendet werden, kommt es dazu, dass viel gescrollt werden muss. User können zwar scrollen, aber das tun sie nicht allzu gerne. Das Zitat einer Testperson bei einem Usability Test in unserem Labor „da scrolle ich mir einen Wolf“ finde ich dazu besonders lustig.

Des öfteren habe ich auch schon beobachtet, dass Inhalte in der Mitte einer sehr langen Seite quasi „überscrollt“ werden, die Benutzer Inhalte dadurch übersehen und verpassen.

Besonders problematisch finde ich sehr lange Formulare. Die bereits befüllten Felder verschwinden beim Scrollen aus dem Blickfeld. Benutzer möchten aber gerne sehen, was sie schon eingetragen haben und müssen dann rauf und runter scrollen und sich die Einträge merken. User sollten sich aber nichts merken müssen im User Interface. Ein uraltes Usability-Prinzip, das die „cognitive load“, also die geistige Belastung betrifft. Die sollte eigentlich möglichst gering gehalten werden, wenn man gute Usability erreichen will.

Visualisierung

Überraschendes Beispiel einer fehlgelaufenen Visualisierung: Die Überschrift spricht von „parallelen“ Online Kanälen. Darunter eine lineare Time-Line, die eine Uhrzeit zigmal anzeigt und man sieht hier gar nichts „Paralleles“.

Auf den ersten Blick kennt man sich nicht aus.

Empfehlung zur Alternative: Da es mehr Veranstaltungen als Zeitpunkte gibt: Warum nicht die Timeline QUER darstellen und die Veranstaltungen darunter!

Hilfe für Bedienung der Website – notwendig oder gibt es andere Lösungen?

Eine Website sollte eigentlich ohne Hilfestellungen nutzbar sein. Manchmal werden Popups oder Hilfe-Tooltips verwendet, die automatisch/ungefragt auftauchen. Ob der Benutzer die Info auch gerade lesen möchte oder sie nur schnell weg klickt bleibt dem Zufall überlassen.

Beim „Standard“ (www.derstandard.at) verdeckt immer wieder dieses Hilfe-Tooltip einen Teil des Textes. Der Benutzer wird mehr oder weniger gezwungen, es weg zu klicken. Allerdings, wenn man auf „Habe ich verstanden“ klickt, dann öffnet sich eine andere Seite/Ansicht, was nicht unbedingt im Sinne des Benutzers ist.

Ein Tooltip verdeckt den eigentlichen Text. Inhalt ist "Hier geht es zu den User-Beiträgen" und in einer 2. Zeile: "Habe ich verstanden" - ein klickbarer Link.
Hilfe verdeckt einen Teil des Textes

Ich kann mir gut vorstellen, dass „78 Postings“ ev. nicht als Link zu den Postings verstanden wird. Die Affordance (Einladungscharakter) ist niedrig zumal auch keine eigene Link-Farbe verwendet wird. Ich würde hier eine eigene Link-Farbe verwenden oder einen zusätzlichen Link, der lautet „zu den Postings“. Und das Tooltip würde ich weglassen. Falls man garnicht auf das Tooltip verzichten möchte, dann wäre ein „x“ rechts oben, um das Tooltip zu schließen auch noch eine Möglichkeit zur Verbesserung.

EIN Design für Desktop und mobil – ein Vorteil?

Immer wieder trifft man auf Webseiten, die für Desktop und Mobil genau dasselbe Design verwenden. Sie sind zwar responsive, aber die Desktopversion ist sehr ähnlich der mobilen Version und daher schmal und lang.

Hierzu ein Vorher-Nachher-Beispiel – allerdings in der falschen Reihenfolge: das Formular war für Desktop in einer früheren Version kompakt und relativ übersichtlich. Nicht alles daran war richtig gestaltet, z.B. ein Dropdown für Geschlecht, in dem (in diesem Fall) ohnehin nur zwei Möglichkeiten angeboten wurden. Oder die Checkboxes im unteren Bereich, die auf der falschen Seite beschriftet sind. Da gab es definitiv Optimierungspotenzial.

Nach dem Redesign ist das Formular nun aber riesig und es wird für die Desktopversion exakt dieselbe Gestaltung verwendet wie für eine schmale, mobile Version. Das ist durchaus ein Phänomen, das sehr häufig zu beobachten ist: Websites werden redesigned und sind danach weniger usable als vorher.

In der neuen Version sind nun nur noch vier Eingabefelder oberhalb des Pagefolds sichtbar.

Benutzer müssen nun häufiger scrollen. In einem Formular ist das besonders ungünstig, weil der Benutzer nicht mehr sieht, was er weiter oben eingegeben hat.

Natürlich ist es für mobile Versionen wichtig, dass zwischen Interaktionselementen ausreichend Abstand bleibt, damit sie mit Fingern bedient werden können.

Aber es wäre für größere Bildschirme schon möglich, den Bildschirmplatz besser zu nutzen.

Z.B. könnten die Feldbeschriftungen VOR den Feldern platziert werden statt darüber. Auch die sehr langen Felder (auch schon in der alten Version vorhanden) brauchen viel Platz und das Formular wirkt überladener. Die Felder für „Geschlecht“ oder „Postleitzahl“ z.B. sind genauso breit wie jenes für den Namen.

Meine Empfehlung wäre, für Desktops, auf denen ausreichend Platz ist, den vorhandenen Platz besser zu nutzen, damit Benutzer weniger scrollen müssen.

Humor: Zivilschutz nicht sicher

Das ist nur zu einem sehr kleinen Teil ein Usability-Thema, aber ich fand es einfach lustig: In der Adresszeile von zivilschutz.at wird angezeigt „nicht sicher“ . Besonders lustig, wenn es auf der Seite um „Sicherheit von A-Z“ geht. Eigentlich ein Faschings-Thema.

Für die Usability der Website kein großes Problem: das fällt vielen Benutzern wahrscheinlich gar nicht auf.

Bewertungssystem

Bewertungssystem von 1 bis 10, 1 steht für sehr unzufrieden
Bewertungssystem bei der Deutschen Post

Bewertungssystem für einen Portoberater bei der Deutschen Post: Da, wo Benutzer als erstes hinsehen werden, ist die schlechteste Bewertung.. Warum nicht umgekehrt? Außerdem – zwischen 10 Abstufungen auswählen zu müssen ist ein bisschen viel für diesen Zweck. Besser also: mit „sehr zufrieden“ – links – starten. Und 5 Abstufungen würden sicher ausreichen.

Tipps bei der Eingabe von Passwörtern

Das sieht man jetzt schon öfter und finde ich sehr gut gelöst: Es wird in einer Liste abgehakt, welche Zeichen-Art man bereits verwendet hat und es ist klar ersichtlich, was noch fehlt.

Während dieses Beispiel hier weniger gut gelöst ist. Die von Chrome vorgeschlagenen Passwörter werden nicht akzeptiert. Der Hinweis darauf, wie das Passwort gestaltet sein soll findet sich in einer Fußzeile, die man zunächst natürlich übersieht. Die Fehlermeldung wirkt unfreundlich und hilft dem Benutzer nicht dabei, den Fehler zu beheben.