3 typografische Fauxpas im App-Design.

von Melinda Albert am 27.August 2014 in Mobile Design

Im Vorfeld unseres Seminars „Mobile Usability für Produktmanager“ am 18. September 2014 in Berlin gibt unsere Expertin Melinda Albert einige Tipps zum App-Design – diesmal geht es um die Typografie.

Neben Flat Design ist der gekonnte Einsatz typografischer Merkmale das Trend-Thema in Sachen App-Design 2014. Als Teil der User Experience beginnt eine eingängige Typografie bei guter Lesbarkeit und gipfelt in einer harmonischen Kombination bewährter und neuer Schriftarten. Drei Fauxpas zeigen dabei auf, dass der typografische Teufel im Detail sitzt.

Fauxpas Nr.1 – Schriftarten und deren Größen

Schriftarten im App-Design

Als serifenlose, klare Standard-Schriftart für Android und iOS haben sich Roboto beziehungsweise Helvetica Neue über Jahre hinweg bewährt. Die gleichmäßige Strichstärke und eine leicht erhöhte Laufweite sind grundsolide Pfeiler, auf die du die Typografie deiner App problemlos aufbauen kannst. Hervorragende Ergebnisse versprechen diese Standards bei hohen Bildschirmauflösungen, da der Mangel an Feinheiten, wie etwa Serifen, zu einem sauberen Gesamtbild führt.

Standardschriften in iOS und Android

Experimentierfreudigen Naturen, die ihre App abseits typografischer Standards etablieren möchten, finden sich in einer vielfältigen Landschaft aus Schrifttypen wieder. Einerseits bieten sich hier fantastische Möglichkeiten, um eine App – parallel zum Einsatz von Bildern, Icons und Farben – von Konkurrenten abzugrenzen. Andererseits ist kritisches Hinterfragen angebracht:

  • Ist eine gute Lesbarkeit auf verschiedenen Screen-Größen gewährleistet?
  • Eignet sich die Schriftart für den gesamten Body-Text?
  • Garantiert die Schriftstärke eine gute Lesbarkeit auf mobilen Endgeräten?

Skepsis ist angebracht, wenn du Gefallen an Serifen und Handschriften findest oder altdeutsche Buchstaben als Ausdruck eines besonders kreativen Tatendrangs verspürst.

Schrift mit und ohne Serifen

Hast du eine engere Auswahl an Kandidaten beisammen, überprüfe, ob sich die gewählten Schriften in verschiedenen Größen darstellen lassen, um typografische Hierarchien schaffen zu können. Hierbei beschränkst du dich bestenfalls auf drei Font-Größen und einen Mittelwert von 14-16 pt. Kleiner als 11-12 pt sollten Texte nicht abgebildet werden.

Fauxpas Nr.2 – Schriftmischung & Auszeichnungen

Mischung von Schriftarten im App-Design

Wie so oft im Leben: Die Mischung macht’s! Drei einfache Grundregeln helfen Typo-Alchemisten bei der Zusammenstellung unterschiedlicher Schriften:

  1. Meist sind zwei bis drei Schriftarten in einer App vollkommen ausreichend, um Akzente zu setzen
  2. Schriftarten mit ähnlicher Struktur, sprich gleicher Mittellänge, Kerning oder Stärke, eignen sich besonders gut für typografische Kombinationen
  3. Unterschiedliche Kontraste sind – dezent gewählt – ein wunderbares Stilmittel, um unterschiedliche Schriftarten harmonisieren zu lassen. Denkbare Mischungen wären:
    • große vs. kleine Schrift
    • dicke vs. dünne Schrift
    • helle vs. dunkle Schrift
    • Blackletter vs. Monospace

5_Typografie Google Fonts Pairing-Tool

Übrigens: Googles „Fonts Pairing-Tool“ ist dein bester Freund bei typografischer Entscheidungsfindung!

Um Kontrasten nicht entgegen zu wirken und über das Ziel hinaus zu schießen, sollte auf den beherzten Einsatz optischer Auszeichnung verzichtet werden. Eine Unterstreichung hier, ein Farbverlauf da, ein paar Schatten und das Ganze am besten kursiv und blinkend – Voilà, so funktioniert moderne Kunst. Besser sind dezente Auszeichnungen, die sich durch halbfette/ fette Schnitte oder eine (einzige) andere Farbe hervorheben.

Fauxpas Nr.3 – Textwalls

Typografie und Textlänge im App-Design

Einen Roman in der Hand erwartet der Leser nichts anderes als haufenweise Lesestoff. App-User dagegen erwarten eine smarte, fast multimediale Präsentation des geschriebenen Wortes. Entsprechend „locker“ solltest du Texte in deiner App gestalten. Textwalls sind Usern ein Graus und nur durch knackigen Ausdruck und eine klare Strukturierung lassen sich Inhalte „scannen“ und Wichtiges letztendlich filtern.

Das A und O bei längeren Textpassagen sind – ganz banal – Absätze. Überschriften nutzt du als Wiedereinstiegs-Chance für Aussteiger und mit Anchors unterstützt du User bei der Suche nach für sie relevanten Textpassagen.

Abschließend findest du eine paar hervorragende iOS- und Android-Beispiele, die die Wirksamkeit einer durchdachten Typografie unterstreichen.

Typografie-Beispiele in iOS-Apps

Typografie Beispiele iOS

Skype, Airbnb, Eights

Typografie-Beispiele in Android-Apps

Typografie Beispiele Android

GooglePlus, HotelTonight, Timely


 

App-Design-Seminar-Melinda-Albert“3 typografische Fauxpas im App-Design” ist ein Gastbeitrag von Melinda Albert – Mobile Design Berlin (Autor) und Christian Bösel – Wort, Web & Bild (Redaktion).

Unsere Expertin Melinda Albert verrät am 18. September 2014 in Berlin im mobilbranche.de-Seminar „Mobile Usability für Produktmanager“ Tricks und Kniffe bei der App-Konzeption und bietet den Teilnehmern konkrete Verbesserungsvorschläge für ihre eigenen Apps. Melden Sie sich jetzt an – es sind nur noch wenige Plätze frei!

Literatur


Artikel teilen

Sichern Sie sich jetzt Ihren Wissensvorsprung in Mobile Marketing und Mobile Business und abonnieren Sie die Meldungen von mobilbranche.de ganz bequem per E-Mail. Unser Newsletter erscheint täglich um 13 Uhr und ist kostenlos.

Hiermit akzeptiere ich die Datenschutzbestimmungen.

Facebook Kommentare:

Kommentare