• 
• 
• 
• 
• 
• 
• 
• 1

Oktober 2010

Das Web zum Wischen

Die Zukunft des WebDesigns

(Link zum Artikel: http://www.createordie.de/cod/artikel/3379)

Die hohen Wachstumsraten bei Smartphones und das enorme Interesse an Tablets legt den Schluss nahe, dass die Bedeutung von Touch Computing in den nächsten Monaten rapide zunimmt. Das kann auch der WebDesigner nicht ignorieren.

Text: Frank Puscher

Wenn Touch also mindestens ebenso produktiv ist, wie Maus und Tastatur und obendrein eventuell mehr Spaß macht, wie die Industrie in der Werbung fortwährend suggerieren möchte, dann ist es nur eine Frage der Zeit, wann WebDesign diesem Paradigma zu folgen hat. Spätestens, wenn ähnlich viele Seitenzugriffe von mobilen Geräten kommen, wie von stationären – und das ist nach einer Studie von Morgan Stanley schon übernächstes Jahr der Fall – wird sich das Webdesign gravierend ändern. Christian Hasselbring, Geschäftsführer von Stern.de weiß: "Fakt ist auf jeden Fall, dass mobile Computing den Markt verändert. Unsere iPhone App hat mittlerweile knapp 550 000 Downloads. Das mobile Web, über Apps und mobile Portale, ist ein absoluter Wachstumsmarkt."

Eventuell geht es dann gar nicht mehr um Webseiten, sondern nur noch um Apps. Kurz vor dem Erscheinen des iPads wurde Steve Jobs von Wired-Chefredakteur Chris Anderson befragt, wie denn das Interface der Zukunft aussehen könnte und was er von Googles Konzept der WebApps halten würde. Die lapidare Antwort des Apple-Chefs lautete: "We do not want to make our UI look like a Web page".

Nicht wenige Experten sehen in Webseiten nur so eine Art Fallback-Lösung. Die Musik spielt in einfach zu bedienenden Apps, die der Nutzer von Touch Devices von seinem Gerätehersteller oder Telko-Carrier virenfrei überreicht bekommt. Wired jedenfalls hat dem HTML-basierten Web den Trauermarsch geblasen und im Juni erklärt: "The web is dead, long live the internet". Nur noch ein Viertel des gesamten Netzverkehrs läuft in Form von TCP-/IP-Päckchen über den Port 80 und landet als HTML-Seite im Browser. Tendenz weiter sinkend. "Websites werden sukzessive durch Apps ersetzt. Was man jetzt schon sieht, ist, dass Webseiten zunehmend zu Webinterfaces werden, also zu einer Oberfläche bei der die Informationen zum Nutzer gelangen und der Nutzer nicht mehr durch hierarchisch organisierte Seiten browsen muss", ist sich Wolfgang Henseler von Sensory Minds sicher.

Von Apps lernen

Der ungebrochene App-Boom könnte darauf hindeuten, dass die Webdesigner bisher ein wichtiges Bedürfnis der Nutzer vernachlässigt haben: Das Bedürfnis nach schlanken, einfach zu bedienenden Minianwendungen, die die Inhalte stärker in den Fokus des Betrachters rücken und die Navigation dorthin vereinfachen. Ein klassisches Usability-Paradigma also. Christian Hasselbring sieht das so: "Im Bereich des Infotainments kann ich mir gut vorstellen, dass eine einzige Anwendung für das mobile und für das stationäre Web gleichzeitig funktioniert. Die wird entsprechend einfacher und intuitiver gestaltet sein, als man das heute im Web sieht.

Für intensive Interaktion und die tiefergehende Suche und Navigation in unseren Inhalten, experimentieren wir noch viel mit den Touch-Gesten und der User Experience. Tastatur und Maus werden uns noch eine Weile begleiten."

Es spricht nichts dagegen, dem Nutzer eine solche Form der Anwendung auch für den stationären Rechner mit größerem Bildschirm zur Verfügung zu stellen. Eventuell einfach als parallel geschaltete, zweite Website. Der Nutzer kann entscheiden, welche Variante ihm besser gefällt. Genaue Analysen des jeweiligen Benutzungskontexts sind gefragt, inwieweit zum Beispiel besondere "Mobile-Features" wie Positionserkennung, die Einbindung der Kamera (leider nicht beim iPad) oder Offlinearbeit ausschlaggebend für den Erfolg der App ist. Hier muss das entsprechende Äquivalent für die stationäre Nutzung gefunden werden. Andere spannende Ansätze aus der App-Welt, wie zum Beispiel Offline-Reading oder der Einsatz linearer Inhaltsstrecken mit simpler Vor- und Zurücknavigation, sollten sich hingegen leicht umsetzen lassen.

...und Fehler vermeiden

Usability-Forscher Jakob Nielsen hat im Mai bereits eine ganze Reihe von iPad-Apps mit Nutzern getestet und kam zum Ergebnis, dass die allermeisten Interfacekonzepte verwenden, die sie den Nutzern im Test nicht vermitteln konnten. Das Tippen auf Bilder mache in der einen App gar nichts, in der nächsten öffnete es eine Vergrößerung, in der dritten Variante "drehte" sich das Bild um und zeigte Informationsdetails, bei der vierten App verlinkte das Bild zu einer neuen Seite und die fünfte App-Variante öffnete ein Overlay mit unterschiedlichen Funktionen zur Auswahl.

Die fehlende Standardisierung und somit der Mangel an bekannten Touch-Gesten ist für den Interfacedesigner das große Problem. Die deutschen Usability-Forscher von UID führten umfangreiche internationale Feldtests durch. Das Ergebnis: Touch Computing 2010 ist alles andere als intuitiv und somit weit entfernt vom NUI-Paradigma. Sylvia Le-Hong, Usability-Beraterin bei UID: "Schon bei Standardtätigkeiten, wie dem Kopieren und Einfügen von Texten konnte eigentlich kein Proband eine Geste aus dem Ärmel schütteln." Le-Hong ist skeptisch, ob Touch sich auch jenseits der Mobile-Welt durchsetzen kann: "Die Ressourcen an verfügbaren Metaphern für Gesten sind sehr beschränkt".

Webtouch 2010 mit Flash oder HTML5?

Wer seine Webseiten heute auf Touch optimieren möchte, hat im Wesentlichen die Wahl zwischen einer klassischen, proprietären und einer neuen, quelloffenen Technologie. Sencha Touch veröffentlichte vor wenigen Wochen erst eine Betaversion ihres HTML5-Touch-Frameworks. Neben klassischen Interfaceelementen wie Buttons oder Formularfelder verfügt das Päckchen auch über eine Reihe von Icons, die die Touch-Bedienung dem Nutzer näherbringen sollen.

Wer aktuell die bessere Reichweite sucht, wählt Flash. Die Verbreitung ist deutlich höher und gewinnt derzeit auch auf mobilen Endgeräten an Fahrt. Android kann die höchsten Absatzzahlen aufweisen und die Version 2.1 und höher, unterstützen den FlashPlayer 10.1.

Im Wesentlichen stehen vier Gesten zu Verfügung. "Pan" bezeichnet das Verschieben von Inhalten in jedwede Richtung, dem Desktopnutzer bekannt aus Google Maps. Diese Geste hat auch für Desktops ein hohes Potenzial. Betrachten Sie eine Demonstration der Präsentationssoftware Prezi. Dort werden nicht einzelne Folien hintereinander abgespielt, sondern das Ganze ist wie eine Landkarte angelegt und die virtuelle Lupe (der Bildschirm) verschiebt sich von Element zu Element.

Ein solches Modell könnte als Navigationsmethode für Internetangebote funktionieren und hätte sogar einen handfesten Vorteil gegenüber klassischer Navigation. Es gibt nämlich ein "Big Picture", also eine Art Übersicht, die es dem Nutzer erlaubt, ein mentales Modell der Website aufzubauen. Ein Bestreben, dem Webdesigner hinterherhecheln, seit es HTML gibt.

Die einfache seitliche Wischgeste kann freilich auch dazu verwendet werden, lineare Systeme zu durchwischen. Von einem Screen zum nächsten, etwa im Checkout-Prozess des Onlineshops.

Die weiteren Gesten sind: "Zoom" (zwei Finger auf und zu), "Rotate" (zwei Finger drehen) sowie der gleichzeitige Tap mit zwei Fingern und das Wischen mit zwei oder mehr Fingern.

Egal welche Technik eingesetzt wird, klar ist, dass alle Möglichkeiten deutlich erklärt werden müssen, da der Nutzer sie im offenen Web nicht erwartet. Insofern könnten Icons, wie die von Ron George (siehe Links) weiterhelfen, genauso wie Erklärungsfilmchen oder kleine Animationen. Hartmut Esslinger: "Wenn wir "Ikonen" bzw. Symbole benutzen, so werden diese dynamisch – also animiert – und auch 3-Dimensional sein."

Wenngleich NUI-Puristen das gar nicht gerne sehen: "Bei echten NUI-Systemen benutze ich gar keine Icons mehr, da Icons nur Symbole und damit Verweise auf etwas darstellen, sondern ich interagiere mit dem Objekt selbst, unmittelbar und direkt", fordert Wolfgang Henseler.

Für die Webdesigner sieht Tom Acland spannende Zeiten heraufdämmern. "Wir sehen viel Potenzial im Bereich mobiler Web-Apps. Die Teile der HTML5-Spezifikation, die sich mit Offline-Apps auseinandersetzen, sind für Mobile von wesentlichem Interesse, ganz egal was man zum Thema Flash behaupten möchte. Wir glauben also, dass die Definition von "Webseite" sich neu bilden wird und somit die Definition von Webdesign".

Der erste Teil dieses Artikels erschien vergangene Woche unter dem Titel Ergonomischer Schwachsinn.

Frank Puscher arbeitet seit 14 Jahren als freier Journalist und Buchautor mit den Schwerpunkten Flash, Usability und Online-Marketing. Er berät und schult Unternehmen bei der Umsetzung von Online-Strategien.

 

• Link zur UID-Studie über bekannte Gesten
• HTML5 – Touch-Framework
• Flash Touch-Videotutorial
• Beispiel für Touch-Icons
• Beispiel für Touch-Icons – Gesture Standards

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• icons,
• smartphones,
• tablets,
• touch,
• webdesign