10 Tipps zum Entwerfen einer großartigen Web-Storefront

Unternehmern und stationären Einzelhändlern, die in den Online-Einkauf expandieren möchten, stehen mehr Optionen zur Verfügung als je zuvor, aber sie müssen auch mehr Website-Überlegungen und technische Optionen entschlüsseln. Beim Aufbau einer effektiven Web-Storefront gibt es immer noch schlüsselfertige Anbieter wie Wix Stores, mit denen Sie Ihre erste Präsenz schnell und einfach aufbauen können. Aber diejenigen, die es wirklich ernst meinen, ihr Online-Geschäft auszubauen, werden feststellen, dass sich ihre Bedürfnisse über diese schlüsselfertigen Dienste hinaus relativ schnell entwickeln.

Es gibt viele Fragen, die zuerst beantwortet werden müssen, bevor im Cyberspace tatsächlich etwas auftaucht, und dann viel mehr, wenn das Geschäft reift. Das Sammeln von Daten über Kunden ist ein gutes Beispiel und eine wichtige Frage, insbesondere für alle Geschäfte, die Zugang zu europäischen Märkten suchen. Währungsumrechnung und unterschiedliche E-Commerce-Gesetze sind in diesen Märkten nach wie vor ein heikles Problem. Jetzt müssen Sie sich jedoch auch mit der Allgemeinen Datenschutzverordnung (DSGVO) befassen, die einen viel sorgfältigeren Umgang mit Kundendaten erfordert.

Die Transaktionssicherheit ist eine weitere wichtige Frage, da sie das Bedürfnis nach Kundensicherheit mit der Anzahl der Reifen in Einklang bringt, durch die die Kunden springen müssen, bevor sie einen Kauf tätigen können. Unabhängig davon, welche Entscheidungen Sie für Ihre Standardwebsite treffen, müssen Sie für die mobile Iteration dieselben Diskussionen führen. Denn während Mobilität sicherlich eines der beliebtesten Schlagworte des letzten Jahres war, haben die zusätzlichen 12 Monate in keiner Weise an Bedeutung verloren.

Aktuelle Überlegungen legen fest, dass Web-Builder zuerst das mobile Erlebnis entwerfen und dann das Desktop-Erlebnis nach Bedarf anpassen müssen.

"Jedes Element, jeder Inhalt muss mobil funktionsfähig sein", sagte Jimmy Rodriguez, Chief Operating Officer (COO) von 3dcart. "Wenn Sie bei Null anfangen, entwerfen Sie für Mobilgeräte. Mit Responsive Design können Sie die Website so erstellen, dass sie auf Mobilgeräten gestartet und dann auf den Desktop gebracht wird."

Um Ihnen bei der Gestaltung Ihrer E-Commerce-Storefront für Mobil- und Desktopbenutzer zu helfen, haben wir die folgenden 10 wichtigen Tipps zusammengestellt. Rodriguez empfiehlt jedoch, dass Unternehmen diese Funktionen auf bestimmten Produktseiten testen, bevor sie sie auf ihrer gesamten Website bereitstellen, bevor sie sie in ihre Schaufenster integrieren.

1. Sticky Header Navigation

Wir waren alle dabei: Wir sind zum Ende einer Produktseite gescrollt, um Bewertungen oder Produktdetails zu lesen, und jetzt können wir die Seite verlassen, um zum Menü zurückzukehren und unsere Einkaufsreise fortzusetzen. Leider mussten wir normalerweise auf die Schaltfläche "Bild auf" auf unseren Desktoptastaturen klicken oder auf unseren Mobilgeräten oben auf den Bildschirm tippen, um zum Menü zurückzukehren.

Wenn Sie mit Sticky Headers nach unten scrollen, wird die Menügröße geändert und angepasst. Das Menü begleitet Sie auf Ihrer Reise, damit die Navigation auf dem Bildschirm bleibt, falls Sie schnell zu Seiten springen müssen. Sie können dies auf Bose.com in Kraft sehen. Obwohl Sie sich in der Mitte der Seite befinden, können Sie dennoch auf die Hauptnavigation der Seite zugreifen, ohne zum oberen Bildschirmrand zurückkehren zu müssen.

2. Hamburger Menüs

Hamburger Menüs klingen zwar wie ein Feature, das sich am besten für Fast-Food-Restaurants eignet, werden jedoch schnell zu einem Muss für Unternehmen, die viel mit mobilen Geräten zu tun haben. Sie haben sie schon einmal gesehen: Hamburger Menüs sind zum Standard-Symbol für mobile Navigation und Menüs geworden.

Sie weisen drei horizontale Linien auf, die beim Drücken ein Dropdown-Menü für die Navigation einer Website anzeigen. Sie eignen sich besonders für mobile Geräte, bei denen Bildschirmimmobilien eine wichtige Rolle spielen. Aber wir beginnen, sie auch auf Desktop-Websites zu sehen, sodass Kunden unabhängig vom verwendeten Gerät eine ähnliche Erfahrung auf Unternehmenswebsites haben.

"Viele Leute sehen Hamburger Menüs und wissen, was es bedeutet, aber sie wissen nicht, dass es im Grunde genommen der neue Standard ist", sagte Rodriguez. "Mobile Besucher haben die Bedeutung dieses Symbols gelernt, und Websites sollten es als Standard für die mobile Navigation anerkennen."

Sie können ein Hamburger-Menü in der oberen rechten Ecke von Target.com und auf der mobilen Website von Target sehen. Sie können es auch unten abgebildet sehen.

3. Parallaxen-Bildlauf

Parallax Scrolling bietet weniger Funktionen als vielmehr eine Möglichkeit, die Ästhetik Ihrer Website zu verbessern. Es nutzt große Banner mit hochauflösenden Bildern, um Ihrer Website ein künstlerisches Flair zu verleihen. Indem Sie große Bilder in voller Breite verwenden, können Sie einen Verschiebungseffekt zwischen dem Hintergrundbild Ihrer Website und dem Bild erstellen, das sich direkt vor Ihrem Kunden befindet.

Wie Sie im Bild unten von RimmelLondon.com sehen können, ändern sich die Hintergrundbilder der Website, wenn Sie die Seite nach unten scrollen. Die Änderung tritt jedoch subtil auf, wenn Hintergrund- und Vordergrundbild ineinander übergehen. Der Screenshot unten zeigt die Website in dem Moment, in dem sich das Hintergrundbild von lila nach rosa ändert.

4. Endloses Scrollen

Infinite Scrolling klingt eher nach einer Foltertechnik als nach einer E-Commerce-Funktion. Mit diesem praktischen Tool können Ihre Benutzer jedoch ständig neue Produkte anzeigen, ohne auf eine neue Seite klicken und diese laden zu müssen. So funktioniert es: Wenn Sie zum Ende einer E-Commerce-Seite scrollen, werden auf der Seite automatisch weitere Elemente am unteren Rand der Seite geladen. Sie sind immer noch als Seiten im Backend katalogisiert, aber der Besucher weiß das nicht.

Sie können eine ähnliche Funktion auf UnderArmour.com sehen. Leider müssen Sie in Under Armour auf die Schaltfläche "Mehr laden" klicken, um zusätzlichen Inhalt anzuzeigen. Einige Websites sind mit einem automatischen Öffnungsmechanismus ausgestattet, der Ihnen mehr Inhalte anzeigt, ohne dass Sie darauf klicken müssen.

5. Eine schwebende Schaltfläche "In den Warenkorb"

Ähnlich wie beim Sticky Navigation-Tool können Ihre Kunden mit den schwebenden Schaltflächen "In den Warenkorb" Produkte in ihren Warenkorb legen, unabhängig davon, wo sie sich auf der Produktseite befinden. Früher haben Benutzer einen Bildlauf nach unten durchgeführt, um Bewertungen, Produktdetails und andere Elemente auf der unteren Seite anzuzeigen, und um das Produkt in den Warenkorb zu legen, mussten sie einen Bildlauf zum oberen Seitenrand durchführen. Bei Unternehmen wie Diesel.com können Sie jetzt den Preis, die Menge, die Farboptionen und das Bild des Produkts sowie die Schaltfläche "In den Warenkorb" anzeigen, unabhängig davon, wo Sie sich auf der Produktseite befinden.

6. Verwenden Sie das Fitts-Gesetz

Wir werden Sie nicht mit der Mathematik hinter Fitts 'Gesetz langweilen, aber es ist im Wesentlichen eine Theorie, dass je größer und näher ein Objekt für uns ist, desto wahrscheinlicher ist, dass wir mit ihm interagieren. Das gleiche Grundprinzip kann auf den elektronischen Handel angewendet werden. Wenn Sie Benutzer zu Produktseiten, Warenkörben und Werbeaktionen führen möchten, sollten Sie diese Schaltflächen groß, farbenfroh und so nah wie möglich an der Seitenmitte platzieren.

Wenn Sie das Fitts'sche Gesetz ignorieren und winzige schwarzweiße Knöpfe entlang der Schienen oder am unteren Rand der Seiten platzieren, verlieren Sie möglicherweise potenzielle Käufer. Mach diesen Fehler nicht.

7. Kundenrezensionen und Testimonials anzeigen

Sie möchten nicht, dass Kunden zu Ihrer Website kommen, Ihre Produkte anzeigen und dann zu Amazon.com gehen, um die Bewertungen der Benutzer zu überprüfen. Schließlich kann Amazon.com das Produkt billiger verkaufen oder der Kunde kann das Amazon.com-Einkaufserlebnis dem Ihrer Website vorziehen.

Wenn Sie Ihren Kunden die Möglichkeit geben, Produkte zu bewerten und zu bewerten, können Sie diejenigen vorsichtigen Kunden abwehren, die die Gewissheit der Meinung anderer Verbraucher benötigen, bevor Sie einen Kauf tätigen. Die meisten E-Commerce-Tools vereinfachen die Implementierung von Bewertungen und Reviews. Scheuen Sie sich daher nicht, diese Vorgehensweise umzusetzen.

8. Ein effektiver Kundendienst

Die Kundenbindung ist entscheidend für den Erfolg des Einzelhandels, und nirgendwo ist sie einfacher oder effektiver als am Kundendienst. Sich richtig um einen wütenden, unzufriedenen oder sogar nur verwirrten Kunden zu kümmern, ist einer der sichersten Wege, um Geschäfte zu wiederholen. Die heutigen Service Desk- und Helpdesk-Anwendungen machen es einfacher als je zuvor. Mit einer dieser Apps können Sie nicht nur Kundenanfragen organisieren, sondern auch die Kunden- und Antwortdaten, die diese Begegnungen generieren, abrufen und an Ihre Customer Relationship Management (CRM) -, Marketing- und Business Analytics-Engines weiterleiten. Auf diese Weise behalten Sie die Meinung der Kunden zu Ihrem Geschäft und seinen Produkten im Auge.

Der Ort, an dem Sie Ihre Kundendienstanker und Kontaktpunkte platzieren, ist für das gesamte Kundenerlebnis wichtig. Ob diese Interaktion in Form einer einfachen Kontaktseite erfolgt oder ein Chat-Fenster für mehr als 60 Sekunden geöffnet wird, hängt von der Art der Produkte ab, die Sie verkaufen Durchschnittliche Website-Besuchsstatistik für Ihren Shop.

Ein Customer Service Desk zum Erfolg zu führen, bedeutet jedoch mehr als nur Software. Sie müssen sicherstellen, dass ein Fachmann für diese Anfragen zur Verfügung steht, da dies sonst eine verschwendete Investition ist. Kunden, die sich die Mühe gemacht haben, auf die Schaltfläche "Contact Customer Service" (Kundendienst kontaktieren) zu klicken, erwarten von einem tatsächlichen Menschen Live-Hilfe. Sie können dies über das Telefon oder per Sofort-Chat erledigen, eine Funktion, die bei Helpdesk-Dienstleistern immer häufiger zum Einsatz kommt. Und wenn Sie auf Personal angewiesen sind, können Sie Ihren Kundenservice mit intelligenten Chatbots ausstatten, die "menschlich" klingen, während Sie in der Lage sind, eine Flut von eingehenden Anfragen auf einer grundlegenden Ebene zu bearbeiten und nur die komplexeren Anfragen an tatsächliche Homo weiterzuleiten Sapiens.

9. Breadcrumb Checkout

Wenn Kunden aus Ihrem Geschäft auschecken, möchten sie wissen, wo sie sich gerade befinden, wie weit sie vom Abschluss entfernt sind und wie sie problemlos zurückkehren können, ohne alle bereits eingegebenen Daten zu verlieren. Breadcrumb Checkout zeigt Kunden mithilfe eines linearen Navigationsschaltflächendesigns genau an, wo sie sich gerade befinden. Auf diese Weise können Verbraucher von Anmelden, Zahlungsoptionen, Versandoptionen, Bestellung aufgeben oder Einkauf fortsetzen aus vorwärts und rückwärts klicken. Ohne dieses Layout können Verbraucher auf die Schaltfläche "Zurück" klicken, feststellen, dass ihre Informationen nicht protokolliert wurden, frustriert sein und dann die Website verlassen.

10. 360-Grad-Ansichten

Haben Sie jemals eine anscheinend bescheidene Jacke online gekauft, nur um festzustellen, dass sie einen blitzblanken Strassboden hat? Nun, als Sie dieses Produkt zurückbrachten, haben Sie Ihre eigene Zeit und die Zeit des Verkäufers verschwendet und das Unternehmen Geld gekostet. Mach dir keine Sorgen, es war nicht deine Schuld. Höchstwahrscheinlich hatte der Verkäufer nur Vorder- und Seitenansicht der Jacke. Wenn der Anbieter 360-Grad-Ansichtsbilder angeboten hätte, hätten Sie diese Strasssteine ​​entdeckt und auf die Schaltfläche Bestellung stornieren geklickt.

Machen Sie nicht den gleichen Fehler auf Ihrer eigenen Website. Kunden können Bilder nicht nur vergrößern, sondern auch drehen oder mehrere Bildwinkel anzeigen, genau wie dies bei Kenneth Cole.com der Fall ist. Auf diese Weise sind sie nicht überrascht, wenn sie den Lieferkarton öffnen und ein Produkt herausnehmen, das sie nicht erwartet hatten.