Erfolgreiche UI-Gestaltung – 5 Einsteiger-Tipps, die du beim Erstellen einer Benutzeroberfläche beachten solltest

Jeder, der sich zum ersten Mal der Herausforderung stellt eine Nutzeroberfläche zu gestalten, ist anfangs überfordert. Wie bringe ich die ganzen Elemente auf der begrenzten Fläche unter? Wie stelle ich Zusammenhänge zwischen ihnen her? Und wie bringe ich die NutzerInnen dazu, die Anwendung so zu bedienen, wie es von mir gedacht ist?
Die folgenden 5 grundlegenden Tipps sollen vor allem Anfängern den Einstieg in die Gestaltung von User Interfaces erleichtern.

NutzerInnen sind schnell verärgert, wenn eine Anwendung nicht so funktioniert, wie sie denken. Hier kommt das User Interface Design ins Spiel. Die Aufgabe von UI-DesignerInnen besteht darin, die Bedienoberfläche einer Anwendung so zu gestalten, dass sie übersichtlich und intuitiv bedienbar ist. Mit den 5 Tipps aus diesem Beitrag wird aus Frustration Spaß an der Bedienung.

Tipp 1: Orientiere dich an bereits erstellten Oberflächen

Einmal richtig erlernte Handlungen laufen nahezu automatisch ab. Daher können wir NutzerInnen die Bedienung einer Anwendung erleichtern, indem wir auf bekannte Elemente zurückgreifen. Bei der Erstellung einer Nutzeroberfläche muss man als UI-DesignerIn nicht für jede Aktion kreativ werden und überlegen, wie man sie darstellen könnte, damit sie sich von allem Bisherigen abhebt. NutzerInnen sind froh, wenn sie bekannte Strukturen wiedererkennen und somit wissen, was zu tun ist, um ein bestimmtes Ziel möglichst schnell zu erreichen. Also orientiere dich ruhig an existierenden Oberflächen.

Tipp 2: Achte auf Konsistenz

Wenn du dich nun an Vertrautem orientierst, achte unbedingt auf Konsistenz durch die gesamte Anwendung hinweg. NutzerInnen erwarten bekannte Elemente an bestimmten Stellen. Windows-NutzerInnen werden automatisch das X in der rechten oberen Ecke suchen, um ein Programm zu schließen. Wenn dieses plötzlich an einer anderen Stelle platziert wurde, führt dies zu Verwirrung und einer langsamen Bedienung. Achte daher auf Konsistenz in der Wahl wiederkehrender Begriffe, Layouts, Aktionssequenzen, Farben, Icons und der Position.

Tipp 3: Nutze Gestaltgesetze

Neben der Konsistenz kannst du AnwenderInnen bei der Bedienung weiter unterstützen, indem du auf bestehende Gestaltgesetze zurückgreifst. Diese wurden um 1920 entwickelt und beschäftigen sich mit der menschlichen Wahrnehmung – insbesondere der Herstellung von Zusammenhängen. Es gibt mehr als hundert dieser Gesetze. Folgende vier sind meiner Meinung nach unersetzlich für die User-Interface-Gestaltung:

Das Gesetz der Ähnlichkeit

Zusammengehörige Elemente werden durch Ähnlichkeit erkannt.
Mit „zusammengehörig“ ist hier nicht unbedingt die Gruppierung von Elementen gemeint, sondern vielmehr die im vorherigen Abschnitt behandelte „Konsistenz“. Elemente, die eine gleiche oder ähnliche Funktion haben, sollten auch gleich gestaltet werden. So wird zum Beispiel ein Button direkt als Button erkannt.

Das Gesetz der Nähe

Zusammengehörige Elemente werden durch geringe Abstände erkannt .
Wie eben angesprochen verwendet man das Gesetz der Ähnlichkeit im Normalfall nicht zur Gruppierung von Elementen. Hierfür eignet sich das Gesetz der Nähe besser. Sprich: Elemente, die zu einer Gruppe gehören, sollten nah beieinander stehen und sich durch einen größeren Abstand von unabhängigen Elementen abgrenzen.
Dieses Gesetz wird auch dazu genutzt eine Verbindung zwischen Bildern und ihren Untertiteln bzw Textboxen und den dazugehörigen Labels zu schaffen. Wäre der Abstand zwischen ihnen zu groß, könnte die Zugehörigkeit nicht mehr eindeutig erkannt werden.

Das Gesetz der Prägnanz

Objekte, die sich stark von anderen unterscheiden, werden von der menschlichen Wahrnehmung bevorzugt.
Rücke Elemente, die NutzerInnen bevorzugt verwenden, durch eine prägnante Darstellung in den Fokus. So kann z.B. ein „Speichern“-Button neben einem „Abbrechen“-Button hervorgehoben werden, da diese Option wesentlich häufiger genutzt wird. Springt sie die NutzerInnen durch ihre Darstellung förmlich an, so müssen sie nicht lange suchen und können schnell durch die Anwendung navigieren.
Bevor es an die Gestaltung der Elemente geht, solltest du sie also zunächst einmal priorisieren, damit du weißt, was in den Vordergrund rücken soll und was eher unwichtig ist.
Prägnanz kann durch Farbe, Form und Größe geschaffen werden.

Das Gesetz der Kontinuität

Elemente werden von uns unterbewusst so gruppiert, dass sie eine erdachte Linie fortsetzen
Dieses Gesetz kann gut angewendet werden, um Navigationsmenüs und Formulare verständlicher aufzubauen. Elemente, die zur gleichen logischen Ebene gehören, solltest du immer auf der gleichen (erdachten) Linie positionieren. So kann beispielsweise ein Navigationsmenü viel verständlicher aufgebaut werden, wenn alle Hauptmenüpunkte auf einer gemeinsamen Linie und die Unterpunkte auf einer zweiten – etwas eingerückten – Linie angeordnet werden.

Tipp 4: Reduziere auf das Wesentliche

Minimalismus ist die Devise. Reduziere den Inhalt deiner Benutzeroberfläche auf das Nötigste. Jedes Element stellt eine Information für die NutzerInnen dar. Je mehr Informationen vorhanden sind, desto schneller sind AnwenderInnen auch überfordert und im schlimmsten Fall verwirrt.

Hast du die Elemente so weit reduziert, dass nichts Unnötiges mehr vorhanden ist, die Maske ist aber dennoch überfüllt, solltest du den Inhalt besser auf mehrere Masken aufteilen. Eventuell bietet sich ja ein Wizard an, um die NutzerInnen durch die einzelnen Schritte zu führen.

Wizard
Ein Wizard ist eine Oberfläche, die umfangreiche Aufgaben in kleine Schritte unterteilt. AnwenderInnen werden so Schritt für Schritt durch einen Prozess hindurchgeführt. Dabei müssen die AnwenderInnen nur den Anweisungen des Wizards folgen und es ist unwahrscheinlich, dass sie Fehler machen. Die wohl bekanntesten Wizards sind jene, die man bei der Installation einer Software durchläuft.

Auf ein Minimum reduziert werden sollte nicht nur der Inhalt. Beschränke dich auf eine gut lesbare Schriftart, die du für das gesamte Projekt verwendest. Du solltest dich außerdem auf maximal 4 Schriftgrößen beschränken, die mindestens 2 pt Differenz aufweisen.
Auch hier gilt wieder: Erst die Inhalte priorisieren, dann entsprechend gestalten: Wichtiges ist groß und steht oben, Unwichtiges ist klein und steht unten.

Auch in Sachen Farbe ist weniger mehr, denn bunt wirkt billig und sorgt für Verwirrung. Beschränke dich daher auf maximal 3 Grundfarben. Du kannst deren Abstufungen (hellere und dunklere Varianten) und zudem Grautöne verwenden, dadurch hast du genügend Auswahl. Bei der Wahl der Farben solltest du auf Erfahrungswerte zurückgreifen: Rot ist negativ behaftet und steht meist für eine Warnung, grün gilt als positiv und vermittelt Erfolg.

Tipp 5: Bringe Ordnung rein

Achte immer darauf, dass Elemente bündig angeordnet und die Abstände dazwischen einheitlich groß sind.
Texte sollten immer linksbündig gesetzt werden, um einen guten Lesefluss zu gewährleisten.

Du solltest jedoch nicht nur auf das Vorhandene, sondern auch auf die Leere achten. Weißraum wird häufig unterschätzt, doch er hat eine große Wirkung auf die Wahrnehmung. Lass Luft zwischen einzelnen Elementen, die nicht zusammengehören, platziere Elemente nicht zu nah am Rand und habe Mut eine Maske nur mit wenig Inhalt zu füllen. Die AnwenderInnen werden es dir danken. Oberflächen wirken durch guten Einsatz von Weißräumen nicht nur edler, sie werden auch sehr viel übersichtlicher.

Das waren meine 5 Tipps für eine erfolgreiche User Interface-Gestaltung.

Denke immer daran:

• Schaffe Konsistenz durch die gesamte Anwendung.
• Gruppiere zusammengehörige Elemente.
• Priorisiere Elemente, bevor du sie gestaltest.
• Ordne alle Elemente entsprechend Ihrer Priorisierung an und hebe sie hervor.
• Schaffe eine klare Nutzerführung durch eine korrekte Reihenfolge und Gewichtung.
• Stelle den Inhalt reduziert und übersichtlich dar.

Wenn du diese einfachen Tipps bei der Gestaltung von Anwendungen beachtest, wird deine erstellte Oberfläche intuitiv bedienbar sein und die NutzerInnen erreichen schnell und zufrieden ihr Ziel.

Über die Autorin
Lena arbeitet seit 2018 als UX-Designerin bei Softwarekontor. Mit Fokus auf Informationsarchitektur und User Interface Design erstellt sie Konzepte und Prototypen und sorgt dabei durch ihre ganzheitliche Sicht auf die Nutzer*innen für eine intuitive Bedienung der Anwendungen. Als gelernte Kommunikationsdesignerin und Fotografin trägt sie zudem zur Gestaltung des inneren und äußeren Erscheinungsbilds von Softwarekontor bei.