LimeSoda Blog ☰ Zeige Kategorien

Mobile UX and Maps

Die Sache mit der Karte auf mobilen Devices

Karten sind ein wichtiger Bestandteil vieler Webseiten. Leider werden diese auf mobilen Endgeräten oft zu einem massiven User Experience (UX) Problem.

Das Problem

Scrollen auf mobilen Devices ist seit Einführung von Touchscreens ganz natürlich. Kommt man allerdings zum Abschnitt einer Karte und füllt diese zudem noch das ganze Display des Geräts aus, fühlt sich der Benutzer plötzlich sehr hilflos. Es ist zwar auch möglich das Scrollen auf einer Karte einer Webseite zu deaktivieren, jedoch stößt man hier auf ein weiteres UX Problem, da viele Benutzer auch ein Herumklicken auf einer Karte wünschen um sich vor allem auch zu orientieren.

Vielleicht haben auch Sie schon Erfahrung mit einer scrollbaren Karte gemacht?

Folgendes Szenario:

Sie scrollen auf Ihrem mobilen Gerät wie üblich auf einer Webseite nach unten. Als Sie den Bereich der Karte erreichen, wird Ihnen klar dass Sie unerwartet in einer Karte navigieren. Dabei treten zwei Usability Probleme auf einem Schlag auf: zum einen befinden Sie sich nicht mehr auf dem Kartenausschnitt, welcher vom Webseitenbetreiber für Sie zentriert wurde und zum anderen können Sie nicht wie gewohnt zum Webseitenende scrollen ohne mühsam über den Randbereich des Kartenausschnittes zu tippen.

Im Internet Jargon spricht man in so einem Fall von einer Art Hijacking. In Verbindung mit Webseiten bedeutet dies: eine gewaltsame Übernahme der Kontrolle über die Seitennavigation durch die Webseite selbst. Auf einem Desktop PC lässt sich dieses Problem meist leicht beheben indem man auf einen Bereich der Webseite klickt, welcher nicht von der Karte eingenommen wird. Bei mobilen Devices ist dies meist ein Problem, da die Karten meist auf dem gesamten Bildschirm dargestellt werden.

Einfache Lösungen um das Problem zu umgehen

Eine recht simple und einfache Lösung dieses Problem zu umgehen ist beispielsweise beim Laden der Karte diese mit einem transparenten Overlay zu bedecken. Dieses Overlay beinhaltet einen Button welcher die Kartennavigation aktivieren lässt. Der Benutzer kann nun wie gewohnt in der Karte navigieren, wenn dieser das möchte. Durch einen weiteren Klick auf den Button kann das Overlay wieder aktiviert werden und es kann wie gewohnt mit der Seitennavigation fortgefahren werden.

 

Alternativ kann auch einfach mehr Platz zum Scrollen, beispielsweise am rechten Rand der Karte, eingefügt werden. Des Öfteren findet man auch Lösungen, dass die Karte zentriert platziert wurde und links und rechts mehr Platz gegeben wird, bei sehr kleinen Displays kann dabei wiederum der Kartenausschnitt sehr klein werden, weswegen für kleine Touchscreens eine Variante mit einem Button wahrscheinlich die beste Lösung wäre.

 

Zusammenfassung

Karten gehören zu einem der wichtigsten Elemente einer jeden Webseite, werden sie jedoch nicht richtig aufbereitet, können sie schnell zur Falle werden und ein schlechtes Benutzererlebnis beim Webseitenbesucher hervorrufen. Ist eine Karte nicht scrollbar, widerspricht dies den herkömmlichen Konventionen und einige Benutzer fühlen sich somit auf den Schlips getreten. Dies kann soweit führen, dass diese unter anderem Vermutungen anstellen, dass die Karte defekt sein könnte oder der Webseitenbetreiber sich nicht die Mühe gemacht hat eine moderne interaktive Karte einzubauen und sich lieber mit Old-School-Screenshots einer Karte begnügt.

Es gibt viele Möglichkeiten Karten modern für Ihre Webseite aufzubereiten. Wie in unserem Beispiel gezeigt, gibt es schöne spielerische Lösungen wie jene des Buttons und des Overlays. Sicher gibt es auch Personen welche diese Meinung nicht vertreten und für welche ein statisches Bild einer Karte ausreichend ist. Zwar vertreten wir von LimeSoda die Meinung, dass zuviel Interaktion oftmals besser ist als zu wenig. Bei mobilen Karten darfs es allerdings gerne etwas mehr Interaktion sein, damit ein reibungsloser Ablauf zwischen Benutzer und interaktiven System gewährleistet werden kann. So werden beide Seiten zufriedengestellt; jene die sich durch eine Karte navigieren möchten und jene denen es egal ist.

 

Verwendete Text-Quelle:

  • http://blueskysessions.com/2015/04/28/better-map-ux-prevent-scroll-hijacking

Verwendete Video-Quelle:

  • Video 1: LimeSoda Screenvideo
  • Video 2: http://blueskysessions.com/2015/04/28/better-map-ux-prevent-scroll-hijacking
  • Video 3: LimeSoda Screenvideo

Hinterlasse einen Fingerabdruck für die Ewigkeit: Ein Kommentar bei LimeSoda!

(*) Pflichtfeld

Bewirb dich bei uns!

LimeSoda.
Digitalagentur in Wien.

Bewirb dich jetzt!
Markus Reitmair

Verpasse nicht den nächsten Blog-Post von Markus!

Jetzt zum LimeSoda-Newsletter anmelden