Blog

Auflösungsunabhängiges Icon Design – Teil 1: Einführung in das Thema Auflösungsunabhängigkeit

Thomas Immich
Thomas Immich
29. August 2008

Vor ca. zwei Jahren bereits gab es eine lebhafte Diskussion zum Thema auflösungsunabhängige User Interfaces im Kontext von Icon Design. Ein interessanter Ausgangspunkt dieser vergangenen Diskussion ist Sven Porsts Blog Artikel. Zum damaligen Zeitpunkt waren auflösungsunabhängige Systeme und Technologien, wie Mac OS X Leopard, Windows Vista oder Silverlight entweder noch Zukunftsmusik oder wurden nur von einer kleinen Gruppe von Insidern genutzt. Heute, fast zwei Jahre später, sind dies etablierte Marken – Grund genug, das Thema erneut zu beleuchten und zu sehen, ob sich in der Zwischenzeit etwas verändert hat und, falls ja, was.

Nachdem ich den ersten Entwurf dieses Artikels fertig gestellt hatte, ist mir bewusst geworden, dass es sinnvoll wäre, ihn in vier Teile zu gliedern. Der erste Teil wird sich mit Auflösungsunabhängigkeit im Kontext von Icon Design befassen, während der zweite Teil die zwei Arten, auf die sich Auflösungsunabhängigkeit erreichen lässt, darstellt. Der dritte Teil zeigt, wie Centigrade den derzeitigen technischen Beschränkungen im Arbeitsalltag begegnet. Zum Schluss werde ich eine Anregung geben, wie besserer Tool-Support die Entwicklung von auflösungsunabhängigen Icons vereinfachen könnte.

Auflösung vs. Pixeldichte

Beginnen wir mit einer kurzen Einführung in das Thema Auflösungsunabhängigkeit im Allgemeinen. In der Regel wird unter „Bildschirmauflösung“ die Anzahl der Pixel, die ein Bildschirm in horizontaler und vertikaler Richtung anzeigen kann, verstanden. Ich habe schon Leute, die sich kaum ihre eigene Telefonnummer merken können, sagen hören: „Ich will eine 1920 mal 1080 Bildschirmauflösung, damit ich meine HD-Filme gucken kann“. Auch wenn die Pixelanzahl natürlich wichtig ist (um diese Filme zu sehen), sagt sie dem Käufer jedoch noch überhaupt nichts darüber, wie groß ein Pixel ist – und dementsprechend auch nichts darüber, wie groß der Bildschirm an sich ist.

Das iPhone beispielsweise hat eine Auflösung von 480 x 320 Pixel – eine ganze Menge – und man könnte ein großes Gerät erwarten, wenn man nur diese Zahl hört. Und tatsächlich, wenn die Pixel so groß wären wie die eines Standard-Computermonitors, würde das iPhone einen Bildschirm mit einer Größe von ca. 8 x 12 cm haben. Natürlich wäre das ein ziemlich unhandliches Gerät, das vermutlich auf dem Markt wenig Akzeptanz gefunden hätte. In Wahrheit ist der Bildschirm aber nur 5 x 7,5 cm groß (dies entspricht einer Bildschirmdiagonale von 3,5 Zoll). Diese kleinen Abmessungen sind möglich, weil die Pixel des iPhones so klein sind, dass 160 von ihnen auf einen Zoll passen. Deshalb spricht man von einer Pixeldichte von 160 ppi (pixels per inch/Pixel pro Zoll) im Vergleich zu Standard-Computermonitoren, die derzeit eine Pixeldichte von nur 100 ppi aufweisen.

Was ist aber nun der Grund dafür, die Pixel kleiner zu machen und so die Pixeldichte zu erhöhen? Warum nimmt man nicht einfach weniger Pixel um kleinere Bildschirme zu bauen? Die Antwort ist natürlich simpel: Eine höhere Pixeldichte führt zu verbesserter Bildschirmschärfe. Wenn Sie je die Gelegenheit hatten, einen kristallklaren Text auf einem iPhone Bildschirm zu lesen, werden Sie wissen, was ich meine.

Die Begriffe Pixeldichte und Bildschirmauflösung werden häufig verwechselt. Wenn ich im Folgenden von Bildschirmauflösung spreche, meine ich also die absolute Pixelanzahl. Wenn ich hingegen von Pixeldichte spreche, beziehe ich mich auf das Maß Pixel pro Zoll. Ich werde außerdem auf den Begriff dpi (dots per inch/Punkte pro Zoll) verzichten, da dieser eher für Tinten-basierte Drucker angemessen ist als für Pixel-basierte Bildschirme, für die ppi die angemessenere Einheit ist.

Schrumpfende Icons

Aber wie hängt das jetzt alles mit Design zusammen? Wie bereits erwähnt ist es so: Je kleiner die Pixel bei konstanter Pixelanzahl sind, desto weniger Platz nehmen sie ein. Ein 16×16 Pixel Icon ist auf einem Standard 100 ppi Monitor ca. 0,40 cm² groß. Auf einem 160 ppi iPhone Bildschirm wäre dasselbe Icon nur 0,25 cm² groß. Obwohl Bildschirme mit 300 ppi nicht so häufig sind, wie damals von einigen Technologiefanatikern prophezeit, geht der Trend doch zumindest in Richtung solch hoher ppi Geräte. Eine anschauliche Tabelle über die Entwicklung der ppi-Werte in den letzten 20 Jahren stützt diese Aussage. 300 ppi Bildschirme existieren also tatsächlich (siehe dazu auch diese Pressemitteilung von Samsung über ein Gerät mit hohem ppi Wert). Die hohe Pixeldichte solcher Geräte würde unsere 16×16 Icons auf eine Größe von nur 0,14 cm² schrumpfen lassen – jeder Pixel unseres Icons wäre dann so winzig wie ein menschliches Haar dünn ist. Natürlich wäre ein solches Icon zu klein, um einfach erkannt zu werden.
Shrinking Icons
Es ist offensichtlich, dass eine höhere Pixeldichte durch den Einsatz größerer Icons (z.B. 32×32 Pixel statt 16×16 Pixel) kompensiert werden muss. Und das ist der Punkt, an dem die Diskussion über auflösungsunabhängiges Icon Design beginnt: Wie können wir effektiv Icons erstellen und ausliefern, die auf verschiedenen Bildschirmen, von niedriger bis hin zu hoher Pixeldichte, funktionieren? (Auch auf die Gefahr hin, kleinlich zu wirken – eigentlich müsste man die Diskussion über „ppi-unabhängiges Icon Design“ führen).

Im nächsten Teil werde ich auflösungsunabhängiges Icon Design aus der technischen Perspektive betrachten und die existierenden Tools und deren Grenzen diskutieren.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Senior UX Manager
+49 681 959 3110

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.