6 Usability Indikatoren die deinen Nutzern helfen können.

Usability Indikatoren helfen deinen Nutzern, um mit deinem System besser zurecht zu kommen. Gerade die Selbstbeschreibungsfähigkeit und die Lernfähigkeit deines System profitieren davon. Dabei müssen die Indikatoren nicht immer bewusst wahrgenommen werden. Auch kleinere subtile bzw. gewohnte Indikatoren können deinem Nutzer helfen. Auch Icons können als solche Indikatoren verstanden werden. Im Folgenden werden dir einige typische Indikatoren gezeigt und wo du diese verwenden kannst, um die Usability und damit auch die UX deines Produkts zu steigern.

Welche Usability Indikatoren gibt es?

Einige Usability Indikatoren dienen vor allem der Nutzerführung durch dein System. Sie helfen bei der Navigation. Dabei geht es vor allem darum, dass der Nutzer nicht seine Orientierung in deinem System verliert. Da ein Nutzer im Web keine physischen Reize hat um sich zu orientieren, liegt es an deinem Konzept diese fehlenden Reize auszugleichen.

Schatten als Usability Indikator

In der ‚realen‘ Welt nutzen wir die Tiefenwahrnehmung als Indikator. Wie aber sieht das bei Computersoftware aus? Gerade beim Flatdesign ist dies schwer. Dennoch solltest du überlegen, ob an der ein oder anderen Stelle ein Schatten nicht nützlich sein könnte.

Buttons mit einem Schatten helfen dem Nutzer zu verstehen, dass dieses Element klickbar ist. Auch ein Schatten an Kacheln oder sonstigen klickbaren Elementen kann durchaus sinnvoll sein. Diese Schatten sind kleine nützliche Usability Indikatoren. Sie steigern das natural matching mit der realen Welt.

Ein Icon ist mehr als (visual) Design

Ein Icon kann viel mehr als nur zur Ästhetik einer Website beitragen. Ein Icon sollte dabei allerdings nie alleinstehend sein. Verwende Icons um bestimmte Elemente leichter verständlich zu machen. Nutze dazu standardisierte Icons. Beschrifte die Icons allerdings immer! Auch auf dem Handy gibt es Darstellungsformen um Icons ordentlich zu beschriften. Wenn du Icons als Usability Indikator verwendest, steigert dies die Selbstbeschreibungsfähigkeit und Lernfähigkeit deines Systems.

Achte bei deiner multikulturelle Website darauf, dass deine Icons wirklich ein weltweiter Standard sind. Apple und Google können dir dabei gut helfen. Ist ein Icon in Android oder iOS integriert, steigt die Wahrscheinlichkeit, dass es sich um ein globales Icon handelt. Auch der Font-Awesome oder Bootstrap bieten dir viele verschiedene Icons an.

 

Ein drastisches Beispiel für die Verwendung unterschiedlicher Icons ist das Hakenkreuz. In der westlichen Hemisphäre dieser Welt, ist dieses Icon sehr eindeutig. Im Hinduismus allerdings bedeutet es Glück. Wenn du also je nach Bali kommst, wundere dich nicht das dort überall Hakenkreuze hängen.

Simple Implementierungstricks mit HTML und CSS

CSS und HTML bringen dir schon einige Usability Indikatoren mit. Wenn du einen Link im HTML erstellst und ohne weiteres Design fortfährst, dann ist dieser blau und unterstrichen. Falls der Link schon einmal besucht wurde, dann ist dieser Link lila. Achte darauf, dass ein Link auch im Fließtext heraussticht. Solltest du vom Standard abweichen (blau und unterstrichen), dann teste deine Variante.

Auch kannst du vor Links typische Icons anbringen. Das hilft dem Nutzer zu verstehen, wohin ihn dieser Link bringen wird oder was für eine Art Link dies ist.

Auch CSS hat einige kleine Tricks, die dem Nutzer als Usability Indikator dienen können. Gerade der Mauscursor kann dabei verschiedene Varianten annehmen. Achte darauf den cursor immer mit dem Attribut ‚pointer‘ zu kennzeichnen, wenn ein Element klickbar ist. Auch ein Ladeverhalten kannst du darüber simpel darstellen. Denke aber immer daran, dass der Cursor allein nicht mehr ausreicht. Denn Handys und Tablets haben keinen Cursor. Beispiele kannst du hier sehen.

Eine weitere Variante mit CSS sind kleine Animationen. Willst du die Aufmerksamkeit deines Nutzers auf ein bestimmtes Element lenken, kannst du dies ‚leicht animieren‘. Denke bei der Animation daran, dass diese funktional sein muss und nicht nur der Darstellung dient. Zum Beispiel hilft es dem Nutzer bei einem Sprung innerhalb einer Seite, dies zu animieren. Dadurch sieht dein Nutzer, dass er immer noch auf der gleichen Seite ist.

Form und Farbe als Usability Indikator

Ein weiterer Usability Indikator sind die Formen und die Farben auf deiner Seite. Achte darauf, dass jede Form die du verwendest immer auch die gleiche Funktion hat. Wenn also alle Kacheln klickbar sind, dann sind eben alle Kacheln klickbar, ohne Ausnahme! Wenn jedes blau unterstrichene Wort ein Link ist, dann springt der Nutzer jedes Mal.

Achte hier auf Konsistenz. Dein Nutzer lernt dein System kennen. Nach einer Weile werden diese Farben und Formen automatisch zu Usability Indikatoren für deinen Nutzer. Ganz ohne den dazugehörigen Content, weiß dein Nutzer, was er nun machen kann.

Dies ist eine der wichtigsten Funktionen einer Design Pattern Library. Konsistenz der Funktionalität über Formen und Farben festzuhalten.

Usability Indikatoren bei Videos und Bildern

Ob ein Bild klickbar ist oder nicht, ist vielen Nutzer nicht immer klar. Hier kannst du dir selbst mit den oben erwähnten Usability Indikatoren helfen. Ein Icon rechts unten im Bild und der Cursor als Pointer gesetzt, hilft deinem Nutzer. Dadurch weiß er, dass ein Bild vergrößert werden kann.

Falls du mal ein YouTube Video integriert hast, dann wird dabei schon automatisch ein Play Icon dargestellt. Aber auch wenn du Videos von anderen Plattformen integrierst oder selbst hostest, solltest du dieses Play Icon anbringen.

Prozessfortschritt und Anzahl

Typisch auf vielen Websites sind Slider mit mehreren Bildern. Als Usability Indikator dienen dabei oft Pfeile auf der linken und rechten Seite, um das nächste oder vorherige Bild anzeigen zu lassen. Des Weiteren wird die Anzahl der Bilder oft durch kleine Punkte darunter signalisiert. Dies hilft deinem Nutzer auf einen Blick zu sehen, wie viele Bilder er noch vor sich hat. Dabei solltest du darauf achten, dass es nicht allzu viele Punkte werden. Ich empfehle dir ein Maximum an 5 Punkten. Wenn du 18 Punkte unter einem Slider hast, hilft das deinem Nutzer bedingt. Dann solltest du lieber eine Darstellungsform wie 7/18 wählen.

Bei Checkout Prozessen hat sich eine zusätzliche Progressbar bewährt um darzustellen, wo sich der Nutzer gerade befindet. Auch Breadcrumbs sind hier für die Orientierung sehr nützlich. Integriere beides, um deinen Nutzer zu unterstützen.

Zusammenfassung

Usability Indikatoren sind vielseitig und nützlich. Du hast bei deinem Design jede Menge Möglichkeiten diese zu integrieren. Sie helfen deinem Nutzer dein System schneller zu erlernen und steigert seine UX mit deinem System. Usability Indikatoren helfen vor allem auch bei der Selbstbeschreibungsfähigkeit deiner Elemente. Einige davon nimmt der Nutzer nur unbewusst wahr, dennoch helfen sie ihm bei der Bedienung deines Systems. Wichtig: Viele Usability Indikatoren sind sogenannte Low-hanging fruits und lassen sich schnell und einfach integrieren.