Der „App Unterschied“ zwischen dem iPad mini und Nexus 7

Schleifpapier als Lieferumfang

Im Oktober 2010, als das Samsung Galaxy Tab schon vorgestellt wurde, meldete sich Steve Jobs zu Wort, um seiner Meinung über 7″ Tablets Luft zu machen. Er bezeichnete diese Geräteklasse als „dead on arrival“ – „Totgeburt“ – und empfahl am Besten Schleifpapier beizulegen, um die Finger der Nutzer anzupassen. Mit der Veröffentlichung des iPad Mini lohnt es sich, die Aussage des verstorbenen Apple Chefs nochmal auf den Prüfstand zu stellen. Da er bei der ersten Annahme offensichtlich daneben gelegen hat, will ich darauf eingehen, wieso er im zweiten Punkt Recht hatte – zumindest für iOs Tablets.

Als Erstes stellt sich die Frage, wieso Steve Jobs nicht auch der Ansicht war dem iPhone ebenso Schleifpapier mitliefern zu müssen? Immerhin ist ein (damals) 3,5 Zoll Display kleiner als die angesprochenen 7 Zoll.

Vom Finger zum Touch Target

Diese Frage lässt sich leicht beantworten, wenn man sich iOS einmal genauer anschaut. Dieses Betriebssystem wurde entwickelt, um auf einem 3,5 Zoll Display mit einer Auflösung von 480x320px mit dem Finger bedient werden zu können. Mit diesen Eckdaten wurde die Größe der Arbeitsfläche definiert. Diese Arbeitsfläche hängt bei einem Touch Betriebssystem jedoch nicht nur von diesen Werten ab, sondern auch von dem „Eingabegerät“. In diesem Fall dem Finger und, um noch genauer zu sein, dem Zeigefinger und Daumen. Diese Finger haben eine bestimmte Größe und beanspruchen bei der Berührung des Displays eine bestimmte Fläche.

Diese beanspruchte Fläche wird als „Touch Target“ bezeichnet. Die Größe des Touch Targets beeinflusst, wie viele Bedienelemente auf der Arbeitsfläche angezeigt werden können. Apple gibt in seinen Richtlinien ein Touch Target von mindestens 44x44px an, was einer Fläche von ca. 8x8mm entspricht.

Beim Wechsel auf die bekannte „Retina“ Auflösung hat Apple an diesem ganzen Konzept nichts geändert. Apple hat einen simplen und doch effizienten Trick angewandt. Ein Pixel wurde in 4 kleine Pixel aufgeteilt, die zusammen die Größe des ursprünglichen Pixels haben. Daraus ergibt sich genau die doppelte Auflösung auf jeder Achse: 960x640px. Dieses Vorgehen führt nicht zu mehr Platz auf dem Display, sondern zu einer schärferen Darstellung.

Die Touch Targets sind immer noch ca. 8x8mm groß, aber bestehen nun aus doppelt so vielen Pixel (88x88px). Da iOS Layouts nicht mit relativen, sondern mit absoluten Werten erstellt werden, hat diese Auflösungsänderung keine Auswirkung. Die Werte werden einfach nur verdoppelt, um das gleiche Ergebnis zu bekommen. Somit bleibt die Größe der Arbeitsfläche gleich, obwohl die Auflösung verändert wurde. Das iPhone 5 hat nochmal ein wenig Veränderung gebracht, spielt aber in den weiteren Betrachtungen keine Rolle.

Der Unterschied beim iPad

Was hat sich nun beim iPad (2) geändert und was ist gleich geblieben? Verändert hat sich die Displaygröße auf 9,7 Zoll und die Auflösung auf 1024x768px. Das Eingabegerät ist jedoch gleich geblieben – der Finger. Er ist immer noch genauso groß wie davor, hat jetzt jedoch eine größere Fläche vor sich. Somit entsprechen die 8x8mm des Fingers ca. 44x44px auf dem Display. Durch den größeren Bildschirm passt nun aber mehr drauf. Dieses mehr an Platz definiert und macht das Tablet Layout aus.

Durch die vergrößerte Arbeitsfläche ist es möglich, mehr Inhalt darzustellen, welcher mit dem Finger immer noch bedienbar ist. Jedoch sollte man auf einem Tablet die Touch Targets ein wenig größer gestalten, da das User Interface sonst schnell überladen wirkt und zu keiner angenehmen Erfahrung führt. Beim iPad 3 und 4 ist das Vorgehen (wie oben beschrieben) mit der Verdoppelung der Auflösung gleich.

Kommen wir nun zum fiktiven Schleifpapier und wieso ein 7″ Tablet solches im Lieferumfang enthalten sollte, falls iOs das Betriebssystem der Wahl ist. Zuerst geht man davon aus, dass die Apps auf dem 7″ Tablet das Tablet Layout benutzen sollen. Immerhin will man ja ein Tablet und kein aufgeblasenes Telefon Layout. Dabei entsteht die Schwierigkeit mit den pixelgenauen Layouts in iOs. Man nimmt also ein Touch Target (z.B. einen Button) mit der Größe von 44x44px, welches auf 9,7″ zu einer realen Größe von 8x8mm führt, und verkleinere den auf ca. 70% dessen. Die Auflösung bleibt die Gleiche. Man erhält also ein Touch Target, welches 5,6×5,6mm groß ist. Der Finger wird jedoch nicht kleiner, nur weil man sich ein kleineres Tablet gekauft hat. Somit bekommt man das Problem, die Touch Targets mit dem Finger nicht mehr so einfach treffen zu können.

Natürlich kann man durch Analyse der Berührungen auf dem Bildschirm versuchen, diese den kleineren Touch Targets zuzuordnen. Jedoch muss das nicht immer zum Erfolg führen und kann bei Bedienelementen, die nahe zusammenstehen, zu unerwünschten Aktionen führen. Diese Fehleingaben verschlechtern die Benutzererfahrung mit dem Gerät bzw. der App. Nun gibt es zwei Möglichkeiten dieses Problem zu lösen. Zum Einen kann man eine neue Auflösung und damit ein neues Layout definieren. Dieses Vorgehen führt jedoch dazu, keine kompatiblen Apps für diese neue Auflösung zu haben. Die Layouts müssten neu gedacht und erstellt werden. Ähnlich zum neuen Display im iPhone 5. Die zweite Möglichkeit ist eben das „Abschleifen“ der Finger um sie „präziser“ zu machen (ein kapazitiver Stylus würde es wohl auch tun, aber das wäre ja nicht Sinn der Sache).

Die „Größe“ des iPad Mini

Apple hat beim iPad Mini entschieden, das Display auf 7,9″ zu verkleinern und hat aus einem Touch Target mit 8x8mm nun 6,5×6,5mm gemacht. Diese Maße werden anscheinend als noch zumutbar erachtet. Es handelt sich hier „nur“ um Unterschiede im Millimeterbereich und es hört sich recht belanglos an, jedoch merkt man bei der Bedienung eines Gerätes mit Toucheingabe schnell, wie wichtig Bedienelemente sind, die nicht zu klein ausfallen.

Doch keine Sorge. Die meisten Tablet Apps werden auf dem iPad Mini noch gut bedienbar sein, da die Touch Targets auf dem 9,7″ Geräten selten die minimale Größe bekommen, sondern eher größer dimensioniert werden. Dies dient der erleichterten Bedienung. Beim iPad Mini führen diese größeren Bedienelemente zu „genau der richtigen Größe“ nach der Verkleinerung, kleinere jedoch zu Schwierigkeiten.

Android und die Vielfalt an Auflösungen

Kommen wir nun dazu, wie Android dieses Problem mit den verschiedenen Auflösungen und Displaygrößen handhabt. Wie kann dabei die minimale Größe des Touch Targets garantiert werden? Android ist seit der Version 1.0 in der Lage auf verschiedenen Bildschirmgrößen und den dazugehörigen Auflösungen ein konsistentes Erlebnis zu bieten. Um als Programmierer nicht für jede Auflösung bei verschiedenen Displaygrößen Layouts erstellen zu müssen, wurde versucht, diese konkreten Variablen zu abstrahieren.

Man hat eine neue Einheit eingeführt, die sich DIP nennt und ausgeschrieben „Density Indipenden Pixel“ bedeutet. Diese Einheit ist unabhängig von Auflösung bzw. Bildschirmgröße und liefert immer (ungefähr) die gleiche physikalische Größe auf dem Display.

So funktioniert es:

Definiert wurde 1 DIP als 1 Pixel bei einer Pixeldichte von 160dpi (mdpi). Die Pixeldichte enthält die Bildschirmgröße und Auflösung im Verhältnis zu einander. Weiter wurden Umrechnungsfaktoren definiert, um auch andere Pixeldichten ab zu decken.

Bei der Verdoppelung der Pixeldichte auf 320dpi (xhdpi) wird ein Pixel eines 160dpi Display einfach nur in 4 kleinere Pixel unterteilt. Dieses Vorgehen gleicht dem bei iOS. Es ergibt sich der Umrechnungsfaktor 2. 1 DIP, bei einer Pixeldichte von 320dpi, entspricht also 2 Pixeln auf dem Display.

• Bei einer Pixeldichte von 120dpi (ldpi) entspricht 1DIP = 0,75 Pixel.
• Bei einer Pixeldichte von 240dpi (hpdi) entspricht 1DIP = 1,5 Pixel.
• Seit Jelly Bean 4.1 wurde auch noch eine weiter Pixeldichte mit 480dpi (xxhdpi) eingeführt. Bei dieser entspricht 1DIP = 3 Pixel.
• Beim Nexus 7 handelt es sich um eine Pixeldichte von 217dpi (tvdpi). Dabei entspricht 1DIP = 1,33 Pixel.

Nun kann man also in den Layouts alle möglichen Elemente in DIP definieren und erhält auf jeden Bildschirm bzw. jeder Auflösung fast die gleiche physikalische Größe. Somit können Touch Targets in der richtigen, bedienbaren Größe gehalten werden.

Und wo ist jetzt der versprochene Unterschied zwischen iPad Mini und Nexus 7?

Wir haben also festgestellt, dass ein iPad Mini die gleiche Arbeitsfläche hat wie ein 9,7″ iPad und somit exakt das Gleiche darstellen kann. Es wird zwar alles kleiner, aber die Apps zeigen auf allen iPads den gleichen Inhalt.

Bei Android Tablets funktioniert die Bestimmung der Größe der Arbeitsfläche anders. Ich verdeutliche es mal an 2 Beispielen.

Nexus 7: Die Auflösung beträgt 1280x800px mit 7″ Diagonale und führt zu einer Pixeldichte von 217dpi. Der Umrechnungsfaktor bei dieser Pixeldichte beträgt 1,33, da es sich um tvdpi handelt.

Wenn man nun die Auflösung durch diesen Faktor teil, erhält man die Größe der zur Verfügung stehenden Arbeitsfläche.

• 1280px / 1,33 = ca. 962dip
• 800px / 1,33 = ca. 600dip

Die Arbeitsfläche beträgt also 962x600dip.

Nexus 10: Die Auflösung beträgt 2560x1600px mit 10,055″ Diagonale und führt zu einer Pixeldichte von 300dpi. Damit fällt es in die Klasse xhdpi und der Umrechnungsfaktor beträgt hier 2.

• 2560px / 2 = 1280dip
• 1600px / 2 = 800dip

Die Arbeitsfläche beträgt also 1280x800dip.

Dies ist genauso viel wie ein 10″ Tablet mit 1280x800px (160dpi) Auflösung bis jetzt auch geboten hat.

Dadurch müssen bei einer App für das Nexus 10 nur die Pixelgrafiken in der entsprechenden Auflösung neu hinterlegt werden. Das Layout bleibt das Gleiche. Wenn man sich die Arbeitsflächen jetzt anschaut und vergleicht, kommt man zu dem Schluss, dass das Nexus 7 eine kleinere Arbeitsfläche besitzt als ein 10″ Android Tablet mit der gleichen Auflösung. Somit kann man eben nicht wie beim iPad die gleichen Apps mit den gleichen Layouts verwenden, da nicht genug Platz vorhanden ist. Somit braucht das Nexus 7, wie auch andere 7″ Tablets, sein eigenes User Interface Layout und seine eigene Benutzerführung.

Das ist der große Unterschied, wieso auf dem iPad Mini „Tablet Apps“ laufen und auf dem Nexus 7 ein eigenes Layout erstellt werden muss.

Vor- und Nachteile:

Bei Apples Vorgehensweise

+ Alle Apps des iPad bleiben mit dem iPad mini kompatibel.

+ Man kennt die Größe der Arbeitsfläche und hat nur 1 Layout als Entwickler zu erstellen. Das senkt die Entwicklungskosten für den Anbieter und den Anschaffungspreis für den User.

+ Bei der Verdoppelung der Auflösung müssen nur die Pixelgrafiken aktualisiert werden, was den Aufwand eines Updates minimiert.

– iOS ist „gefangen“ in seinen Auflösungen oder dem Doppelten davon. Jedoch wird es schwierig werden 2048x1536px oder 960x640px nochmal zu verdoppeln. Wir werden also für lange Zeit diese Auflösungen sehen und wohl auch keine anderen Größen bei Geräten.

– Bei der Einführung einer neuen Auflösung werden alle vorhandenen Apps „nutzlos“. Man kann sie zwar noch ausführen, aber dies geschieht in einer „Letterbox“, wie beim iPhone 5 noch gut zu sehen ist (Oben und Unten ein schwarzer Balken).

– Bei einfacher Verkleinerung der Bildschirmgröße ohne gleichzeitige Verkleinerung der Arbeitsfläche kann es zu Problemen mit den Touch Targets kommen, da sie zu klein ausfallen können – Kein konsistentes Nutzererlebnis.

Bei Googles bzw. Androids Vorgehensweise

+ Touch Targets behalten immer die vorgesehene Größe.

+ Jede Auflösung und jede Bildschirmgröße ist möglich und führt zu einer Vielfalt von Geräten mit verschiedensten Formfaktoren.

+ Beim Programmieren muss man sich keine Gedanken über die Pixel machen, sondern nur über die verschieden großen Arbeitsflächen. Der Fokus kann auf die Nutzerführung und Ergonomie gelegt werden.

+ Das System kümmert sich darum, die richtigen Bilder und Layouts für das jeweilige Gerät aus zu suchen.

– Es müssen mehrere Layouts erstellt werden, was zu höheren Entwicklungskosten führt.

– Layouts können nie Pixelgenau sein, sondern müssen in der Höhe und Breite flexibel auf kleine Änderungen reagieren können. Dadurch kann man sich nie ganz sicher sein, wie das Layout bei dem User dargestellt wird.

– Es besteht ein höherer Aufwand beim Programmieren mit erhöhtem Fehlerpotential.

Zusammenfassung

Beide Plattformen haben ihre eigene Vorgehensweise beim Umgang mit Auflösungen und Displaygrößen. Diese haben Vor- und Nachteile, die sich auf den Kunden und auf den Programmierer auswirken. Welches Konzept besser ist, kann jeder für sich entscheiden.

Man kann jedoch keine Eigenschaften erwarten, die nicht vorgesehen sind.