Grundlegende Richtlinien
für ein gutes UI

Wer ein gutes UI haben möchten, sollte sich unbedingt ausgiebig mit dem Thema beschäftigen.

Ein UI sollte dem Nutzer behilflich sein, ohne dass es ihm bewusst wird.

Hier ist es wie mit Filmmusik - selten bleibt eine perfekt abgestimmte Filmmusik nach dem Film im Kopf. Die schlechte Filmmusik wird jedoch auch dem normalen Betrachter als unpassend auffallen.

Gutes UI

Kenne deine Zielgruppe

Erstmal sollte man sich überlegen, wen man eigentlich ansprechen möchte. Ist es eine bestimmte Altersgruppe? Geschlecht? Oder ein bestimmter Typ Mensch. Egal welche Zielgruppe es ist, sie alle haben etwas gemeinsam – Eigenschaften und Bedürfnisse.

Ist eine Website schwer zu bedienen und einfach zu kompliziert umgesetzt, werden die Leute sie ungern benutzen, auch wenn das Design noch so schön ist.

Da weniger oft mehr ist, sollte man mit seinen visuellen Visionen nicht über die Stränge schlagen, was aber auch nicht heißt, dass man sich da nicht kreativ ausleben darf. Es sollten nur immer die Nutzungsgewohnheiten der Zielgruppe bedacht werden, sodass die Funktion nicht vom Design eingeschränkt wird.

Beispielsweise wird die Website einer Gärtnerei nicht gern benutzt werden, wenn diese aussieht als wäre es eine Website für Kinderspielzeug.

Wiederum muss darauf geachtet werden, dass die Gestaltung nicht zu langweilig bzw. zu streng wird, da Zielgruppen meist größer definiert werden und häufig jüngere Personen einschließen.

Konsistenz im Design

Benutzer lernen die Bedienung des Interfaces und wollen das Gelernte auch beibehalten, deshalb ist es wichtig, dass das Design konsitent umgesetzt wird. Buttons, die den gleichen Style besitzen, sollten auch immer die gleichen Funktionen haben. Ideal wäre es, wenn sich die User keinen Gedanken mehr über die verschiedenen Funktionen der Bedienelemente machen müssten. Am besten sollten sie klar und schnell verständlich sein.

Ein konsistentes Design verbessert

  • Workflow
  • Aussehen
  • Funktionalität

Ersichtliches und informatives Feedback

Benutzer möchten immer wissen, was gerade passiert und warum. Sie wollen nicht raten und überrascht werden, ob etwas geklappt hat oder nicht, daher sollten sie stets darüber informiert werden, was gerade auf ihrem Display oder Monitor passiert.

Dadurch wird Vertrauen zum Interface aufgebaut und der User weiß, dass es funktioniert.

Wenn etwas gespeichert wird, lasst es eure Nutzer wissen und zeigt es ihnen in einer visuellen/informativen Weise an.

Dies sollte bei jeder noch so kleinen Funktionalität wie zum Beispiel beim Zwischenspeichern oder dem Laden der Seite geschehen. Es hat den Vorteil, dass der User sofort weiß, dass die Funktion nicht durchgeführt wurde, da nichts dergleichen visualisiert wurde.

Bei Aktionen die häufiger auftreten, muss das Feedback nicht ganz so plakativ sein, ist es jedoch etwas das nicht so häufig auftaucht, aber wichtig ist, sollte die Meldung hervorgehoben und umfangreicher sein.

Feedback sollte

  • Relevant sein
  • Verständlich sein
  • Zum richtigen Zeitpunkt auftauchen
  • Wichtigkeit des Geschehnisses verdeutlichen

 

Halte es realistisch

Ist das Interface zu abstrakt, können schnell Missverständnisse entstehen, wodurch die User Experience leiden kann. Genauso sollten verwendete Wörter, Phrasen und Gestaltungselemente einfach und vertraut sein. Man sollte keine Fachausdrücke verwenden, die man nur kennt, wenn man sich mit der Materie gezielt auseinandersetzt. Je nachdem welche Zielgruppe angesprochen werden soll, könnte es diese abschrecken oder langweilen. 

Fehler- und Error-Handling

Kaum jemand mag Fehlermeldungen. Was aber noch schlimmer ist, ist das Gefühl etwas falsch gemacht zu haben. Es schränkt die Freude ein und hinterlässt eine schlechte Erinnerung. Bewahre also deine User davor!

Behalte fehleranfällige Situationen im Hinterkopf und warne die Nutzer im besten Fall davor.

Heute wird einem gesagt welche Vorgaben ein Passwort haben muss, früher war dies selten der Fall und viele von uns haben sich geärgert, dass keines der Dreiundzwanzig gut durchdachten Passwörter funktionierte, nur weil kein Großbuchstabe oder nicht die gewünschte Anzahl von Zeichen enthalten waren.

Gutes Error-Handling bietet

  • Fehlerkorrekturen
  • Fehlererkennung
  • Präventive Warnungen
  • Hinweise zur Lösung des Problems

Fehlermeldungen

Fehler sind nervig oder beängstigend, wenn man nicht richtig versteht was gerade passiert.

Schütze die User vor diesem Gefühl, indem du ihnen die Fehlermeldungen einfach und verständlich präsentierst. Sende auch Signale wie schwerwiegend der aufgetretene Fehler ist, damit rechtzeitig entgegengewirkt werden kann.

Ab besten lässt man auch hier alle Fachausdrücke und professionellen Aussprachen weg und formuliert es in User-Sprache. Wenn möglich gibt man auch gleich eine konstruktive Lösung vor.

Will der User etwas endgültig löschen, sollte man ihm das auch deutlich machen. Falls der User sich anders entscheiden sollte, sollte ihm hier ein Button zu Verfügung stehen, um von seiner Entscheidung zurücktreten zu können. Wir haben alle schon mal etwas angeklickt, was wir eigentlich nicht wollten und haben uns gefreut, dass wir vom "Abbrechen"-Button Gebrauch machen konnten.

Weniger ist mehr

Ist das UI überladen, sind die Augen überfordert, das zu finden was in diesem Moment benötigt wird. Deshalb sollte alles was für Interaktionen nicht notwendig ist, versteckt oder gar weggelassen werden. Hier ist es wieder sehr wichtig seine Zielgruppe zu kennen, um zu wissen was notwendig und was überflüssig ist.

 

Abkürzungen

Interaktionen die öfter durchgeführt werden, sollten eine Abkürzung oder Funktionstaste besitzen. Dies spart Zeit und eventuell die Nerven der User, da sie nicht jede Abfolge fünfzehn Mal hintereinander machen müssen.

Diese können sein

  • Shortcuts über Tastatur
  • Aktionsautomatisierung (zB. Automatische Speicherung)

Entlastung des Kurzzeitgedächtnisses

Wir erleben es jeden Tag – automatisierte Handgriffe, sind sie noch so klein. Als Ersteller einer UI hat man aber die Möglichkeit dieses Phänomen auf das eigene Interface zu übernehmen. Der User soll sich nicht großartig mit Dialogfenstern oder Tutorials auseinandersetzen müssen, um sich zurecht zu finden, durch visuelle Hilfsmittel wie sich wiederholende Farbschemen und gleichbleibende Platzierungen von Elementen.

Eine Unterstützung ist

  • Eine klare Struktur
  • Visuelle Unterstützung
  • Klare Sprache

Bereite der Zielgruppe Freude

Wir sind jetzt einige Punkte durchgegangen und einige klingen natürlich logisch.

Das Wichtigste beim Erstellen eines Interfaces ist es sich wirklich in die Nutzer hinein versetzen zu können, um die Vorteile und Nachteile für bestimmte Elemente und Funktionalitäten abwägen zu können. Das ist eine ganz einfache Sache von „in den Schuhen eines anderen stecken“.

Man sollte sich immer wieder fragen:

„Wenn ICH das jetzt benutze, ohne es vorher gekannt zu haben… finde ich mich schnell zurecht? Würde es MICH auch ansprechen, wenn ich es theoretisch nicht selbst entworfen hätte?“

Es liegt quasi die Kunst darin - selbst zur Zielgruppe zu werden.

Wir entwickeln digitale Lösungen mit Leidenschaft

Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.

Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:

Passend zu diesem Thema:

TYPO3 9 Custom Content Elements

TYPO3 9 Custom Content Elements

TYPO3 bietet in Sachen Inhalts-Pflege schon eine Vielzahl an Content Elementen an. Solche sind z.B. Text & Medien (textmedia), Menüs (menu_pages,...) …

Richter Pharma Web4Partners

Richter Pharma Web4Partners

Um den Austausch von Marketing-Material und Bilder sowie die Verbreitung von Informationen für Vertriebspartner von Richter Pharma einfacher und schne…

TYPO3 Indexed Search mit Segmentierung/Indexierung

TYPO3 Indexed Search mit Segmentierung/Indexierung

In diesem Blogbeitrag will ich Euch den Einsatz der Such-Erweiterung "indexed_search" zeigen und anhand eines Beispiels näher bringen. Wir werden uns …