Drücke die Tasten ◄ ► für weitere Artikel  

Designpatterns für Tablets: So wird es was mit der schicken Tablet-App

Aus dem
t3n Magazin Nr. 30

12/2012 - 02/2013

Jetzt kaufen

Auf den ersten Blick scheinen es Tablets Designern und Programmierern einfacher zu machen, gut bedienbare und schicke Apps sowie Websites zu kreieren. Bei der Gestaltung für Tablets kann man aber nicht einfach Wissen, Vokabular und Grammatik aus der Smartphone-Welt übernehmen. Vielmehr erfordern Tablets einen eigenen Dialekt bei der Gestaltung des User Interface. Wir zeigen, worauf es ankommt.

Designpatterns für Tablets: So wird es was mit der schicken Tablet-App

Wie wichtig die Optimierung von und Websites (und allem, was sich dazwischen bewegt) ist, konnte man in den vergangenen 18 Monaten besonders gut am Beispiel der Android-Tablets sehen. Seit etwa anderthalb Jahren stehen entsprechende Geräte im Handel. Dennoch sah sich Google erst kürzlich gezwungen, aktualisierte Guidelines für die Gestaltung und Optimierung von Apps für zu veröffentlichen. Damit reagierte der Konzern auf negative Publikationen über zu wenige, zu schlecht bedienbare und allgemein unerfreuliche Tablet-Apps.

„Context is King“

Bereits bei der Betrachtung des Nutzungskontexts eines Tablets ergeben sich erste Unterschiede zu Smartphones. Tablets sind weniger mobil als Smartphones, was nicht zuletzt an der vergleichsweise schlechteren Handhabbarkeit liegt. Gleichzeitig eignen sich Tablets aber sehr gut für die Nutzung über einen längeren Zeitraum. Damit ist längst nicht nur die Nutzung auf der Couch mit hauptsächlichem Konsum von Inhalten gemeint, sondern die Erstellung von Inhalten und die Arbeit mit dem Tablet in einem professionellen Kontext.

Diesem Umstand muss der Designer bei der Gestaltung einer App Rechnung tragen. Muss man den „Ease of Use“ beim Smartphone vor allem aufgrund der kurzen, häufig unterbrochenen Nutzungsdauer maximieren, kommt auf Tablets auch die Dauer der Nutzung als kritischer Faktor hinzu. Der Slogan „Context is King“ gilt wie bei Smartphones also auch hier. Allein aus diesem Grund empfiehlt sich ein nutzer- beziehungsweise nutzungszentrierter Designansatz.

Typographie

Ein zentraler Punkt, den Designer bei der Gestaltung von Tablet-Apps und optimierten Websites berücksichtigen müssen, ist die Typographie. Um die Augen der Nutzer nicht über Gebühr anzustrengen, muss man gerade bei längeren Texten und (textlastigen) Websites auf eine hinreichende Textgröße achten. Ein Oberflächenelement zur Anpassung der Schriftgröße der App beziehungsweise Website – ein Feature, dass leider immer noch nicht besonders weit verbreitet ist – ist in diesem Zusammenhang ein probates Mittel. Neben einem Layout, das sich „responsiv“ verhält, lohnt es sich auch, über „responsive“ Typografie nachzudenken: das heißt die Anpassung der Schriftgröße, des Zeilenabstands und der Wahl einer Schrift je nach Displayauflösung.

tec design pattern tablets affordances in iPhotos
Vorbildliche Nutzerführung. Die iPhoto-App klärt den Nutzer über alle vorhandenen Gesten und die Funktionen der Oberflächenelemente zur Steuerung der Bildbearbeitung auf.

Fitts‘s Law & Navigation

Im Gegensatz zu Smartphones, auf denen dem Landscape-Modus (Querformat) weniger Bedeutung zukommt, sind Hoch- und Querformat auf Tablets bei der Nutzung aufgrund des erweiterten Kontext von nahezu gleicher Bedeutung. Hier stellt sich die Frage, wie man mit der größeren Fläche umgehen soll. Schaut man sich die Umsetzung heutiger Tablet-Apps und Tablet-optimierter Websites an, kann man Grundprinzipien für die Gestaltung einer gut bedienbaren und hübschen Tablet-App/-Website ableiten.

Je größer ein Oberflächenelement und je näher es dem Ausgangspunkt des Nutzers auf dem Bildschirm ist, desto einfacher ist es zu erreichen. Leider gilt dies für Touchscreens nur bedingt. Da Tablets am Displayrand gehalten werden, müssen die wesentlichen Bedienelemente in von den Daumen leicht erreichbaren Regionen liegen. Besonders auf Websites finden sich die Navigationsleisten auch auf Tablets aber immer noch oben. Eine Möglichkeit wären hier seitliche Navigationselemente. Dies gilt natürlich besonders im Querformat. Im Hochformat reicht der Platz nicht aus, um auf beiden Seiten Bedienelemente anzubringen. Jedoch sollte man darüber nachdenken, zumindest an einer Seite – idealerweise anpassbar für Linkshänder – einen Bereich für Navigations- oder Bedienelemente vorzusehen. Hier sind Apps insofern im Vorteil, da die UI-Guidelines für Tablet-Oberflächen geeignete Layouts beschreiben. Entsprechende Oberflächenelemente ermöglichen zudem out-of-the-box eine seitliche Navigation. Beispiele hierfür sind Apps wie Tweetbot oder die Quote.fm-App.

tec design pattern tablets navigation links bei quotefm
Navigationselemente an der Seite des Screens – wie hier bei Quote.fm – erleichtern dem Nutzer auf Tablets die Bedienung.

Ist weniger mehr?

Einige Tablet-Layouts profitieren vom „Mehr“ an Raum. Doch zu viel Inhalt, zu viele Bilder und im Allgemeinen zu viele Oberflächenelemente können User auch überfordern. Websites verführen Designer besonders, klingt es doch zunächst so, als müsste man auf Tablets kaum Anpassungen durchführen. Doch neben der Wurstfingerregel spricht auch das eventuell verschenkte Potenzial dagegen.

Wie von Smartphones bekannt, kann man beispielsweise die Oberfläche stark reduzieren, um ein Hauptelement herauszustellen. Dabei kann es sich um Inhalte wie Videos oder Text handeln, aber auch um bestimmte Teile eines UI wie die Auswahl eines bestimmten Werkzeugs, etwa in iPhoto. Andererseits kann der Designer das Landscape-Format sogar als Erweiterung – bis hin zur Nutzung als vollwertiger zweiter Screen für die App – verwenden. Ein Mittelweg besteht darin, Teile des UI im Hochformat direkt zugänglich zu machen und diese Teile im Querformat nur über Menüs zur Verfügung zu stellen, um anderen Teilen der App mehr Platz einzuräumen.

Vom Web schon lange bekannt, haben fließende Layouts auch auf Tablets Einzug gehalten. So erhielt Android mit Version 4.0 das GridLayout. Fließende Layouts führen auf Tablets dazu, dass der Nutzer unter Umständen lange nach unten scrollen muss, um bestimmte Elemente zu sehen. Da Nutzer das, was sie nicht so gut sehen können, auch gerne vergessen, muss der Designer sich der Tücken dieses Layouts bewusst sein.

tec design pattern tablets fitts law
Fitts's law besagt, dass ein Bedienelement umso einfacher erreichbar ist, desto größer es ist und desto näher es dem Ausgangspunkt des Nutzers auf dem Bildschirm ist. Bei Tablets befindet sich die sinnvollste Position an den Rändern, an denen der Anwender das Gerät hält.

Die Wurstfingerregel gilt immer noch!

Neben Layout und Typographie ist die Bedienung einer App oder Website auf einem Tablet der dritte wichtige Bereich, den es bei der Gestaltung für Tablets zu berücksichtigen gilt.

Apple behauptet in seinen Human Interface Guidelines, dass ein berührbares Oberflächenelement mindestens 44 mal 44 Pixel groß sein muss. (In iOS wird in auflösungsunabhängigen Pixeln gestaltet.) Diese Pixelgröße entspricht auf einem 10-Zoll-Tablet ziemlich genau einem Quadratzentimeter. Diese Größe hat sich in Benutzbarkeitsstudien als ideale Größe für Touch-Elemente herausgestellt. Auch wenn sich die Oberfläche von Smartphone zu Tablet vervielfacht hat (wenn man von einigen 5.x-Zoll großen Riesensmartphones absieht), muss man wie auf einem Smartphone auch beim Design für Tablets auf eine ausreichende Größe der Bedienelemente achten.

Autor:
47 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Tablets
Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor
Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor

Auf ihrer Entwicklerkonferenz //build/ 2014 hat Microsoft Universal Windows Apps vorgestellt. Dank einer vereinheitlichen Windows-Runtime sollen Entwickler auf einfache Art und Weise Apps für die... » weiterlesen

Firefox-OS-Tablet: Spezifikationen und Bilder eines neuen Prototyps aufgetaucht
Firefox-OS-Tablet: Spezifikationen und Bilder eines neuen Prototyps aufgetaucht

Firefox OS wird in naher Zukunft auch für Tablets erscheinen. Ein Entwickler veröffentlichte nun Informationen zu einem neuen Tablet-Prototypen mit Firefox OS in 10-Zoll-Größe, welches Mozilla an. ... » weiterlesen

Tablet-Markt: Das iPad hängt die Konkurrenz ab – trotz deutlicher Verluste beim Marktanteil
Tablet-Markt: Das iPad hängt die Konkurrenz ab – trotz deutlicher Verluste beim Marktanteil

Im letzten Quartal 2013 wurde das iPad trotz deutlicher Verluste beim Marktanteil wie im Jahr zuvor am häufigsten verkauft. Das geht aus einer Studie von IDC hervor. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen