Typografie im User Interface – mit diesen 4 Tipps sorgt man für eine bessere User Experience
Kommentare

Egal, was man designt – sei es Websites, mobile Apps oder Wearables – das User Interface spielt für die spätere User Experience eine wichtige Rolle. Es soll zum Beispiel dafür dienen, die Absicht hinter einer Website oder App an den User zu kommunizieren, und das erfolgt meist mithilfe von Text.

Typografie ist damit nur ein Faktor, mit dem sich Webdesigner beschäftigen müssen, um ihr UI bestmöglich zu optimieren. Chris Bowler stellt vier Tipps vor, mit denen sich genau das umsetzen lässt.

4 Tipps für die richtige Typografie-Auswahl

User Interfaces sind nicht das einzige, was mit einem Fokus auf die verwendete Schriftart designt wird, allerdings gibt es einige Unterschiede zwischen dem UI-Design und dem Design eines E-Books oder Blog-Themes. Die richtige Typografie soll vor allem zur Optimierung der Lesbarkeit, Accessibility und Usability dienen. Dazu erklärt Chris Bowler:

on-screen communication happens through words, and type is the UI of language.

Gleichzeitig beinhaltet das User Interface verschiedene Entscheidungsmöglichkeiten für den User, zum Beispiel, wie er die Seite navigiert oder ob einen Einkauf tätigt. Eine gute Typografie sollte darum den User auf den Content – zum Beispiel einen Call-to-Action-Button – aufmerksam machen, anstatt dafür zu sorgen, dass sich der User nur noch auf die gewählte Schriftart konzentriert.

Um das zu verhindern, stellt Bowler die folgenden vier Tipps vor:

1. Schriftarten wählen, die in verschiedenen Größen funktionieren

Kaum ein User Interface dürfte alle Elemente in der gleichen Größe präsentieren. Darum ist es wichtig, für die Typografie der verschiedenen Text-Elemente wie zum Beispiel Section-Headers oder Feldlabels, Schriftarten auszuwählen, die in verschiedenen Größen funktionieren, ohne ihre Lesbarkeit und Usability einzubüßen.

2. Schriften mit leicht unterscheidbaren Buchstabenformen wählen

Lesbarkeit ist überhaupt ein gutes Stichwort für die Wahl der Schriften für eine Website. Viele Schriftarten haben nämlich das Problem, das einige Buchstaben sich sehr ähnlich sehen. Auffällig ist das vor allem bei großen „I“s und kleinen „l“s, aber auch „r“ und „n“ können, wenn sie aufeinanderfolgen, wie ein „m“ aussehen und so den Leser irritieren. Darum sollte möglichst eine Schriftart gewählt werden, die über deutlich unterscheidbare Buchstabenformen verfügt.

3. Text wie UI behandeln

Der Text einer Website ist meist stellvertretend für ein funktionales Element – und damit ist der Text das User Interface. All das, was auf den Best-Practice-Listen für gutes UI-Design steht, gilt auch für die Auswahl der Schrift. Webdesigner müssen darum lernen, nicht zwischen Text und UI als zwei eigenständige Einheiten zu unterscheiden und Text wie UI zu behandeln. Denn, so meint Cameron Moll:

good designers treat text as content, the great ones treat text as UI

4. Verschiedene Schriftarten erfüllen unterschiedliche Aufgaben

Beim Erstellen des User Interfaces sollte man sich die Frage stellen, bei welchen Problemen dem User damit geholfen werden soll. Je nachdem, wie die Antwort ausfällt, sollten sich die UI-Design-Entscheidungen – inklusive der gewählten Schrift – daran orientieren. Dabei sollte man im Hinterkopf behalten, dass unterschiedliche Schriften unterschiedliche Aufgaben erfüllen und gleichzeitig den Unterschied zwischen UI-Elementen und dem eigentlichen Content deutlich machen können.

Positivbeispiele für gut umgesetzte Typografie

Schaut man sich im Web um, findet man viele Beispiele, wie man sein UI richtig mit der passenden Typografie versieht – und mindestens ebenso viele Beispiele, bei denen das eher nicht so gelungen ist. Zu den Positivbeispielen, die Chris Bowler nennt, zählen zum Beispiel die Schreibplattform Medium, die Kommunikationsplattform Slack und die Musik-App Rdio, die trotz unterschiedlichen Aufgaben eins gemeinsam haben: sie behandeln die Typografie als Teil ihres User Interface.

Es gilt also: Schriften spielen eine essentielle Rolle in der Gestaltung des User Interfaces – egal, um welche Art Projekt es sich handelt. Eine gut durchdachte Typografie hilft dem User bei der Nutzung der Seite, während eine schlecht implementierte ihn deutlich beeinträchtigen kann. Beachtet man aber die hier genannten einfachen Tipps, sollte bei der Auswahl der richtigen Schriften kaum noch was schiefgehen dürfen.

Aufmacherbild: Letterpress type characters of letter – Typography von Shutterstock / Urheberrecht: nacroba

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -