Mit den richtigen Werkzeugen zur optimalen Tablet User Experience

Touch me, shake me, use me to be happy!
Kommentare

Es war noch nie so einfach, den Besucher Ihres Onlineangebots bei der Nutzung zu bespaßen: mit User-Experience-Design für Tablet-Websites. In diesem Artikel bieten wir Ihnen Denkanstöße, Erkenntnisse und Werkzeuge – damit auch Sie Ihren Nutzer glücklich machen.

Tablets werden unseren Alltag stärker beeinflussen, als die meisten es sich im Moment vorstellen. Ob beim Hausarztbesuch, beim Beratungsgespräch in der Bank oder als In-Seat-Entertainment im Flugzeug: Die dünnen, leichten Tablets mit Multitouch-Interface werden Druckprodukten, technischen Interfaces und Arbeitsgeräten wie Netbooks immer mehr Anteile streitig machen. Sie halten das für überzogen? Fakt ist: Das Mediennutzungsverhalten verändert sich seit Jahren hin zum Web, auf Kosten von Druck und TV. Die ersten Airlines führen Wifi ein, Tablets und Mobile werden in der Economy Class aus Raumgründen die Vorreiter werden. Der Kinderspielzeughersteller Toys-R-Us veröffentlicht, während Sie diese Zeilen lesen, ein stoßfestes Android-Touchpad (geeignet für Kinder ab drei Jahren) für die nächste Nutzergeneration [1]. Eben, kein Spielzeughandy aus billigem Plastik und mit quietschenden Klingeltönen, sondern ein vollwertiges Touchdevice. Waren auch Sie schon einmal begeistert, wie spielend einfach ein dreijähriges Kind ein iPhone nutzen kann? Die nächste Generation wächst also endlich mit technischen Wundergeräten auf, die noch vor zwei Dekaden Science-Fiction-Liebhaber begeisterten. Und für sie werden diese Geräte vor allem eines sein: ein normaler Gebrauchsgegenstand. Das direkte Interface mit Gesten legen wir dieser Generation in die Wiege – so, wie uns eben Tastatur, Maus und Farbmonitor in die Wiege gelegt worden sind. Und weil wir alle im Alter wieder zu Kindern werden, hat die Firma Memo Touch LLC ein Paket aus Android-Tablet-PC und -Software herausgebracht, das Familien bei der Pflege von dementen Personen helfen und selbigen mehr Sicherheit in ihrem Alltag geben soll [2]. Die Software „Memo“ erinnert die Senioren beispielsweise an ihre täglichen Termine und Medikamente.

Das Nutzungsverhalten der nächsten Anwender-/Kundengeneration verlangt, dass Kommunikation digital und an die Anwendungssituation angepasst ist. Sie wird im Web stattfinden. Sie wird mobil, sozial und intuitiv nutzbar sein.

Deswegen brennen wir für Tablet-PCs. Ist es nicht aufregend, von Anfang an dabei sein zu dürfen? So wie vor wenigen Jahren mit dem iPhone. Doch halt, mit dem Tablet ist es dann doch etwas anders. Diverse Touch-Apps machen vor, wie einfach und intuitiv produktive Softwarenutzung mit Multigesten sein kann. Da entsteht der Wunsch, es am Desktoprechner ebenso leicht zu haben. Das Apple Trackpad (Multitouch-Eingabe) hat so manchen OS-X-Schreibtisch bereits erreicht. Dabei ist es Windows, das die meisten Touch-Gesten unterstützt. Es fehlt noch an den richtigen Apps und Interfaces, doch ich sehe mich in absehbarer Zeit „mouseless“. Tablet-optimierte Onlinestores zeigen, wie einfach, intuitiv, übersichtlich und welch ein Erlebnis Einkaufen ganz ohne Maus und Content-Überladung sein kann. Der lang ersehnte Amazon-Relaunch verfolgt die Strategie „Tablet first“. Als größter Content-Lieferant neben Apple sind das Kindle Fire und die passende optimierte Website zu diesem Kassenschlager eine logische Entwicklung. Das Amazon-Tablet ist wohl der erfolgreichste Konkurrent von Apples iPad, obwohl erst seit November in den USA erhältlich. Das Kindle Fire wird angeblich unter Herstellerpreis verkauft, um den Markt zu durchdringen. Die Rechnung wird am Ende des Tages voraussichtlich für Amazon aufgehen – durch den stärkeren Abverkauf von Büchern, Musik und Filmen – Content, der dann nicht von Apple verkauft wurde. Alle Desktopuser werden von der neuen Website profitieren, denn bei der Befolgung der grundsätzlichsten ScreenDesign- und Usability-Regeln für Tablet-Websites wird diese dadurch aufgeräumter, übersichtlicher, einfacher und intuitiver nutzbar sein.

Das Erfolgsrezept: Content-Strategie und User Experience (UX)

Nur – ist es wirklich so einfach? Das Tablet ist eine neue Gattung Gerät. Und neben den faktischen Unterschieden in Hardware, OS und Browser bekommen die wohl wesentlichsten Unterscheidungsmerkmale zum Desktoprechner bei vielen Webdesignern noch nicht die richtige Gewichtung. Der Kontext: Wann, wofür, wie wird das Tablet genutzt? Es ist in Bewegung und wird eher im Privaten genutzt. Es wird hauptsächlich gelesen, Video geschaut, recherchiert und konsumiert, eben sehr wenig Content generiert. Es wird je nach Art des Contents gedreht (Beispiel: Landscape für Filme, Portrait zum Lesen), es ist unterschiedlichen Lichtumgebungen ausgesetzt, es wird parallel zu anderen Aktivitäten genutzt (beim Fernsehen, Kochen und im Bett … wird gelesen.)

Das Tablet ist persönlicher als der Desktoprechner und wird dennoch auch von mehreren Personen genutzt. Es ist immer dabei, leicht, instant on, und die Nutzer haben auch noch an der Nutzung des Geräts Freude, wenn es nicht mehr neu ist. Andererseits werden Tablet-Nutzer auch häufig enttäuscht, und das nicht immer nur durch eingeschränkten Funktionalität. Eher ist es im Moment noch die Regel, dass Websites nicht für Tablets optimiert sind und damit die Chance verspielt wird, den Usern, Ihren Kunden, eine tolle User Experience zu bieten. Smart dagegen die Webapps/Websites von aside magazin [3], Financial Times [4], Zeit.de [5], dem U.S. Nike Store [6] und auch die Tablet-optimierte Search-Seite von Google. Diese Seiten nutzen die aktuellen HTML5-Möglichkeiten, werden eins mit Gerät, OS, Mobile Browser und berücksichtigen den Kontext der Nutzung und des Interfaces (Abb. 1). Mission erfüllt: glückliche User, die wiederkehren.

Abb. 1: Die FT-Webapp erkennt, wenn keine Datenverbindung mehr vorhanden ist und zeigt dem Anwender, wir er seinen Cache aktivieren und aktualisieren kann.

Aufmacherbild: Concept of sitting young woman using her tablet pc during rest in the park von Shutterstock / Urheberrecht: Rasstock

[ header = Seite 2: Content is King ]

Die Top 5 der am meisten genutzten Inhalte auf Tablets
1. E-Mails
2. Produktinformationen
3. News und Magazine
4. Social Media
5. Video/Film
Quelle: TNS Infratest/Statista, Jacob Nielsen [7]

Content is King

Das Credo „Content is King“ hat noch nie an Bedeutung eingebüßt, wurde die königliche Sau doch zur Genüge durch das mediale Dorf getrieben. Doch mit erstmals über 16 Millionen deutschen Mobile-Web-Nutzern im September 2011 (laut AGOF Mobile Facts 2011) veränderte sich zwangsläufig der Bezug des Inhalts auf seine Umgebung. So muss man sich schlicht fragen, welcher wertvolle Inhalt von dieser erstmals kritischen Nutzermasse denn tatsächlich unterwegs, auf der Couch, „eben mal schnell“ genutzt wird. Ein Blick in die Analytics verrät nämlich, dass keine andere Nutzergruppe so schnell einen Besuch einer Site abbricht. Ladezeit und nicht optimal aufbereitete Inhalte bekommen kein Pardon mehr. Seit einiger Zeit zählt für Google die Ladegeschwindigkeit einer Webseite ebenfalls zu den wichtigen Qualitätsmerkmalen. Verschiedene Untersuchungen haben gezeigt, dass Nutzer nach wenigen Augenblicken eine Seite verlassen, wenn nach dem Aufruf der Site nicht schnell etwas angezeigt wird. Mobile Anwender reagieren hier noch viel empfindlicher als am Desktop. Langsam ladende Webseiten haben eine negative Auswirkung auf das Nutzererlebnis, bilden somit einen geringeren Mehrwert und gehören nach Googles Auffassung nicht auf die obersten Suchergebnispositionen. Auch wenn der Einfluss dieses Faktors für Google nicht allzu groß ist, lohnt es sich, auf die Ladezeiten zu achten und gegebenenfalls einfache Verbesserungsmaßnahmen vorzunehmen. Hierzu ist beispielsweise das Firefox-Add-on „Page Speed“ ein nützliches Tool, das neben der Messung der Ladegeschwindigkeit auch direkt Tipps zu deren Verbesserung ausgibt. Der Anwender wird es Ihnen danken. Videos zum Beispiel werden am liebsten mobil und auf dem Tablet konsumiert – sind sie doch längst fester Bestandteil von News, Magazinen und werden immer mehr auch in Onlinestores verwendet. Sind Ihre Videos für eine Mobile Streaming optimiert? Wirklich? Daher sollten Sie für die Ihr erfolgreiches Tablet-Projekt folgende Formel an die Wand hängen:

CONTENT + KONTEXT = KING

TIPP: Der richtige Tablet Content
Identifizieren Sie den Mehrwert Ihrer Inhalte immer in Bezug auf den Use Case. Fragen Sie sich, wie gut die Texte Ihrer Site gelesen werden können. Werden Videos in ausreichender Qualität angeboten (Vollbild) und werden sie optimal gestreamt? Wie einfach ist es, auf einem Tablet Ihr Kontaktformular zu nutzen? Reduzieren Sie die Eingabefelder!

Gehen Sie mit oder bleiben Sie stehen?

Als Leser dieser Fachzeitschrift ist Ihnen bereits klar, dass Ihre Onlineangebote mobil nutzbar gemacht werden müssen. Im Moment ist es sicher nur eine Frage von Budget und Planung. Sie haben also das Ziel, mehr User, mehr potenzielle Kunden zu erreichen. Ihr Suchmaschinen-Ranking wird sich verbessern, denn Google erkennt und honoriert mobil optimierte Inhalte. Dann besteht bei Ihnen auch die Notwendigkeit einer Multiscreen-Strategie! Patrick Lauke (Opera) beschrieb amüsant auf der letzen Webtech Conference die drei üblichen aktuellen Herangehensweisen:

  1. Wir tun nichts. Tablets haben moderne Browser und kommen mit herkömmlichen Websites ganz gut klar. Der User kann ja zoomen, scrollen oder doch an einen richtigen PC gehen. Günstig, trotz des hohen Frustrationspotenzials. Und wir müssen uns nicht mit der Usability unserer Website auseinandersetzen.
  2. Wir erstellen eine native App. Weil – wir brauchen ja ein App (Prestige). Teuer bei nativer App, separate Produkte je OS. Keine Website mehr im eigentlichen Sinn. Dafür schnell, Offlinenutzung, voller Hardwarefeature-Zugriff. Und wir müssen uns nicht mit der Usability unserer Website auseinandersetzen. 
    Eine Alternative zur nativen App ist die HTML5-Webapp, eine auf Tablets optimierte Website im Look and Feel einer nativen App. Gerade bei Verlagen stößt diese Form im Moment auf großes Interesse. Schließlich kann eine solche Site ohne den beschwerlichen Prozess und die Einschränkungen des iTunes-Stores publiziert werden. Allerdings sind solche Seiten oft nicht optimal für den Desktopanwender konzipiert, haben noch Performanceprobleme und sind nur eingeschränkt offline nutzbar.
  3. Wir erstellen eine Site für alles. Durch Responsive Webdesign können Websites für eine breite Range Auflösungen und Viewports vom Desktop abwärts bis mobil optimiert Inhalte darstellen. Der Aufwand, für die stark steigende Anzahl an Bildschirmgrößen von Tablets und Smartphones zu entwickeln, ist nur durch ein Umdenken im Webdesign zu bewältigen. Es erfordert allerdings beim Kunden wie beim Designer Flexibilität bei der Erstellung des Gestaltungskonzepts. Durch Responsive Design werden Bilder automatisch mit dem Seitenlayout skaliert oder beschnitten. Das bedeutet, dass ein Webseitenlayout automatisch auf unterschiedliche Bildschirmgrößen reagiert und sich entsprechend dem Bildschirmformat anpasst – ganz gleich, von welchem Hersteller, OS oder Browser. Vom Dektop bis zum Tablet funktioniert das wunderbar. Vorhandene Onlineangebote lassen sich mit überschaubarem Aufwand Tablet-optimieren (nachrüsten). Bei Mobile sollten Sie die obige Regel verinnerlichen. Nach unserer Meinung ist es zwar grundsätzlich von Vorteil, automatisch eine mobil-optimierte Landingpage mit abzudecken. Bei genauerer Prüfung der Ziele und der Use Cases ist in der Regel jedoch eine eigens konzipierte Mobile Page zu empfehlen. Und wir müssen uns mit der Usability unserer Website(s) auseinandersetzen.

Welche Strategie am besten für Ihr Vorhaben geeignet ist, sollte durch Ihre Ziele definiert werden. Wollen Sie Ihre Anwender stärker binden, neue erreichen oder einen Image Transfer erwirken? Wenn Sie die Antwort auf diese einfachen Fragen parat haben, können wir zur Kommunikation übergehen – und zum Transfer Ihrer Inhalte in eine Nutzungsform, die Ihre Anwender begeistert. Mit UX-Design.

[ header = Seite 3: User Experience Design prägt unseren täglichen Mensch-Maschine-Kontakt ]

User Experience Design prägt unseren täglichen Mensch-Maschine-Kontakt

Es ist das Interface zwischen uns und der digitalen Welt: Touch-Technologie, Gesten, Websites, App-GUIs und Digital Publishing für Android- und iPad-Tablets sorgen für eine intuitivere Nutzbarkeit der Geräte in unserem Alltag. Es ist dafür verantwortlich, wie gerne wir die Website, die WebApp aufrufen und wie intensiv wir uns mit den Inhalten auseinandersetzen. Diese Punkte sollten von jedem Auftraggeber für seine Kunden, den Nutzern der Endgeräte und Websites, berücksichtigt werden. Denn eine gute User Experience sorgt für wiederkehrende Anwender, intensive Nutzung und damit den Erfolg des Onlineangebots.

User Experience (UX) ist die Einheit aus Nutzwert (Look), Nutzererlebnis (Feel) und Usability (intuitive Bedienbarkeit). Erfolgreiche (Mobile-)Produkte stehen in einem starken Abhängigkeitsverhältnis zum Zusammenspiel dieser drei Eigenschaften einer User Experience (Abb. 2). Im Vergleich zu den Hard- und Softwareprodukten von Desktopcomputern der letzen Dekade wurde die Bedeutung von User Experience durch Touch Devices und Tablets in neue Sphären gehoben. Die intuitive, kinderleichte Bedienung eines komplexen Geräts, ohne Anleitung und Einweisung, ist spätestens seit Einführung des iPhones der gesetzte Maßstab. Bei genauerer Betrachtung dessen, was erfolgreiche mobile User Experience auf Tablets beeinflusst, sind drei Ebenen zu identifizieren: Hardware, Software und eine auf das Gerät und OS optimierte Website (Abb. 3).

Abb. 2: Die drei Eigenschaften der User Experience

Abb. 3: UX-Ebenen

Die Hardware-User-Experience

Ein Gerät aus hochwertigen Materialien wie Metall und Glas fühlt sich schlichtweg gut an. Diese haptischen Reize werden oft aus Kostengründen nicht ausreichend bedient. Abgesehen vom Motorola Xoom und von der Samsung-Galaxy-Generation können die meisten verfügbaren Kunststoff-Tablets nicht wirklich überzeugen. Dafür heben sich die beiden zuerst genannten auch im Preis deutlich von ihren Mitbewerbern ab. Tablet-PCs sind leicht, ihre Apps sofort betriebsbereit, die Akkulaufzeit phänomenal lang. Das sind entscheidende Vorteile. Der Frankfurter Texter Jörg Rentrop ist viel unterwegs und nutzt bevorzugt sein iPad, um Konzepte und kreative Texte zu erfassen oder zu recherchieren. Eine Hardwaretastatur ist ihm zwar lieber, aber die Hardware UX des iPad überwiegt gegenüber der Alternative, einen Laptop mit sich zu führen. Performance und Touch-Fähigkeit (Reaktionszeit) der aktuell verfügbaren Geräte liegen indes nicht weit auseinander. Websites bauen sich fast gleich schnell auf und lassen sich flüssig bedienen. Auf Websites eingebundene Videos werden ruckelfrei abgespielt. Bei den Bildschirmgrößen tendiert die erste Generation der Android Tablets (2.2) zu 1024×600 Pixeln, ist also kleiner als der Platzhirsch iPad mit 1024x768px, aber in der Menge überlegen. Die aktuellen Honeycombs und das neue Ice Cream Sandwich punkten wiederum mit HD-fähigen 1280x800px und bieten somit deutlich mehr nutzbare Fläche (Abb. 4).

Abb. 4: Die gängigsten Bildschirmgrößen

Was bietet welches Tablet?
Um als Designer in diesem Tablet-Dschungel den Überblick über die Einschränkungen und Möglichkeiten der Geräte, ihrer OS und der verfügbaren Browser zu bewahren, haben wir mit der Website Tablet-Screendesign.info eine Übersicht aller gängigen Tablets mit Angaben über Auflösung, Browser, OS, Displaygröße und mehr ins Leben gerufen. In der stetig wachsenden Liste sind bereits 87 Geräte verzeichnet, vom 4tiitoo Wetab bis zum Vizio Tablet. Weitere Informationen und Tools werden folgen.

Als hilfreiche Werkzeuge zum Display- und Viewport-Testing (Abb. 5) haben sich Browser-Apps wie Protofluid [8], Screenfly [9] oder resizemybrowser.com (Abb. 6) bewährt. In ihnen können die gängigen Größen simuliert werden, auch mit Landscape- und Portraitmodus. Aber Obacht! Der Raum, der durch die Tablet-spezifische Systemleiste (Android) und die Browserleiste entfällt, wird im Moment noch nicht simuliert. Das sollte gerade bei der Homepage und den spezifischen Landingpages beachtet werden.

Abb. 5: Simulation einer Responsive Site in Galaxys Landscape-Modus

Abb. 6: Resizemybrowser

[ header = Seite 4: Die Operating System User Experience ]

Die Operating System User Experience

In puncto Operating System User Experience steht Android Honeycomb dem iOS in nichts nach und überrascht mit vielen nützlichen Details, die sich nun auch beim iOS 5 wiederfinden werden. Welches System dem User mehr entspricht, bleibt Geschmacksache. Klassische MAC-OS-Anwender wecken den Anschein, mit den vielen Optionen auf einem Android-Tablet schnell überfordert zu sein. In Android 4 ist die von Apple entwickelte  HTTP-Live-Streaming-Unterstützung integriert. Mit der Bekanntgabe von Adobe, den Flash Mobile Player nicht mehr weiter zu entwickeln, ist zu erwarten, dass auch Opera und Mozilla in naher Zukunft den neuen Quasistandard dieser zukunftsorientierten Streamingtechnologie unterstützen werden. Das iPad bietet im Moment noch einige Gesten zur Fingersteuerung, die, wenn alle Patentfragen geklärt sind, auch in naher Zukunft auf dem Android zu erwarten sind. Eine Übersicht über die aktuell unterstützten Gesten findet sich unter [10]. Die allgemeinen Regeln der intuitiven Benutzbarkeit beherrschen beide Systeme. Simplifizierung und maximale Reduzierung der Bedienelemente auf wesentliche und kontextbezogene Inhalte zeichnen sie aus.

Neben den von Haus aus gelieferten Webkit-basierten Browsern Safari, Chrome, Silk und BlackBerry-Browser erfreuen sich auch Dolphin HD, Opera Mobile und Firefox Mobile Browser auf fast allen Systemen wachsender Beliebtheit. Allen gemein ist die Unterstützung von HTML5, CSS3 und Flash (ausgenommen Safari). Dennoch unterstützen nicht alle Browser HTML5 gleichermaßen, so dass Sie sich zurzeit noch auf die gängigsten Funktionen beschränken sollten. Local Storage fällt in der speicherbaren Datenmenge recht unterschiedlich aus. Planmäßig sollen alle Browser via HTML5 Zugriff auf die Hardware bieten. Die Entwicklung des Tablet-Markts 2012 wird dies vorantreiben. Die beste Übersicht der gegenwärtigen (Mobile)-HTML5-Unterstützung bietet die Website http://caniuse.com. Besonders, wenn Sie eine Site auch international betreuen, sollten Sie regelmäßig einen Blick auf http://www.browserrank.com/ werfen. In Deutschland wird der Markt zurzeit von Safari iOS dominiert, für Nordamerika ist Android klar zu bevorzugen, und den größten Marktanteil für Afrika und Russland hat Opera.

Leider werden im Moment noch nicht alle User Agents gleichermaßen als „Tablet“ identifiziert, sodass viele Android-Tablet-Anwender eine Mobile/Smartphone-Site ausgeliefert bekommen. Unter iOS erfreut sich der Atomic-Browser großer Beliebtheit, bietet er doch mehr Möglichkeiten wie Full-Screen Modus, das Speichern von Websites als Webarchiv und das Einstellen eines eigenen User Agents. Ab Android 3.1 bietet Chrome auch einen Fullscreen-Modus mit Schnellnavigation. In der Verbreitung der Betriebssysteme wird Android seinen Erzrivalen iOS nach Meinung weltweit operierender IT-Marktbeobachter (IDC [11]) bis 2014 überholen. Damit wird gerätebedingt unter den Tablets wohl auch das Bildschirmformat von 1280×80 px überwiegen. Weil nur die wenigsten in den Genuss kommen, sich ein Hardwarelabor mit den gängigen Tablets zulegen zu können, bietet Opera einen kostenfreien Mobile-Emulator (Abb. 7), der durch seine Geräteprofile und Einstellungsmöglichkeiten zu Pixel Density und Input (Touch, Keypad, Tablet) brilliert. In Verbindung mit einem Touch-Interface auf dem Schreibtisch bildet diese App eine hervorragende Simulationsumgebung für den Opera Mobile Browser. Auch BlackBerry hat seit August innerhalb des BlackBerry-PlayBook-Simulators seinen Browser für vollwertige Tests integriert. Der Mobile-Safari-Browser wird mit dem kostenpflichtigen Developer-SDK von iOS ausgeliefert.

Abb. 7: Opera-Mobile-Simulator

Die App-/Website User Experience

Dass Webseiten übersichtlich, anspruchsvoll und gut strukturiert gestaltet sein sollten, darüber hinaus intuitiv zu bedienen, selbstverständlich suchmaschinenfreundlich eingerichtet, interaktiv und multimedial ausgestattet, mit wertvollen Inhalten versehen und obendrein auch noch schnell sein sollten, ist nichts Neues. Prinzipiell unterscheiden sich diese Anforderungen nicht von denen, die auch schon vor fünf Jahren jedem Projektbriefing zugrunde lagen. Und dennoch werden Seiten gelauncht, auf denen man sich schnell verliert, die überladen sind mit Inhalten, dadurch langsam reagieren, und in der Regel alles andere als eine Optimierung für Mobile Devices aufweisen. Die Regelwerke für die User-Interface-Gestaltung von Android, iOS, MeeGo und Windows Phone sind ein Muss für jeden Mobile-Webdesigner. Durch die Touch-Interfaces zu einfachen, flachen, intuitiven und kontextbezogenen Strukturen gezwungen, die verpackt in universell leicht zu erfassenden Icons und Buttons präsentiert werden müssen, stellen die Anbieter ihr geballtes Wissen in den jeweiligen Developer-Centern bereit. Auf dieses Wissen, das auf intensiven Analysen basiert, können sich Designer stützen. Vor allem dem Windows-Metro-Design sollte man Beachtung schenken. Es ist die konsequente Umsetzung eines generischen Designprinzips für die Vielfalt der abzudeckenden Viewport-Größen.

In der Gestaltung der Webseite gilt es oft, zwischen einem individuellen Design und einem Identitätsverlust der Seite zugunsten einer starken Integration in die OS-Umgebung abzuwägen. Bei native Apps, Webapps und Websites ist zu beobachten, dass sie sich in der Gestaltung immer mehr annähern und dadurch enger mit dem Endgerät verwoben sind – ganz zum Vorteil des Nutzers: Der findet sich schnell zurecht und erkennt anhand der gestalteten Elemente wie Buttons und Icons die Funktionen dahinter. Mittlerweile ist durch Usability-Untersuchungen bekannt, dass Apps mit iOS-GUI auf Android-Geräten beim Nutzer unbeliebt sind. Ebenso verhält es sich mit Android-GUI auf iOS-Geräten. Diese visuellen Welten passen einfach nicht in das Gesamtwerk. Leider gibt es bisher noch keine Beispiele für Websites, die aufgrund dieser Kenntnis ihre Site mit entsprechenden OS-abhängigen GUI-CSS-Styles versehen haben. Dafür ist in der Regel kein Budget vorgesehen, obgleich eine stärkere „Stickyness“ der User als Verkaufsargument zählen sollte. Nutzer lesen in der Regel nicht, sie scannen Inhalte.

Eine hilfreiche Sammlung an Mobile-GUI-Patterns findet sich unter anderem bei mobile-patterns.com. Für den Chrome Browser ab Android 3.1 stellt http://nuisol.com eine Photoshop-Ebenen-Datei als Gestaltungshilfe zur Verfügung. Durch die Honeycomb-System-Menüleiste am unteren Bildschirmrand ergibt sich eine Nettofläche von 1280×647 px im Browser. Bei eingeschalteter Quick-Navi im Fullscreen-Modus erhalten wir eine Höhe von 752 Pixeln. Auch die Quick-Navi selbst sollte beim Gestalten berücksichtigt werden. Beim Einsatz von MediaQueries erweist sich das kleine MediaQuery-Bookmarklet von Rob Tarr als sehr hilfreich [12]. Es zeigt im Chrome Browser auf Tablet und Desktop, welche tatsächliche Viewport Sie innerhalb des Browsers zur Verfügung haben, und auch, welche Ihrer CSS3-Viewport-Regeln zum Einsatz kommen (Abb. 8). Eine Unterstützung für weitere Systeme ist in Planung.

Abb. 8: Das Bookmarklet im Einsatz zeigt, welche CSS3-Media-Query-Regel verwendet wird

[ header = Seite 5: Eine für alle? ]

Eine für alle?

Die Vielfalt an Viewports hat durch die Tablet-Schwemme stark zugenommen, und eine für das iPad optimierte Website wird einem Honeycomb mit 1280x800px Auflösung nicht gerecht. Wenn der automatische Zoom in Chrome aktiviert ist, wird die Seite entsprechend im Viewport eingepasst, was aber zur Folge hat, dass die eingebundenen Bilder unscharf werden. Ist der Autozoom durch den Benutzer oder via <meta>-Tag deaktiviert, bleiben die Bilder scharf, doch die Bildfläche wird durch das unglückliche Seitenverhältnis mit ungenutzten Flächen an den Rändern nicht voll ausgenutzt. Über einen <meta>-Tag kann der Zoom deaktiviert werden. Darüber hinaus können die minimale und maximale Skalierung festgelegt werden.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Auch wenn das Zoomen zu einer unschönen Darstellung führt, ist es doch ein Feature von Tablets, das vom Benutzer erlernt wurde und ihm deshalb nicht vorenthalten werden sollte. Er erwartet, durch die erlernte Gestik (Spread) den Inhalt vergrößern zu können. Wenn ihm das verwehrt bleibt, führt es zu Enttäuschung.

Tablet-optimierte Websites bestechen durch:
• Einfachheit und Reduzierung auf das Wesentliche (Simplicity)
• Weißraum: Helle Flächen fördern die Übersicht und reduzieren Spiegelungen im Touchscreen
• Weniger Bilder, um auch bei geringer Bandbreite gute Ladezeiten zu ermöglichen
• Ein Design der Navigations- und Funktionselemente (Icons), das sich an die aktuellen GUIs von Android und iOS anlehnt. Das bietet einen hohen Wiedererkennungswert für den Nutzer und eine bessere Integration in die Umgebung.
• Direktes Feedback von Navigationselementen
• Daumenfreundliche Navigationselemente
• Klare Gestaltungsprinzipien für „touchable“ Elemente
• Für Landscape- und Portraitmodus optimiertes Layout
• Verzicht auf Dropdown-Menüs und Pop-ups
• Content, dem höchste Priorität eingeräumt wird, flache Informationshierarchie
• Content, der für die jeweilige Nutzung in diversen Umgebungen optimiert ist
• Minimale Dateneingabe (Formulare)
• Größere Schriftgrößen als bei der Desktopversion
• Scrollen bzw. Swipen nur in eine Richtung
• Eine Anleitung zur Nutzung der Gesten
• Nutzung der Inhalte auch offline (Local Storage)
• Fast keine Werbung
• Schnelle Ladezeiten

Nur die Geräte zu kennen, ist nicht genug. Als Designer gestalten wir das Interface für Produkte und Serviceangebote. Wir müssen also über die Systeme, die Prozesse und ihre Verknüpfungen nachdenken.

Bei der Erarbeitung der Screendesigns für Ihr Projekt stehen Ihnen sehr unterschiedliche Vorgehensweisen zur Verfügung. Wir empfehlen, sich bei der Wahl der Werkzeuge nicht zu früh festzulegen und projektbezogen mit den zur Wahl stehenden Tools zu spielen. Wie es Daniel Guse, Interaction Designer Mobile bei XING AG, beschreibt: „Für Interaction Design kommt es darauf an, welche Situation gerade vorliegt. Häufig reichen ein paar einzelne handgefertigte Scribbles und Wireframes. Dafür verwenden wir verschiedene Tools, ich zum Beispiel meist OmniGraffle. Visual Designs ganzer Screens verwenden wir eher zur Orientierung, weniger als dogmatische Vorgaben. Denn gerade im Hinblick auf plattformspezifische Eigenschaften ist eine Anpassung häufig sinnvoll, etwa im Vergleich zwischen mobiler Website und Android- sowie iOS-App.“

Für die ersten Ideen reichen meistens schon ein paar Post-Its auf dem Tablet (Abb. 9 – 11). Auch um ein Gefühl für die Abstände und Anordnung der wichtigsten Navigationselemente zu entwickeln, sind Papier-Scribbles sehr gut geeignet. Sie sollten sich zum Beispiel die Frage stellen, ob sie noch mit dem Daumen erreichbar sind.

Abb. 9-11: Papier-Scribbles für das Screendesign

Abb. 9-11: Papier-Scribbles für das Screendesign

Abb. 9-11: Papier-Scribbles für das Screendesign

Für alle, die lieber digital vorgehen, gibt es auch für Präsentationssoftware wie Keynote und Powerpoint umfangreiche Templates für alle Systeme, die es ermöglichen, Designprototypen in Minuten zusammen zu „copy-and-pasten“. Einfach die benötigten UI-Komponenten aus den Vorlagen zusammenkopieren und verlinken – fertig ist der Klick-Dummy. Die Wireframes Tablet-Apps wie iMockups auf dem iPad und das Adobe Proto Touch-App auf Android sind für echte Touch-Liebhaber eine wahre Freude in der Nutzung und versprechen neben einer schnellen, intuitiven Bedienung die Möglichkeit, die Dateien mit Kollegen sorgenfrei auszutauschen. Die Adobe Touch-Apps sollen im Frühjahr 2012 auch im Apple App-Store angeboten werden.

Wenn Sie am Desktoprechner mit Ihren bevorzugten Tools wie z. B. Photoshop Ihr Screendesign ausarbeiten, werden Sie schnell feststellen, dass Schrift auf dem iPad viel kleiner wirkt. Das liegt an der höheren Anzahl von Bildpunkten pro Inch. Reguläre Desktop-LEDs haben eine Auflösung von 72 bis 96 PPI, das iPad hat 133 PPI, viele Android-Geräte sogar 146 PPI. Daher sind die Tablets insgesamt schärfer in der Darstellung. Nur entspricht die kleinere Darstellung der Elemente und der Schrift nicht mehr dem vom Designer vorgesehenen Schriftbild. Abstände und Schriftgrößen sollten daher früh in der am stärksten angestrebten Auflösung geprüft werden.

Im oben erwähnten Opera Mobile Emulator besteht dazu die Möglichkeit, denn in ihm lassen sich die PPI-Auflösungen für die Simulation wählen. Jedoch ist die echte Hardware natürlich zu bevorzugen. Hierfür bietet sich auf iOS die App Air-Display an, auf Android die App iDisplay. Einmal auf dem Tablet und den dazu gehörigen Client auf den stationären Rechner installiert, funktioniert das Tablet als zweiter oder sogar dritter Bildschirm und erweitert den Desktopbereich. Photoshop-Dateien lassen sich einfach via Drag and Drop auf den neuen Bildschirm, das iPad, ziehen und dort in echter 133-PPI-Auflösung betrachten. Die Maus lässt sich mit Fingerspitzengefühl gut benutzen.

[ header = Seite 6: Zum Schluss das Beste: beobachten, verbessern ]

Zum Schluss das Beste: beobachten, verbessern.

Eine Website ist nie fertig – das ist ein Fakt. Je mehr Planung und Vorarbeit Sie in Ihr Projekt investieren, desto sicherer sollte sich der Erfolg der Site einstellen. Doch der moderne Anwender nutzt mehrere Geräte, das Smartphone, Tablet, Laptop/-Desktoprechner und Internet@TV. Er erwartet bei der Nutzung Ihres Angebots auf allen Geräten zunehmend, einen gleichwertigen Service in einer gleichwertigen User Experience zu erhalten. Einfaches Beispiel ist die Nutzung eines Kalenders. Egal, mit welchem Gerät er einen Termin einträgt, ganz gleich, ob Touch-, Tastatur oder via Spracheingabe – der Termin muss auf allen Geräten synchronisiert sein. Was bedeutet das für Ihre Site? Haben Sie ein Feature auf Ihrer Site, in Ihrem Onlineangebot, das einer solchen Vorstellung gerecht wird? Sie sollten alles daran setzen, die gelernten Erwartungen Ihrer Anwender zu erfüllen. Bei dem schnell anwachsenden Überangebot von ähnlichen Leistungen könnte ein solcher Vertrauensverlust irreparabel bleiben. Auch sind die Meister unserer Zunft nicht vor Betriebsblindheit geschützt – gelten wir doch jobbedingt zu den Heavy-Usern, bedienen unsere Gadgets im Schlaf und besitzen sie freilich schon, bevor unser Auftraggeber, der Nutzer, auf die Idee kommt, ein solches zu erwerben. Um eine vollkommene User Experience zu erreichen, sollte daher auf keinen Fall nach dem Launch Schluss sein. Bauen Sie Usability-Tests zur Optimierung fest in das Projekt ein. Der Vorher-Nachher-Abgleich sollte eine signifikante Verbesserung ergeben.

Ablauf eines Usability-Tests

Ein Usability-Test für Tablets und andere Endgeräte umfasst in der Regel die folgenden Phasen:

  1. Planung: In enger Zusammenarbeit mit dem Kunden wird die Testsession im Detail geplant. Dabei sind neben der Usability auch die Mobile-Strategie und die Unternehmensziele zu berücksichtigen. Folgende Punkte sind dabei genau zu definieren: Forschungsziele, Szenarien, Mobile-/Tablet-Betriebssysteme (z. B. iOS, Android) und wer für die mobile Usability-Tests rekrutiert werden soll.
  2. Rekrutierung: In der Regel werden 6 bis15 Teilnehmer rekrutiert. Dabei sollte man darauf achten, User zu finden, bei denen alle Kriterien passen, z. B. User bestimmter Marken, Modelle von Tablets oder User, die ein bestimmtes mobile Webbrowser- oder App-Verhalten an den Tag legen.
  3. Die Testsessions: Bei den Eins-zu-eins-Tests ist es besonders hilfreich, wenn die Teilnehmer alles, was sie denken, laut aussprechen. Achtung: Keine suggestiven Fragen stellen wie „Würden Sie den Button größer besser finden?“ Geschulte Moderatoren stellen neutral und nicht beeinflussend die vorher abgestimmten Fragen und entlocken den Testern so die Gedanken zu dem Produkt der Site. Zeichnen Sie die Testsessions auf. Am einfachsten ist eine Aufsichtkamera (Stativ) oder, besser noch, ein vollständiger Screen Capture dessen, was auf dem Tablet getoucht wird. Dazu bietet sich zum Beispiel das DVI2USB-Capture-Gerät epiphan an. Das Tablet wird zum Beispiel mit einem HDMI-auf-DVI-Adapter an das Capture-Gerät angeschlossen und auf einem stationären Rechner wahlweise mit voller Auflösung aufgezeichnet. Der Wechsel von Landscape- in Portrait-Modus wird automatisch erkannt. So können die Videos der Tests für den Auftraggeber archiviert und für weitere Analysen verwendet werden.
  4. Expertenanalyse: Unmittelbar nach der Mobile-Usability-Testsession werden alle Erkenntnisse überprüft und analysiert. Alle Fragen sollten noch einmal durchgesprochen werden. Bei einem Brainstorming werden möglichen Lösungen für die getestete Tablet-Website oder App gefunden.
  5. Empfehlung: Nach einem Test folgen in der Regel ein Bericht, eine Präsentation und/oder ein Workshop mit allen Ergebnissen und Empfehlungen, leicht verständlich und greifbar. Das Feedback hängt allerdings von den Anforderungen des Kunden ab und davon, was getestet werden sollte. Ohne Ziele keine Erfolgsmessung.

Ein letzter Denkanstoß

2012 wird das Jahr des Tablets! Windows 8 ist voraussichtlich noch ein gutes Jahr entfernt, und das Amazon Kindle Fire, gerade erst erschienen, hat bereits den Markt in den USA aufgemischt. Die Nachfrage im Weihnachtsgeschäft ist ernorm. Alle Prognosen über den Absatz der Tablets für die nächsten Jahre wurden nach oben korrigiert. Auch Google, der neue Inhaber von Motorola, wird sich sicher nächstes Jahr noch stärker zu Wort melden. Mit den zunehmenden Möglichkeiten von HTML5 in Bezug auf Gerätefunktionen wie Kamera und Zugriff, einer schnelleren und vergrößerten Bandbreite danke LTE und immer besseren Hardwarekomponenten werden Webseiten auf Tablets noch stärkeren App-Charakter bekommen. Aufgrund der sich von mobile, stationär und auch TV stark unterscheidenden Nutzung werden Sie als Zielgruppe für Werbebudgets immer interessanter.
Nicht vergessen: Das Nutzungsverhalten der nächsten Anwender-/Kundengeneration verlangt, dass Kommunikation digital und an die Anwendungssituation angepasst ist. Sie wird im Web stattfinden. Sie wird mobil, sozial und intuitiv nutzbar sein. Und daher sicher auch auf einem Tablet. Fin.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -