Onlineshop mobil optimieren: Design für den Daumen
Wer seinen Onlineshop mobil optimieren will, muss jeden Schritt des Kaufs für einen 6-Zoll-Bildschirm gestalten, der mit dem Daumen bedient wird: eine sichtbare Suche, einfache Filter, eine Produktseite, die Preis, Verfügbarkeit und Lieferzeit ohne Scrollen zeigt, einen Warenkorb-Button, der immer erreichbar bleibt, einen kurzen Checkout mit Express-Zahlung und schnelle Ladezeiten. Eine gute mobile Version ist keine verkleinerte Desktop-Seite, sondern eine eigene Customer Journey.
Das Smartphone ist längst der wichtigste Zugang zum Onlineshop, doch die Nutzererfahrung hinkt hinterher. Der aktuelle Mobile-E-Commerce-Benchmark des Baymard Institute, zuletzt im Juli 2026 aktualisiert und mit über 150 großen Onlineshops, bewertet 75 % davon mobil nur als „mittelmäßig“ – keiner erreicht die Bestnote. Wenn schon die Branchenriesen hier Schwächen zeigen, haben kleine und mittlere Shops viel Potenzial.
Dieser Leitfaden richtet sich an Shopbetreiber, Start-ups und Marketingteams mit WooCommerce, Shopify oder Webflow. Er ergänzt unseren CRO-Leitfaden zur Steigerung der Conversion Rate und konzentriert sich auf das, was mobil anders ist.
Warum die mobile Nutzererfahrung über Ihren Umsatz entscheidet
Jede Hürde wiegt auf dem Smartphone schwerer als am Desktop: kleiner Bildschirm, wechselnde Netzqualität, geteilte Aufmerksamkeit und mühsames Tippen. Ein verschachteltes Menü oder ein zu kleines Formularfeld reicht oft schon, damit Kunden den Kauf abbrechen.
Auch für SEO ist die mobile Version maßgeblich. Google crawlt und indexiert Websites inzwischen mit dem Smartphone-Crawler, wie das Search-Central-Team in seiner Mitteilung zum Abschluss der Mobile-First-Indexierung bestätigt hat. Inhalte, Links oder strukturierte Daten, die nur in der Desktop-Ansicht existieren, sieht Google praktisch nicht.
| Phase der Customer Journey | Typisches Mobile-Problem | Folge |
|---|---|---|
| Startseite und Navigation | Menü mit vier Ebenen, Suche hinter einem Icon versteckt | Kunden finden die Kategorie nicht und gehen |
| Produktliste | Vollbild-Filter ohne Übersicht der aktiven Filter | Unverständliche Ergebnisse, Abbruch der Suche |
| Produktseite | Preis und Lieferzeit erst nach drei Bildschirmlängen Text | Unsicherheit über Gesamtkosten, Wechsel zur Konkurrenz |
| Checkout | Kundenkonto Pflicht, falsche Tastatur in den Feldern | Kaufabbruch kurz vor dem Ziel |
Navigation und Suche: Mobile-UX-Tipps 1 bis 3
1. Ein echtes Suchfeld direkt auf der Startseite
Mobil suchen viele Besucher lieber, als sich durch Menüs zu klicken. Zeigen Sie oben ein vollständiges Suchfeld statt einer einzelnen Lupe, mit einem Suchen-Button direkt daneben. Eine Autovervollständigung sollte Tippfehler verzeihen und Kategorien vorschlagen: „Sneacker“ muss trotzdem Sneaker finden.
2. Kurze Menüs und klare Kategorien
Begrenzen Sie das Hauptmenü auf zwei sichtbare Ebenen, markieren Sie die aktuelle Kategorie und bieten Sie auf jeder Ebene einen Link „Alle anzeigen“ an. Verzichten Sie auf automatisch rotierende Slider auf der Startseite: Auf dem Touchscreen stören sie mehr, als sie nützen.
3. Ausreichend große Touch-Ziele
Das WCAG-2.2-Erfolgskriterium 2.5.8 verlangt mindestens 24 × 24 CSS-Pixel für Touch-Ziele oder genügend Abstand zwischen kleineren Elementen. Für wichtige Aktionen wie „In den Warenkorb“, Größenauswahl oder Menge sollten Sie großzügiger planen: 44 bis 48 Pixel gelten als komfortabel. Das ist auch für die Barrierefreiheit relevant – mehr dazu in unserem Leitfaden zum BFSG für Onlineshops.
Produktlisten und Filter auf dem Smartphone
4. Filter in einem Panel – mit Übersicht der aktiven Filter
Öffnen Sie Filter in einem seitlichen Panel oder einem Bottom Sheet und zeigen Sie die Trefferzahl schon vor dem Bestätigen an. Aktive Filter erscheinen danach als entfernbare Chips über der Produktliste. Laut Baymard fehlt diese Übersicht bei 66 % der getesteten mobilen Shops – Kunden wissen dann nicht mehr, was sie gerade sehen.
5. Produktkacheln, die man in einer Sekunde erfasst
Eine mobile Produktkachel braucht vier Dinge: ein scharfes Foto, einen kurzen Namen, den Preis und eine Kerninformation (verfügbare Farben, Bewertung, kostenloser Versand). Fassen Sie Varianten eines Produkts in einer Kachel zusammen, statt dasselbe T-Shirt zehnmal in zehn Farben anzuzeigen.
Mobile Produktseite: Was ohne Scrollen sichtbar sein muss
6. Wischbare Galerie mit schlanken Bildern
Produktfotos werden per Wischgeste durchblättert, Punkte oder Miniaturen zeigen die Position, und Zoomen funktioniert per Pinch-Geste. Liefern Sie Bilder in WebP oder AVIF in mobiltauglicher Größe aus. Wie das geht, zeigt unser Leitfaden zum Optimieren von Produktbildern.
7. Preis, Verfügbarkeit und Lieferzeit im sichtbaren Bereich
Der erste Bildschirm einer Produktseite beantwortet drei Fragen: Was kostet es, ist es lieferbar, wann kommt es an? Weisen Sie in der Nähe auch auf Versandkosten, Rückgabebedingungen und die akzeptierten Zahlungsarten hin – in Deutschland erwarten viele Kunden PayPal oder Kauf auf Rechnung. Lange Beschreibungen und technische Daten können darunter in aufklappbaren Bereichen stehen.
8. Ein fixierter Warenkorb-Button
Sobald Besucher in die Beschreibung oder die Bewertungen scrollen, verschwindet der wichtigste Button. Eine fixierte Leiste am unteren Bildschirmrand, genau im Daumenbereich, hält die Kaufaktion jederzeit erreichbar. Sie sollte den Preis wiederholen und bei Variantenprodukten die Auswahl von Größe oder Farbe öffnen, statt eine Fehlermeldung zu zeigen.
Warenkorb und Checkout mobil: weniger tippen, mehr verkaufen
9. Gastbestellung und Express-Zahlungsarten
Bieten Sie immer eine Gastbestellung an. Express-Buttons wie PayPal, Apple Pay, Google Pay oder Shop Pay direkt auf der Produktseite oder im Warenkorb übernehmen Adresse und Zahlung mit einer einzigen Bestätigung – auf dem Smartphone ein enormer Vorteil. Weitere Hebel gegen Kaufabbrüche finden Sie in unserem Beitrag zum WooCommerce-Checkout.
10. Die passende Tastatur für jedes Feld
Ein kleines technisches Detail mit großer Wirkung: Die HTML-Attribute type="tel", type="email", inputmode="numeric" und autocomplete öffnen die richtige Tastatur und erlauben dem Smartphone, Name, Adresse und Telefonnummer automatisch auszufüllen. Für die Postleitzahl genügt die Zifferntastatur, und das Land lässt sich anhand des Standorts vorauswählen.
11. Hilfreiche Fehlermeldungen an der richtigen Stelle
Prüfen Sie jedes Feld direkt nach der Eingabe und zeigen Sie die Meldung unmittelbar darunter an, mit einer konkreten Anleitung („Bitte geben Sie eine fünfstellige Postleitzahl ein“) statt eines allgemeinen „Ungültige Eingabe“ am Seitenanfang, das mobil niemand sieht.
Ladezeit und Reaktionsfähigkeit: Mobile-UX-Tipp 12
12. Core Web Vitals auf dem Smartphone bestehen
Ein langsamer Shop ist immer eine schlechte mobile Erfahrung, egal wie gut das Design ist. Google bewertet drei Core Web Vitals anhand echter Nutzerdaten. Seit März 2024 misst Interaction to Next Paint (INP), wie schnell eine Seite auf Tippen und Klicks reagiert – oft die Kennzahl, an der Shops mit vielen Skripten scheitern.
| Kennzahl | Was sie misst | Grenzwert „gut“ | Häufige Ursache mobil |
|---|---|---|---|
| LCP | Laden des Hauptinhalts | höchstens 2,5 s | Zu großes Produktbild, langsames Hosting |
| INP | Reaktion auf Interaktionen | höchstens 200 ms | Zu viele Skripte für Apps, Tracking und Chat |
| CLS | Visuelle Stabilität | höchstens 0,1 | Nachgeladene Banner und Pop-ups |
Testen Sie Ihre wichtigsten Seitentypen in PageSpeed Insights in der mobilen Ansicht. Konkrete Maßnahmen finden Sie in unseren Leitfäden WooCommerce schneller machen und Shopify-Ladezeit optimieren.
WooCommerce, Shopify und Webflow: Mobile UX im Plattformvergleich
Alle drei Systeme ermöglichen eine sehr gute mobile Nutzererfahrung, der Aufwand ist jedoch unterschiedlich.
| Mobile-UX-Faktor | WooCommerce | Shopify | Webflow |
|---|---|---|---|
| Mobiles Theme | Abhängig vom Theme, oft Nacharbeit nötig | Offizielle Themes mobil ausgereift | Individuelles Design mit voller Kontrolle über Breakpoints |
| Express-Zahlung | Über WooPayments, Stripe oder PayPal | Dynamische Checkout-Buttons und Shop Pay nativ | Apple Pay, Google Pay und PayPal verfügbar |
| Checkout | Vollständig anpassbar | Stark optimiert, Anpassung mit Grenzen | Anpassbar im Rahmen von Webflow E-Commerce |
| Hauptrisiko | Plugins, die jede Seite verlangsamen | Apps, die zusätzliche Skripte laden | Aufwendige Animationen und Interaktionen |
Sie sind noch bei der Plattformwahl? Lesen Sie unseren Vergleich Shopify oder WooCommerce und unsere Analyse zu Webflow E-Commerce.
So prüfen Sie die Mobile UX Ihres Shops an einem Tag
- Daten auswerten. Vergleichen Sie in Google Analytics die Conversion Rate von Mobilgeräten und Desktop und finden Sie den Schritt im Funnel, an dem die Lücke entsteht.
- Auf echten Geräten testen. Ein günstiges Android-Smartphone im Mobilfunknetz zeigt Probleme, die der Geräte-Emulator im Browser übersieht.
- Eine komplette Bestellung einhändig durchspielen. Suche, Filter, Produktseite, Warenkorb, Zahlung: Notieren Sie jedes Zögern und jedes ungewollte Zoomen.
- Performance messen. Prüfen Sie Startseite, Kategorie, Produktseite und Warenkorb mit PageSpeed Insights und werten Sie den Core-Web-Vitals-Bericht der Search Console aus.
- Priorisieren. Beheben Sie zuerst, was den Kauf blockiert (Checkout, Warenkorb-Button, Fehlermeldungen), dann, was die Produktsuche bremst (Suche, Filter).
Beispiel: ein WooCommerce-Modeshop aus Österreich
Ein Beispielszenario: Ein kleines Modelabel aus Österreich erhält den Großteil seiner Besucher über Instagram, also fast ausschließlich mobil, die Bestellungen kommen jedoch überwiegend vom Desktop. Das Audit zeigt eine Größentabelle, die sich in einem neuen Tab öffnet, einen Warenkorb-Button, der unter der Beschreibung verschwindet, ein Telefonfeld mit Texttastatur, Fehlermeldungen am Seitenanfang und zwei Plugins, die ihre Skripte auf jeder Seite laden.
Die Maßnahmen sind überschaubar: Größentabelle im Bottom Sheet, fixierte Kaufleiste, PayPal- und Apple-Pay-Express-Buttons, Formularfelder mit type="tel" und Autovervollständigung sowie das Entfernen überflüssiger Plugins. Den Erfolg messen Sie anschließend Woche für Woche an der mobilen Conversion Rate, idealerweise mit A/B-Tests für die größten Änderungen.
Fazit: zuerst für den Daumen gestalten
Eine gute mobile Nutzererfahrung im Onlineshop entsteht nicht durch einen einzelnen Trick, sondern durch eine Reihe stimmiger Entscheidungen: schnell finden, das Angebot auf einem Bildschirm verstehen, ohne Suchen in den Warenkorb legen, ohne Adresseingabe bezahlen und nie warten müssen. Jede Hürde, die Sie mobil beseitigen, verbessert auch das Einkaufserlebnis am Desktop und Ihre Sichtbarkeit bei Google.
Unser Team entwickelt und optimiert mobile-first Onlineshops mit WooCommerce, Shopify und Webflow für Unternehmen in Deutschland, Österreich, der Schweiz und Tunesien: Mobile-UX-Audits, Redesign von Produktseiten und Checkout sowie Performance-Optimierung. Erfahren Sie mehr über unsere E-Commerce-Entwicklung und unseren Website-Relaunch-Service, oder fordern Sie ein kostenloses Mobile-Audit Ihres Shops an.