Weitere Blogposts in der Kategorie Shopify

Shopify Plus Vorteile 6 November 2018
Shopify Checkliste 23 Oktober 2017

4 Tipps: So gelingt Ihr Shop-Design mit Mobile First

4 Tipps: So gelingt Ihr Shop-Design mit Mobile First

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.

Im Fokus bei Wilding Shoes: kurze Texte und ein aussagekräftiges Video zeigen, worum es im Shop geht

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.

Abstände bei Palmenkind: Mit ausreichend Raum zwischen den Menüpunkten gelangen Besucher problemlos in die gewünschte Kategorie.

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.

LFDY macht sich breit: große, gestapelte Produktfotos erinnern an bildlastige Social-Media-Kanäle wie Instagram, die Arbeit mit Icons als Navigation macht es der jungen Zielgruppe besonders leicht
Lesetipp: Latori unterstütze LIVE FAST DIE YOUNG (LFDY) bei der Shop-Realisierung für große Kollektions-Drops. Wie das ablief, lesen Sie in diesem Interview.

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.

Einfaches Handling mit Crazy Chair Nautic: angepasste Formularfeldgrößen erleichtern die Bedienung auf dem Smartphone
Einfaches Handling mit Crazy Chair Nautic: angepasste Formularfeldgrößen erleichtern die Bedienung auf dem Smartphone

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!

Shopify 35 Diverses 16
Teilen: