• Jetzt unverbindlich anfragen
    Online durchstarten.
    Ich bin damit einverstanden, dass mich Agentur Anmut GmbH kontaktiert (telefonisch oder per E-Mail) und meine angegebenen Daten speichert. Ihre Daten werden vertraulich behandelt und nicht an Dritte weitergegeben. Weitere Informationen finden Sie in unseren Datenschutzbestimmungen.

Think Mobile – So optimieren Sie Ihren Online-Shop für die mobile Nutzung

Die Tendenz geht immer mehr in Richtung mobile Endgeräte. Die meisten Menschen surfen mittlerweile auf dem Smartphone mehr als am Heimcomputer. Online-Shops müssen mit dem Trend gehen – Kunden, die mobil Preise recherchieren, kaufen meist auch direkt online ein.

Die Umstellung auf neue Geräte kann für Onlinehändler einige Herausforderungen bereithalten: Zum Beispiel andere Bildschirmgrößen, die Bedienung per Touchscreen und eine langsamere Internetverbindung. Außerdem denkt der mobile Nutzer anders, ist unkonzentrierter und hat weniger Zeit.

Um den schwierigen Übergang vom Desktop-Computer zum mobilen Endgerät zu meistern, haben wir für Sie einen Leitfaden erstellt. Mit diesen Tipps können Sie Ihren eigenen mobilen Webshop neu aufziehen oder wahlweise optimieren – und ihren Kunden ein besseres Kauferlebnis ermöglichen.

Technische Voraussetzungen: Responsive Design

Zunächst müssen einige technische Voraussetzungen geschaffen werden. Wenn das Webdesign Ihres Shops nicht mehr von einem Gerät abhängig ist, nennen die Fachleute dies „responsive”. Die Elemente des Shops passen sich dann automatisch den verschiedenen Bildschirmen an.

Es wird nur eine URL Ihres Online-Shops für alle Endgeräte verwendet, sodass der Crawling-Aufwand sinkt und Suchmaschinen Ihre Inhalte besser zuordnen können. Alternativ können Sie auch eine zweite, mobil orientierte Webseite erstellen. Allerdings müssen dann alle Daten der Bestellvorgänge zwischen den beiden URLs hin und her geleitet werden, was einen zusätzlichen Aufwand darstellt.

Übersichtliches Navigieren: Das Menü

Mobile Geräte bieten im Gegensatz zu den Webseiten am Computer-Monitor viel weniger Platz. Seitenelemente wie die Navigation verschieben sich deshalb nach oben. Das Menü erweitert sich mit interaktiven Icons für die Suche, das Benutzerkonto, den Merkzettel und den Warenkorb.

Sorgen sie für möglichst kurze Klickwege. Alles sollte innerhalb von maximal drei Klicks erreichbar sein. Home-Icons können dem Nutzer das Zurückkehren zur Startseite erleichtern. Insgesamt sollte die mobile Navigation minimalistisch und nicht zu umfangreich aufgebaut sein, und sich erst bei Bedarf „aufklappen”.

„Online-Shops müssen mit dem Trend gehen – Kunden, die mobil Preise recherchieren, kaufen meist auch direkt online ein.“

Das A und O des Webshops: Die Suchfunktion

Da der mobile Internetnutzer nur wenig Zeit hat, sucht er im Online-Shop meistens sehr spezifische Produkte. Die Suchfunktion des Shops ist daher ein essentielles Element. Man sollte sie in der Navigation stets einsehen und darauf zugreifen können.

Einen Teil der Suche stellt auch die viel verwendete Filterfunktion dar. Bei Shops mit großer Produktvielfalt gibt es auch viele Kategorien und Kriterien, nach denen man die Suche filtern kann. Diese dürfen aber nicht zu viel Platz einnehmen. Damit die Produktübersichtsseite schön kompakt bleibt, sollten die Filteroptionen erst aufklappen, wenn man einen entsprechenden Button klickt.

Von der Maus zum Fingertip: Die Touchfähigkeit

Eine große Besonderheit mobiler Geräte ist die Bedienung durch den Touchscreen. Dadurch ergeben sich neue Funktionen für die Inhaltselemente Ihres Webshops: Pfeile, Navigationselemente und Buttons sollten mindestens Fingerkuppengröße haben, außerdem dürfen sie nicht zu nahe beieinander liegen. Alle interaktiven Elemente sollten optimal klickbar sein.

Des Weiteren ergibt sich für Nutzer eine sehr intuitive Bedienung durch Gestenerkennung. Das bedeutet, dass der Bildschirm erkennt, welche Bewegung der Finger macht, und entsprechend reagiert. Folgende Bewegungsmuster sollte Ihr Shop erkennen können:

  • Scrollen: Die Webseite wird nach oben oder unten verschoben, um neuen Inhalt einzusehen.
  • Swipen: Horizontales Wischen über das Display, um beispielsweise Slideshows oder Bildergalerien durchzusehen.
  • Flicken: Die Seite wird angestupst, um schnell an den Anfang oder das Ende zu gelangen.
  • Pinchen: Auseinander- oder Zusammenziehen von zwei Fingern auf dem Bildschirm, um den Inhalt zu vergrößern oder zu verkleinern.

Vergessen Sie dabei nicht, auch die verschiedenen Display-Ausrichtungen der Bildschirme zu beachten (horizontal und vertikal).

Minimalistisches Design: Die Lesbarkeit

Wie bereits an anderer Stelle erwähnt, bietet gerade das Smartphone viel weniger Platz für Content als die Computer-Version. Daher darf der mobile Shop nicht mit unnötigem Content überladen werden. Vermeiden sie endloses Scrollen und lange Ladezeiten.

Die Schriftgröße sollte standardmäßig mindestens 16 Pixel betragen, damit sie auch auf kleinen Displays lesbar bleibt. Die Texte halten Sie so kurz und präzise wie möglich – Listen, Aufzählungen und grafische Elemente können Ihnen umständliche Erklärungen zu Produkten ersparen.

Die Produktbilder müssen Sie nicht reduzieren, schließlich ist es Sinn der Sache, dass der Nutzer sich das Produkt ansehen und besser vorstellen kann. Multimedia-Elemente sollten aber entsprechend komprimiert werden, um auch bei Geräten mit nur geringem Datenvolumen problemlos angezeigt werden zu können.

Webshop - responsive mobile usability

Simple Checkout: Der Bestellprozess

Kurze und unkomplizierte Bestellvorgänge gehören zu den wichtigsten Aspekten mobiler Webshops. Gestalten Sie die Kaufabwicklung so einfach wie möglich. Das Abfragen der Kundendaten sollte sich auf das Notwendigste beschränken und den Nutzer nicht zu lange aufhalten. Außerdem können Sie darauf achten, dass keine tausend Klicks zum Ende des Einkaufs nötig sind, und so viele Arbeitsschritte wie möglich auf eine Seite packen. So sieht der Nutzer direkt, was er schon eingegeben hat.

Der richtige Ort: Die Werbeaktionen

Gutscheine, Rabatte, Gewinnspiele und andere Aktionen sollten prominent unter dem Header eingeblendet werden, damit sie auf den ersten Blick sichtbar sind. Besonders bei SALE-Produkten lohnt es sich, sie hervorzuheben und den Nutzer darauf aufmerksam zu machen. Achten Sie jedoch darauf, dass sie dadurch die Interaktionen des Nutzers nicht negativ beeinflussen – Pop-Ups sind beispielsweise ein No-Go im mobilen Bereich.

Vernetzte Mobilfunktionen: Apps und Social Media

Mal eben schnell der Freundin das Produkt per WhatsApp schicken – das sollte mit den wichtigsten Teilen-Funktionen für Social Media möglich sein und sorgt für mehr Traffic in Ihrem Online-Shop. Social Media Vernetzungen für Sharing auf verschiedenen Kanälen gehören heute bei den meisten Unternehmen bereits zum Standard.

Sie können optional auch Funktionen anbieten, die nur den mobilen Nutzern helfen. Zum Beispiel einen Barcode- oder QR-Code-Scanner. Damit zeigen sie Bereitschaft, auf diese Zielgruppe aktiv zuzugehen.

Think mobile!

Das klingt jetzt alles nach ziemlich viel Aufwand, aber denken Sie daran, dass die Mühe sich lohnt. Mobile Optimierungen bleiben Ihnen langfristig erhalten und stellen eine Investition in die Zukunft Ihres Online-Shops dar. Zeigen Sie Ihren Kunden, dass es Ihnen wichtig ist, dass diese Sie jederzeit erreichen und bei Ihnen surfen können!

Sie benötigen Unterstützung?
Gerne stehen wir Ihnen mit Rat und Tat zur Seite und helfen bei der Optimierung Ihrer Webseite.