User-Interface-Design

5. Jänner 2021

Da ist die Tage Urlaub hatte, habe ich mir einen Online-Kurs zum Thema User-Interface-Design (UI-Design) angesehen und hierfür die Punkte festgehalten, die ich als relevant eingestuft habe.

Falls sich jemand dafür interessiert, hier der Link dazu: https://www.udemy.com/course/design-rules.

Mobile UI

Aufgrund der begrenzten Fläche versteht es sich von alleine, dass ein mobiles UI anders gestaltet werden muss, als das einer Desktop-Anwendungen.

Die Ansicht sollte klar strukturiert und einen spezifischen Inhalt darstellen. Da für die Navigation oft nur der Daumen verwendet wird, sollten die primären Funktionen auch mit diesem erreichbar sein.

Oft werden aufgrund des beschränkten Platzes Icons ohne Label verwendet. Dies sollte nur dann gemacht werden, wenn aus dem Icon klar hervorgeht, was der Sinn von diesem ist.

Visual Order

Beim Betrachten bspw. einer Webseite versucht unser Gehirn die Inhalte zu gruppieren und so zu erkennen, was dargestellt wird. Hier kommt der sogenannte „Negative Space“ oder auch „White Space“ zum Tragen. Dabei handelt es sich um eine leere Fläche, die gezielt eingesetzt wird, um Inhalte zu gruppieren. Beim zusammengehörigen Element sollte dieser nicht zu groß sein. Bei Elementen, die bewusst voneinander getrennt werden sollen, sollte dieser groß genug sein.

Wird der „Negative Space“ bei Elementen, die zusammengehören, zu groß gewählt, dann erkennt unser Gehirn dies nicht als Gruppe, was dazu führt, dass die Inhalte nicht als solche erkannt werden.

Borders (als Rahmenlinien) können durch den korrekten Einsatz von freier Fläche oft entfernt werden, was dazu führt, dass weniger unwichtige Elemente (auch Noise genannt) vorhanden sind und somit die Lesbarkeit verbessern.

Weiters ist es wichtig, dass eine Flucht erkennbar ist und sich die Größe der freien Fläche wiederholt. Werden Elemente kreuz und quer angeordnet, ohne dass diese einer bestimmten Logik folgen, wirkt dies unaufgeräumt und „verstörend“. Oft reichen schon ein bis zwei Pixel, dass eine Unruhe entsteht. Das Gleiche gilt, wenn die freie Fläche zwischen Elementen und Gruppen immer unterschiedlich ist und sich nicht wiederholt.

Bei der Erstellung bspw. einer Webseite sollte sich immer die Frage gestellt werden, was soll dem Benutzer beim Öffnen als erstes ins Auge springen. Das ist das „dominante“ Element oder die „dominate“ Gruppe. Dafür gibt es unterschiedliche Methoden: Größe, Kontrast, freie Fläche oder Farben.

Colors

Farben erzeugen Emotionen. Bspw. wird auf dem Smartphone eine Zahl mit rotem Hintergrund (auch Badge genannt) angezeigt, wenn neue Mails, die noch nicht gelesen wurden, vorhanden sind. Rot zieht Aufmerksamkeit auf sich und erzeugt in diesem Fall eine Art „Stress“. Wichtig ist, dass Farben für bestimmte Dinge konsequent eingesetzt werden.

Als Hintergrundfarben sollten leichte, zurückhaltende Farben verwendet werden. Helle und gesättigte Farben hingegen werden für visuelle Akzente verwendet, auf die die Aufmerksamkeit des Benutzers gezogen werden soll.

Assoziationen mit Farben:

schwarz: Autorität, stark, zeitlos, cool, Kunst & Musik
weiß: unschuldig, pur, steril, Friede
rot: alarmierend, dringend, intensiv, Geschwindigkeit, gefährlich, Liebe
pink: romantisch, Dankbarkeit, Anmut, Bewunderung, Harmonie, Mitgefühl, weiblich
blau: friedlich, ruhig, Himmel, Meer, Business, Technologie, innovativ, männlich
grün: Natur, beruhigend, erfrischend, entspannend
gelb: optimistisch, Glück, Wärme, positiv, Freude, Hoffnung
violett: königlich, Reichtum, luxuriös, Erfahrung
braun: Natur, Erde, Zuhause, Freundschaft, Reichtum, echt

Die Kombination schwarz, weiß und rot ist die kräftigste Kombination, um Gefühle zu wecken.

Zur Ermittlung einer Farbpalette für ein UI kann bspw. ein Foto verwendet werden:

Shadow: Farbe aus dem Schatten, der im Bild geworfen wird
Midtone: Farbe aus dem mittleren (hell/dunkel) Bereich
Highlight: Farbe aus dem helleren Bereich
Accent: Farbe, die im Bild heraussticht

Bei den Farben sollte darauf geachtet werden, dass diese keine zu starke Sättigung (Saturate) haben.

Neben der Farbe spielt auch der Kontrast eine wesentliche Rolle, ob etwas angenehm ist oder unangenehm bzw. leserlich oder unleserlich. Die Definition von Kontrast:

starker, ins Auge springender Gegensatz
Unterschied in der Helligkeit der hellen und dunklen Partien eines Bildes

Ist dieser bspw. bei Text zu gering, dann wirkt der Text unscharf. Wichtige Elemente sollten den größten Kontrast haben, da diese Elemente vom Benutzer als erstes wahrgenommen werden.

Beim Kampf um die Aufmerksamkeit gewinnt Kontrast immer gegen Farbe.

Typography

Gleich wie Farben erzeugt auch Typographie Emotionen. Entscheidend sind neben der verwendeten Schriftart vor allem die Größe, die Gewichtung, die verwendete Füllung sowie der freie Platz rundherum.

Es gibt ein paar Grundregeln für längere Texte, die die Lesbarkeit betreffen:

Schriftart: Unser Gehirn erkennt Buchstaben, die aussehen wie Buchstaben wesentlich einfacher. Bei vielen Schriftarten werden diese aber sehr abstrakt, wodurch wir uns mehr konzentrieren müssen diese bzw. die Wörter zu erkennen. Auch ist es bei manchen Schriftarten so, dass nicht erkennbar ist, ob es sich beim Buchstaben um eine „L“ oder ein „I“ handelt oder aus der Kombination „r“ und „n“ wird plötzlich ein „m“.
Ausrichtung: ein längerer Text (mehr als zwei Zeilen) sollte immer linksbündig sein. Dies gewährleistet, dass der Startpunkt einer Zeile immer an derselben Stelle ist.
Abstand zwischen Buchstaben: Wie bereits in „Visual Order“ erwähnt, sollten Abstände gewissen Regeln folgende. Sind diese immer unterschiedlich, wirkt dies unruhig und nicht ansprechend.
Zeilenhöhe: Zwischen Zeilen sollte immer ein Abstand sein, da dies die Lesbarkeit verbessert. Dieser sollte zumindest die Hälfte der normalen Zeilenhöhe sein. Der Abstand zwischen Absätzen sollte noch größer gewählt werden, damit die Blöcke auf den ersten Blick unterschieden werden können.
Styles: Styles wie fett und kursiv sind perfekt, um Elemente in einem Text herauszuheben. Ebenso ist es in vielen Bereichen sinnvoller, bspw. die Überschrift fett zu machen, anstatt dafür eine andere Schriftart zu verwenden.

Für das UI-Design gibt es noch weitere Regeln:

Max. 2 Schriftarten verwenden. Bei den verwendeten Schriften sollten die Buchstabenbreite sowie der Abstand der Buchstaben zueinander in etwa gleich groß sein, damit dies harmonisch wirkt. Trotzdem sollen erkennbare Unterschiede zwischen den Schriftarten existieren (z.b. Serif + Sans Serif).
Die Länge einer Zeile sollte beschränkt sein. Der allgemeine Standard besagt, dass diese nicht länger als 60 Zeichen sein pro Zeile sein soll.
Readability first – die Lesbarkeit darf nicht hinter das Design gestellt werden. Hierfür zählen die Punkte wie zuvor erwähnt.

Werden zusätzlich Bilder verwendet, dann gibt es noch ein paar zusätzliche Regeln (ja ja, ich weiß, Regeln über Regeln …):

Bilder sollen dann verwendet werden, wenn sie einem Zweck dienen. Da diese immer eine Nachricht und/oder Emotion übermitteln, sollte diese klar sein und verhindert werden, dass sie auf bestimmte Benutzer eine (oder gar die gegenteilige) übermitteln. Ebenso soll darauf geachtet werden, ob diese den Inhalt verstärken oder abschwächen und ob dies so gewünscht ist.
Bilder von Personen erzeugen mehr Emotionen und Resonanz als Bilder von Dingen oder Produkten, da wir uns in diese hineinversetzen. Verstärkt wird das Ganze, wenn sich die Personen von uns weggedreht sind und uns nicht direkt ansehen.
Ausschnitte aus einem Bild können die Bedeutung des Bildes verändern. Bspw. kann das Bild einer Person, bei der nur der Kopf sichtbar ist, eine andere Wirkung haben, als wenn die gesamte Person bzw. die Person mit Oberkörper gezeigt wird.
Illustrationen können wesentlich wirkungsvoller als Fotos sein (man denke an bestimmte Illustrationen aus den späten 30er bzw. frühen 40er des vergangenen Jahrhunderts).
Fotos von Personen sollten verwendet werden, wenn ein Bezug zu dieser Person hergestellt werden kann. Ist dies nicht möglich, sollten Illustrationen bevorzugt werden.
Bilder, die eine realistische Geschichte erzählen (narrative Bilder), sind ein tolles Element. Hingegen sollten Bilder, die nur Personen ohne jede Geschichte erzählen, vermieden werden. Diese wirken oft falsch und erzeugen keine Emotionen.
Geht es im Inhalt um ein spezielles Produkt, dann sollten Fotos und Bilder von diesem spezifischen Produkt auch gezeigt werden. Hingegen sollten keine generischen Bilder verwendet werden.
Die verwendeten Bilder sollen den Fokus auf etwas in diesem Bild lenken, damit der Benutzer auf den ersten Blick erkennt, wozu das Bild hier ist. Dafür eignen sich primär Bilder, die nur wenige sinnvolle Elemente enthalten.

Icons

Icons sparen Platz, sind gut mit Maus oder Daumen erreichbar, wenn sie eine bestimmte Minimalgröße haben (z. B. 48px) und können ein Design aufwerten. Allerdings muss bei der Verwendung unbedingt darauf geachtet werden, ob dem Benutzer die Funktion dieses Icons bekannt ist, weil dies z. B. auch bei anderen Anwendungen genau so verwendet wird. Ist dies nicht der Fall, dann ist es sinnvoller, stattdessen einen Text zu verwenden bzw. das Icon mit einem Text zu erweitern.

Eine einfache Regel besagt, dass, wenn man mehr als 15 Minuten damit verbringt ein passendes Icon zu suchen, dann ist ein Icon vermutlich nicht das richtige.

Folgende Regeln sollten bei der Erstellung und Verwendung von Icons berücksichtigt werden:

Obwohl Icons dieselbe Größe haben, wirken sie mitunter nicht gleich groß. Faktoren dafür sind bzw. die Stärke der Striche im Icon, oder aber ob es sich um ein Icon im Hoch- oder Querformat handelt. Wichtig ist, dass es für den Betrachter so aussieht, als ob sie gleich groß sind. Entsprechend muss die Größe angepasst werden, damit es für den Benutzer so wirkt.
Der Detailgrad der verwendeten Icons sollte gleich sein. Icon mit stärkeren Details ziehen die Aufmerksamkeit des Benutzers auf sich. Ausnahme, dies ist tatsächlich gewünscht.
Unnötige Details in Icons sollten vermieden werden, da dies die Icons in den meisten Fällen komplizierter zu verstehen macht.
Icon-Styles sollten nicht vermischt werden (z. B. Outline und Filled Icons). Für Outline und Filled gilt die Ausnahme, dass dies bspw. für Hover- oder Active-Status in Ordnung ist.
Das Rad nicht neu erfinden. Es gibt für sehr viele Anwendungsfälle bereits Icons, die vertraut sind. Es ist nicht sinnvoll, dafür für seinen Fall eigene zu erfinden, mit denen sich der Benutzer erst vertraut machen muss.

Matras

Die nachfolgenden Mantras bzw. Zusammenfassung habe ich in Englisch belassen (u.a. auch weil ich zu faul für die korrekte Übersetzung war 😉). Dafür habe ich eine kurze Erklärung in Deutsch dazugeschrieben, um den Gedanken dazu etwas klarer zu machen.

design is design is design: Es geht um Design, nicht um dekorieren. Design soll den Benutzer unterstützen und führen, nicht ihn verwirren.
stop solving others people’s problems: Das Design ist für eine bestimmte Anwendung innerhalb eines spezifischen Kontextes und soll dort unterstützen.
form doesn’t (and should not) follow function: Funktionalität sollte nicht diktieren, wie etwas auszusehen hat. Stattdessen sollte der Kontext, in dem etwas verwendet wird, diktieren, wie etwas zu funktionieren hat.
every force evolves form: Die Anforderung gibt vor, wie etwas zu funktionieren und auszusehen hat, nicht die Funktionalität dahinter.
on small screens, less is more: Wenn ich von einem Haus mit 200m2 in eine Wohnung mit 50m2 ziehe, kann ich nicht alles mitnehmen. Das Gleiche gilt hier. Die Inhalte müssen reduziert und ggf. verteilt werden.
balance creates visual order and signals relationships: Die Anordnung von Elementen auf dem Bildschirm soll darauf ausgelegt sein, dass der Benutzer Gruppen einfach erkennt und zwischen diesen wechseln kann (also visuell). Genauso wird dadurch die Zusammengehörigkeit erkennbar sein.
visual rhythm speeds comprehension and use: Dinge, die sich wiederholen (einem gewissen Rhythmus folgen), erleichtern und beschleunigen das Verständnis.
good design is held together by harmony: Die UI sollte harmonisch sein und die Elemente sollten miteinander arbeiten, anstatt gegeneinander.
dominance directs user focus: Sind die dominanten Elemente auf dem Bildschirm tatsächlich auch die, auf die der Fokus des Benutzers gesetzt werden soll?
align everything with everything else: Die Anordnung von Elementen soll zur Anordnung von anderen Elementen passen und sich auch ggf. diesen unterordnen, um ein einheitliches Gesamtbild zu erreichen, bei dem der Fokus auf die richtigen Elemente gesetzt wird.
group and organize related content with proximity: Elemente, die zusammengehören, werden durch die Nähe zueinander gruppiert (nicht durch Rahmenlinien 😉). „Negative Space“ ist eines der wichtigsten Design-Elemente im UI-Design.
use colors to communicate and influence interaction: Farben sollten nicht aufgrund persönlicher Meinungen oder weil sie cool sind verwendet werden, sondern um die Aufmerksamkeit eines Benutzers entsprechend zu lenken und ihn zum Durchführen von Aktionen zu bewegen.
choose color based on associations, emotions and brand: Farben sollten nicht wahllos gewählt werden, sondern sich auf etwas beziehen wie bspw. Emotionen, die hervorgerufen werden sollen.
contrast always wins: Den Kampf zwischen Farben und Kontrast gewinnt immer der Kontrast.
typography should always purposefully designed: Lesbarkeit, Mustererkennung und Stimmung, die übertragen werden soll, sollen die Schrift bestimmen. Bspw. macht eine Halloween-Schriftart im Business-Bereich keinen Sinn, da damit falsche Stimmungen ausgelöst werden.
icons must be recognizable and memorable: Der Sinn der verwendeten Icons sollte dem Benutzer bekannt sein.
context of use dictates visual form: Was soll mit der Präsentation der Daten übermittelt werden? Was sind die wichtigsten Indikatoren, auf die beim Betrachten der Fokus gelegt werden soll?
simpler is better: Getreu dem Deutschen Sprichwort: „Weniger ist mehr“.
work to separate content from controls: Für den Benutzer soll klar hervorgehen, was reiner Inhalt ist und mit was er Aktionen auslösen kann (z. B. ein Hyperlink).