Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 28

Webdesign: Wie sich die User-Experience auf Tablets optimieren lässt

    Webdesign: Wie sich die User-Experience auf Tablets optimieren lässt

Zen ist ein Zustand fließender Lebendigkeit, Einfachheit, Intuition und Vollkommenheit. Das sind auch die Merkmale von Produkten und Anwendungen, die ein bemerkenswertes und allumfassendes Nutzererlebnis bieten. Diese Prinzipien lassen sich sehr gut auf das Design der „User Experience“ von Websites und Web-Applikationen speziell für Tablets anwenden.

Laut einer Compuware-Studie [1] aus dem Februar 2012 werden 46 Prozent aller Websites auf einem Tablet mangels Funktionalität, Usability und fehlerhafter Darstellung kein zweites Mal besucht. Insgesamt schneiden Websites auf Tablets schlecht bezüglich ihrer „User Experience“ ab. Die „Post-PC-Ära“ erfordert also ein Umdenken. Struktur, Strategie, Design und Funktion von Content müssen in dem mobilen Anwendungszenario ganzheitlich und aus Sicht des Users betrachtet werden.

Die Hauptelemente der neuen Amazon-Site sind nun auch Touch- und Tablet-freundlich. Insgesamt ist die Site aufgeräumter und ruhiger.
Die Hauptelemente der neuen Amazon-Site sind nun auch Touch- und Tablet-freundlich. Insgesamt ist die Site aufgeräumter und ruhiger.
Für Tablets optimierte Websites und Onlinestores zeigen, wie einfach, intuitiv und übersichtlich Online-Shopping ganz ohne Maus und Content-Überladung sein kann. Der lang ersehnte Amazon-Relaunch, der bisher noch nicht in Deutschland ausgerollt ist, verfolgt die Strategie „Tablet first“. Auch Desktop-User werden von der neuen Website profitieren – denn die neue Website ist aufgeräumter, übersichtlicher, einfacher und intuitiver nutzbar.

Content + Context

Das Tablet ist ein neues Eingabegerät – neben den faktischen Unterschieden bezüglich Hardware, Betriebssystem und Browser erhalten die wohl wesentlichsten Unterscheidungsmerkmale zum Desktop-Computer allerdings noch nicht genügend Aufmerksamkeit. Webdesigner müssen den situativen Kontext, also „wann“, „für was“, „wie“ das Tablet genutzt wird, viel stärker in ihre Projekte einbinden. Tablets sind in Bewegung, werden eher im Privaten genutzt, hauptsächlich zum Lesen, Video schauen, Recherchieren, sprich: Nutzer konsumieren im Wesentlichen Content. Sie drehen ein Tablet je nach Art des Contents, es ist unterschiedlichen Lichtumgebungen ausgesetzt, wird parallel zu anderen Aktivitäten genutzt und ist somit oft etwas nebensächliches. Das Tablet ist persönlicher als der Desktop-Rechner, „instant on“, immer dabei und wird auch von mehreren Personen genutzt. Das Credo „Content ist King“ hat nie seine Bedeutung verloren, jetzt muss es auf den Kontext erweitert werden. Denn mittlerweile gibt es über 16 Millionen Mobile-Web-Nutzer in Deutschland (September 2011 / AGOF Mobile Facts 2011).

Webdesigner sollten also den Mehrwert der Website-Inhalte immer in Bezug auf den Anweder einschätzen. Wie gut kann der Content gelesen werden? Sind Videos in ausreichender Qualität vorhanden? Werden diese optimal gestreamt? Wie einfach ist es, auf einem Tablet ein Bestellformular zu nutzen?

Was ist User Experience Design?

Es gibt viele Beschreibungen des Begriffs „User Experience“ (UX). Oft ist zu beobachten, dass UX mit „Usability“ gleichgestellt wird. „Usability“ ist jedoch ein Bestandteil der UX. Eine Website mit schlechter „Usability“ führt zu unzufriedenen Usern. Eine gute UX sorgt für wiederkehrende Anwender, intensivere Nutzung und damit zum Erfolg des Angebots. Der Prozess des UX-Design ist nur unter intensiver Einbeziehung der User möglich. Sich in die User einzudenken gehört zu den wesentlichen Aufgaben des UX-Designers.

UX-Ebenen, die jeder Webdesigner berücksichtigen sollte.
UX-Ebenen, die jeder Webdesigner berücksichtigen sollte.
Bei genauerer Betrachtung dessen, was erfolgreiche Tablet-UX beeinflusst, lassen sich fünf Ebenen identifizieren. Diese Ebenen können unter dem Begriff der „Projekt DNA“ zusammengefasst werden. Allen Projekten gemein ist die individuelle Zusammenstellung dieser „DNA“. Das Ziel ist die Herstellung eines optimalen Arrangements aller Projektbestandteile, das Ergebnis sollte eine erfolgreiche „User Experience“ sein.

Ebene 1: Der User

Was möchte er? Nutzt er das Tablet privat oder beruflich? Wann und wo hat er es in Gebrauch?

Ebene 2: Die Hardware

Welche Bildschirmgrößen und Auflösungen gilt es, zu bedenken? Ist das Gerät multitouchfähig? Wie gut kann es Videos abspielen?

Ebene 3: Das Betriebsystem/Software

Welche betriebssystemspezifischen Eigenschaften sind zu beachten?

Ebene 4: Website/HTML5 Webapp

Wie ist die Offline-Fähigkeit der Website beziehungsweise der Web-Applikation? Wie reagiert sie im Quer- und Hochformat? Lässt sie sich per „Touch-Controls“ steuern? Funktionieren die Formulare?

Ebene 5: Testing

Wurde die Website oder die Web-App mit den Bedürfnissen des Users und den durch geräte- und betriebssystemabhängige Parameter definierten Umgebungen und Situationen ausreichend getestet? Welche Erkenntnisse ergeben sich aus dem Test und fließen sie in das nächste Update ein?

Die Hardware-UX

Die Performance und Touchfähigkeit der aktuell verfügbaren Geräte liegen nicht weit auseinander. Websites bauen sich fast gleich schnell auf und lassen sich flüssig bedienen, eingebundene Videos werden in der Regel ruckelfrei abgespielt. Bei den Bildschirmgrößen hat die Fragmentierung zugenommen und es gibt sehr unterschiedliche Darstellungsbereiche und nutzbare Flächen. Empfehlungen für Display und Viewport-Testing gibt es einige (bspw. hier, hier und hier).

Mit Xscope [5] lassen sich fertige Websites und Photoshop-Entwürfe über ein „Shadowing/Mirror“-Tool direkt auf dem iPad testen. Auf der Website gibt es einen Workaround, um auch für das Retina-Display des neuen iPad optimiere Inhalte darzustellen. Auf tablet-screendesign.info [6] können sich Designer zudem einen Überblick über die Spezifikationen der vielen verschiedenen Tablet-Geräte verschaffen.

Links und Literatur

  1. Compuware-Studie vom Februar 2012
  2. Tool zum Testen verschiedener Tablets-Displays
  3. Testen verschiedener Tablets-Displays
  4. Browser-Testing
  5. Mit Xscope Websites direkt aufs iPad…
  6. Tablet-Übersicht
  7. Übersicht zur HTML5-Unterstützung
  8. Geräteübergreifende Lösung für Touch-Events
  9. Auf jQuery basierendes Framework
  10. Das Framework „mootools-mobile“
  11. Browser-Plugin „PageSpeed“
  12. „Minifyer“ reduzieren Ladezeiten mobiler Websites

Finde einen Job, den du liebst zum Thema Android

1 Reaktionen
Pascal192
Pascal192

Kleine Anmerkung an den Autor: Android unterstützt scrollen von Frames & Elementen seit Version 4, zumindest unter Chrome, aber auch der Stockbrowser sollte das mitmachen. Ebenfalls ist seit der 4er Version position:fixed endlich funktionsfähig. (Für Apps mit Kopf interessant)
Außerdem dürfte das mootools-mobile framework wie der Name sagt auf den mootools und nicht jQuery basieren ;)
Ansonsten guter Artikel!

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen