t3n 28

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

Seite 2 / 2

Die Operating-System-UX

Neben den von Hause aus gelieferten Webkit-basierten Browsern Safari, Chrome, Silk und BlackBerry Browser erfreuen sich auch Dolphin HD, Opera Mobile und Firefox Mobile Browser wachsender Beliebtheit. Allen gemeinsam ist die unterschiedlich ausgeprägte Unterstützung von HTML5. Eine Übersicht der gegenwärtigen mobilen HTML5-Unterstützung bietet die Website mobilehtml5.org [7].

Leider werden im Moment noch nicht alle „User Agents“ gleichermaßen als „Tablet“ identifiziert, sodass beispielsweise viele Android-Tablet-Anwender eine Smartphone-Website ausgeliefert bekommen. Mit der „CSS Media Queries“-Eigenschaft „max-device-width“ lässt sich nicht eindeutig ein Tablet identifizieren und der „User Agent“-String wird oft verfälscht. Zudem sollten Webdesigner überprüfen, ob es sich wirklich um ein iOS-Gerät und nicht um ein Netbook mit ähnlicher Bildschirmauflösung handelt. Auch die Fähigkeiten der Android-Browser sind durchaus sehr unterschiedlich zu Safari auf iOS. So lassen sich bei Safari Frames und scrollbare Elemente mit zwei Fingern durchscrollen – bei Android Browsern ist dies zurzeit nicht möglich. Zudem ist auch die Multitouchfähigkeit sehr unterschiedlich und sollte stets überprüft werden.

Die App-/Website-UX

Prinzipiell unterscheiden sich die Anforderungen an Tablets nicht von denen, die auch schon vor fünf Jahren jedem Projektbriefing zugrunde lagen: „Keep it Simple“, Übersichtlichkeit, kleine Datenmengen. Und dennoch werden Seiten gelauncht, auf denen man sich schnell verliert, die überladen sind mit Inhalten, dadurch langsam reagieren und die oft keinerlei Optimierung für mobile Geräte aufweisen. Dazu kommen für Maschinen geschriebene SEO-Texte und animierte Werbung, die nur dann gut ist, wenn sie auf Nutzerinteressen zugeschnitten ist.

Responsive Webdesign ist zur Zeit die umfassendste Lösung, um eine Website auf allen Endgeräten homogen darzustellen. Durch den Fakt, dass alle Browser HTML5 und Media Queries voll unterstützen, gibt es zurzeit keinen Grund dagegen. Die Regelwerke für die User-Interface-Gestaltung von Android, iOS und Windows 8 sind ein Muss für jeden Mobile-Webdesigner. Durch die Touch-Interfaces wird man zu einfachen, intuitiven und kontextbezogenen Strukturen gezwungen. Verpackt in universell leicht zu erfassenden Icons und Buttons werden diese von den Anbietern in den jeweiligen Developer-Centern bereitgestellt.

In der Gestaltung der Website gilt es oft, zwischen einem individuellen Design und einem Identitätsverlust der Seite zugunsten einer starken Integration in die OS-Umgebung abzuwägen. Bei Web-Apps und Websites ist zu beobachten, dass sich diese in der Gestaltung immer mehr annähern und dadurch enger mit dem Endgerät verwoben sind – sehr zum Vorteil des Nutzers. Er findet sich schnell zurecht und erkennt anhand der gestalteten Elemente wie Buttons und Icons die dahinterliegenden Funktionen. Mittlerweile ist durch Usability-Untersuchungen bekannt, dass Apps mit iOS-GUI (Graphical User Interface) auf Android-Geräten nicht gerne genutzt werden. Ebenso verhält es sich mit Android-GUI auf iOS-Geräten. Diese visuellen Welten passen einfach nicht in das Gesamtwerk.

Fass mich an, mit JavaScript

Um Touch-Events Website-übergreifend auf einem Tablet anwenden zu können, zum Beispiel um einen Seitenwechsel mit einer Swipe-Bewegung auszulösen, müssen Designer diese Funktionen zusätzlich über eine JavaScript-Bibliothek einbinden. Neben den bekannten Bibliotheken „jQuery Touch“ und „jQuery Mobile“ lässt sich auch auf die geräteübergreifende Lösung von „YUI 3.2.0“ [8] oder die auf jQuery basierenden Frameworks „Zepto.js“ [9] und „mootools-mobile“ [10] verweisen. jQuery Mobile und Touch sind aufgrund ihrer guten Dokumention schnell zu erlernen. Zu kritisieren sind die hohen Datenmengen und die optischen Ähnlichkeiten damit erstellter Anwendungen. Gerade Zepto.js ist wegen seiner sehr kleinen Datenmenge attraktiv – wer mit jQuery vertraut ist, wird sich schnell damit zurecht finden. Generell gilt es zu beachten, dass Android-Browser ab 2.1 – in Abhängigkeit vom Endgerät-Hersteller – Touch-Events unterstützen, allerdings kann der User diese Funktionalität auch deaktivieren.

Ladezeiten sind entscheidend

Ladezeiten und nicht optimal aufbereitete Inhalte sind wichtiger denn je – gerade mobile Anwender reagieren hier noch viel empfindlicher. Langsam ladende Websites haben eine negative Auswirkung auf das Nutzererlebnis, bilden somit einen geringeren Mehrwert und gehören laut Google auch nicht auf die obersten Plätze der Suchergebnislisten. Hierzu ist beispielsweise das Firefox-Add-on „Page Speed“ [11] ein nützliches Tool, das neben der Messung der Ladegeschwindigkeit auch direkt Tipps zu Verbesserungen gibt. „Minifyer“ wie zum Beispiel „Codekit“ [12] helfen dabei, die Dateigröße von JavaScript- und CSS-Daten deutlich zu reduzieren. Auch Videos sind mittlerweile fester Bestandteil von News, Magazinen sowie immer stärker auch Onlinestores. Deshalb gilt auch hier, entsprechend zu agieren und Videodateien für Mobile Streaming möglichst klein zu halten.

Das neue iPad und das Retina-Display

Websites für das iPad mit Retina-Display bedürfen spezieller Anpassungen.
Websites für das iPad mit Retina-Display bedürfen spezieller Anpassungen.
Tablets mit Retina-Display liefern herausragende Grafik und stellen Webdesigner vor neue Probleme in der Gestaltung des User-Interfaces und der Darstellung von Bildern. Spezielle Anpassungen für die Darstellung von Websites auf dem neuen iPad sind sehr zu empfehlen.

Bilder in hoher Qualität sollten zum Einsatz kommen. Bei Produktfotos kann die Oberflächenstruktur des Materials zur Geltung kommen. Mit adaptiven Bildern lassen sich passend zum Ausgabegerät die optimalen Bilddaten ausliefern. Zudem sollten Webdesigner auf die Verwendung von typografischem Text für Headlines und Buttons achten. Nur dieser sieht auf hochauflösenden Bildschirmen gestochen scharf aus. Auch Icons lassen sich als Webfont verwenden und so lässt sich Ladezeit einsparen. Zudem ist es wichtig, Buttons, Logos und Grafiken zu optimieren. Kaufaufforderungen sind entscheidend für die Conversion einer Website, derzeit verwendete Grafiken sehen oft unscharf, körnig und wenig einladend aus. Optimale Buttons sind sehr einfach gestaltet, Effekte wie Reflexionen und Verläufe sollten eher vermieden werden. Auch bei Markenlogos und wichtigen Grafiken gilt es zu beachten, diese entsprechend dem Endgerät auszuliefern.

Fazit

Nur die vollendete positive „User Experience“ wird durch die daraus resultierenden Weiterempfehlungen das Image einer Website verbessern und die Conversion steigern. Dabei gilt es, im Laufe des Design-Prozesses immer den User und sein Tablet zu berücksichtigen: Für den Nutzer ist es nicht das Tablet, das die Website nicht richtig interpretiert. Es ist die Website, das Produkt, der Markenname, der bei schlechter Performance negativ in Erinnerung bleibt. Mit den zunehmenden Zugriffsmöglichkeiten von HTML5 auf die Gerätefunktionen und verbesserten Bandbreiten werden Websites auf Tablets in Zukunft noch stärkeren App-Charakter erhalten. Es war noch nie so einfach, Usern ein positives Erlebnis bei der Nutzung einer Website zu vermitteln. Sie sollten im Mittelpunkt des Designprozesses stehen.

Mit Webdesign und Webentwicklung für Tablets beschäftigen wir uns auch in der aktuellen Ausgabe des t3n Magazins. Bei Interesse einfach mal reinklicken.

Christian Kuhn
Christian Kuhn

ist geschäftsführender Inhaber von NUISOL, Agentur für digitale Aha-Erlebnisse. Mit seinem Team entwickelt er seit über 10 Jahren medienübergreifende digitale Kommunikationslösungen für Marketing und Werbung. Er ist Autor, bietet Workshops und Vorträge. Dieser Artikel basiert auf seinen aktuellen Workshops und seinem Buch UX-Design für Tablets. Mittlerweile ist zudem ein gleichnamiges Shortbook für den Amazon Kindle erschienen.

Startseite
  • Seite:
  • 1
  • 2

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
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!

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

Jetzt anmelden

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung