Mobile Usability - Schritt für Schritt zu zufriedeneren Nutzern

Das Leben ist in den letzten beiden Jahrzehnten spürbar aktiver und flexibler geworden. Während noch zu Beginn der 90er Jahre meist in fester Tagesablauf implementiert war – morgens zurecht machen, frühstücken, zur Arbeit, anschließend wieder nach Hause, um dort zu essen und den Rest des Abends mit einander zu verbringen – werden heute viele Aktivitäten unterwegs erledigt oder in kleine Zeitfenster verlagert. Die fortschreitende technische Entwicklung hin zu mobilen Endgeräten begann mit den ersten Piepern, Handys und Taschencomputern, wurde fortgeführt zu deren Weiterentwicklung und resultiert heute in einer Verschmelzung aus leistungsfähigem Computer und handlichem Mobilgerät.

Dieses wird genutzt, um in der Bahn die E-Mails zu kontrollieren, in der Mittagspause schnell den Spielstand des Fußballspiels von gestern Abend nachzusehen, auf dem Nachhauseweg einen Blick auf das Konto zu werfen, … Passé die Zeit, in der man sich zum Telefonieren über das Festnetztelefon verabredet hat, Kontoauszüge holen musste und ein Notizbuch mit sich herum trug.

In der heutigen Zeit nutzen rund 58% der deutschen Internetnutzer ab 14 Jahren das mobile Internet über ihr Smartphone (Quelle: Statista für das Jahr 2012 auf Basis von über 1600 Befragten). Selbst Entwicklungen, die früher undenkbar schienen, wie E-Mails mit rechtlich eindeutiger Absender-Identifizierung, die so genannte De-Mail, und personalisierbares Internetradio wie spotify, gehören heute zum Alltag vieler Nutzer des mobilen Internets.

Umso wichtiger, dass Sie nicht vernachlässigen, Ihren Internetauftritt auch als optimierte, nützliche und ansprechende mobile Version anzubieten. Rund 55% der Internetnutzer geben laut Google an, dass ein Internetauftritt, der sie frustriert, in ihren Augen die Wertigkeit der gesamten Marke beeinträchtigt. Hingegen sagen laut gleicher Studie 67% von sich, dass eine mobil-optimierte Webseite sie eher ein Produkt kaufen oder eine Dienstleistung in Anspruch nehmen lässt.

Ganz abstrakt sind Ihre Kunden und Nutzer für Sie also nicht – sie entwickeln und verändern sich, haben Ansprüche und Wünsche. Optimieren Sie für sie, sollten dies alles beachten, um sie zufrieden und glücklich zu machen. Lassen Sie uns einen sympathischen Nutzer ins Auge fassen, um den wir uns im Folgenden ausgiebig kümmern werden, ihn mal unglücklich, mal zufrieden machen – und der keine anonyme IP ist, sondern einen Charakter hat. Nennen wir ihn Paul.

 

Der erste Eindruck

Die Chance, einen nachhaltig positiven ersten Eindruck auf Ihre Nutzer zu machen, haben Sie nur, wenn diese überhaupt Ihre mobile Seite zu sehen bekommen. Was geschieht, wenn ein Nutzer über die mobile Google-Suche auf Ihre Webseite gelangt – wird er durch ein Skript auf die mobile-Version umgeleitet oder landet er erst auf der Desktop-Version und muss selbst den Link zur mobilen Seite finden?

Paul wird sich vermutlich für eine anderes Webangebot entscheiden, wenn er bemerkt, dass die Seite nicht für sein mobiles Endgerät optimiert ist. Und vielleicht frustriert ihn dieses Ergebnis so sehr, dass sein Verhältnis zu Ihrer Marke nachhaltig beeinträchtigt wird.

 

Automatische Weiterleitung zur mobilen Version

Mit Hilfe von Skripten wie detectmobilebrowsers.com kann direkt auf dem Webserver oder dem Client erkannt werden, ob der Zugriff auf die Webseite über ein mobiles Endgerät oder einen Desktop-PC erfolgt, so dass sofort eine Weiterleitung auf die mobile Seite erfolgen kann. Ist Paul also mit einem Smartphone online und ruft die Seite auf, wird er ohne es zu merken auf die mobile Version umgeleitet. Ruft er zuhause am Desktop-PC die gleiche Seite auf, sieht er die Desktop-Version.

Es existieren zwei Möglichkeiten, mobil-Seiten zu erstellen: Entweder legt man sie in einem Verzeichnis ab (URL-Struktur xyz.de/mobile oder xyz.de/tablet) oder man verwendet eine Subdomain (URL-Struktur mobile.xyz.de oder tablet.xyz.de). Allerdings besitzt die Verwendung einer Subdomain den Vorteil, dass, falls Ihre Desktop-Seite einmal von Google abgestraft werden und dadurch niedriger ranken sollte, Ihre mobil-Seite in den meisten Fällen nicht davon betroffen ist.

Ist die Entscheidung getroffen, wo die mobile Seite liegen soll, stehen Sie vor der Wahl des Webdesigns. Ein eigenes Webdesign für Ihre mobile Seite zu entwickeln ist aufwendig und kostenintensiv, jedoch ist es in den meisten Fällen auch die ansprechendste Lösung und Sie können jede Ihrer Vorstellungen umsetzen. Möchten Sie dennoch nicht einen solchen Aufwand haben, können Sie sich für ein responsive Webdesign entscheiden. Auf diesem Wege müssen nicht zwei Designs parallel betreut werden, da das Design Ihrer Desktop-Version so ausgelegt ist, dass es sich beim Betrachten mit Hilfe eines mobilen Gerätes automatisch an dessen Bildschirmgröße angepasst wird. Flexible Elemente können dann unter- statt, wie in der Desktop-Version, nebeneinander angeordnet sein. Allerdings wird das responsive Webdesign derzeit noch weiterentwickelt, so dass es hier Entwickler benötigt, die up-to-date und kreativ sind.

 

Optimierung von Buttons, Grafiken und Texten

Wie die meisten Smartphone-Nutzer, verwendet Paul zum Surfen lediglich den Daumen. Die Buttons auf Ihrer Seite sollten hierfür optimiert sein: In seinen Human Interface Guidelines (HIG) empfiehlt Apple, jeder Button sollte eine klickbare Fläche von 44 x 44 px aufweisen. Dies ist groß genug, um mit dem Daumen problemlos genau den Button auszuwählen, den man drücken wollte, und nicht versehentlich einen anderen anzutippen und eine andere Unterseite zu laden als beabsichtigt. Auch Paul empfindet es als frustrierend, einen Link auszuwählen und erst nach dem Laden der Seite festzustellen, dass er auf einer völlig anderen Unterseite gelandet ist, als er wollte. In diesem Fall muss er erst zurück, wodurch die Seite wieder neu laden muss, und erneut versuchen, den Link zu treffen. Hat Paul dabei nur ein schwankendes Internetsignal, kann dieser Vorgang so langwierig sein, dass er lieber ein anderes Webangebot aufruft.

Um solche Irrtümer, die den Nutzer Zeit und Nerven kosten, zu vermeiden, kann auch der Bereich um den Button herum so gestaltet werden, dass er berührungsempfindlich ist und ebenso auf die Unterseite führt.

Da das Platzangebot auf einer Smartphone-Version sehr begrenzt ist, sollten Sie möglichst wenige Links platzieren und ggf. einige in ausklappbaren Menüs, Dropdown-Menüs oder so genannten Karussells (siehe Bild unten) unterbringen, um die Seite übersichtlich und klar strukturiert zu halten. Gerade im “above the fold”-Bereich, also dem ohne Scrollen sofort sichtbaren Bereich der Seite, sollten nur die sehr wenige, wichtige Links zu finden sein.

Ein positives Beispiel für eine mobil-optimierte Seite gibt der Online-Händler Tchibo – hier würde sich auch Paul freuen:

Screenshot der Tchibo-Mobilseite

Was Sie von der Tchibo-Mobilseite lernen können:

  • Seitenbreite, Skalierung der Bilder und des ausklappbaren Menüs sind perfekt auf die Größe von Smartphone-Displays skaliert
  • ausklappbares Menü, das Links zum Log-In und zum Kundenbereich enthält
  • prominent platzierter Einkaufswagen erleichtert die Übersicht beim Online-Shopping
  • lediglich ein sichtbares Bild auf der mobilen Seite, welches als Bildlink Teil eines so genannten Karussells ist: mit Klick auf den blauen Pfeil wechselt das Bild und die weißen Punkte zeigen an, bei welchem Bild man sich gerade befindet
  • Links zu den wichtigsten Produktkategorien beginnen bereits above the fold und sind groß genug, um sie komfortabel auswählen zu können
  • Links, die in der Desktop-Version im Footer enthalten sind, befinden sich direkt unter den Kategorien und sind optisch durch eine kleinere Schrift abgetrennt
  • Möglichkeit, zur Desktop-Version zu wechseln, am Ende der Seite

Besonderen Wert sollten Sie auf Ihre Bilder und Texte legen. Bei gut gemachten mobil-Versionen gilt: so wenige Bilder und so wenig Text wie möglich. Jedes überflüssige Wort stört die intuitive Bedienbarkeit und lenkt ab, zumeist sind Navigationselemente und andere Links vollkommen ausreichend. Natürlich sollten Sie z.B. Produktbeschreibungen nicht vollkommen streichen, doch auch diese können vielleicht gekürzt werden. Textpassagen, die Sie nicht streichen, doch auch nicht auf der Startseite Ihrer mobile-Version haben möchten, können Sie auf eigene Unterseiten verschieben.

Dass auch mobile-Versionen mit mehr Links als im obigen Beispiel sehr ansprechend aussehen und eine gute Usability aufweisen können, zeigt die mobil-Seite des amerikanischen Präsidenten:

Screenshot der Obama-Mobil-Seite

Online liest Paul beinah nie Texte wirklich sorgfältig, sondern überfliegt sie nur. Noch stärker ausgeprägt ist dieses Verhalten beim Surfen mit einem Smartphone oder Tablet, wodurch die Titel von Textabschnitten noch mehr in den Vordergrund rücken und an Wichtigkeit gewinnen. Achten Sie darauf, dass zu lange Titel zu unschönen und schwer lesbaren Zeilenumbrüchen auf mobilen Geräten führen!

Auch die wenigen Bilder, die verwendet werden, können noch optimiert werden: Bei einem Karussell ist es möglich, immer nur das jeweils nächste Bild zu laden. So müssen nicht alle Bilder des Karussells sofort mit der Seite geladen werden und die Ladezeit verkürzt sich.

Möchten Sie gern Videos in Ihre mobile-Seite einbinden, sollten diese ebenfalls nicht mit der Seite geladen werden, sondern erst, wenn der Nutzer es separat auswählt.

Skripte und Stylesheets, die im Hintergrund laufen, müssen ggf. nicht permanent verwendet und nachgeladen werden – auch hier können Sie optimieren und so die Ladezeit verringern.

 

Hier besteht Verbesserungsbedarf

Nach dem positiven Beispiel, welches wir eben ausführlich vorgestellt haben, besteht nun Gelegenheit für Sie, sich selbst zu überprüfen: Wo besteht bei der folgenden Webseite noch Optimierungsbedarf? Übrigens: Die Wahl des Beispiels erfolgte willkürlich.

Screenshot der FC Hansa - Mobil-Seite

Hier die wichtigsten Punkte, die optimiert werden sollten:

  • eine eigene Unterseite oder ein eigenes Verzeichnis für die mobil-Seite
  • die Menge des Textes kann problemlos geviertelt werden
  • die Navigation sollte mobil-optimiert dargestellt werden und weitaus weniger Elemente enthalten
  • die Anzahl der Bilder und Links sollte drastisch reduziert werden
  • Banner sind in mobilen Versionen eher störend; sie sollten, wenn, im Bereich “beyond the fold” (also erst nach dem Scrollen sichtbar) sein
  • die Breite der Seite sollte auf die Displays mobiler Endgeräte abgestimmt sein
  • die mobil-Version sollte auf ihrer Startseite lediglich die nötigsten Navigationselemente und Links enthalten

Abschließende Tipps und Tricks

  • Zum Testen der Webseiten-Geschwindigkeit ist Google PageSpeed ein hilfreiches Tool
  • AdSense-Banner sollten nur beyond the fold angebracht sein
  • Auch für mobile-Versionen Ihrer Webseite besteht Impressumspflicht!
  • Bauen Sie einen “Zurück”-Button ein – einige Geräte wie z.B. diejenigen von HTC besitzen einen “Zurück”-Button, der in der Hardware eingebaut ist, bei den meisten anderen Geräten hingegen ist der Nutzer auf den Button auf Ihrer Seite angewiesen
  • Wenn Sie das Menü oben auf der Seite anbringen, spielt der unterschiedlich große “above the fold”-Bereich keine Rolle, dessen Darstellung von Display zu Display variiert


» Wie Sie mit guten Titeln Leser fesseln und höher konvertieren
» Einfluss des Nutzerverhaltens auf das Ranking bei Google