5 einfache Tipps für ein besseres User Interface

user-interface-designUsability spielt im digitalen Zeitalter eine immer wichtigere Rolle. Auch Google bewertet die Websites inzwischen anhand von Kriterien, die die Usability wiederspiegeln.

In diesem Beitrag möchte ich euch deshalb 5 einfache Tipps für ein besseres User Interface geben, die ihr bei der nächsten Gestaltung einer Website oder App unbedingt berücksichtigen solltet.

Für viele ist Design in erster Linie etwas Visuelles. Dabei gehören zu einem guten Design viel mehr als nur eine schöne Schrift, zusammenpassende Farben und ein paar Flat-Buttons. Wer ein gutes User Interface für seine Website oder App gestalten möchte, muss sich über verschiedene User Stories Gedanken machen, Heuristiken kennen und über seine Nutzergruppe Bescheid wissen.

  • 1. Intuition – das A und O beim Gestalten von User Interfaces

Wenn man eine Website, App oder Web-Anwendung gestaltet, so macht man das immer für eine bestimmte Nutzergruppe. Diese kennen nur selten die Absichten und Ideen hinter den jeweiligen Design-Entscheidungen und können sich deshalb schnell auf der Plattform verirren. Um unnötige Frustration auf beiden Seiten zu vermeiden, sollte man deshalb alle Elemente im Design so intuitiv wie nur möglich gestalten. Hier einige Beispiele:

  • Verlinktes Logo zur Startseite
  • Bekannte Icons verwenden
    • Mülleimer = Löschen
    • Lupe = Suchen
    • X = Schließen
    • + = Hinzufügen
  • unterstrichener blauer Text = Link
  • a-hover bei Buttons verwenden

Dabei kommen auch häufig sogenannte Heuristiken zum Einsatz. Das sind so etwas wie angelernte Lösungsmuster und Erwartungen im Kopf von Nutzern, anhand derer sie sich auf einer neuen Plattform orientieren.

Heuristiken können sich je nach Nutzergruppe, Alter und Generation unterscheiden und können nur in verallgemeinerter Form pauschalisiert werden. Die 10 Klassiker unter den Heuristiken sind von Jakob Nielsen formuliert worden und beschreiben in sehr allgemeiner Form, was ein gutes User Interface für Anforderungen erfüllen sollte. Hier der Link dazu: http://www.nngroup.com/articles/ten-usability-heuristics/

  • 2. Prioritäten setzen

Ein weiterer wichtiger Punkt bei der Gestaltung von der Schnittstelle zwischen einem Nutzer und einer Plattform ist die hierarchische Strukturierung. Ein Nutzer kommt immer mit einer bestimmten Absicht auf eine Plattform oder Anwendung. Entsprechend der Prioritäten dieser Absichten, sollten auch die Elemente dargestellt werden.

Ein schönes Beispiel hierfür ist Google. Schaut man sich das User Interface einmal an, ist sofort klar, das die Suche im Mittelpunkt steht. Doch das ist nicht immer so. Die Suchmaschine Yahoo zum Beispiel hat einen anderen Schwerpunkt gelegt. Hier stehen Nachrichten, Videos und Trends im Vordergrund.

yahoo-suche-user-interface-design

Screenshot: de.yahoo.com

  • 3. Weniger ist mehr

Minimalismus spielt im User Interface Design eine ebenfalls sehr wichtige Rolle. Denn wenn man es als Designer schafft, sein Layout soweit wie nur möglich zu reduzieren, finden sich die Nutzer schneller zurecht und fühlen sich weniger überfordert. Es ist viel schwerer eine Website mit nur 5 Unterseiten zu gestalten als mit 15.

Wenn man weniger Platz hat, überlegt man sich genau, wo welches Element hinpasst und ob es an dieser Stelle wirklich benötigt wird. Und genau darin liegt die Kunst eines guten Designers, er kennt nicht nur aktuelle Designtrends und wendet sie in seinem Layout an, sondern trifft die richtigen Entscheidungen bei der Verwendung und Platzierung von Elementen.

  • 4. User Stories für wichtige Funktionen formulieren

Um die eben genannten Entscheidungen treffen zu können, muss man sich über bestimmte Nutzungs-Szenarien Gedanken machen. In der agilen Software Entwicklung hat man erkannt, dass es nicht reicht, die Anforderungen an eine Software nur aus technischer Sicht zu beschreiben und hat zusätzlich sogenannte Userstories hinzugenommen. Der Aufbau einer solchen Userstorie sieht wie folgt aus:

  • Name
  Die geheime Formel für erfolgreiche Startup-Ideen

Hier wählt man einen einfachen Namen, der stellvertretend für das steht, was der User bei der jeweiligen Funktion tun kann.

  • Beschreibung

In der Beschreibung formuliert man aus, was der User machen möchte bzw. was sein Ziel ist.

  • Akzeptanzkriterien

Hier zählt man auf, welche Anforderungen erfüllt sein müssen, damit das vorher genannte Ziel erreicht werden kann. Ein mögliches Beispiel wäre eine App mit der man Youtube Videos downloaden kann.

Name: Youtube Video downloaden

Beschreibung: Der Nutzer möchte ein Youtube Video in einem entsprechenden Video-Format auf sein Smartphone herunterladen.

Akzeptanzkriterien:

  1. Eingabe der URL durch Einfügen möglich.
  2. Auswahl eines entsprechenden Video-Formats vorhanden
  3. Speicherort wählbar
  4. Funktionierender Download-Button vorhanden.
  5. Downloadfortschritt wird angezeigt.
  6. Benachrichtigung bei Fertigstellung des Downloads

Das wäre ein mögliches (jedoch sehr allgemeines) Beispiel der User Stories für eine Youtube-Downloader App. Je nachdem wie komplex die Funktionen und Möglichkeiten sind, muss man mehrere Userstories für eine Anwendung anfertigen. Bei größeren Projekten werden Userstories meist ausführlicher formuliert, um die Arbeit im Team zu erleichtern.

Als Designer hat man bei vorhandenen Userstories den Vorteil, dass man die Akzeptanzkriterien mit ins Design einfließend lassen kann. Zum Beispiel kann man den Status des aktiven Downloads sowohl durch einen Ladebalken als auch durch zusätzliches Ausgrauen des Download-Buttons darstellen (es sei denn es sollen mehrere Download parallel möglich sein).

  • 5. Typografie, Farben und weitere Elemente

Zum Schluss möchte ich noch einmal kurz auf die klassischen Designelemente wie die Typografie, die Farben und die Elemente eingehen. Dabei gilt immer:

Hinterfrage jedes Gestaltungselement, bevor du es benutzt

Damit ist gemeint, dass sowohl Typografie als auch Farbe jeweils einen eigenen Zweck erfüllen. Eine Sans Serif Schrift für lange Texte zu nutzen, nur weil sie zum Flat Design passt, macht keinen Sinn, wenn der Text dadurch schwerer lesbar wird. Ebenso verhält es sich mit Farben: jede Farbe hat eine Wirkung und sollte auch nur dort verwendet werden, wo sie benötigt wird. Natürlich darf man die Rolle von solchen Gestaltungselementen nicht überschätzen, jedoch sollte man sie zumindest einmal hinterfragen.

Ebenso verhält es sich auch mit Aufzählungen, Icons und Dropdown-Listen. Jedes dieser Elemente hat einen Zweck und sollte nur dann verwendet werden wenn es diesen erfüllt. Dabei gehören Icons zu den trügerischsten Gestaltungsmitteln des digitalen Zeitalters. Häufig sieht man, dass Plattformen viele Ihrer Navigationspunkte und Funktionen durch Icons repräsentieren.

Leider sind die verwendeten Icons für die Nutzer nur selten so klar zu verstehen wie für die Designer/ Entwickler. Hier empfiehlt es sich einfach mal mit zusätzlichen Bezeichnungen zu arbeiten oder zumindest Description Tags einzufügen, die beim Drüberfahren mit der Maus über die Icons weitere Hilfestellung geben.

Aus diesem Grund hat der „User Interface Designer“ eine eigene Stelle in Unternehmen

Ein User Interface zu gestalten ist eine verantwortungsvolle Aufgabe. Wer sich dieser annimmt sollte sich zuvor viel Zeit nehmen, um über die entsprechenden User-Stories Gedanken zu machen und jedes Element gut zu überdenken. Mit den hier aufgezählten Tipps, einer gründlichen Recherche und etwas Übung sollte das nächste App-Design ein wenig intuitiver und einfacher für die entsprechende Nutzergruppe werden.

Anzeige









0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.