Eingabefelder, die fast unsichtbar sind

Momentan ist es en vogue, Eingabefelder nur als Strich darzustellen. Das kommt aus der Flat Design/Material Design – Richtung. Und führt immer wieder dazu, dass User Eingabefelder nicht unmittelbar wahrnehmen, besonders wenn es auf einem Screen nur WENIGE Eingabefelder gibt. Wie in diesem Beispiel eines Registrierungs-Screens von Microsoft.

Auf den ersten Blick scheint das Feld für Eingabe der Captcha-Zeichen irgendwie zu fehlen. Das erscheint natürlich besonders deshalb so, weil das Eingabefeld für E-Mail/Benutzername einen Rand hat und daher GUT wahrgenommen wird.

Screenshot Microsoft "Konto wieder aktivieren", E-Mail oder Benutzername kann eingegeben werden, Eingabefeld hat einen Rahmen, darunter ein Captcha für die Eingabe von Zeichen auf einem Bild, direkt unter dem Bild ist eine graue, ca. 30 Zeichen lange Linie. Sie ist das Eingabefeld für die Zeichen.
Wo gibt man die Zeichen aus der Abbildung ein? Dazu muss man schon genau hinsehen.

Radiobuttons verkleidet als Checkboxes

Die Felder im Screenshots weisen leider zwei Usability-Issues in einem auf:

  1. Bei einer Einfach-Auswahl zwischen zwei Möglichkeiten verwendet man Radiobuttons. Die Felder im Screenshot sehen aber aus wie Checkboxes, nicht wie Radios.
  2. Beide scheinen bereits „angehakt“, wenn man auf die Seite kommt und noch gar nichts ausgewählt hat. Verwirrend.

Empfehlung: Interaktionstechniken, die viele User schon lange kennen und gelernt haben nicht um-designen.

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.

Was ist der Unterschied?

Liebe Wiener Linien! Wo ist denn nun hier der Unterschied zwischen diesen beiden Tickets für Jugendliche? „Ein Jahr lang freie Fahrt zur Schule/Arbeit.“ versus „Freie Fahrt in die Schule und zur Arbeit.“ (ohne Angabe für wie lange)

Ok, darunter gibt es eine lange Seite mit weiteren Erklärungen. Aber wäre es nicht möglich, den Unterschied zwischen 2 Tickets in 1-2 Sätzen kurz zu beschreiben?

Außerdem: Die blassen Buttons/Tabs, um zwischen der Beschreibung für das eine oder andere Ticket umzuschalten werden wohl häufig übersehen werden (dazu wäre eine Eyetracking-Studie interessant).

Hier nochmal rot umrandet..

Empfehlung: Kurze Erklärung in den Kästchen verbessern, sodass der Unterschied zwischen den Tickets klar wird, z.B. beim Top-Jugendticket „zur Schule/Arbeit“ ersetzen durch „im gesamten Verkehrsverbund Ost-Region“. BTW: auch aus dem umfangreichen Text darunter geht nicht wirklich hervor, dass das Ticket für „freie Fahrt jederzeit“ gilt (und nicht nur für die Fahrt zur Schule/Arbeit).

Empfehlung zu den Buttons/Tabs: Stärkerer Kontrast zum Hintergrund (Barrierefreiheit…), durch Farbe/Design besser hervorheben, welches Tab gerade ausgewählt ist. Schrift etwas größer.

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.

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.