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.

User Experience bei Flatex

Was tun bei einer Fehlermeldung, über die man mehr erfahren möchte, weil sie nicht verständlich genug war? Natürlich den Kundendienst kontaktieren! Der Link zum Kontakt ist leider in der Fußzeile versteckt. Es gibt keine Möglichkeit, eine Email zu senden. Jeder, auch der Kunde, muss das Kontaktformular passieren. Abfrage eines „Kundenstatus“ klingt nicht sehr kundenfreundlich. Die Kundennummer ist ein Pflichtfeld – aber wo findet man die im Login-Bereich? Diverse andere Felder sind Pflichtfelder, auch die Telefonnummer. Und dann ganze drei Checkboxes für „werbliche Kontaktaufnahme“. Und das alles, weil man eine Frage stellen wollte..

https://www.flatex.at/service/kontakt/