Seit zu Beginn der 2000er die Smartphones Einzug in unseren Alltag gefunden haben, steigt die Zahl mobiler Endgeräte stetig an. Heut bewegen sich die meisten Menschen über Ihre Smartphones durch das Internet. Auch das Online-Shopping verlagert sich so immer weiter auf kleine Bildschirme. Da sich die klassische Desktop-Ansicht und die Smartphone-Oberfläche grundsätzlich unterscheiden, muss die Shop-Entwicklung darauf entsprechend eingehen.
Ein beliebter Ansatz dafür ist Mobile First. Die Grundidee ist simpel: Die schwierigste Design-Stufe wird zuerst bearbeitet. Konnten alle Funktionen und Designelemente auf einem Smartphone untergebracht werden, finden sie auch auf größeren Bildschirmen reichlich Platz. Nachdem das Shop-Layout also zuerst für mobile Geräte erstellt wurde, arbeiten sich Designer und Entwickler schrittweise zu Tablet und Desktop vor.
Mit Hilfe einer Rastergrundlage entsteht so responsives Design, dass Shop-Besucher auf jedem Endgerät nutzen können. Was bei der Mobile-First-Strategie beachtet werden muss und wie gutes Design für die Darstellung auf Mobilgeräten aussieht, erklären wir in den folgenden Abschnitten.
Das gilt es zu beachten
Neben der Aktivierung des Browser-Cachings, wodurch kurzzeitig Informationen zwischengespeichert und bei erneutem Shop-Besuch nicht neu geladen werden müssen, können Sie die Erfahrung Ihrer Kunden auf mobilen Geräten mit gezielten Designentscheidungen beeinflussen.
Tipp1: Weniger ist mehr
Auffällig ist der geringe Platz, der auf Smartphones für die Darstellung von Markenidentität und Shop-Funktionen zur Verfügung steht. Was zu Beginn nachteilig wirken kann, hilft die Kernelemente eines Shops zu definieren sowie unnötige und verlangsamende Bestandteile zu identifizieren. Entfernen Sie unnötige Funktionen oder Designkomponenten.
Hier gilt es durch die Reduzierung von Quellcode, Content, Videos und Bildern weniger Speicherplatz sowie Bandbreite zu beanspruchen und Ladezeiten zu verkürzen. Eine Bildkomprimierung unterstützt zusätzlich. So schaffen Sie auch für Besucher, deren mobile Verbindungsqualität schwankt ein ansprechendes Einkaufserlebnis.
Weniger Inhalte bedeuten zudem kürzere Scrollwege. Diese unterstützen eine flüssige Bewegung der Nutzer durch Ihren Shop, das schnelle Auffinden von Produkten und somit die Zufriedenheit Ihrer Kunden.
Tipp 2: Raum geben
Obwohl dies augenscheinlich im Kontrast zur verfügbaren Fläche auf einem Smartphone steht, ist Abstand ein wichtiges Designmittel für Ihren mobilen Shop. Weißraum schafft nicht nur einen modernen Look, sondern rückt Elemente gezielt in den Mittelpunkt, indem andere aus dem Sichtfeld wandern. Zudem fällt Nutzern die Navigation leichter, wenn genug Platz um Links, Buttons oder Formularfelder existiert und sie gezielt ein Element anklicken können. So vermeiden Sie, dass Seitenbesucher unbeabsichtigt einen nebenstehenden Link wählen und in Ihrer Bewegung durch den Shop unterbrochen werden.
Bilder und Videos sollten auf mobilen Geräten ebenfalls mehr Raum erhalten. Mit großflächigen Fotos können Sie Produkte ansprechend platzieren und bereits zugehörige Informationen vermitteln. Nutzen Sie die gesamte Bildschirmbreite. Achten Sie bei der Platzierung mehrere Bilder nebeneinander darauf, dass die Motive deutlich erkennbar sind.
Auch die Maße von Buttons dürfen auf Smartphones im Verhältnis zum Fließtext großzügiger ausfallen. Präsentieren Sie Besuchern Call-To-Actions gut erkennbar und schnell zugänglich, um die Klickrate zu erhöhen.
Tipp 3: Interaktion einfach gestalten
Hover- und Scroll-Effekte können auf Smartphones zu Funktionsfehlern führen. Achten Sie daher darauf, dass Navigationselemente, Menüs und Links mit einem einfachen Klick bedienbar sind. Stellen sie zudem sicher, dass Elemente dieser Art groß genug und im angemessenen Abstand zum nächsten Link platziert sind, um sie gezielt mit einem Finger bedienen zu können und Frust bei Besuchern zu vermeiden.
Dezent platzierte Anweisungen, wie „Swipen Sie, um zu...“ oder „Klicken Sie, um zu…“ können bei der Handhabung von Funktionen unterstützen.
Tipp 4: Den Desktop nicht vergessen
Mit dem Mobile-First-Ansatz betrachten Sie zuerst die Darstellung auf Smartphones. Denken Sie jedoch daran, dass Kunden auch über andere Geräte auf Ihren Shop zugreifen oder sogar innerhalb weniger Minuten zwischen Geräten wechseln. Achten Sie also darauf, dass Nutzer überall die gleichen Aktionen ausführen können und prüfen Sie immer alle Funktionen auf Tablet und Desktop. Passen Sie diese gegebenenfalls für die entsprechende Bildschirmgröße an.
5 Ideen für Ihre Mobile-First-Srategie
- Bilder und Fotos über gesamte Bildschirmbreite platzieren
- Mehrere Fotos durch ein kurzes Video ersetzen (Achtung: Videos können Ihren Shop verlangsamen)
- Einfach auszuführende Bewertungsmöglichkeit einbinden
- Mobilfreundliche Chatfunktion integrieren
- Smartphone-typische Handling-Funktionen oder Designs einsetzen (swipen, double-tap, Speichersymbole aus Social Media…)
Die Shopify-Händler von LIVE FAST DIE YOUNG haben eine sehr junge Zielgruppe und wissen diese mit den richtigen Techniken zu bespielen. Auf Ihren Produktseiten lassen sich Artikelfotos einfach swipen – so wie die Zielgruppe das z.B. von Karussellen auf Instagram gewöhnt ist.
Welche konkreten Gestaltungmöglichkeiten Sie anwenden sollten, ist immer abhängig von Ihrer Zielgruppe. So benötigen jüngere Menschen häufig keine unterstützenden Anweisungen, ältere hingegen bevorzugen womöglich weniger interaktive Elemente. Sie sollten Ihre Zielgruppe also genau kennen, um zu wissen, was bei dieser gut ankommen könnte.
Sie suchen nach einem kompetenten Partner für die Entwicklung kundenorientierte Ergebnisse auf allen Bildschirmgrößen? Kontaktieren Sie uns noch heute, wir helfen Ihnen gern weiter!