Shopify Design-Tipps und UX Best Practices

Shopify unterstützt mehr als eine halbe Million E-Commerce-Unternehmen in 175 Ländern. Seit 2012 ist die Zahl der Händler auf der Shopify-Plattform jährlich um durchschnittlich 74 % gewachsen, und diese Händler haben einen Umsatz von mehr als 55 Milliarden US-Dollar erzielt, da Shopify heute eine der bekanntesten und am einfachsten zu bedienenden E-Commerce-Plattformen ist.

Da sich Shopify um Domains, Hosting, alle Back-End- und einige Front-End-Funktionen kümmert, können mehr Zeit, Geld und Ressourcen für das UX-Design aufgewendet werden. Bis 2021 werden die E-Commerce-Umsätze weltweit voraussichtlich einen neuen Höchststand von 4,9 Billionen US-Dollar erreichen, und da minderwertiges UX-Design einer der größten Faktoren für verlassene Kassen ist, ist es mehr als klar, dass sich die Implementierung von Best Practices im E-Commerce weiterhin als äußerst effektiv erweisen wird.

In diesem Artikel gehen wir auf die wichtigsten Shopify-Designtipps ein.

Welche Funktionen hat Shopify?

Shopify wird mit allen Funktionen geliefert, die Sie von einer Top-E-Commerce-Plattform erwarten:

• Integration mit externen Zahlungsgateways wie Stripe und PayPal
• Zugriff auf Shopify Payments, ohne Gebühren im Vergleich zu externen Optionen
• Die Möglichkeit, die Zahlung per Geschenkkarte oder Guthaben zuzulassen
• Eine anpassbare Checkout-Seite (nur für Shopify Plus-Kunden)
• Die Option von Benutzerkonten oder Gastkasse
• Statische Seiten (z. B. Datenschutzrichtlinie oder Allgemeine Geschäftsbedingungen)
• Zielseiten mit Werbeinhalten
• Passwortzugriff für Shops in Entwicklung
• Produktvarianten mit einer Reihe von anpassbaren Optionen
• Intelligente Sammlungen zur Automatisierung der Kategorisierung von Produkten
• Such- und Tag-Funktionalität zur Unterstützung der Produktfindung
• Blog-Funktionalität mit der Möglichkeit, Produkte in Beiträge einzubetten
• Eine API, die Entwicklern hilft, dynamische Websites und mobile Apps zu erstellen

Förderung der E-Commerce-Produktfindung

Ähnlich wie stationäre Geschäfte nach Abteilungen organisiert sind, damit Kunden bestimmte Artikel finden können, indem sie einen Mitarbeiter fragen, müssen Online-Käufer die Möglichkeit haben, zu stöbern, zu filtern und zu suchen, damit sie einfach und schnell finden, wonach sie suchen schnell .

40 % der E-Commerce-Kunden verlassen Websites, die länger als 3 Sekunden zum Laden brauchen, was darauf hindeutet, wie ungeduldig sie sind, wenn es um die Produktfindung geht. Glücklicherweise verfügt Shopify über eine Reihe von Funktionen, die es einfach machen, eine benutzerdefinierte Navigation zu erstellen, Produkte und Kategorien zu organisieren und Suchfunktionen zu implementieren.

Benutzerdefinierte Navigation

Wenn dem Kunden zu viele Optionen präsentiert werden, kann dies zu einer Lähmung der Analyse führen (wenn es zu viele verfügbare Optionen gibt, um effektiv eine Entscheidung zu treffen, führt dies zu Frustration und Abbruch). Durch das Entwerfen einer benutzerdefinierten Navigation können wir Produkte und „Kollektionen“ priorisieren , die am effektivsten konvertiert werden – beispielsweise die sichtbare Anzeige der „Desk“-Kollektion, wenn Schreibtischprodukte am beliebtesten sind. Diese benutzerdefinierten Navigationen können auch im Shopify CMS bearbeitet werden, um gelegentliche A/B-Tests zu ermöglichen.

Optisch gesehen zeigen die am besten konvertierenden Shopify-Designs den Titel der Sammlung deutlich an und verwenden genügend Leerraum, damit der Benutzer leicht erkennen kann, wonach er unter allen angebotenen Produkten, Sammlungen und Seiten sucht.

Sammlungen

Eine Kollektion ist eine organisierte Gruppe ähnlicher Produkte. Produkte können manuell in Sammlungen sortiert werden, oder sie können basierend auf übereinstimmenden Kriterien automatisch sortiert werden (z. B. wenn der Produkttitel ein bestimmtes Schlüsselwort enthält, einem bestimmten Tag zugewiesen wurde oder in eine bestimmte Preisspanne fällt). Kollektionen können auch temporär sein (d. h. saisonal oder für einen zeitlich begrenzten Verkauf), um sicherzustellen, dass die Designs der Shopify-Website immer relevant, aktuell und vor allem hochgradig konvertierend sind.

Während diese Sammlungen hinter den Kulissen definiert werden, ist es für E-Commerce-Designer nützlich, sich dieser Funktionalität bewusst zu sein, wenn sie für Shopify entwerfen.

Produkt Tags

Angezeigte/sichtbare Tags helfen Kunden, ähnliche Produkte zu finden, und wie oben erwähnt, können sie auch intern verwendet werden, um Sammlungen zu erstellen. Der größte Vorteil von Tags liegt jedoch in der Tatsache, dass sie verwendet werden können, um eine facettierte Suche zu erstellen, die es Kunden ermöglicht, Produkte basierend auf einem mit Tags versehenen definierenden Attribut wie „Gelb“ zu filtern.

Beachten Sie diese Shopify-Designtipps:

• Zeigen Sie zur weiteren Verdeutlichung, welche Filter angewendet werden.
• Kunden erlauben, Filter zu entfernen, um ihre Suche zu erweitern.
• Kürzen Sie Filter, um auf den ersten Blick nur die beliebtesten anzuzeigen.

Suche

Die Suchfunktion ist nützlich für Kunden, die genau wissen, wonach sie suchen, und ist besonders wichtig für mobile Käufer, die das Browsen und Filtern frustrierend finden, da die Interaktion auf einem mobilen Gerät natürlich umständlich ist.

Dies sind die Best Practices von Shopify, die Sie beim Entwerfen von Sucherlebnissen berücksichtigen sollten:

• Verstecken Sie niemals das Suchfeld; reduzieren die Reibung, indem sie sofort verfügbar sind.
• Platzieren Sie die Suche dort, wo Kunden sie erwarten (dh oben rechts oder zentralisiert).
• Zeigen Sie das gesamte Eingabefeld an, nicht nur das Suchsymbol.
• Integrieren Sie die Funktion zur automatischen Vervollständigung, damit Benutzer schneller suchen können.
• Entwerfen Sie menschliches Versagen, indem Sie vorgeschlagene Ergebnisse und Autokorrektur verwenden.
• Speichern Sie Benutzersuchen und senden Sie Follow-up-E-Mails, wenn kein Verkauf getätigt wurde.

Shopify Best Practices für Produktseiten

Shopify bietet alle Funktionen, die erforderlich sind, um E-Commerce-Käufer zu fesseln und Benutzer flüssig direkt zur Kasse zu führen. Wenn wir diese Funktionen mit bewährten E-Commerce-Praktiken kombinieren, können wir die Anzahl abgebrochener Bezahlvorgänge unter die durchschnittliche Statistik drücken.

Verwenden Sie fesselnde Produktbilder

Was eine gute E-Commerce-Website ausmacht, sind Bilder, die die Benutzer emotional fesseln. Zu diesem Zweck ermöglicht Shopify das Hochladen mehrerer Bilder und Produktvarianten. Als Best Practice von Shopify sollten Sie dennoch mindestens eines dieser Produktbilder maßstabsgetreu anzeigen (d. h. umgeben von anderen Objekten, um zu veranschaulichen, wie groß das Produkt ist), um die Erwartungen zu wecken.

Kunden möchten das Produkt gründlich untersuchen, bevor sie sich zum Kauf verpflichten, um sicherzustellen, dass alle Produktbilder lebendig, von hoher Qualität und zoombar sind.

Zeigen Sie klare Produktinformationen an

Eine erschreckende (aber nicht überraschende) Anzahl von E-Commerce-Kunden verlässt ihren Einkaufswagen aufgrund fehlender Informationen über die tatsächlichen Kosten. 60 % der Kunden nennen unerwartete Kosten (z. B. Versand, Steuern, Gebühren) als Grund für den Abbruch des Einkaufswagens, und 23 % sind nicht in der Lage, die Gesamtkosten im Voraus zu berechnen. Mangelnde Transparenz ist ein todsicherer Weg, um Conversions auf E-Commerce-Websites zu verhindern, also behalte diese Shopify-Tipps und Tricks im Hinterkopf:

• Verwenden Sie fortschrittliche Offenlegungstechniken, um Informationen klar zu strukturieren.
• Zeigen Sie im Voraus eine vollständige Aufschlüsselung der Kosten an.
• Kommunizieren Sie das Wertversprechen explizit.
• Machen Sie die Schaltfläche „Jetzt kaufen“/„In den Warenkorb“ optisch unverwechselbar.

Bauen Sie Vertrauen und Sicherheit auf

Laut Baymard Institute wird mangelndes Vertrauen als Grund dafür genannt, warum 19 % der Kunden an der Kasse abbrechen. Glücklicherweise versenden alle Shopify-Shops standardmäßig mit SSL (sicherer Checkout), aber sie erlauben Kunden auch, Bewertungen als sozialen Beweis zu hinterlassen.

Social Proof ist eine unbestreitbare Methode, um Conversions in die Höhe zu treiben, indem das Vertrauen auf E- Commerce-Websites gestärkt wird. Laut BrightLocal vertrauen 88 % der Verbraucher Online-Bewertungen genauso wie einer persönlichen Empfehlung. Daher ist es wichtig, frühere Kunden dazu zu bringen, Bewertungen zu hinterlassen, und dies in der Customer Journey anzugeben. Die meisten Shopify-Designs nutzen auch das Schema-Markup, um diese Bewertungen direkt in die Suchergebnisse zu integrieren.

Erwägen Sie neben der sozialen Validierung, das Vertrauen der Kunden aufzubauen, indem Sie eine Live-Chat-Lösung wie Intercom, Zendesk, Drift oder Kayako implementieren. Shopify ermöglicht die Integration mit Diensten von Drittanbietern über ihren App Store und durch manuelle Installation.

Verwandte Produktempfehlungen anzeigen

Alle führenden E-Commerce-Unternehmen nutzen Cross-Selling- und Upselling-Strategien. Tags, kombiniert mit Analyse- und A/B-Testintegrationen wie den Webempfehlungen von Optimizely, können Designer dabei unterstützen, Unternehmen in die Lage zu versetzen, die Konversionsraten zu verbessern, indem sie alternative oder zusätzliche Artikel anzeigen, an denen Kunden interessiert sein könnten.

Integrieren Sie die Personalisierung des Einkaufserlebnisses

Integrationen wie Web-Personalisierungen von Optimizely in Kombination mit Shopify-Sammlungen und -Tags ermöglichen es datengesteuerten Unternehmen, Zielgruppen basierend auf ihren Interessen und ihrer bisherigen Kaufhistorie zu segmentieren und den Seiteninhalt entsprechend zu ändern.

Mit vorausschauenden Designtechniken können Shopify-Shops relevantere Inhalte anzeigen, das Publikum länger binden und somit eher zu einem Verkauf konvertieren. Personalisierung ist der Schlüssel zur Steigerung des finanziellen Gewinns eines jeden E-Commerce-Unternehmens.

Checkout-Optimierung

Gast-Checkout vs. Kundenkonten

Laut dem Baymard Institute ist „die Seite wollte, dass ich ein Konto erstelle“ der zweithäufigste Grund (35 %), warum Kunden den Checkout abbrechen, ohne etwas zu kaufen. Shopify empfiehlt, Gastzahlungen zuzulassen (insbesondere auf Mobilgeräten), und zu diesem Zweck ist es die Standardoption, Kundenkonten zu deaktivieren.

Lokalisieren von UX-Fehlern und Reduzieren von Drop-offs

Der Versuch, verlassene Kassen ohne solide Analysen zu lösen, ist so effektiv wie die Suche nach einer schwarzen Katze in einem dunklen Raum. Die Optimierung von Benutzererfahrungen und Bezahlvorgängen funktioniert am besten, wenn es sich um einen datengesteuerten Prozess handelt.

Shopify-Designer können Google Analytics mit Shopify verbinden und einen Zieltrichter einrichten, der, nachdem genügend Daten gesammelt wurden, genau darstellt, wo Kunden entscheiden, dass sie ihren Kauf nicht fortsetzen möchten.

Um die besten Ergebnisse zu erzielen, integrieren Sie Shopify mit Tools wie Crazy Egg, Hotjar und FullStory, um diese Problembereiche mithilfe von Heatmaps und Besucheraufzeichnungen genauer zu beobachten.

Fazit

Damit Designer die Vorteile und Fähigkeiten der Shopify-Plattform besser kommunizieren und erfahren können, welche Lösungen sie Kunden bieten kann und welche nicht, ist es am besten, einen kostenlosen Demo-Shop zu eröffnen. Darüber hinaus können Top-E-Commerce-Designer registrierte Shopify-Experten werden, was ihrem Lebenslauf als Shopify-Website-Designer mehr Glaubwürdigkeit verleiht.

Weiterführende Literatur im Toptal Design Blog:

• Lesen Sie den Shopify-Blog für weitere Tipps und Tricks zu Shopify.
• eCommerce UX – Wesentliche Designstrategien und -prinzipien
• eCommerce UX für das mobile Erlebnis
• Wie man E-Commerce-Käufer durch UX-Design fesselt
• Responsive Design – Best Practices und Überlegungen