Nimmt man die Überschrift des Artikels her, so kann man die Aussage auf viele Bereiche der mobilen Welt anwenden: die Technik, die Geräte, die Nutzer selbst - und eben auch das User Interface mobiler Webseiten. Wir wollen einen Blick zurück wagen und zeigen, was sich geändert hat oder eben auch nicht. Wie weit zurück? Also nicht bis ins Jahr 1910, als die erste Idee eines tragbaren Telefons entstand. Sondern bis ins Jahr 2007. Vor fast genau sieben Jahren entstand die erste Version der mobilen Webseite von speisekarte.de. Anhand derer lässt sich schön veranschaulichen, was sich im User Interface Design mobiler Webseiten alles getan hat.

Unser Testexemplar - die mobile Webseite m.speisekarte.de

Gehen wir also auf die Reise und beginnen diese gleich mit einer Grafik.

user interface 2007

Die Grafik zeigt von links nach rechts die Startseite, das Suchergebnis und die Detailseite.

Was ist im Jahr 2007 wichtig?

  • Wir designen und konzepten für Feature Phones, Geräte mit einer Hardware Tastatur. Am besten sieht man das an den accesskeys, also dem [1] und [2] vor den Navigationspunkten (siehe Grafik unten).
  • Außerdem war die Seite sehr reduziert, was Grafiken und Elemente angeht, um die Ladezeit zu verringern. Hat man damals die Webseite, zum Beispiel im Browser des Motorola Razr V3 aufgerufen, war die Navigation folgende:

motorola razr

  • Der sichtbare Bereich ist bei den kleinen Displays das Kernstück der mobilen Webseite. Das heißt Inhalte müssen so gestaltet werden, dass sie auch auf Sony Ericsson W810i mit einer Auflösung von 176x220px sichtbar sind.
  • Das Layout ist so gestaltet, dass der Inhalt vertikal dargestellt wird. Es ist ein absolutes No-Go, dass der Nutzer horizontal scrollen muss. Die Gefahr, dass man sich in den Tiefen der Webseite verliert, ist einfach zu groß. Auch wenn es auf den ersten Blick nicht offensichtlich ist, aber der Grund dafür ist das Gesetz der Nähe, um eine bessere Usability zu bekommen.
  • In Bunt und Farbe: Dem Einsatz von Farbe spricht nichts entgegen. Die meisten Geräte besitzen bereits ein Farbdisplay. Beispielsweise stellt das damals weitverbreitete Sony Ericsson K800i ungefähr 250.000 Farben dar (im Vergleich dazu heute das iPhone 5S 16,7 Millionen). Was heißt das nun für das User Interface Design? Flächen zu designen ist kein Problem, allerdings wird es bei Verläufen schwierig, denn diese sehen auf den Displays flächig und stufig aus.

Touchscreens auf dem Vormasch - das Jahr 2009

Bevor wir uns auf die Designprinzipien um das Jahr 2009 stürzen, hier eine Grafik des User Interface Designs von speisekarte.de – damals:

userinterface 2009

Was fällt auf?

  • Der Wurst-Finger-Effekt gewinnt an Bedeutung. Buttons, Links - eben alles, was antappbar ist, muss mit dem Finger gut auswählbar sein. Dazu tragen beispielsweise die Guidelines von Apple bei, in denen steht, dass man von mindestens von 44x44px ausgehen soll. Dort wird explizit auch auf mobile Webseiten eingegangen. 
  • Die mobilen Browser legen technisch zu: immer mehr setzen auf WebKit als HTML Rendering-Engine. Von nun an kann man auch mit abgerundeten Ecken, Boxen und weiteren Gestaltungselementen arbeiten, die direkt im CSS umgesetzt werden. Somit bekommen Designerinnen und Designer mehr Gestaltungsspielraum.
  • Es wird plastischer und Verläufe kommen zum Einsatz (vgl. Buttondarstellung im mobilen Safari).
  • Mobile Webseiten nähern sich an die Oberflächen von Apps an. Vor allem wird oft das native Verhalten von iOS-Apps kopiert, indem feste Header mit einem zurück-Button eingebunden werden oder auch die Hochglanzverläufe, welche auffallend oft auf mobilen Webseiten anzutreffen sind.
  • Ein weiterer Punkt, der durch Apple an Wichtigkeit gewinnt: Usability von mobilen Webseiten ist wichtiger denn je. Die Nielsen Norman Group veröffentlicht einen Bericht mit 85 Design Guidelines für mobile Webseiten.

Nächster Halt: das Jahr 2014

Warum plötzlich ein Schritt von 5 Jahren? Die Entwicklung der letzten Jahre lässt sich nicht mehr so gut in eindeutige Meilensteine für das User Interface einteilen. Auf der Reise bis in die Gegenwart haben wir einen Zwischenstopp an folgenden, ausgewählten Stationen gemacht:

  • Responsive Design: Die Webseite für Smartphones wird nicht mehr als ein separater Bereich der Desktop-Seite gesehen oder gar als eine Kopie von nativen Apps. Vielmehr wird plattformunabhängig gestaltet und konzeptet. Das heißt, wir sehen immer häufiger das Hamburger Icon auf mobilen Webseiten. Wer mehr zur Geschichte des Hambuger Icons erfahren möchte und sich auf diese Zeitreise begibt, dem sei "Who Designed the Hamburger Icon" empfohlen.
  • Designprinzipien, die allgemein gelten, werden auch im mobilen Web angewendet. Aktuell sieht man viel den Parallaxe-Effekt. Auch auf dem Smartphone funktioniert das Prinzip, wie zum Beispiel die Seite parallax.js zeigt.
  • Gesten kommen zum Einsatz, um eine benutzerfreundliche User Experience zu erlangen. Die Benutzer erwarten, dass man zum Beispiel wischen oder auf- und zuziehen kann.
  • Es wird flach. Android 4.0 und iOS 7 machen es vor - das mobile Web geht mit. Flat Design ist in vollem Gange. Klickt man durch das Sammelsurium an mobilen Webseiten auf http://www.mobileawesomeness.com/listings/gallery/24/1/ sticht dieser Trend eindeutig ins Auge. Gut zu sehen am grün farbenen Button auf m.speisekarte.de.
  • Design im Browser: Der Workflow zum Erstellen von mobilen Webseiten hat sich geändert. Ein cross-funktionales Team aus UX Designern und Entwicklern erstellt das Frontend. Der Vorteil: verschiedene Perspektiven und das Optimum aus beiden Welten fließt ein. Nach diesem Prinzip begann übrigens auch Ende 2012 die Überarbeitung von m.speisekarte.de.

userinterface 2013

Screenshot der aktuellen Version von speisekarte.de für Smartphones. Im mittleren Screenshot sind einige Listeneinträge gelöscht, da er sonst zu lange wird.

Was bleibt? Was wird kommen?

Wir können definitiv sagen, dass wir nach wie vor Punkte aus dem Jahr 2007 auch im Jahr 2014 berücksichtigen, wenn wir Webseiten für mobile Endgeräte gestalten und konzepten. Dazu gehört zum Beispiel, dass der sichtbare Bereich immer noch extrem wichtig ist. Allerdings haben wir neue Gestaltungsmöglichkeiten, um diesen noch attraktiver zu machen und besser zu nutzen. Webseiten werden auch 2014 so gelayoutet, dass sie vertikal scrollbar sind. Aber wer weiß, vielleicht wird sich das in Zukunft ändern? Eine Auswahl weiterer (Future) Buzzwords aus dem User Experience Bereich sind:

Gibt es weitere Begriffe, die eurer Meinung nach unbedingt dazu gehören? Noch mehr Future Buzzwords und vor allem spannenden Vorträge erwarten uns auf der diesjährigen Mobile First Night, die am 22. Oktober im Rahmen der Web Week Nürnberg stattfinden wird.

Nina

Freigegeben in Blog