Vorheriger Artikel Nächster Artikel

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

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

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 anwenden.

Webdesign: Wie sich die User-Experience auf Tablets optimieren lässt
UX-Ebenen, die jeder Webdesigner berücksichtigen sollte.

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.

dms caa962ed9bc5464aac223769878ef5d4
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. 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.

dms 347676aead13d428d752b55e21f12ebd
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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Pascal192 am 06.12.2012 (11:20 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Aktuelles aus dem Bereich Tablets
Die Basics des Responsive Webdesign in 9 schicken GIFs
Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont. » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

Sticker UI Book: Das Stickeralbum für UX- und UI-Designer
Sticker UI Book: Das Stickeralbum für UX- und UI-Designer

Wer sagt, dass Webdesign nicht auch analog funktionieren kann? Das Sticker UI Book, das derzeit auf Kickstarter sein Glück versucht, versüßt UX- und UI-Designern nicht nur den kreativen Prozess, … » weiterlesen

Kennst Du schon unser t3n Magazin?

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