• Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt
Youitive
  • Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt

Konzepten

  • Home
  • Blog
  • Konzepten
  • 6 Usability Indikatoren die deinen Nutzern helfen können.

6 Usability Indikatoren die deinen Nutzern helfen können.

  • Autor Björn Frieling
  • Kategorien Konzepten
  • Date 3. Mai 2020
Ein Stop Schild ist ein perfektes Beispiel für einen Usability Indikator. Überall hat es die gleiche Form und Farbe. Unabhängig vom Content weiß der Fahrer, was damit gemeint ist. Und das weltweit.

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.

Schatten sind nützliche Usability Indikatoren, wenn es darum geht etwas klickbar darzustellen.

Ein Icon ist mehr als (visual) Design

Icons können dem Nutzer helfen und sollten hauptsächlich als Usability Indikatoren dienen und nicht nur Elemente schmücken.

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.

Ein Stop Schild ist ein perfektes Beispiel für einen Usability Indikator. Überall hat es die gleiche Form und Farbe. Unabhängig vom Content weiß der Fahrer, was damit gemeint ist. Und das weltweit.
Ein Stop Schild ist ein perfektes Beispiel für einen Usability Indikator. Überall hat es die gleiche Form und Farbe. Unabhängig vom Content weiß der Fahrer, was damit gemeint ist.

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.

Ein kleines Icon kann auch bei einem Bild indizieren, dass es klickbar ist und 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.

Progressbars sind auch Usability Indikatoren. Sie zeigen dem Nutzer, wie weit er im Prozess schon fortgeschritten ist.
Eine Progressbar dient als Usability Indikator, da sie dem Nutzer zeigt wie weit er im Prozess schon fortgeschritten ist.

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.

Tag:forhappyusers, ISO Norm 9241, Konzept, Konzepten, Usability, UX, UX Tipps, Validierung

  • Teilen:
author avatar
Björn Frieling

Previous post

Marktplatz User Research - Ein internes Event
3. Mai 2020

Next post

Empathy Map - Wie du deinen Nutzer besser verstehst
24. Mai 2020

You may also like

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25 Juli, 2021
Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23 Mai, 2021
Das Bild zeigt die Startseite von https://www.youitive.de wie sie ein Farbenblinder wahrnehmen würde
12 Tipps für Barrierefreiheit in deinem Konzept
29 November, 2020

Search

Kategorien

  • Agile
  • Allgemein
  • Konzepten
  • Nutzungskontextanalyse
  • Strategie
  • User Research

Neuste Artikel

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25Jul2021

Was ist die 7 ± 2 Regel? Bei der 7 ± 2 Regel spricht man bei User Experience und Usability davon, dass deinem Nutzer nur 7 Items ± 2 gleichzeitig präsentiert werden sollten. Diese Regel findet vor allem häufig Anwendung …

Die Abbildung zeigt einen Standardaufbau der Priorisierungsmatrix mit den 4 Quadranten und deren Beudeutung. Alle Funktionen welche rechts oben sind, sollte höhere priorisiert werden. Links oben und rechts unten werden Funktionen eingetragen, welche dann vielleicht später umgesetzt werden sollten. Funktionen welche links unten stehen, sollte nicht umgesetzt werden.
Priorisierungsmatrix – Im Team UX Entscheidungen treffen
26Jun2021

Eine Priorisierungsmatrix hilft dir und deinem Team UX Entscheidungen für neue Funktionen zu treffen. In agilen Teams ist die Priorisierung meist Aufgabe des Product Owners, allerdings kannst du ihn dabei gut unterstützen. Sollte dein Team nicht konstant von außen priorisiert …

Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23Mai2021

Was ist Dark UX - Definition Unter Dark UX versteht man, das Ausnutzen bestimmter Patterns und Richtlinien, um aktiv die Kunden- und Nutzerentscheidung zu sabotieren. Dabei verwendest du für dein Interaktionsdesign die gleichen Prinzipien, Gesetze, Richtlinien und Inidikatoren wie bei …

UX Online Kurs

Du willst mehr über UX lernen? Dann kannst du über folgenden Link an meinem Online Kurs teilnehmen.

Zum Udemy Kurs

  • AGB
  • Impressum
  • Datenschutzerklärung

+49 176 848 592 65
info@youitive.de

Wir nutzen Cookies um dein Nutzererlebnis zu steigern. Bitte klicke auf 'Akzeptieren' um den vollen Funktionsumfang der Website zu nutzen. Ohne Cookies kann es zu Funktionseinschränkungen (längere Ladezeiten kommen).
Akzeptieren Ablehnen

Weitere Informationen
Datenschutz

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
immer aktiv
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SPEICHERN & AKZEPTIEREN