User Interface Design: Eine kurze Einführung in vier Schritten

Ein gutes User Interface (UI) Design lässt keine Fragen offen. Es nimmt den Nutzer an die Hand und führt ihn durch eine fremde Welt. Von der Headline bis zum Call-to-Action-Button (CTA) lässt es ihn sich wie selbstverständlich durch ungewohntes Terrain bewegen. Nutzer und Design werden eins im intuitiven Verhalten. Ohne Anstrengung gelingt es dem Nutzer, seine Ziele zu verfolgen.

Die Basis schafft hierbei ein Grundverständnis über den Nutzer, über seine Bedürfnisse, seine Wünsche und Probleme. Ist er alt oder jung? Welchem Job geht er nach? Hat er Familie? Nicht die neusten Design-Trends oder Vorgehensweisen der Konkurrenz sind richtungsweisend, sondern immer und an erster Stelle: Was will der Nutzer? Welche Anwendungen nutzt er gerne und wie nutzt er sie? Von diesem Nutzerkosmos abgeleitet, für diesen „Idealnutzer“, werden die Elemente eines Interfaces designt.

So einfach wie möglich, so viel wie nötig

Doch auf was ist im UI Design zu achten, um dem Nutzer ein möglichst zufriedenstellendes Erlebnis zu bereiten? Das Interface ist die Schnittstelle zwischen Mensch und Maschine. Es beschreibt all das, was der Nutzer beim Gebrauch einer Anwendung auf sensorischer Ebene sieht, hört, fühlt und bedient. Sie bestimmt die Art und Weise, wie eine Interaktion ablaufen kann.

Im Folgenden sind die wesentlichen visuellen Komponenten eines Interfaces in ihre Bestandteile und Funktionen aufgegliedert. Ihnen allen liegt zu Grunde: Vermeide unnötige und komplizierte Elemente und nutze bekannte Bausteine. Niemandem ist geraten, das Rad neu zu erfinden. Der Nutzer wird sich wohler fühlen und schneller seine Aufgaben erledigen können.

Farbe

Eine Welt ohne Farben – keiner mag sich das vorstellen. Farben sind essentiell, um uns Menschen zu leiten. Sie geben Richtungen an, Gefühlswelten und sprechen sogar Warnungen aus. Jede Farbe hat durch verschiedene lokale oder weltgeschichtliche Entwicklungen eine ganz eigene Bedeutung erhalten. So galt bis vor wenigen hundert Jahren noch rosa als männliche Farbe, hellblau hingegen als weiblich. Durch geschicktes Marketing verdrehte sich diese Konnotation. Farbbedeutungen sind also nicht unbedingt unumstößlich festgeschrieben. Der Mensch ist der Schöpfer dieser Bedeutungen. Auch die Natur hat sich bestimmte Farben wie beispielsweise Rot und Gelb als Signalfarben zu Nutzen gemacht, um vor giftigen oder gefährlichen Lebewesen und Pflanzen zu warnen. Mehr zum Thema Farben und ihrer Bedeutung beschreibt besonders anschaulich und auch unterhaltsam folgendes Buch: „Wie Farben wirken“ von Eva Heller.  

Im UI Design werden Farben genutzt, um klare, visuelle Unterscheidungen zu treffen. Die Farbauswahl wird zu einem großen Teil entscheiden, welche Gefühle der Nutzer mit der Anwendung verbindet und ob er sie leicht bedienen kann. Dabei ist es wichtig, vor allem auf kontrastreiche, nicht zu sehr gesättigte Farben zu setzen. Das hilft nicht nur bei einer schnellen Erfassung des Interfaces, sondern unterstützt zusätzlich Farbenblinde, die geringere Helligkeitsstufen nur schwer unterscheiden können. Farben leiten den Blick.

Eine Farbe, die Signalfarbe, sollte im Interface sehr reduziert eingesetzt werden. Sie lenkt die Aufmerksamkeit des Betrachters sofort auf den wichtigsten Bereich der Anwendung. Das sind oft Buttons oder andere Felder, in denen essentielle Interaktionen stattfinden. Wird diese Farbe selten, am besten nur einmal innerhalb eines Screens, eingesetzt, verstärkt sich diese Wirkung und verleitet den Nutzer nahezu automatisch zum Klicken. Hier bestätigt sich: Wer am lautesten schreit, schreit am besten.

Form

Wir sind umgeben von Formen. Das Leben materialisiert sich in Form. Sowohl in der Natur als auch in der Stadt sind sie zu finden: scharfe, kantige Steine, runde und zarte Blütenblätter, weiche, bauchige Kissen, geometrische Häuser. Der Mensch neigt dazu, seine über Generationen hinweg gesammelten Erfahrungen von Form in Verbindung mit Materialität auf weitere Objekte zu übertragen. Ein spitzer, aber weicher Stachel etwa könnte zu Verwirrung führen.

Formen werden also automatisch Eigenschaften wie rund = weich, freundlich, verspielt und eckig = kalt, hart, seriös zugeschrieben. Bei einem Experiment bekam dieser Effekt einen Namen: der Bouba-Kiki-Effekt. Hierbei ordneten 95% der Tester den Namen „Kiki“ einem kantigen Objekt zu, „Bouba“ hingegen einem abgerundeten (Mehr dazu hier).

Wer also zum Beispiel Boxen und Buttons designt, sollte sich dieser Neigung bewusst sein. Entsprechend der gewünschten Message müssen auch die Elemente eines UI eine passende Form aufweisen. Eine Website für einen Anwalt benötigt beispielsweise sehr viel mehr Struktur und Geometrie als ein Webshop für Kinderbekleidung. Dabei sollte auf eine gewisse Beständigkeit geachtet werden.

Die Elemente sollen sich ähneln, die gleichen Rundungen aufweisen, nicht zu viele unterschiedliche Elementcharakteristika vermischt werden. Wer Patterns, wiederkehrende Muster, im UI nutzt, ermöglicht es dem Nutzer, Gelerntes zu transferieren, spart ihm Zeit und steigert so die Effizienz einer Anwendung. Diese Harmonie ermöglicht es dem Nutzer, sich mühelos zurecht zu finden und nicht von Unstimmigkeiten in seinem Prozess abgelenkt zu werden.

Auch kann es ausschlaggebend sein, ob Objekte als Outlines oder Farbflächen dargestellt werden. Eine Fläche zieht grundsätzlich mehr Aufmerksamkeit auf sich als eine Outline. Das Zusammenspiel von Objekten mit Outlines und solchen mit Fläche kann zu einer Abstufung der Relevanz verschiedener Objekte führen. Das ist besonders dann hilfreich, wenn mehrere Buttons zur Auswahl stehen.

Schrift

Sprache ist und bleibt die direkteste Art, einen Gedanken zu kommunizieren. Kein Wunder, dass Typografie deshalb eine essentielle Rolle im UI Design spielt. Den Text zu optimieren wird die User Experience erheblich verbessern. Bei der Auswahl einer Schriftart sollte möglichst auf bekannte Systemschriften zurückgegriffen werden, die in verschiedenen Schnitten und Größen gut funktionieren.

Um den Informationen eine Hierarchie zu geben, sind für unterschiedliche Zwecke bestimmte Schriftgrößen festzulegen. Richtwerte sind hierbei 14 bis 16 Punkt für den Bodytext, circa 20 Punkt für Headlines und 34 bis 42 Punkt für den Header, wobei hier die Regel gilt: je größer der Screen, desto größer die Schrift. Festgesetzte Schriftgrößen helfen zusammen mit verschiedenen Schriftfarben und -arten, Schwerpunkte zu setzen und die Scan- und Lesbarkeit deutlich zu verbessern.

Mit unterschiedlichen Kulturen kommt die Verantwortung, deren spezifische Bedürfnisse zu erfüllen. Das heißt, dass im westlichen Raum der Text größtenteils links ausgerichtet wird, in einer anderen Kultur wiederum rechts. Mittige Ausrichtung ist meist sehr kurzen Passagen, wie Zitaten, vorbehalten, da hier bei längeren Abschnitten die Lesbarkeit enorm leiden würde. Auch der Zeilenabstand trägt seinen Teil dazu bei, ein gutes Leseerlebnis zu bereiten. Hierbei wird – variierend je nach Bildschirmgröße - bei einer Zeichenläge von nicht mehr als 80 Zeichen zu einem Abstand von 140% bis 180% der Schriftgröße geraten.

Das und genügend weißer Raum zwischen verschiedenen Textabschnitten wie Headline und Bodytext sorgen gemeinsam dafür, das Auge zu entlasten. Sehr wirksam ist auch, die Schrift des Bodytextes in einem dunklen Grau statt in einem hundertprozentigen Schwarz darzustellen. Der hohe Kontrast von schwarzem Text auf dem Bildschirm lässt das Auge schnell müde werden. Beim Zeichenabstand gilt die Maxime: größere Schrift = weniger Abstand, kleinere Schrift = mehr Abstand.

Last but not least: Verwende klare Sprache. Wer eindeutig deklariert und die Dinge beim Namen nennt, wird auf mehr Verständnis beim Nutzer stoßen.

Layout

Ganz klar, wir lesen spätestens seit den Römern von links nach rechts, von oben nach unten. Aber: Andere Länder, andere Sitten. Schauen wir in den fernen Osten, ändert sich etwa im Arabischen und Hebräischen die Leserichtung von rechts nach links. Deshalb: Augen auf bei der Layoutwahl. Ein Layout ist nicht dann ein gutes Layout, wenn es schön aussieht, sondern wenn es gut verständlich durch Informationen führt – und zwar den, für den diese Informationen gemacht sind, gemessen an seinen Fähigkeiten und seinem kulturellen Hintergrund.

Für einen westlichen Nutzer gilt hierbei beispielsweise das Gutenberg-Prinzip: die gewohnte Leserichtung erstreckt sich von links oben nach rechts unten in einem Zick-Zack-Weg. Dementsprechend sollten die wichtigsten Informationen an genau diesen Punkten platziert werden. So findet der Nutzer schnell, was er sucht und nimmt die wichtigsten Informationen in kurzer Zeit auf.

Ein Layout bietet die Möglichkeit, durch Positionierung nach Wichtigkeit zu strukturieren. Dabei helfen können auch freie Flächen, die den Fokus lenken. Niemals sollten die einzelnen Elemente zu nah aneinander platziert werden. Mehr Platz entspannt das Auge, rückt wichtige Bereiche in den Vordergrund und verhindert das ungewollte Klicken von Elementen, die zu nah platziert wurden.

Um ein Layout noch übersichtlicher und schneller verständlich zu machen, eignen sich Icons und Illustrationen, aber auch Bilder hervorragend. Sie können, richtig eingesetzt, wichtige Informationen besonders schnell vermitteln, indem sie eine Aussage auf ihren Kern reduzieren.

Mit regelmäßigem Testing zum Erfolg

Trotz allem gibt es kein Rezept für das perfekte UI Design. Es wird immer Nutzer geben, die mit dem einen oder anderen Element nicht zurechtkommen. Menschen machen Fehler. Solches unvorhergesehenes Verhalten sollte im Design eingeplant sein. Gib dem Nutzer Möglichkeiten, Aktionen rückgängig zu machen, gib ihm genaues Feedback, das den Grund eines Fehlers beschreibt. Und vor allem: Teste oft und regelmäßig. Was es zum Thema Usability Testing zu beachten gilt, erfährst du in einem der nächsten Artikel.