UI-Design ist ein Dauerbrenner-Thema, bei dem jeder gerne ein Wörtchen mitzureden hat. Daneben gibt es dann noch Trends, die jedes Jahr in der ein oder anderen Form durch die Design Community purzeln. Seien es Farbverläufe, isometrische Illustrationen oder eine ganz bestimmte Schriftart.
Wir machen noch einen Schritt weiter zurück, hinter die Trends, die nur eine kurze Halbwertszeit haben und liefern drei Tipps, die jedes UI-Layout übersichtlicher und schneller verständlich machen. Diese Tipps sind trend- und zeitunabhängig, auf jede Art von Screen anwendbar und ihren Einsatz wird sowohl der Developer, als auch der Stakeholder und am wichtigsten natürlich der User dankend annehmen.
#01 Linksbündige Texte
Als erstes widmen wir uns dem Text: Für Fließtexte gibt es, wenn es nicht einen wirklich triftigen Grund für eine Ausnahme gibt, eine unumstrittene Empfehlung:
Texte sollten linksbündig sein.
Da wir in der westlichen Welt von links nach rechts lesen, machen wir immer am Ende einer Zeile mit den Augen immer wieder einen Sprung nach links. Der linksbündige Text hat hier den Vorteil, dass dieser Sprung immer an der gleichen Stelle landet, nämlich an der Achse, an der der Text ausgerichtet ist. So wird die Leseleichtigkeit und auch die Lesegeschwindigkeit deutlich erhöht.
Übrigens, der Blocksatz sollte in der digitalen Welt nur bei Texten mit einer langen Zeilenlänge genutzt werden. Auf Mobilgeräten zum Beispiel entstehen sonst unregelmäßige Zwischenräume, die das Auge ins Stolpern bringen.
#02 Visuelle Achsen
Visuelle Achsen werden meist nach dem Erstellen der Wireframes und vor dem Screendesign in einer UI-Design Software wie Adobe XD oder Figma eingerichtet.
Anhand von diesen Achsen werden nun die Elemente des User-Interfaces, wie Buttons, Text, oder Bilder ausgerichtet. Dieser Schritt sorgt nicht nur dafür, dass der User die Elemente schneller und intuitiver findet, er bewirkt auch, dass die Elemente an ihrem Platz „ruhen“ können. Dieser Schritt wirkt sich also nicht nur auf die reine Usability aus, sondern sorgt auch für einen hochwertigeren und geordneteren ersten Eindruck vom Interface.
#03 Die 60/30/10-Regel
Was Farben angeht, hat das Internet schon so einige Phasen durchgemacht. Während das Web in den 90ern und frühen 2000ern farblich gesehen seine Pubertät durchlebt hat (das kann man zum, Beispiel hier sehen), scheint es jetzt etwas erwachsener geworden zu sein. Mit dazu beigetragen hat die Nutzung der 60/30/10-Regel.
Die 60/30/10 Regel besagt, dass drei verschiedenen Farben vorgegeben sind, aus denen sich alle weiteren Schattierungen ableiten.
Das ist zum einen die meist neutrale Basisfarbe, die etwa 60% des Layouts ausmacht. Häufig verwendete Farben sind hier beispielsweise Schwarz, Weiß, Creme-Weiß, Anthrazit oder Navy-Blau.
Die dazu komplementäre Kontrastfarbe(30%) sorgt dafür, dass sich alle Texte gut lesen lassen und sich vom Hintergrund abheben.
Die Detailfarbe, die nur etwa 10% des Interfaces ausmacht, kennzeichnet Calls-To-Action und wichtige Informationen. Sie darf auch etwas auffälliger sein.
In erster Linie ist diese Regel dazu da, den Content des Interfaces zu gliedern und die Farben allgemein etwas zu reduzieren, sodass knallige Farben nur dann genutzt werden, wenn sie etwas wirklich Wichtiges kennzeichnen und den Blick des Nutzers auf ein gewisses Element leiten sollen.
Welche Regeln im UI-Design haben wir vergessen? Und auf welche könnte man auch mal verzichten? Und gibt es vielleicht sogar Trends, die in Zukunft zu einer Regel werden sollten?
Schreiben Sie uns gerne einen Kommentar, und wir tauschen uns aus!
