15 Tipps für mobiles Design zur Steigerung des E-Commerce-Umsatzes

Wussten Sie das? 55% des gesamten E-Commerce-Verkehrs ist jetzt auf einem mobilen Gerät?


Richtig, mehr als die Hälfte aller Menschen, die sich Shopping-Sites ansehen, sind auf ihrem Handy oder Tablet.

Hier ist jedoch das Problem: 46% der Top 50 Einzelhändler Sie haben noch keine reaktionsfähige mobile Website. Obwohl die Hälfte des gesamten Einkaufsverkehrs auf einem Mobiltelefon stattfindet, ist die Hälfte der Einzelhändler nicht dafür eingerichtet. Das bedeutet, dass die Hälfte der Käufer ihr Telefon kneift, zoomt und dreht, um eine Website richtig zu sehen.

Wir sind uns also einig, dass eine reaktionsschnelle, ansprechende mobile Website unerlässlich ist. Aber das ist erst der Anfang. Wie bei einer Desktop-Site können Sie Ihre mobile Site optimieren und optimieren, um den Umsatz noch weiter zu steigern. Hier ist wie:

1. Einfachheit

Die Arbeit mit einem so kleinen Bildschirm wird immer schwierig. Deshalb ist Einfachheit Ihr oberstes Ziel. Für E-Commerce-Websites ist dies besonders schwierig, da es so viel Inhalt gibt, auf den man sich konzentrieren kann. Wie bewerben Sie alle Ihre Produkte, ohne den kleinen Bildschirmbereich zu überladen??

Sehen Sie sich an, wie ETQ seine Schuhpalette auf seiner mobilen Website anzeigt. Es ist wunderschön in seiner Einfachheit. Sie haben den größten Teil des Bildschirmbereichs völlig frei gelassen, um ihre Produkte in den Mittelpunkt zu stellen. Sogar die Farbpalette wurde passend zur Produktpalette ausgewählt. Es gibt der gesamten Site ein einfaches, zusammenhängendes Gefühl. Obwohl der Bildschirm winzig ist, fühlt er sich geräumig an.

2. Denken Sie an den Daumen!

Versuchen Sie jetzt, Ihr Smartphone zu halten. Bewegen Sie Ihren Daumen über den Bildschirm und fühlen Sie, wo es am bequemsten und natürlichsten ist. Die Daumengröße eines jeden ist unterschiedlich, aber im Allgemeinen gilt dieses Bild unten für die meisten Menschen:

Daumenverfolgung

In diesem Sinne möchten Sie keine Schaltflächen oder wesentlichen Komponenten in die oberen Bereiche einfügen. Lassen Sie das nur für Header. Platzieren Sie alle scrollbaren Inhalte und Schaltflächen in der Mitte, damit Sie sie leicht und bequem erreichen können. (Vergessen Sie nicht, an Linkshänder zu denken! Drehen Sie die Bilder oben um, um zu sehen, wie es für Linkshänder läuft.).

3.… besonders die großen Daumen

Neben dem Daumen “Reichweite” sollten Sie auch den “großen Daumen” berücksichtigen. Wir haben alle eine mobile Website verwendet, auf der Sie auf den kleinsten Link klicken müssen. Es ist schwierig und frustrierend, oder? Die allgemeine Regel ist, sich für größere Elemente zu entscheiden, als Sie für notwendig halten.

Die mobile Website von Hobbycraft ist ein gutes Beispiel. Zuallererst machen ihre Big-Picture-Links es großen Daumen super einfach. Schauen Sie sich jedoch die Symbole oben an (“Geschäfte, Konto, Warenkorb”). Sie sind viel größer als Sie normalerweise erwarten. Hobbycraft denkt an den großen Daumen, und das sollten Sie auch.

4. Hamburger Navigationsmenüs

Einer der beliebtesten Designtrends der letzten zwölf Monate ist das Hamburger-Menü. Ein Beispiel finden Sie oben auf der Website von Hobbycraft. Es sind die drei Zeilen, die wie ein Hamburger aussehen – klicken Sie darauf und das vollständige Navigationsmenü wird erweitert.

Es gibt keinen Platz für die herkömmliche Headernavigation und es würde einfach den Bildschirm überladen. Entscheiden Sie sich stattdessen für ein expandierendes Navi. Hier finden Sie eine gute Balance. Es sollte ordentlich und abgelegen sein. Gleichzeitig sollte es offensichtlich und leicht zu tippen sein.

Wenn Sie viele Produkte und Kategorien im Angebot haben, verwenden Sie das erweiterte Menü, um es einfacher zu machen. Haben Sie keine Angst, den gesamten Bildschirmbereich zu nutzen. Schauen Sie, wie Argos das erweiterte Menü unten präsentiert.

IMG_3663

5. Wählen Sie eine große Schriftart

Ein kleiner mobiler Bildschirm zwingt uns, lange und gründlich über die von uns verwendete Schriftart nachzudenken. Es ist kein Platz für kleine, komplizierte Schriftarten. Denken Sie stattdessen einfach, mutig und groß. Im Allgemeinen ist eine serifenlose Schrift sauberer und einfacher (d. H. Ariel ist besser als Times New Roman)..

71950dee059b803c4a7caa30dce8f5bf

Denken Sie daran, dass diese Entscheidung Sie auch dazu zwingt, Ihre Kopie und Ihren Wortlaut sorgfältiger auszuwählen. Nutzen Sie diese Gelegenheit, um Ihre Kopie zu vereinfachen und zu optimieren. Versuchen Sie, Ihre Botschaft so klar und einfach wie möglich zu vermitteln. Mach es kurz. Mach ‘es kurz; mache es kurz; fasse dich kurz. Dies verbessert nicht nur Ihr mobiles Design, sondern auch Ihr gesamtes Unternehmen.

6. Verwenden Sie “Smart Search”.

Menschen hassen es, winzige Suchformulare auf einem mobilen Gerät zu verwenden. Es zwingt uns, hineinzuzoomen, auf das Suchfeld zu klicken und mit der fummeligen Tastatur zu tippen. Fehler sind leicht und können zu Frustration führen.

Verwenden Sie ein Feld für die intelligente Suche, um die Benutzererfahrung zu verbessern. Wenn Sie auf das Feld klicken, sollte das Design automatisch neu ausgerichtet werden, damit das Suchfeld den Bildschirm ausfüllt. Stellen Sie dann sicher, dass eine vorausschauende Suche vorhanden ist, sodass der Benutzer nur die ersten Buchstaben eingeben muss.

Sie können dies auf der Europcar-Website in Aktion sehen. Der Kunde beginnt mit der Eingabe von “Norw” und die Site schlägt automatisch die verschiedenen Niederlassungen in Norwich vor. Einfach.

IMG_4331

7. Vereinfachen Sie Ihre Anmelde- und Kaufformulare

Wir sprechen viel darüber, wie Sie Ihre Anmelde- und Kaufformulare so einfach und schnell wie möglich gestalten können. Dies ist ein wichtiger Bestandteil Ihrer UX-Designstrategie. Es ist auch der Ort, an dem E-Commerce-Websites bis zu 60% der Conversions verlieren, wenn sie die Dinge übermäßig komplizieren. Wenn sie den Prozess gestartet haben, ist der Kunde bereits überzeugt. Die einzige Möglichkeit, den Verkauf oder die Anmeldung zu verlieren, besteht darin, die Dinge zu schwierig zu machen.

Versuchen Sie erneut, die erforderliche Eingabe zu begrenzen. Verwenden Sie prädiktive Typfelder und aktivieren Sie die Optionen zum automatischen Ausfüllen. Verwenden Sie Bildlaufwerkzeuge, damit Benutzer beispielsweise Optionen für das Geburtsdatum auswählen können. Wir wissen, dass Kaufformulare häufig einiges an Informationen erfordern. Es gibt jedoch eine Möglichkeit, diesen Prozess zu vereinfachen.

Sehen Sie sich an, wie Firebox mithilfe eines Zahlensystems den Benutzern zeigt, welche Phasen noch im Prozess verbleiben. Ein wichtiger UX-Designtrick besteht darin, den Benutzern mitzuteilen, wo sie sich befinden. Als Kunden möchten wir wissen, was wir erwarten können, und Firebox tut dies fachmännisch.

img_1292-blog-half

8. Maximal drei Schichten

Es ist viel einfacher, sich auf einer mobilen Website zu verlaufen. Idealerweise möchten Sie sicherstellen, dass Ihre mobile Site nur drei Ebenen tief ist. Ein Beispiel dafür, wie dies auf einer Mode-E-Commerce-Website funktionieren könnte, lautet wie folgt:

  1. Homepage: Kunde wählt “Kategorie: Mädchen”
  2. Der Kunde wählt die Unterkategorie: Schuhe
  3. Der Kunde klickt auf die Produktseite.

Das sind drei einfache Entdeckungsebenen. Die einzige weitere Option sollte die Kaufseite oder die Anmeldung sein. Vermeiden Sie ein Kaninchenbau mit Unterkategorien und weiteren Optionen. Halten Sie es wie immer einfach und lassen Sie die Benutzer jederzeit wissen, wo sie sich befinden.

9. Machen Sie es sich einfach, zur Startseite zurückzukehren

Wenn Ihr Kunde drei Ebenen tief ist, geben Sie ihm immer eine mutige und einfache Möglichkeit, zur Startseite zurückzukehren. Denken Sie daran, dass es leicht ist, sich auf einer mobilen Website verloren zu fühlen. Geben Sie den Benutzern daher eine einfache Möglichkeit, sie zurückzusetzen und zum Start zurückzukehren.

Schauen Sie sich die Produktseite von Lush an. Wenn Ihr Kunde irgendwie hierher navigiert ist, möchte er möglicherweise von vorne beginnen. Das große „LUSH“ -Logo oben ist eine einfache und offensichtliche Kennung für die Rückkehr nach Hause. Egal wo Sie sich auf der Website befinden, Sie haben immer den Anker, der Sie zurück zum Start bringt.

img_1304-blog-half

10. Kein Quetschzoom!

Mobile Websites waren lange Zeit nur eine Kopie ihres Desktop-Designs. Es bedeutete, dass Sie zoomen mussten, indem Sie den Bildschirm drückten. Dies ist ein gefährlich veralteter Designtrend und sollte vermieden werden. Im Idealfall sollte alles proportional zum Bildschirm sein. Alle Schriftarten sollten ohne Vergrößern lesbar sein. Alle Links sollten ohne Einklemmen anklickbar sein.

Apple-Pinch-to-Zoom

Es gibt nur eine Ausnahme, wenn das Kneifen nützlich ist: Produktbilder. Für Kunden ist es immer noch sehr nützlich, Produktbilder zu kneifen und zu vergrößern. Sie möchten jedes Detail sehen können, bevor sie kaufen.

11. Gehen Sie auf das Sicherheitsbedenken ein

Trotz des enormen Datenverkehrs zu mobilen E-Commerce-Websites besteht nach wie vor die allgemeine Sorge, dass der Kauf von etwas von einer mobilen Website nicht so sicher ist wie ein Desktop. Natürlich gibt es keinen Unterschied in der Sicherheit von Handy über Tablet bis Desktop. Aber a 2013 Studie zeigt, dass sich fast die Hälfte aller Online-Käufer beim Kauf eines Smartphones weniger sicher fühlt. Diese Angst wird wahrscheinlich Ihre Conversions töten.

Es ist eine einfache Vertrauensfrage. Es ist Ihre Aufgabe, Kunden das Gefühl zu geben, auf Ihrer Website sicherer zu sein. Ihre E-Commerce-Site sollte im Idealfall bereits über ein SSL-Sicherheitszertifikat verfügen. Wenn dies nicht der Fall ist, kaufen Sie eine. Dadurch erhalten Sie das kleine gelbe Vorhängeschloss in Ihrer Symbolleiste. Stellen Sie auf Ihrer mobilen Website sicher, dass das SSL-Vorhängeschloss so gut wie möglich angezeigt wird.

image18

Eine andere Möglichkeit besteht darin, sicherzustellen, dass Ihre Kunden ein Produkt für später speichern oder per E-Mail an sich selbst senden können. In einigen Fällen fühlen sie sich sicher, wenn sie es später auf ihrem Desktop kaufen.

12. Stapeln von Inhalten

Für viele Menschen bedeutet das Erstellen einer mobilen Website einfach, ein “responsives” Thema in WordPress oder Shopify oder auf der von Ihnen verwendeten Plattform auszuwählen. Dies ist zwar ein guter Anfang, Sie sollten jedoch genau darauf achten, wie das Thema Ihre Inhalte automatisch mischt. Nicht sicher, was ich meine? Schauen Sie sich dieses Diagramm unten an:

15_contentStacking

Auf diese Weise kann ein responsives Thema Ihre Inhalte automatisch für ein Tablet (linkes Bild) oder ein Smartphone (rechtes Bild) stapeln. Überlegen Sie genau, was Ihre wichtigsten Inhalte sind, und stellen Sie sicher, dass sie korrekt gestapelt sind. Auf der rechten Seite werden beispielsweise die Produkte (Kasten 5 – Arten von Bädern) ganz nach unten gedrückt. Sie können sogar unter die „Falte“ geschoben werden..

Experimentieren Sie mit Ihrem Layout und dem Stapeln von Inhalten, um sicherzustellen, dass Ihre wichtigsten Inhalte an der richtigen Stelle angezeigt werden.

13. Verlieren Sie Flash-Inhalte

Flash ist auf jedem Gerät ein relativ veraltetes Format. (In der Tat sind Designer kämpfen, um es ein für alle Mal zu töten! Es verschluckt Ressourcen, ist langsam und ein Spielplatz für Hacker. Während dies auf einer Desktop-Site eine schlechte Nachricht ist, ist es auf einem Smartphone oder Tablet noch schlimmer.

Die meisten Mobilgeräte spielen überhaupt keine Flash-Medien ab. Wenn Sie sich also für eine Video- oder Produktdemonstration darauf verlassen, entfernen Sie es – Ihre Kunden können es auf einem Mobiltelefon nicht sehen. Apple hat es vor Jahren blockiert, und Android folgte kurz darauf.

Die Alternative besteht darin, sicherzustellen, dass Ihre Website HTML5-kompatibel ist (Hier erfahren Sie mehr) und verwende YouTube, um Videos zu hosten.

14. Umfassen Sie die Einschränkungen!

Viele Leute, mit denen ich gesprochen habe, äußerten sich frustriert über die Einschränkungen einer mobilen Website. Die einfache Tatsache ist: Sie können nichts dagegen tun! Umfassen Sie stattdessen diese Einschränkungen.

Es zwingt Sie, wichtige Entscheidungen zu treffen, die Ihrem gesamten Unternehmen helfen. Wie kann ich meine Website vereinfachen? Wie kann ich meinen Standpunkt in weniger Worten vermitteln? Wie kann ich auf kleinerem Raum präziser und überzeugender sein? Welches meiner Produkte sollte ich priorisieren??

Ich bin fest davon überzeugt, dass die Beantwortung dieser Fragen Ihr Geschäft stärkt. Jedes Mal, wenn Sie Ihren Vorschlag destillieren können, machen Sie ihn leistungsfähiger. Und das ist wichtig für eine gute mobile Website.

15. Treffen Sie Entwurfsentscheidungen mit Google Analytics

Das Problem beim Entwerfen für Mobilgeräte besteht darin, dass so viele Geräte berücksichtigt werden müssen. Optimieren Sie Ihr Layout und Design für das iPad oder Android-Tablet? Optimieren Sie für iPhone 5 oder iPhone 6? Oder das Samsung Galaxy?

Ein ansprechendes Design bedeutet, dass es sich auf unterschiedliche Weise formt. Hier kann Google Analytics Ihnen helfen. Mit der neuesten Version von Analytics können Sie sehen, welche Mobilgeräte am häufigsten auf Ihre Website zugreifen:

Mobile-Devices-Analytics-Tracking

In diesem Fall sind iPhones bei weitem das führende Gerät. Es ist also sinnvoll, alle Tests auf einem iPhone durchzuführen. Priorisieren Sie das Top-Gerät, wenn Sie Ihre mobile Website optimieren.

– –

Obwohl mobile Geräte mittlerweile den Online-Shopping-Markt dominieren, liegen mobile Websites noch weit zurück. Sie werden von der Hälfte der größten Einzelhändler als nachträglicher Gedanke behandelt.

Wenn Sie diese Optimierungen und Änderungen vornehmen, können Sie der Konkurrenz einen Schritt voraus sein, indem Sie diesen enormen Verkehrsfluss nutzen.

Ich würde gerne hören, was Sie getan haben, um Ihre mobile Website zu optimieren. Welche Optimierungen haben für Sie funktioniert?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map