< Zurück zur Übersicht

Mein erstes Tablet habe ich mir vor etwa eineinhalb Jahren gekauft, damals als reines Arbeitsinstrument. Ich wollte die Websites meiner Kunden auf lückenlose Responsivität testen können – und zwar unter Realbedingungen. Selbstverständlich kann man auch mit dem Browser seines Vertrauens verschiedene Endgeräte simulieren – Android Smartphones & Tablets, iPhone und iPad etc. – aber lange nicht jeder Bug und nicht jede Usability-Hürde fällt einem in der Simulation tatsächlich auf.

Was viele Designer, Produktentwickler und Conversion Optimierer bei der Konzeption einer Website nämlich vergessen, ist, wie anders sich Tablet-User benehmen als Desktop-User.

Während ich als PC Nutzer i.d.R. an einen Standort gebunden bin und mich dadurch immer in einer ähnlichen kontextuellen Situation befinde – sei es in einem Arbeitsumfeld oder zuhause an meinem Schreibtisch – sind Tablet-User hier sehr viel flexibler und damit auch unberechenbarer.

Nicht nur variieren Ort und Gemütsverfassung, sondern auch die Qualität meiner Internetverbindung. So kann es passieren, dass ich Samstags abends gemütlich bei einem Gläschen Wein auf dem Sofa sitze und dabei meine Lieblings-Online-Stores durchstöbere. Genauso gut passiert es aber auch, dass ich mein Tablet unterwegs in der Bahn oder im Café raushole, weil mir spontan etwas einfällt, dass ich unbedingt noch fix bestellen (oder zumindest recherchieren) muss.

Während mich “normale” Ladezeiten im WLAN Zuhause nicht stören und ich mich über schicke hochauflösende Bilder freue, kann meine mobile Verbindung dafür gerne mal schlichtweg nicht ausreichen. Wer hat schon mal versucht, in der Bahn zwischen 2 Funklöchern eine Website aufzurufen? Das macht keinen Spaß, kann ich euch versichern!

So kommt es, dass ich als User frustriert abbreche, weil nach gefühlt 2 Minuten die Hälfte der Bilder immer noch nicht geladen ist und die Seite weiterhin unbedienbar bleibt. Besonders in Online Shops, bei denen ich mich weit durch die Seite navigieren und zwangsläufig viele Seiten aufrufen muss (Kategorien, Produktdetailseiten, Warenkorb…), ist es ein wahrer Krampf, wenn jeder Seitenaufruf eine halbe Ewigkeit dauert. So etwas tut sich der gemeine Nutzer nur an, wenn er das Objekt seiner Begierde nur jetzt und nur hier kaufen kann. Veranstaltet der besuchte Shop aber gerade keine super exklusive once-in-a-lifetime Aktion, dann steigt auch mit jeder Sekunde Ladezeit die Wahrscheinlichkeit für einen Absprung.

Bilder sind nicht der einzige ladezeitbestimmende Faktor, aber dennoch sollte man sie nicht unterschätzen. Je nachdem, wie viele Bilder man verwendet, welche Auflösung sie haben, wie man das Caching löst und ob man z.B. Lazy Load verwendet, kann man großen Einfluss auf die Ladezeit nehmen.

Auf keinen Fall sollte man mobil einfach alle Bilder ausblenden, denn Bilder sind um ein vielfaches schneller erfassbar als Text. Man kann mit ihnen eine Stimmung erzeugen, Zusammenhänge verdeutlichen oder Produkte beschreiben. Sie sind maßgeblich für das Empfinden der Website und bei Online Shops für die Kaufentscheidung verantwortlich – wer würde schon ein Produkt kaufen, dass er vorher nicht gesehen hat?

Nichts desto trotz sollte man seine Website einmal dem mobilen Praxistest unterziehen und differenzieren: Welche Bilder benötige ich auch mobil unbedingt? Welche sind überflüssig oder stören schlimmstenfalls ganz?

Produktbilder sind essentiell und sollten unbedingt gezeigt werden. Um dennoch Ladezeiten zu sparen, kann man auf Kategorieebene mobil z.B. einfach weniger Produkte pro Seite anzeigen oder sie erst beim scrollen per Lazy Load nachladen. So wird gewährleistet, dass sich der sichtbare Bereich schnell aufbaut und benutzbar ist.

Ein mit Bedacht gewähltes Headerbild ist ein erprobtes Mittel, um Emotionalität und Stimmung zu erzeugen und so die Kaufentscheidung eines Besuchers positiv zu beeinflussen. Aber während ich auf dem Desktop i.d.R. darunter noch genug Platz habe, um schon einmal mein Angebot im Bereich above-the-fold zu präsentieren, sieht das ganz anders aus, sobald ein Nutzer z.B. mit dem Tablet (oder Smartphone) im Querformat surft. Plötzlich nimmt das Headerbild statt einem Drittel über 80-90% des sichtbaren Bereichs ein und das eigentliche Angebot darunter gerät völlig aus dem Fokus.

Begehe ich als Programmierer dann auch noch den Fehler, dass bei einem Klick auf die Paginierung sich die Kategorie meines Shops so neu lädt, dass der Nutzer wieder ganz oben auf der Seite landet (anstatt bei den neu geladenen Produkten), ist nerviges – und vor allem vollkommen unnötiges – scrollen vorprogrammiert.

Abb. 1: Seite 2 der Kategorie im Bereich Laptop-Taschen www.dakine-shop.de, besucht mit einem 8” Tablet im Querformat. Der User startet mit dem Aufruf der 2. Seite wieder ganz oben – Kopfzeile, Navigation, Headerbild und Filtermöglichkeiten nehmen den gesamten sichtbaren Bereich ein, so dass die neu hinzugekommenen Produkte in den Bereich below-the-fold rutschen (Quelle: https://www.dakine-shop.de/Taschen/Laptoptaschen/?p=2&n=12 Stand 20.04.2018)

Darum gilt:

• Prüfe, ob dein Angebot trotz Headerbild auch im Landscape-Modus noch im Bereich above-the-fold zu sehen ist. Wenn nicht: Begrenze die Höhe des Bildes oder entferne es womöglich ganz.
• Scrolle bei Benutzung der Pagination nicht automatisch an den Seitenanfang hoch, sondern zeig dem User gleich die neuen Produkte.

< Zurück zur Übersicht