Schritt für Schritt zu gutem UI-Design: So schafft gutes Layout eine einwandfreie Nutzung.

UI-Design (User Interface Design) bezeichnet die konzeptionelle und technische Gestaltung von Benutzeroberflächen, zum Beispiel auf Webseiten oder bei Apps. Ob man den Busfahrplan online abrufen möchte, eine Pizza nach Hause geliefert bekommen will oder sich die neuesten Modetrends bestellen möchte – ein gutes UI-Design soll den Weg zum Ziel erleichtern. Frontendlerin Milena erklärt ihren Workflow und verrät ein paar Tricks für gutes UI-Design.

Eins vorab: Erklärungen müssen überflüssig sein

Den perfekten Workflow oder ein allgemeines Regelwerk für UI-Design gibt es meiner Ansicht nach nicht. Es richtet sich stets nach dem gegebenen Projektumfang und der dazugehörigen Zielgruppe. Meine oberste Regel aber ist: Sobald du einem User deine Gestaltung erklären musst, ist das ein Zeichen für ein schlechtes User Interface. Hier geht es nicht um eine Sprache, die erst erlernt werden muss, bevor sie benutzt werden kann – das User Interface sollte bei dem ersten Besuch auf einer Seite so gestaltet sein, dass der Nutzer die gesuchten Inhalte intuitiv finden kann.

  1. Den Workflow vorbereiten

    Optimal ist es für mich, wenn ich mir im Vorfeld einen Überblick über die darzustellenden Inhalte machen kann – auch wenn es im Agenturalltag manchmal so eine Sache mit dem frühzeitigen Content ist ;-) So kann ich eine optische und thematische Unterteilung der Bereiche treffen und mir danach eine passende Anordnung geeigneter Elemente überlegen.

  2.  Das Grundgerüst erstellen

    Anschließend bekommt das Wireframe, also das Grundgerüst der Website, ein Gesicht: Dabei werden die gescribbelten Vorüberlegungen in konkrete Designinhalte umgewandelt. Hierfür arbeiten wir mit Sketch. Dort kann ich die einzelnen Contentelemente während der Gestaltung auf ein vorher angelegtes Grid-System anpassen. Ein funktionierendes Grid ist vor allem bei größeren Projekten sehr wichtig, um die spätere Umsetzung für die Frontend-Entwickler zu erleichtern.

  3. Kompromisse schließen

    Oft müssen in dieser Phase Kompromisse gemacht werden – denn als UI-Designer musst du sowohl die spätere Entwicklung als auch den User im Hinterkopf haben. Gelingt es, hierbei die passende Balance zu finden, erfüllt die Benutzeroberfläche schon die grundlegenden Anforderungen an gutes UI-Design.

Tipps und Tricks beim UI-Design

Ein paar Beispiele dafür, wie ein gutes Interface den Usern helfen kann:

  • Erleichtere die Navigation

    Ausreichend Weißraum zur Gestaltung ist zwar schön, sollte jedoch nicht dazu beitragen, dass die gewünschten Interaktionen hinter abstrakten Menüs versteckt sind. Manchmal ist eine Textnavigation eben besser geeignet als ein Burger-Menu.

  • Vermeide zu viele Informationen auf einmal

    Hat der User zu viele Möglichkeiten, für die er sich entscheiden kann, ist er schnell überfordert und sucht sich eine andere Informationsquelle. Dieser Punkt gewinnt immer mehr an Bedeutung, weil es für viele Benutzer wichtig ist, Informationen schnell erfassen zu können.

  • Unterstütze den User

    Beispielsweise sollte ein Zurücksetzen-Button in einem Formular optisch weniger Gewichtung haben als der Button zum Absenden der Nachricht. So kommen die User schneller ans gewünschte Ziel.

Cases
Wert