morefire
MENÜ

Inbound Marketing: Mobile Usability [inkl. Checkliste]

Nachdem wir letzte Woche den Faktor Mensch stärker in dem Mittelpunkt gerückt haben und die Usability aus der Perspektive der Technik, Navigation, Inhalte und Services durchleuchtet haben, widme ich mich heute mal wieder dem mobilen Sektor. Im 5. Teil unserer Inbound Marketing Reihe dreht sich also alles um die Nutzererfahrung aus der Perspektive der User mobiler Webseiten.

Wie wir unsere Nutzer dazu zwingen, auf unserer Website zu verbleiben und glücklich zu sein, hat Marcel in seinem letzten Artikel detailliert dargelegt. Die grundlegenden Parameter lassen sich streng genommen 1:1 auf den Sektor mobiler Webseiten übertragen, nichts desto trotz gilt es jedoch, einige zusätzliche Aspekte zu berücksichtigen, die gerade in mobilen Situationen eine hohe Wirkung auf die Nutzererfahrung haben.

 

Ladezeiten

Ich kann es nicht oft genug wiederholen: Ladezeiten sind das A-und-O, wenn es um die mobile Usability geht. Betrachten wir als Marketer und SEOs als erstes häufig den Faktor Pagespeed in Bezug auf Googles Rankingkriterium, entscheidet die Performance in der mobilen Situation vor allem für den Nutzer darüber, ob er die Seite konsumiert oder gleich wieder verlässt. Im Idealfall läd die mobile Website also auch bei einer geringen GPRS Verbindung so schnell, dass Sie einer raschen Betrachtung in einer mobilen Situation, in der der Nutzer wenig Zeit mitbringt, gerecht wird. Schafft die Seite es nun noch, die gewünschte Information präsent und gezielt auf der aufgerufenen Unterseite zu präsentieren, habe ich als Webseitenbetreiber schon einiges richtig gemacht. Aber dazu gleich mehr.

Der Faktor Pagespeed wird aktuell wieder durch die Verbreitung von responsive Webdesign zu einem ernster zu nehmenden Problem. Die reine Layout-Anpassung auf mobilen Endgeräten birgt die Gefahr, dass unabhängig vom Stylesheet das identische Markup der Desktop Website ausgeliefert wird, was zu einer Art Overhead führen kann, da auch Ressourcen wie beispielsweise Bilder größer ausgeliefert werden, als sie tatsächlich benötigt werden. Wer seine Pagespeed auch auf dem Smartphone mit eingeschränkter Verbindungsgeschwindigkeit testen möchte, kann zu dem Bookmarklet von YSlow greifen, was sich in der Praxis sehr bewährt hat. 4 Mobile Performance Regeln hat zudem Michael Sinner im Reachblog erläutert.

 

Skalierbarkeit

Mit der Skalierbarkeit ist es so eine Sache: Auf der einen Seite haben sich die Nutzer von Touchscreen-basierten Geräten mittlerweile an die Pinch-to-Zoom Geste via Daumen und Zeigefinger gewöhnt, auf der anderen Seite birgt die Notwendigkeit genau dieser Fingerbewegung zwei grundlegende Gefahren: Zum einen muss der Nutzer in aller Regel die zweite Hand dazu nehmen um alle Inhalte der Website in den Viewport zu rücken. Das kann in bestimmten Situationen (beispielsweise in der Straßenbahn) dazu führen, dass ich mir als User die gewünschte Information lieber von einer alternativen Website hole, bei der keine Skalierung des sichtbaren Bereichs erforderlich ist. Besonders elegant gestaltet Google seine 1-Finger-Zoom-Geste in der aktuellen Maps-App übrigens, die genau diese Problematik aufgreift:

Zum anderen – und hier verbirgt sich das eigentliche Problem – birgt die Notwendigkeit bestimmte Seiteninhalte nur über einen Zoom überhaupt lesbar zu gestalten immer die Gefahr, dass genau dieser Schritt vom User nicht akzeptiert wird. Ganz zu schweigen von den technischen Problemen, die sich z.B. durch Framesets oder Lightboxen bei der Zoom-Geste ergeben. Kurzum: wir sollten bei der Gestaltung der mobilen Website ganz einfach auf die feste Skalierung auf die Displaybreite des verwendeten Endgerätes achten und die manuelle Skalierung unterbinden:

<meta name=“viewport“ content=“width=device-width, user-scalable=no“>

 

Layout und Navigation

Smartphone-Nutzer haben sich längst daran gewöhnt, dass jeglicher Inhalt in vertikaler Ausrichtung präsentiert wird und vorzugsweise in diese Richtung navigierbar ist. Das bedeutet, dass bei einer festen Skalierung (s.o.) auch das horizontale Scrolling für den Nutzer nicht mehr notwendig ist. Webdesigner/-developer müssen bei der Entwicklung nur darauf achten, dass sich sämtliche Inhalte bei der Geräteausrichtung auch wieder korrekt an die Display-Dimensionen anpassen und nichts verloren, überlagert oder gestreckt wird.

Was die tatsächliche Hauptnavigation angeht, verändern sich ein wenig die Spielregeln im Vergleich zur Desktop Variante. Im Header platziert würden horizontal angeordnete Navigationspunkte den Content stark nach unten verschieben und somit wertvollen Displayplatz verschwenden. Die elegantere und mittlerweile zu einer Art Standard etablierte Lösung ist die Gestaltung über ein alternatives Dropdown Menu. Diese hat den Vorteil, dass der eigentlichen Content den gesamten, stark eingeschränkten sichtbaren Bereich ausnutzen kann und nur bei Bedarf von der Navigation überlagert wird. Die Navigation selbst sollte dabei selbstverständlich wenig verschachtelt sein und nur die wichtigsten Haupt-Menupunkte auflisten.

nav

 

Gesten ,Buttons, Click2Call

Gesten haben sich bei den zahlreichen mobilen, nativen Anwendungen noch zu keinem echten Standard entwickelt, bereichern an vielen Stellen aber ungemein die Nutzererfahrung (siehe bspws. Google Maps). Wer die Möglichkeiten hat, etwa zur Vor- und Zurücknavigation in einer Bildergalerie eine einfache Wischgeste zu implementieren trägt damit möglicherweise zur mobilen Nutzerfreundlichkeit seiner Website bei. Wer sich hier etwas einlesen möchte, dem empfehle ich den Artikel auf Silicon-Beach Training über Touch-Gestures im Webdesign.

Nichts ist frustrierender als das versehentliche an-touchen des falschen Navigationspunktes oder eines winzig kleinen Textlinks; das kennt jeder Smartphone-Nutzer! Wer seine User davor bewahren möchte, sollte sich beim Design seiner mobilen Website an einer einfachen Grundregel orientieren:  Ist der Daumen stets in der Lage, jeden Winkel des sichtbaren Bereichs zu erreichen und ist jeder Link/Button/Formularfeld groß genug gestaltet, dass er problemlos vom Daumen angeklickt werden kann? In punkto Formulare gibt es noch einen Aspekt zu berücksichtigen: viele aktuelle Smartphones (etwa das iPhone) bieten verschiedene Tastatur-Layouts für unterschiedliche Eingabefelder – wie beispielsweise ein separates Numpad. Diese lassen sich alle durch das Auszeichnen verschiedener input-types der einzelnen Formularfelder ansprechen und werden dem Nutzer so immer passend dargestellt. Hiervon sollte unbedingt Gebrauch gemacht werden!

Eine der primären Funktionen eines Smartphones ist noch immer das Telefonieren, auch wenn wir in Zeiten von UMTS und LTE immer mehr Gebrauch von alternativen Lösungen machen. Das eigentliche Telefonat ist nach-wie-vor ein starker Lead-Genarator. Warum hiervon also keinen Gebrauch machen, wenn es um die eigene mobile Strategie geht? Click2Call Actions sind hierzu eine der einfachsten und nutzerfreundlichsten Möglichkeiten überhaupt: Jede abgebildete Telefonnummer sollte klickbar gestaltet werden und einen direkten Anruf beim lokalen Shop, Service-Center o.Ä. ermöglichen.

 phone

 

Lokale Landingpage und native Features

Ich habe es schon häufiger gepredigt und auch Sebastian Soscha, die Suchradar Ausgabe 32 sowie zahlreiche Fachbeiträge sind sich einig: Mobile Suchanfragen sind häufig stark lokal ausgeprägt. Das bedeutet, dass der mobile User häufig nach einer Information sucht, die einen lokalen Bezug zu seiner unmittelbaren Umgebung hat: sei es eine Adresse, eine Telefonnummer, eine Ladenöffnungszeit, eine Umgebungskarte oder eine Wegbeschreibung. Um dem Bedürfnis dieser mobilen Suchanfrage gerecht zu werden und die beste Nutzererfahrung hierfür bereit zu stellen, empfiehlt sich neben dem obligatorischen Places-Eintrag das Anlegen einer speziellen lokalen Landingpage, die alle lokal bezogenen Informationen bündelt. Wer darüber hinaus Gebrauch von den nativen Features aktueller Smartphones macht, kann seinen Nutzern beispielsweise eine genaue Wegbeschreibung via GPS-Ortung und Kompass-Navigation anbieten oder sogar die Kamera für Augmented-Reality Ansätze verwenden. Der sinnvolle Einsatz dieser Features ist immer auch Branchen-abhängig, kann in dem einen oder anderen Fall aber zur Steigerung der Usability beitragen.

lokal

 

Weiterleitungen

Permanente oder auch temporäre Weiterleitungen werden nirgendswo so häufig falsch angewendet, wie im Falle von mobilen Webseiten. Eine Subdomain-Strategie hat sich bis zum tatsächlich Durchbruch von responsive Webdesign zum quasi-Standard entwickelt. So leiten zahlreiche Webseiten auf mobilen Endgeräten von der Desktop-URL zur mobilen URL, beispielsweise m.domain.de, weiter. Völlig unabhängig davon, wie der Googlebot nun damit umgeht, macht es aus Benutzersicht absolut Sinn, jede einzelne Weiterleitung so zu gestalten, dass Sie dem mobilen Nutzer auch genau den Inhalt ausliefert, den er gerade erwartet. Ein hoher Garant für einen Webseiten-Absprung ist die permanente Weiterleitung von jeder Desktop-URL zur mobilen Startseite oder einer sonstigen Splash-Page.

 

Content

In welchem Umfang der Content auf der mobilen Website nun ausgestaltet ist, ist eine andere Frage. Leite ich den Nutzer zu allererst einmal auf die mobile URL, die er in stationärer Form in den mobilen Suchergebnissen gefunden hat, habe ich Ihn zumindest schon einmal dort, wo er (hoffentlich) hin wollte. Was ihn nun dazu bewegt dort auch zu bleiben orientiert sich streng genommen erst einmal an der Frage, wie sehr seine Suchanfrage befriedigt wurde und darüber hinaus dann an all dem, was Marcel letzte Woche im Detail ausgeführt hat.

In Bezug auf Umfang und Auswahl des Contents, schleichen sich jedoch ein paar abweichende Parameter in die Betrachtung aus der mobilen Perspektive ein. Dass wir geilen Content brauchen, wissen wir jetzt mittlerweile alle. Der mobile User ist dabei aber auf einen raschen und sehr gezielten Informationsbezug aus, der weit entfernt ist von „low-priority content“ oder ganz einfach Inhalten, die sich außerhalb des Fokus der Nutzerintention befinden. Das Stichwort ist also die Intention, zu der wir uns beispielsweise einen potentiellen Kinobesucher vorstellen müssen, der Zuhause am Desktop PC wohlmöglich nach einer umfangreichen Filmkritik inklusive User-Generated Content, Pressestimmen und Trailer sucht. Unterwegs dürfte der gleiche Nutzer in erster Linie vielleicht noch an einem Sterne-Rating und der nächsten Kino-Vorstellung des begehrten Blockbusters interessiert sein.

switchDas bedeutet aber nicht, dass wir jedem Nutzertyp seine Intention aufzwingen dürfen, denn diese können wir allemal annehmen. Daher sollte der Zugang zur Desktop-Variante der Website immer zur Verfügung stehen – beispielsweise über einen Switch im Seitenfooter. Eine Alternative ist es, die Entscheidung über das Template dem Nutzer selbst zu überlassen, z.B. über ein Popup beim Einstieg. Hiervon bin ich persönlich jedoch weniger ein Freund, da der Nutzer im Voraus nie weiß, was Ihn erwartet und wohlmöglich instinktiv immer auf „abbrechen“ oder „nein“ klickt.

 

Fazit:

Und auch heute gibt’s zum Fazit von uns wieder eine Checkliste zum herunterladen, mit der ihr die Usability eurer mobilen Website noch einmal überprüfen könnt. Viel Erfolg damit 😉

usability-mobile-checkliste-download

 

Jasper Thibaut ist Head of SEO bei morefire und mobile SEO Spezialist. Beruflich wie auch privat setzt er sich verstärkt mit dem mobilen Web und Disziplinen des mobile Marketings auseinander. Mehr von ihm gibt es auf jasper-thibaut.de

4.88 / 5 (8 votes)

Schreibe einen Kommentar

Loading Facebook Comments ...

4 Kommentare

Gerd schrieb am 13. Mai, 2013 @ 13:41

Welche Möglichkeiten gibt es die Ladezeiten zu beschleunigen. Oder besser gesagt, was muss man tun um die Geschwindigkeit zu erhöhen. Da ich Neuling auf diesem Gebiet bin, bitte ich Euch, diese vielleicht doofe Frage zu entschuldigen.

Jasper Thibaut schrieb am 14. Mai, 2013 @ 18:04

Hallo Gerd,

wie im Artikel erwähnt, bitte prüfe deine mobile Website mit dem Bookmarklet von Yslow und Befolge im Anschluss die Optimierungsratschläge. Eine Alternative ist natürlich auch das Pagespeed Tool von Google bei dem du mittlerweile auch nen Mobilen Performance-Test durchführen kannst (siehe oben rechts den switch). Der Insights Report gibt hierzu auch sehr gute Ratschläge, die nach Priorität sortiert sind. Zudem haben ich noch einen Artikel im Reachblog hier in meinem Text verlinkt, der mehrere mobile performance Regeln erklärt.

Damit dürftest du eigentlich schon sehr weit kommen 😉
Viel Erfolg

katharina schrieb am 16. Mai, 2013 @ 9:33

Wenn es um die Usability für mobile Endgeräte geht gibt es viel zu beachten. Bei mobilen Projekten können einige Nutzerprobleme auftreten. Die erwähnten Richtlinien zur Optimierung sind ein guter Anfang, jedoch ist neben der klassischen Usablilty auch die User-Experience eines Produkts entscheidend. Smartphone- oder Tabletnutzer haben spezielle Erwartungshaltungen und die gilt es zu erfüllen. Mit Online Usability Tests können mobile Webprojekte innerhalb kurzer Zeit zielgruppenorientiert getestet werden. RapidUsertests zeigen das Verhalten der Tester während der Nutzung, so können präzise Optimierungsvorschläge gegeben werden. Neben Usability Problemen können damit auch Schwächen der User-Experience eines Produktes aufgedeckt werden. (siehe http://rapidusertests.com/static/usability-test/remote-usability-testing.html/apid=37)

Christian schrieb am 24. Mai, 2013 @ 20:37

Hallo Jasper,

ich programmiere zwar selbst keine mobilen online Seiten, dennoch sprichst du für mein Empfinden die richtigen Dinge an. Gerade die Schnelligkeit mancher Seiten ist mir ein Dorn im Auge. Wenn die Seite zu lange braucht bin ich auch ganz schnell wieder verschwunden. Danke Dir für den tollen Artikel.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Loading Disqus Comments ...