Juni 2017
Iconfonts im UX-Design – Teil 1: Wie passgenaue Iconfonts die tägliche Design-Arbeit erleichtern
Eigens eingerichtete Iconfonts können eine hilfreiche Stütze bei der UX-Design-Entwicklung sein.
Aber auch im Endprodukt, der tatsächlichen Webseite oder der App, lassen sich Iconfonts gewinnbringend einsetzen.
Wir zeigen die Vorteile, die ein passgenauer Iconfont bietet.
Von Markus Remscheid
Die Bedeutung von Icons im Web:
Im Interface-Design spielen Icons eine wichtige Rolle. Sie sorgen für schnelle Orientierung, verbessern die User Experience, lockern Inhalte auf und wirken auf emotionaler Ebene.
Icons sind meist nicht selbsterklärend und werden deshalb oftmals gemeinsam mit einem Textlabel kombiniert. Bei der täglichen Layoutarbeit steht der Designer so vor der Herausforderung, die jeweiligen Icons passgenau mit den zugehörigen Textlabels kombinieren zu müssen.
Mit Icons layouten:
Meist liegen die Icons als vektorbasierte Grafik vor. Diese lassen sich in den gängigen Layoutprogrammen wie Adobe Photoshop oder Illustrator nur durch manuelle Positionierung passgenau mit Textlabels kombinieren.
Ändert sich das Layout, z.B. die Länge oder Größe der Texte, dann muss bei der Iconplatzierung manuell nachkorrigiert werden. Der Aufbau eines konsistenten Designs, bei dem alle Icons die gleichen Abstände und Proportionen zum umliegenden Text aufweisen, lässt sich so schwer umsetzen.
Sketch, ein Programm das speziell auf die Bedürfnisse von UX Designern abgestimmt ist, bietet hier Vorteile. Es lässt sich zumindest eine Teilautomatisierung bei der Ausrichtung von Grafiken und Text erreichen. Allerdings ist diese aufwendig einzurichten und Plugins von Drittanbietern sind notwendig. Eine ideale Lösung gibt es hier also auch noch nicht.
Die Vorteile eines passgenauen Iconfonts:
Liegen die Icons als Iconfont vor, können Textlabel und Icon in einem gemeinsamen Textrahmen platziert werden. Wichtig dabei: bei der Erstellung des Iconfonts muss darauf geachtet werden, das Metrik und Dimensionen des Iconfonts exakt denen der verwendeten Schrift in den Schriftlabels entspricht.
So können Textlabel und Icon einfach in der gleichen Schriftgröße eingesetzt werden und die beiden Elemente stehen immer perfekt zueinander.
Änderungen an Schriftgröße und Textlänge, die sich während des Layout-Prozesses ergeben, stellen so kein Problem mehr da. Die Icons machen automatisch alle Änderungen mit, eine manuelle Nachkorrektur entfällt.
Gerade bei großen Webseiten bedeutet dies eine enorme Zeitersparnis, da hier häufig viele Icons zum Einsatz kommen. Sei es z.B. innerhalb von Buttons, Textlinks oder Service-Icons.
Iconfonts im Web – die Vorteile:
Beim Einsatz eines passgenau konfigurierten Iconfonts im Web sehen wir den großen Vorteil, dass die frontendseitige Platzierung von Icons sehr einfach wird. Iconfont und zugehöriger Text verwenden die selbe Schriftgröße und ein manuelles Einstellen von Abständen und Größen über CSS entfällt. Die Designer können zudem sicher sein, dass es zu keinen Passungenauigkeiten bei der Frontendumsetzung kommen wird.
Auch eröffnen sich durch diese Einbindungsmethode neue gestalterische Möglichkeiten: so können z.B. Icons direkt innerhalb von redaktionellen Texten verwendet werden. So ist denkbar, dass Redakteure direkt über ihr bekanntes Redaktionssystem Icons in den Fließtext einbinden – ein zusätzlicher Programmieraufwand entfällt.
Die große Frage: Iconfont oder SVG-Icons:
Der Einsatz von Iconschriften im Web bringt leider ein paar Tücken mit sich.
So gilt abzuwägen, ob die Einbindung per SVG eventuell nicht sogar die bessere Wahl ist.
Ein Nachteil eines Iconfonts besteht z.B. darin, dass es sich hier letztendlich um einen Zeichensatz handelt, der von Suchmaschinen und Textreadern entsprechend interpretiert wird. Dass Suchmaschinen auf unverständliche Einzelbuchstaben stoßen kann allerdings durch eine spezielle HTML/CSS-Einbindung zuverlässig verhindert werden.
Zudem sollte bei der Iconfont-Erstellung darauf geachtet werden, die Icons in die „Private Use Area“ des Unicode-Zeichenraums einzufügen. Dies bringt allerdings den Nachteil mit sich, dass sich Icons nicht mehr so einfach über die Tastatur eingeben lassen. Stattdessen werden die Icons über Unicode-Nummern eingesetzt.
Wer tiefer in die Thematik einsteigen möchte, der findet im Netz zahlreiche Artikel, die die Vor- und Nachteile des jeweiligen Formates beleuchten, z.B. führt Ian Feather in seinem empfehlenswerten Blogbeitrag zehn Gründe auf, warum lonelyplanet.com von einem Iconfont zu SVG-Icons wechselte.
Fazit:
In der täglichen Design-Arbeit erleichtert ein eigens eingerichteter Iconfont den Layoutprozess und kann, gerade bei der Arbeit an großen Webseiten, viel Zeit sparen. Allein für Layoutzwecke lohnt sich so oftmals der Produktionsaufwand für solch einen Font.
Die Frage, ob der Iconfont auch im Web zum Einsatz kommen soll oder besser SVG-Icons verwendet werden, ist schwieriger zu beantworten. Hier müssen im jeweiligen Einzelfall die Vorteile eines jeden Formates abgewägt werden.
Als allgemeine Hilfestellung empfehlen wir einen Iconfont einzusetzen, wenn …
- der IE8 unterstützt werden soll, da das SVG-Format nur von IE9+ unterstützt wird
- die automatische und passgenaue Einbindung der Icons in den umgebenden Text eine Rolle spielt
Ansonsten raten wir eher zur SVG-Einbindung, da dieses Format u.a. Vorteile im Hinblick auf Mehrfarbigkeit, Animation, Barrierefreiheit und semantisch einwandfreien Code bietet.
Ausblick:
Im Teil 2 dieses Blogbeitrags zeigen wir, wie sich ein passgenauer Iconfont mit Hilfe von Adobe Illustrator und dem Fonteditor Glyphs erstellen lässt.
Markus Remscheid, Designer und Gründer der H2D2 GmbH, setzt in Projekten sehr gerne eigens erstellte Schriften und Iconfonts ein, um sich so von Mitbewerbern abzuheben oder den Workflow zu verbessern. Am besten sogar beides.