UI Design Basics, die Ihnen zu einem fantastischen Interface Design verhelfen

Unsere Anwendungen sollen Unternehmen dabei helfen, ihre bestmögliche Leistung abzurufen indem sie den Nutzer optimal bei seiner Arbeit unterstützen. Das wird, abgesehen von den technischen Komponenten, durch ein gut konzipiertes User Interface erreicht. Aber was macht so ein richtig gutes User Interface eigentlich aus? Was ist heute Branchenstandard, was sind die Grundlagen, die eine Anwendung in UI-Hinsicht erfüllen muss?

Wir zeigen unsere Vorgehensweisen, Tipps und Insights für richtig gute User Interfaces, die Sie sich gerne abschauen dürfen.

Wir konzipieren Apps und Webanwendungen immer mit einem optimalen Nutzererlebnis im Kopf. Das erfordert, dass der letztendliche Nutzer des Produkts von Anfang an Kern der Konzeption sein muss. Ein gutes User Interface setzt den Menschen und seine Bedürfnisse bei der Verwendung einer Anwendung in den Mittelpunkt und erfüllt diese bestmöglich. Egal, ob es um eine Website, App oder Webanwendung geht, für Mitarbeiter oder Endkunden. Schauen Sie sich Ihre Zielgruppe ganz genau an und finden Sie heraus was sie braucht.
Hierbei helfen Online-Umfragen, Interviews oder auch Auswertungen vergangener Projekte, um zu Beginn des Projektes eine genaue Zielgruppenbeschreibung vorliegen zu haben. Diese kann man nach Erstellung des Interface Designs als eine Art Checkliste nebendran legen und prüfen, ob die jeweiligen Bedürfnisse wirklich optimal abgedeckt werden.

Wenn man die Bedürfnisse kennt, weiß man auch was nicht dazu gehört. Alles was nicht im Anforderungskatalog der Zielgruppe vorhanden ist, sollte später auch nicht Teil der Anwendung sein.

Unser Tipp: Keep it Simple. Reduzieren Sie die Funktionen auf das Wesentliche und unterstreichen Sie das durch ein Interface, das durch Klarheit und Übersichtlichkeit glänzt. Ein wirklich gutes User Interface sorgt dafür, dass alle wichtigen Features immer griffbereit sind. Auf überflüssige Inhalte, Designelemente oder Spielereien wird verzichtet. Das bedeutet auch: nicht zu viele unterschiedliche Schriftarten, Schriftgrößen, Bildstile und Farben verwenden.

Die “Authentic Weather App” kommt im super schlichten Design daher. Mehr Funktionen werden erst durch Swipen oder Tippen eingeblendet.
Vereinfachen Sie Ihr User Interface, indem Sie alle Elemente oder Inhalte entfernen, die nicht direkt ein Bedürfnis der Nutzer erfüllen.

Farben sollten stets gezielt gewählt und eingesetzt werden, um wichtige Elemente hervorzuheben. Nicht um „das Ganze noch etwas bunter“ zu machen. Eine Herangehensweise, die vielleicht gewöhnungsbedürftig aber definitiv gewinnbringend ist: Einfach mal ausschließlich in Schwarz-Weiß designen. Wenn das User Interface dann „fertig“ konzipiert ist, können die Farben zum Einsatz kommen und die wichtigsten Informationen ins Auge des Betrachters rücken. Sie werden sehen, das Ergebnis ist ein ästhetisches, reduziertes Design mit durchdachter farblicher Gewichtung der Elemente.

Klare Gewichtung der Calls to Action, Pacifica Meditation App

Abgesehen von der Farbgebung hilft auch eine Veränderung der Größe um Elemente hervorzuheben und hierdurch eine Struktur zu erzeugen. So können neue oder wichtige Informationen deutlich größer dargestellt werden als der Rest. Egal ob es sich um Text handelt (wie bspw. eine größere Formatierung der Headline) oder ganze Content-Elemente. Vergrößerte Inhalte ziehen das Auge automatisch an und sind schneller zu begreifen. Nutzen Sie diese Funktion auch, um Entscheidungen der Nutzer zu Ihren eigenen Gunsten zu beeinflussen. Das heißt, wenn vom Nutzer eine bestimmte Aktion gewünscht ist, leiten Sie ihn zu dieser Aktion, indem Sie entsprechende Schaltflächen, die getätigt werden müssen, nicht nur farblich hervorheben sondern zusätzlich vergrößern.

Um Nutzer zu bestimmten Aktionen zu verhelfen, müssen die entsprechenden Elemente außerdem richtig platziert werden. Für die User muss es einfach sein, Entscheidungen zu treffen. Dementsprechend müssen ausreichend Schaltflächen und Entscheidungsvorlagen geboten werden, die es dem User erlauben gewünschte Aktionen auszuführen. Die Platzierung dieser Elemente orientiert sich an der “Wichtigkeit” der getätigten Aktionen, wie immer und überall gilt: Das Wichtigste kommt zuerst und sollte somit deutlich in das Blickfeld des Users gerückt werden. 
Aber, um noch mal auf das Prinzip Keep it Simple zurückzukommen: Es gibt Standards, die beibehalten werden sollten. Ganz einfach, weil Nutzer einige Platzierungen bereits “gelernt” haben. So ist beispielsweise in der Regel die Schaltfläche zur Profilansicht in Anwendungen oben rechts platziert. Es würde einfach keinen Sinn machen, dieses Prinzip aus kreativer Laune heraus zu ändern, da Nutzer sonst ihr Gelerntes nicht anwenden könnten, was zu einer negativen Nutzererfahrung führt.

Netflix´ User Interface ist so simpel und effektiv wie möglich: es erlaubt das Login (oben rechts) und bietet eine Möglichkeit zur Neu-Anmeldung. Somit eine klare Entscheidungsvorlage.

Wie bereits erwähnt: Ein wirklich gutes User Interface sorgt dafür, dass User möglichst einfach Entscheidungen treffen können. Voraussetzung hierfür ist eine Beständigkeit im UI Design. Erstellen Sie ein Basis Design, das alle Elemente, Farben, Formen und Funktionalitäten abdeckt und behalten Sie dieses Design über die gesamte Anwendung hinweg konsistent bei. Das gilt auch für Prozesse und die verwendete Sprache oder Terminologie. Verwirren Sie Ihre User nicht, indem Sie innerhalb einer Anwendung verschiedene Wörter, Icons oder sonstige Gestaltungselemente für ein und die selbe Aktion verwenden. Oder plötzlich einen Flow entgegen der vorherigen Logik verändern.

Wenn Sie alle oben beschriebenen Tipps berücksichtigen, haben Sie für Ihr User Interface eine solide Basis geschaffen. Eigentlich. 
Sie sollten sich nämlich darüber im Klaren sein, dass auch das geilste stylische super flat User Interface nichts bringt, wenn die User Experience am Ende nicht stimmt. UI und UX hängen unmittelbar miteinander zusammen und müssen perfekt zusammen spielen. Wenn das technische Fundament und somit die letztendliche User Experience nicht stimmt, bringt Ihnen ein tolles User Interface nichts. Auf der anderen Seite ist es aber so, dass eine Anwendung mit optimaler User Experience durchaus auf ein abgefahrenes User Interface verzichten kann. Beispiele hierfür sind Google oder Reddit, die beide eher über ein eher unspektakuläres User Interface verfügen, aber durch ihre außergewöhliche User Experience dennoch super erfolgreich sind und weltweit genutzt werden.

So und jetzt fragen Sie sich sicher “Ja gut, wie ist das denn mit dieser UX? Wie stelle ich sicher, dass die gut ist?”. Das erläutern wir Ihnen gerne in einem anderen Blogpost! To be continued …


Ramona Peters ist Projektmanagerin bei rabbit mobile, einer Agentur für die Entwicklung digitaler Businessanwendungen mit Mobile-First-Ansatz.
rabbit mobile unterstützt seine Kunden von konzeptionell-strategischen Vorüberlegungen bis hin zur Realisierung und Pflege laufender Anwendungen, sowie deren Integration in eine bestehende Systemlandschaft.

Sie erreichen Ramona Peters hier auf Xing, hier auf LinkedIn oder:
via E-Mail: r.peters@rabbit-mobile.de
via Telefon: +49 69 256288–244