Lukas G.Hinweis: Der folgende Artikel hilft Ihnen dabei: So machen Sie Ihre WooCommerce-Site mobil
Während ich davon ausgehen möchte, dass alle E-Commerce-Websites über ihr mobiles Einkaufserlebnis nachdenken, beweist mein Einkauf das Gegenteil. Als Verbraucher werde ich regelmäßig mit schlechten mobilen Einkaufserlebnissen konfrontiert, die mich frustrieren. Von Websites, deren Laden ewig dauert, bis hin zu Websites, auf denen ich das Gefühl habe, die Produkte, die ich suche, nicht zu finden. Mobiler E-Commerce (auch mCommerce oder M-Commerce genannt) reicht von ausgezeichnet bis hin zu so frustrierend, dass das Wegwerfen Ihres Geräts die beste Option zum Beenden Ihres Einkaufserlebnisses zu sein scheint.
Heute schauen wir uns an, warum Sie Ihren mobilen E-Commerce-Prozess ernst nehmen müssen. Anschließend werfen wir einen Blick auf Best Practices für den Aufbau eines guten mobilen Erlebnisses.
Warum ist mobiler E-Commerce wichtig?
Es ist noch nicht so lange her, dass mobile Websites nett waren, aber nicht Teil einer Webpräsenz waren. Heutzutage stellt die mobile Nutzung die Desktop-Nutzung des Webs in den Schatten.
Hinzu kommt der enorme Anstieg des mCommerce bei den Nutzern. Im Jahr 2018 wurden rund 40 % der Einkäufe über mobile Geräte abgewickelt[^1]. Am Cyber Monday stieg diese Zahl auf 54 % des Datenverkehrs. Trotz dieses Anstiegs bleiben die Conversions für Mobilgeräte oft deutlich hinter den Desktop-Kauf-Conversions zurück. Dies liegt häufig daran, dass Websitebesitzer die Bedürfnisse mobiler Benutzer nicht berücksichtigen.
Wenn es um das Durchsuchen Ihrer Website geht, verbringt ein mobiler Benutzer möglicherweise 4 Minuten mit dem Durchsuchen, während ein Desktop-Benutzer bereit ist, 5 Minuten dafür zu investieren[^2]. 40 % der mobilen Nutzer sagen, dass sie eine Website verlassen, wenn sie nicht für Mobilgeräte geeignet ist[^3] Und das übertrifft die Loyalität gegenüber Ihrem Geschäft. 14 % der Käufer geben an, dass es ihnen egal ist, ob sie Ihre Marke bevorzugen. Ein schlechtes mobiles Erlebnis führt dazu, dass sie sich Ihre Konkurrenten ansehen[^4].
Es ist mir immer wieder ein Rätsel, warum Ladenbesitzer sich so wenig Mühe geben, 40 % ihrer Nutzer ein gutes Einkaufserlebnis zu bieten. Sie würden nie im Traum daran denken, 40 % der Leute, die ihr Geschäft betreten, dazu zu bringen, eine Augenbinde zu tragen, die es schwieriger macht, alles zu finden, aber es ist zu teuer, als dass sie Geld für die Optimierung für ihre mobilen Käufer ausgeben würden.
Wenn Sie nicht bereit sind, Zeit in die Optimierung Ihres mobilen Einkaufserlebnisses zu investieren, sagen Sie 40 % Ihrer Online-Kunden, dass sich Ihre Mühe nicht lohnt. Im Gegenzug kaufen sie bei Ihren Konkurrenten ein.
Best Practices für mCommerce
Da wir uns nun alle darin einig sind, dass die Betreuung mobiler Kunden der Schlüssel zu einem großartigen E-Commerce-Erlebnis ist, werfen wir einen Blick auf einige der Best Practices, die Sie beim Aufbau dieses idealen Erlebnisses berücksichtigen müssen.
Wenn Sie über eine bestehende Website verfügen, besteht eine der besten Möglichkeiten, niedrig hängende Früchte zu finden, darin, Online-Testtools wie zu verwenden Googles mobilfreundliche Testsuite. Führen Sie diese Tests auf Ihrer Website durch und nutzen Sie dann die Ergebnisse, um die größten Probleme zu identifizieren. Budgetieren Sie regelmäßig, um diese Probleme zu beheben, damit Sie Ihren Benutzern ein besseres Erlebnis bieten können.
Mobile First Design
Einer der größten Trends der letzten Jahre in der Webentwicklung ist das Mobile-First-Design. Hier beginnen Sie mit der abgespeckten mobilen Version Ihrer Website und fügen dann Tablet- und Desktop-Versionen hinzu. Während Sie dies tun, sollten Sie sich fragen: Wenn Ihre mobile Website kein großes Popup für Ihre E-Mail-Liste benötigt, warum benötigt Ihre Desktop-Website ein großes Popup? Aus der Dokumentation von Google wissen wir, dass das Hinzufügen eines Popups für mobile Inhalte ein Problem darstellt Zeichen, dass Ihre Website nicht so hoch eingestuft werden sollte. Indem Sie es nicht auf Ihrer mobilen Website einbinden, sagen Sie, dass es nicht so wichtig ist wie andere Aktionen, die Benutzer durchführen können. Warum hat es für Desktop- oder Tablet-Benutzer an Bedeutung gewonnen? Es ist wahrscheinlich, dass dieser Inhalt auf dem Desktop genauso störend ist und auch von diesen Erlebnissen ferngehalten werden sollte.
Unten sehen Sie ein gut ausgeführtes Beispiel für eine E-Mail-Listenanfrage Twin Six-Site. Beachten Sie den kleinen grünen Balken am unteren Rand, der Ihnen beim Einkaufen nicht im Weg steht, sondern offensichtlich die E-Mail-Liste des Kunden verschiebt.
Ein weiterer Schlüssel zum mCommerce-Design besteht darin, Ihre Kaufwege klar zu machen. Das bedeutet, dass Sie darauf abzielen, einen Benutzer in drei Schritten zum gesuchten Produkt zu führen. Machen Sie dann, nachdem Sie das Produkt gefunden haben, einen klaren Weg zum Produktkauf, ohne sich durch Upsell-Artikel oder andere Dinge navigieren zu müssen, die dem Kauf im Wege stehen.
Für jeden Call-to-Action auf Ihrer Website müssen Sie Ihren Markt berücksichtigen und berücksichtigen, welche Geräte er verwendet und wo er auf Ihrer Website erreichbar ist. Wenn Sie wissen, dass die Mobilgeräte auf Ihrer Website eine große Rolle spielen und Sie hauptsächlich an Frauen verkaufen, die oft kleinere Hände haben, ist es entscheidend, sicherzustellen, dass sich alle Schaltflächen in deren Reichweite befinden, damit Ihre Website benutzerfreundlich ist.
Auf welche Weise können Benutzer am einfachsten wischen, um mit Ihren Produktbildern zu interagieren? Wie viele Inhalte werden auf dem Bildschirm Ihrer wichtigsten Mobilgeräte angezeigt? All diese Dinge sollten beim Aufbau Ihrer mCommerce-Site berücksichtigt werden.
Produktseiten
Wenn es um Produktseiten geht, müssen Sie darüber nachdenken, nach welcher Art von Informationen Benutzer suchen. Ein Drittel der Kaufentscheidungen basieren auf Informationen von vielen Websites, die bereits über ein mobiles Gerät gesammelt wurden[^5]. Hebt Ihre Produktseite dieselben Informationen hervor, die Benutzer gesammelt haben?
Bei einem kleinen Bildschirm kann es für einen Benutzer schwierig sein, genau zu sehen, was er gerade sieht. Hochwertige Bilder aus allen Blickwinkeln können Benutzern helfen, jeden Aspekt des Produkts zu betrachten, an dem sie interessiert sind. Hochwertige Bilder sind heute leicht zu bekommen. Wenn Sie ein wenig über die Beleuchtung des Telefons nachdenken, können Sie problemlos hervorragende Bilder in Ihrer Tasche erzeugen. Wenn das nicht möglich ist, engagieren Sie einen Fotografen vor Ort oder schließen Sie einen Handel mit ihm ab. Meine Freundin macht die Speisekartenfotos für ein paar lokale Restaurants und bekommt kostenloses Essen für sich und ihre Gruppe, wenn sie dort ist. Dank ihres Berufes als Fotografin habe ich ein paar wunderbare Mahlzeiten genossen.
Während einige Websites möglicherweise anständige Bilder ihrer Produkte produzieren, versagen sie dann bei der mobilen Navigation dieser Bilder. Stellen Sie sicher, dass Benutzer Bilder durch Auf- und Zuziehen oder Doppeltippen vergrößern können. Stellen Sie sicher, dass Wischgesten wie erwartet funktionieren. Frustrierte Benutzer werden sich an Ihren Konkurrenten wenden.
Es lohnt sich auch, sich Videodemonstrationen des Produkts anzusehen. Kann ein Benutzer die Größe des Produkts in den Händen einer anderen Person erkennen? Können sie sehen, wie viele Anschlüsse der Computer hat, den sie kaufen möchten, oder wie viel Platz im Gehäuse ist? Mit dieser Art von Inhalten können Sie Ihre Website für Nutzer attraktiver machen und sie sogar auf YouTube platzieren, um mehr Umsatz zu erzielen.
Wenn es um die Schaltfläche „Kaufen“ geht, machen Sie es deutlich. Es sollte leicht zu finden sein und eine Farbe haben, die es vom Rest Ihres Website-Designs abhebt. Es sollte für Ihre Benutzer auf ihren Geräten erreichbar sein, ohne dass sie den Griff ihres Mobiltelefons anpassen müssen.
Wagen
Sobald Sie einen Benutzer mit Produkten in Ihrem Warenkorb haben, sind Sie dem Kauf näher, aber das bedeutet nicht, dass ein Verkauf garantiert ist. Eine Sache, die viele Websites schlecht machen, besteht darin, die Bearbeitung ihres Warenkorbs zu erschweren. Viele Benutzer legen eine Reihe von Produkten in ihren Warenkorb und entscheiden dann an der Kasse, welche sie kaufen möchten. Es sollte für Benutzer einfach sein, Artikel aus ihrem Warenkorb zu entfernen, und Sie erhalten Bonuspunkte, wenn Sie einem Benutzer das Hinzufügen von Produkten zu einer Wunschliste erleichtern.
Wenn ich besuche Baumwollbüro Ich schaue durch und lege alle Shirts, die mich interessieren, in meinen Warenkorb. Dann schaue ich mir die Hunderte von Dollar an, die der Kauf kosten wird, und reduziere den Betrag, den ich kaufe, um mein Budget zu erfüllen. Der einzige Kritikpunkt an Cotton Bureau ist, dass ich die Hemden, die ich nicht gekauft habe, nicht auf eine Wunschliste setzen darf, damit ich sie später sehen und kaufen kann.
Eine Sache, die es zu vermeiden gilt, heißt es Nielson-Gruppeist der gefürchtete „Aktualisieren“-Button. Zwingen Sie Ihre Benutzer nicht dazu, ihren Warenkorb zu aktualisieren, damit sich Änderungen in den Gesamtbeträgen widerspiegeln. Leider enthält der Standard-WooCommerce-Warenkorb diese Update-Schaltfläche, Sie können sie aber verwenden Auto-Update-Warenkorb für WooCommerce um es zu entfernen und das Erlebnis Ihrer Benutzer zu verbessern.
Sie sollten auch gerätespezifische Funktionen nutzen, z Weiterleiten Dadurch können iOS-, iPadOS- und macOS-Benutzer dort weitermachen, wo sie in ihren Browsersitzungen aufgehört haben. Bei richtiger Codierung können Sie dies ausnutzen und die Produkte im Warenkorb eines Benutzers an dessen andere Geräte senden.
Kasse
Wenn es um den Bezahlvorgang geht, ist eines der ersten Dinge, die Sie tun müssen, sicherzustellen, dass ein Benutzer dies tut nicht erforderlich, um an der Kasse ein Konto zu erstellen. Auch wenn Sie über eine Mitgliederseite verfügen, für die ein Konto erforderlich ist, sollten Sie zunächst daran arbeiten, den Kauf zu sichern. Sobald ein Benutzer einen Kauf getätigt hat, können Sie ihm Anweisungen zum Einrichten seines Kontos geben. Bei WooCommerce werden alle Einkäufe, die ein Benutzer getätigt hat, in seinem Konto angezeigt, sobald er ein Konto erstellt, sofern er dieselbe E-Mail-Adresse verwendet.
An der Kasse müssen immer viele Informationen eingegeben werden, also machen Sie es so einfach wie möglich. Das bedeutet, dass Sie Ihre Checkout-Felder richtig beschriften müssen, damit den Benutzern die richtige Tastatur zur Verfügung steht. Wenn Sie nach einer Telefonnummer fragen, sollte ihnen die Zifferntastatur auf ihren Geräten angezeigt werden.
Es lohnt sich auch, jede Möglichkeit zu nutzen, den Benutzern durch das Ausfüllen von Informationen zu helfen. Fragen Sie nicht nach dem Land, in dem sie sich befinden. Das können Sie auf Ihrer Website erkennen und für sie ausfüllen. Wenn Sie vor den Informationen zu Stadt und Bundesstaat nach der Postleitzahl oder Postleitzahl fragen, können Sie Stadt und Bundesstaat eingeben, ohne dass Ihr Benutzer Zeit damit verbringen muss.
Wenn Sie ihre Statusinformationen nicht automatisch ausfüllen können, stellen Sie sicher, dass Sie sie nicht ohne Suche in einem Dropdown-Menü anzeigen. Das Scrollen durch riesige Dropdown-Listen auf Mobilgeräten ist schrecklich. Lassen Sie einen Benutzer zumindest in Ihrem Dropdown-Menü nach seinem Bundesland/Provinz/Land suchen, um ihm Zeit und Frust zu ersparen.
Die meisten Mobilgeräte verfügen über die Möglichkeit, Formularfelder automatisch auszufüllen. Stellen Sie sicher, dass Ihr Checkout-Prozess mit diesen Systemen funktioniert. Sie sollten sich auch die Zeit nehmen, um sicherzustellen, dass alle Passwort- oder Benutzernamenfelder auf Ihrer Website mit den in den Geräten integrierten Passwortverwaltungssystemen funktionieren.
Stellen Sie bei den Bestellzusammenfassungen auf Ihrer Checkout-Seite sicher, dass Sie Ihren Benutzern alle Gebühren darlegen. Wenn Sie sich die Postleitzahl geschnappt haben, nutzen Sie diese, um Versandkosten und Steuern abzuschätzen, anstatt Benutzer in einem späteren Schritt damit zu überraschen. Wenn möglich, zeigen Sie Benutzern den Gesamtbetrag ihrer Bestellung und den CTA, der einen Kauf abschließt, auf einem einzigen Bildschirm ihres Geräts an.
Stellen Sie bei den Zahlungsoptionen sicher, dass Sie wissen, in welche Regionen Sie verkaufen und welche Zahlungsmethoden Sie bevorzugen. Sie sollten Ihren Benutzern zwar die Zahlungsoptionen anbieten, die sie wünschen, aber überfordern Sie sie nicht mit jeder Zahlungsoption, die Sie Ihrer Website hinzufügen könnten. Schauen Sie sich das Hinzufügen von Apple Pay, Google Pay und vielleicht auch Ihrer Kreditkartenabwicklung an. Testen Sie ruhig, ob der Einsatz von PayPal One-Touch oder anderen Zahlungsgateways Ihre Umsätze steigert oder verringert, aber bieten Sie ihnen nicht zu viele Optionen an.
Wenn Sie Ihre Verarbeitung anbieten, stellen Sie sicher, dass Ihre Website mit integrierten Kartenausfüllsystemen funktioniert. Auf iOS-Geräten können Sie Ihre Kamera öffnen und Ihre Kreditkarte vorzeigen, um Zahlungsfelder auszufüllen. Dies kann viel dazu beitragen, dass ein Benutzer nicht frustriert ist, eine Menge zusätzlicher Informationen einzugeben.
Nachdem wir uns nun den gesamten Kaufprozess angesehen haben, werfen wir einen Blick auf einige andere Bereiche, die Sie für ein ideales mCommerce-Erlebnis optimieren müssen.
Bauen Sie auf Geschwindigkeit
Viele Länder verfügen nicht über eine schnelle Mobilfunkbandbreite. Sie müssen daher sicherstellen, dass die Bandbreite begrenzt bleibt und nur die Inhalte angezeigt werden, die Sie anzeigen MÜSSEN, um einen Verkauf zu erzielen. Warten geht über die Treue zur Website: 14 % der Käufer geben an, dass sie zu einer anderen Website wechseln, wenn sie zu lange warten müssen. Das bedeutet, dass Sie Geschwindigkeitstests auf Ihrer Website durchführen und alle Interaktionen oder Codes ausschließen müssen, die einem Benutzer beim Kauf im Wege stehen.
Bilder optimieren
Obwohl ich oben gesagt habe, dass Sie qualitativ hochwertige Bilder haben sollten, gibt es einen Punkt, an dem Ihre Bilder viel zu groß für das Web sind. Als Faustregel gilt, dass die Größe der Bilder deutlich unter 1 MB liegen sollte. Dies kann durch die Optimierung von Bildern und die Reduzierung ihrer Gesamtabmessungen erreicht werden.
Werkzeuge wie Krake Es gibt Plugins für WordPress, die dies beim Hochladen von Bildern für Sie erledigen können. Für große Websites, die über veraltete, schlecht optimierte Bilder verfügen, können Sie Befehlszeilentools wie verwenden jpegoptim oder pngcrush um Ordner mit Bildern rekursiv zu optimieren. Anfang 2020 habe ich jpegoptim und pngcrush verwendet, um die über 50.000 Bilder meiner Kunden zu verwalten, die über einen Zeitraum von mehr als 10 Jahren entstanden sind. Wir haben monatlich 20 GB Speicherplatz und enorme Mengen an Bandbreite eingespart.
CSS, JS, HTML und Cache minimieren
Zusätzlich zur Komprimierung Ihrer Bilder sollten Sie auch auf die Minimierung Ihres CSS, JavaScript und HTML achten. Eines meiner Lieblingswerkzeuge dafür ist WP Rocket. Ich habe festgestellt, dass dies durchweg zu enormen Geschwindigkeitsverbesserungen auf Client-Sites führt, ohne dass viel Zeit für die Konfiguration des Plugins aufgewendet wird.
Wenn Sie verwenden möchten WP Rocket mit unserem Hostinger CDN, wir haben eine Anleitung in unserer Dokumentation.
Schnittverfolgung und -freigabe
Eine weitere Möglichkeit, Ihre Website einfach zu optimieren, sind die von Ihnen verwendeten Tracking- und Sharing-Skripte. Ja, Sie benötigen einige Analysen, um zu sehen, was Ihre Benutzer tun, und um Prioritäten zu setzen, welche Geräte optimiert werden müssen. Sie benötigen jedoch nicht 5 Tracking-Skripte und 3 Social-Sharing-Skripte, die auf jeder Seite geladen werden.
Für die meisten Websites sind Social-Sharing-Buttons eine riesige Einöde, die zeigt, dass niemand Ihre Inhalte teilt. Schlimmer noch: Für mobile Benutzer verdecken sie oft Teile des Inhalts, was das mobile Erlebnis schrecklich macht. Ich habe viele Websites verlassen, weil ihre Social-Buttons den Inhalt, den ich konsumieren wollte, unleserlich machen.
Reduzieren Sie alles, was Sie nicht benötigen, um die Website funktionsfähig zu halten und Ihren Benutzern ein besseres Erlebnis zu bieten.
Verfeinern Sie weiter
Selbst wenn Sie alle oben genannten Vorschläge durchgehen und Ihre Website verbessern, müssen Sie Ihr mCommerce-Erlebnis weiter verbessern. Im Oktober 2020 veröffentlichte Apple iPadOS 14, das hinzugefügt wurde Scribble-Unterstützung für den Apple Pencil. Ja, die meisten Websites sollten ohne Änderungen damit funktionieren, aber haben Sie es getestet, um sicherzugehen?
Sicherzustellen, dass Ihre Website für mobile Benutzer optimiert ist, ist eine fortlaufende Aufgabe, genau wie die Optimierung Ihrer Website für Desktop-Benutzer. Versuchen Sie bei jeder Änderung, die Sie vornehmen, A/B-Tests durchzuführen, damit Sie Entscheidungen treffen, die das Benutzererlebnis und die Website-Konvertierungen verbessern. Stellen Sie gleichzeitig sicher, dass Sie nicht nur für Mobilgeräte optimieren und dadurch Benutzern mit anderen Geräten ein schlechteres Erlebnis bereiten.
Letztlich ist die mobile Nutzung keine Modeerscheinung. Es wird bleiben und Sie müssen sicherstellen, dass Sie es berücksichtigen, wenn Sie weiterhin Verkäufe an Ihre Kunden tätigen möchten.
