Möglichkeiten zur Verbesserung der UX Ihrer mobilen E-Commerce-Site

Denken Sie immer daran, dass eine bewährte Vorgehensweise, die von jemandem geteilt wird, für andere möglicherweise nicht die beste ist. Diese Best Practices werden nicht gleichermaßen erstellt, sondern sind nur die Ausgangspunkte. In dieser Artikelserie werden wir die bestens recherchierten Best Practices oder Richtlinien für mobile Websites durchgehen. Unser Ziel ist es, unser Wissen über die Entwicklung erstaunlicher mobiler Websites zu erweitern und Best Practices mit quantitativen Daten darüber zu validieren, wie Benutzer eine mobile Website in der spezifischen Dimension von Aussehen, Klarheit, Glaubwürdigkeit und Benutzerfreundlichkeit wahrnehmen.

Es wäre am besten, diese Artikelrichtlinien in Ihrer Praxis zu verwenden, aber es ist nicht das, was Sie am Ende haben sollten. Hier sollten Sie mit Ihrer Optimierung beginnen. Sie sollten mindestens so gut sein wie diese Richtlinien. Denken Sie daran, dies sind die aktuellen Web-Praktiken. Was vor 2 Jahren noch funktioniert hat, funktioniert vielleicht nicht mehr. Die Taktikfigur ist echt. Menschen, Webtechnologien und Marketingtrends ändern sich ständig, und Gewinne sind immer vergänglich.

Wir empfehlen, diese Richtlinien zu berücksichtigen, aber berücksichtigen Sie auch, wie Ihre spezifische Website zu den Richtlinien passt oder sich von ihnen unterscheidet. Sie können diese Praktiken sofort auf Ihrer mobilen Website anwenden, wir empfehlen jedoch, sie zuerst zu testen. Sie dürfen nicht in jedem Fall angewendet werden. Lassen Sie uns den ersten Teil von „Wie verbessern Sie die UX der mobilen Site Ihres E-Commerce-Shops?“ durchgehen.

1. Versuchen Sie zuerst, Ihre mobile Site zu entwerfen (dh bevor Sie die Desktop-Site entwerfen)

Wir alle wissen, wie wichtig mobile Geräte für unseren Vertrieb sind. Mehr als 50 % des Umsatzes werden über mobile Geräte getätigt. Das Entwerfen Ihrer mobilen Website macht weder Spaß noch ist es einfach. Dies ist der intelligenteste Weg, um mit der Gestaltung Ihrer Website zu beginnen. Lassen Sie uns wissen, warum:

Die Einschränkungen sind für mobile Geräte höher als für jede andere Plattform. Die Bildschirme sind kleiner und die Bandbreite ist gering, und viele andere Einschränkungen. Wenn Sie mit der mobilen Site bei Null anfangen, können Komplikationen vermieden werden, die mit einer anmutigen Verschlechterung einhergehen (z. B. Funktionen, die nicht plattformübergreifend übersetzt werden, oder unerwünschte Daten, deren Ladezeit länger dauert).

Als nächstes sollte eine benutzerfreundliche mobile Website sauber, intuitiv und schnell zu laden sein. Diese Anforderungen zwingen die Designer zu verstehen, warum die Benutzer die Site besuchen und welche Inhalte und Funktionen wichtig sind.
Eine bessere UX auf den mobilen Plattformen bedeutet, dass die Benutzer leicht alles finden, wonach sie suchen, und nicht mehr. Darüber hinaus reduziert die Entwicklung eines klaren Frameworks für priorisierte Inhalte den Arbeitsaufwand für die Gestaltung der Desktop-Site.

2. Mobile Site automatisch umleiten und die Seiten müssen für Mobilgeräte optimiert sein

Die Zahl der mobilen Nutzer nimmt immer noch zu, wodurch die Zahl der Käufer über das Handy steigt. Die Leute kaufen häufig über ihr Mobiltelefon und erwarten, dass es einfach ist. Wenn Sie nicht mithalten, fallen Sie zurück.

Um mitzuhalten, sollte die E-Commerce-Site für alle Geräte optimiert sein. Bieten Sie ein besseres mobiles Erlebnis durch eine optimierte mobile Site, dh eine vollständig responsive mobile Site.

Responsive Design ist eine Praxis, bei der sich Webseiten an den Bildschirm anpassen, auf dem sie angezeigt werden. Der Inhalt der Webseite passt sich automatisch an die Bildschirme verschiedener Geräte wie Laptops, Smartphones, Tablets, Desktops usw. an. Bei diesem Ansatz ändert sich der Inhalt und die Funktionalitäten nicht.

Bei einer responsiven Site entspricht dieselbe URL allen Plattformen. Es bedeutet einfach, dass es keine separaten URLs für die Mobilgeräte gibt und Benutzer nicht warten müssen, um auf diese URLs umzuleiten. Weniger Ladezeit = besseres mobiles Erlebnis . Darüber hinaus geht alle SEO zu einer URL.

Eine adaptive Website ist wie eine responsive Website, aber es gibt kein einziges Layout für jede Bildschirmgröße. Stattdessen gibt es mehrere Layouts für unterschiedliche Bildschirmgrößen. Die Site erkennt, welches Gerät verwendet wird und zeigt das entsprechende Layout an.

Diese Richtlinie lässt sich leicht durch die Entwicklung einer responsiven mobilen Website erreichen. Stellen Sie sicher, dass Sie die Website auf verschiedenen Plattformen und Geräten (mit verschiedenen Browsern) einer QA unterziehen. Überprüfen Sie außerdem alle Seiten der Website, um sicherzustellen, dass sie für Mobilgeräte optimiert sind. Der Schlüssel hier ist, ein optimales Benutzererlebnis für mobile Benutzer zu bieten.

3. Konsistentes Design auf verschiedenen Plattformen für ein reibungsloseres UX

Sie müssen Konsistenz und Standard über alle Plattformen und Geräte hinweg aufrechterhalten, um die Benutzerfreundlichkeit sicherzustellen. Dies bedeutet, dass Benutzer in Ihrem E-Commerce-Shop unabhängig vom verwendeten Gerät auf die gleichen visuellen Elemente, Muster und Abläufe stoßen. Kurz gesagt, Benutzer, die über ein mobiles Gerät oder einen Desktop-Browser auf Ihren E-Commerce-Shop zugreifen, haben die gleiche Erfahrung.

Da die Bildschirmgrößen unterschiedlich sind, können unterschiedliche Layouts erforderlich sein, aber bei einem einheitlich gestalteten Erlebnis werden Benutzer bekannte Funktionalitäten wiedererkennen.

Viele Startups und Unternehmer machen den Fehler, Desktop- und mobile Websites als unterschiedliche Produkte zu behandeln. Dieser Ansatz kann zu Inkonsistenzen führen, was zu einer schlechteren UX und möglicherweise zu Missverständnissen bei der Marke des Unternehmens führt.

Sie können dieses Problem vermeiden. Hier einige Empfehlungen:

A. Visuelle Identität

Versuchen Sie, die gleichen Farben, das gleiche Erscheinungsbild, die gleichen Schriftarten, visuellen Elemente usw. zu verwenden.

B. Konsistente Ikonographie

App- und Websymbole sollten die gleiche Funktionalität darstellen

C. Formulierung

Die Namen der Schaltflächen, Links und Menüoptionen sollten auf der mobilen und der Desktop-Website gleich sein.

D. Interaktionen & Fluss

Der Navigationsprozess für jede Funktion sollte gleich sein (z. B. ein Produkt oder eine Zahlungsmethode finden)

E. Koordination zwischen Designern, Entwicklern und Testern

Jeder im Team sollte ein ähnliches Verständnis von jeder bereitgestellten Funktion haben.

Durch die Anwendung dieser grundlegenden Konzepte fühlen sich die Benutzer bei der Nutzung von Web- und mobilen Diensten ohne Schwierigkeiten wohl.

4. Nutzen Sie Analytics, um ein Gerät zu priorisieren, während Sie Ihre mobile Website entwerfen

Wir alle greifen mindestens einmal über unsere mobilen Geräte auf eine Website zu. Wenn Sie jedoch wissen, welches Mobilgerät oder welche Plattform am häufigsten zum Surfen in Ihrem Geschäft verwendet wird, können Sie Ihre Website am besten für dieses Gerät optimieren.

Analysetools wie Google Analytics können Ihnen effiziente, schnelle und klare Metrikeinblicke liefern, um genau zu bestimmen, wie ein Benutzer auf Ihre Website zugreift. Mit Google Analytics erhalten Sie Antworten auf die folgenden Fragen:

• Wie viele Benutzer, die die Website besuchten, stammten aus der Android- oder iOS-Community?
• Welcher Anteil der Besucher nutzt Geräte mit einem Bildschirm mit niedriger Auflösung?
• Gibt es einen Unterschied in der Anzahl der Seitenaufrufe von Benutzern, die die neueste Android-Version und die 2 Jahre alte verwenden?
• Wie lange verbringen iOS-Mobilbenutzer im Vergleich zu Android-Benutzern im Store?
• Welche Verbindungsart wurde verwendet? WLAN oder mobile Daten?

Daten wie diese sind für die Produktstrategie wertvoll und die Unternehmen können sich auf Ihre Zielgruppe konzentrieren. Sie können Produkte erstellen, die den tatsächlichen Bedürfnissen ihrer Benutzer entsprechen.

Beispiel : Ein E-Commerce-Shop hat viele Bilder, Inhalte und eine lange Liste, die ein Scrollen auf dem Bildschirm erfordert. Sie stellen möglicherweise fest, dass die meisten Benutzer einige Sekunden auf der Website bleiben. Das Unternehmen kann das Profil der Geräte überprüfen, die auf seine Site zugegriffen haben. Wenn die Benutzer, die die Website verlassen, Geräte mit kleinen Bildschirmen und niedrigen Auflösungen verwenden, verlassen Benutzer möglicherweise die Site aufgrund einer schlechten UX. Der nächste Schritt, den wir unternehmen können, ist die Verbesserung der UX.

Kurz gesagt, je mehr wir über die Benutzer wissen, desto mehr können wir ein zugängliches, effizientes und angenehmes Produkt gewährleisten.

5. Testen Sie mobile Versionen Ihrer Site

Sie müssen überprüfen, wie Ihre Website auf verschiedenen Mobilgeräten aussieht und funktioniert. Es gibt bestimmte Tools, mit denen Sie Ihre Website testen können.

A. Handyfreundlich . von Google

Dies ist ein einfaches Werkzeug. Sie müssen Ihre Site-URL eingeben und Google erstellt eine „nutzerfreundliche“ Bewertung. Die Rezension kann so aussehen:
„Diese Seite ist einfach auf einem mobilen Gerät zu verwenden.“
ODER
„Die Seite ist nicht mobilfreundlich – diese Seite kann auf einem mobilen Gerät schwer zu verwenden sein. Beheben Sie die folgenden Probleme:

• Text zu klein zum Lesen
• Ansichtsfenster nicht festgelegt
• Anklickbare Elemente zu nah beieinander
• Verwendet inkompatible Plugins.“

B. Handytest. mich

In mobile test.me müssen Sie die URL der Website eingeben, die Sie überprüfen möchten, und das Gerät und das Betriebssystem auswählen. Von dort aus können Sie die vollständige Website-Ansicht auf jedem mobilen Gerät abrufen. Durch Testen können Sie die Fehler vor dem Start beheben.

6. Erstellen Sie flexible und flüssige Design-Layouts

Auf dem heutigen Markt gibt es viele mobile Auflösungen und Bildschirmgrößen, was die Bemühungen der Designer erhöht. Auch die Dichten vieler Geräte variieren. Vom Bildschirm mit niedriger Dichte (360 Pixel) bis zum Bildschirm mit hoher Dichte (4K) sind hier die üblichen Methoden zur Beschreibung der Dichte:

• Niedrige Dichte (ldpi)
• Mittlere Dichte (mdpi)
• Hohe Dichte (hdpi)
• xhdpi (Extra hohe Dichte)
• xxhdpi (Extra-extra hohe Dichte)
• xxxhdpi (Extra-extra-extra hohe Dichte)

Hier sind einige einfache Begriffe im Zusammenhang mit der Dichte

Ein Beschluss

Anzahl der Pixel auf dem Bildschirm

B. Dichteunabhängiges Pixel (DP)

Eine virtuelle Pixeleinheit definiert ein UI-Layout. Ein DP drückt Layoutabmessungen oder -position dichteunabhängig aus. Der DP entspricht 1 physikalischen Pixel auf einem 160-dpi-Bildschirm.

C. Bildschirmgröße

Die Bildschirmgröße wird als Bildschirmdiagonale gemessen.

D. Bildschirmdichte

Anzahl der Pixel innerhalb des physischen Bereichs des Bildschirms, normalerweise dargestellt durch Punkte pro Zoll.

Alle diese Konzepte können bei der Entwicklung der mobilen Website angewendet werden. Es stellt sicher, dass die Schnittstellen über alle Geräte hinweg anpassbar sind. Dies wird als Fluidschnittstelle bezeichnet. Kurz gesagt, eine Fluidschnittstelle ist eine, bei der die Dimensionen in Prozent definiert sind.

7. Wenn Sie kein Responsive Design verwenden, erstellen Sie separate URLs, um die Konsistenz zu gewährleisten

Bei der Gestaltung der Benutzeroberfläche des E-Commerce-Shops sollten Designer darüber nachdenken, wie Inhalte angezeigt werden und Benutzer mit unterschiedlichen Geräten darauf zugreifen. In bestimmten Szenarien weichen Proportion und Layout stark von den ursprünglichen Designvorgaben ab. Wenn Websites nicht so konzipiert sind, dass sie auf mehrere Geräte passen, sind sie nicht „responsive“.
Responsive Design ist eine Entwicklungstechnik, die den Gerätetyp des Clients erkennt und sein Design an die Bildschirmgröße anpasst, auf der es angezeigt wird. So kann derselbe Inhalt auf einem Desktop im 3-Spalten-Format, auf einem Tablet im 2-Spalten-Format und auf einem Smartphone im 1-Spalten-Format angezeigt werden.

Nicht ansprechendes Design kann zu mehreren Problemen führen, wie z. B. falsche Schriftgrößen, nicht anklickbare Schaltflächen usw. Nicht jeder ist wie wir, der hoch ansprechende Designs erstellen kann. Aber es gibt eine Alternative für die Entwickler und Designer, Responsive Webdesign zu verwalten. Sie können URLs generieren, die automatisch (über HTML-Tags) den Gerätetyp erkennen. Nach der Erkennung des Geräts können Inhalte optimal angezeigt werden:

Einige Beispiele für generierte URLs sind

• www.website.com (Desktop-Zugriff)
• m.website.com (mobiler Zugriff)
• www.website.com (leichtere Version mit einfachem HTML) (mit Telefonzugriff)

8. Verwenden Sie "viewport Meta Tag", um Seiten an mobile Bildschirme anzupassen

Laut Google „kann ein Darstellungsbereich steuern, wie die Startseite auf Mobilgeräten angezeigt wird“. Mit anderen Worten, wenn Designer den Darstellungsbereich nicht berücksichtigen, wird die Benutzeroberfläche auf einem Mobilgerät genau wie die Desktop-Site angezeigt. Das System passt in diesem Szenario den Bildschirm für die mobile Nutzung an, funktioniert jedoch in der Regel nicht. In einigen Fällen werden die Bilder verzerrt und führen zu einer schlechten Benutzererfahrung. Nach dem Anwenden des Viewports können Designer den Anzeigemodus steuern und die UX verbessern.

Wie kann man den Viewport berücksichtigen?

Sie können ein CSS-Tag namens „Viewport-Meta-Tag“ verwenden, das in der CSS-Geräteanpassungsspezifikation enthalten ist.
Dieses Tag hat die folgende Syntax: <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. Bestimmen Sie bei der Initiierung des mobilen Designs den „Kern“ der Website.

Bei der Gestaltung der mobilen Site-Designs sollten die Designer sicherstellen, dass die Hauptfunktionen der Site klar dargestellt werden. Kurz gesagt, mobile Websites sollten die vollständige Funktionalität ermöglichen, da der CTA auf jeder Website für mobile Geräte offensichtlich ist.

Aber wie bestimmt man die anderen einzuschließenden Funktionen? Denken Sie an den Kern Ihrer Website. Was sind die wichtigsten Säulen der Website? Welches sind die wichtigsten Funktionen der Website? Welche Funktionen sind geringfügig, verbessern aber die UX (wie Suche, Filter usw.)?

Lassen Sie uns ein Beispiel für die Anwendung des Kernkonzepts auf eine E-Commerce-Site für die Lebensmittellieferung durchgehen. Die Hauptsäulen dieser Seite wären:

• Einloggen und registrieren
• Produkt Suche
• Produktliste
• In den Warenkorb legen
• Auschecken

Eine Desktop-Site hat mehr Funktionen, aber Sie können die erforderlichen filtern und in die mobile Site einschließen. Es eliminiert auch die Möglichkeit, dass sich die Benutzer von zu vielen Optionen auf einem kleinen Bildschirm überfordert fühlen.

10. Verwenden Sie einfache Formulare und Eingabefelder

Es gibt ein Formular, das der Benutzer auf vielen Websites ausfüllen kann, um das Support-Team zu kontaktieren oder Newsletter und andere Zwecke zu erhalten. Mobile Benutzer können diese Formulare als großes Problem empfinden, wenn sie nicht richtig gestaltet sind. Je länger und komplexer das Formular ist, desto schwieriger wird es für die Benutzer, Informationen einzugeben.

Wie optimiert man das Formular für mobile Geräte?

• Nehmen Sie nur die wesentlichen Felder auf, die von den Benutzern eingegeben werden müssen. Bei zu vielen Pflichtfeldern ist es wahrscheinlicher, dass der Benutzer den Registrierungsprozess abbricht.
• Teilen Sie Felder nicht in zu viele Felder auf. ZB Vorname/Nachname kann in einen einfachen Namen umgewandelt werden.
• Stellen Sie sicher, dass die numerische Tastatur für die numerischen Felder wie z. B. Kontakt-Nr. , Postleitzahl usw.
• Machen Sie Fehlermeldungen prägnant.
• Versuchen Sie, Automatisierung in die Felder einzubeziehen. Wenn Sie beispielsweise nach der Adresse des Benutzers fragen, nutzen Sie die GPS-Funktionalität und füllen Sie die Felder wie PIN-Code, Bundesland, Stadt usw. aus.

Die Anwendung dieser grundlegenden Konzepte verbessert die UX Ihrer mobilen Website. Diese Anwendungen schränken die Wahrscheinlichkeit ein, dass Benutzer das Formular oder Ihre Website verlassen.

Einpacken

In der ersten Phase dieser Serie haben wir 10 Richtlinien zur Verbesserung der mobilen Site-UX Ihres E-Commerce-Shops durchgearbeitet. Bei Emizentech, dem besten E-Commerce-Entwicklungsunternehmen in Indien, verfügen wir über Erfahrung in der Entwicklung von reaktionsschnellen E-Commerce-Shops. Teilen Sie uns Ihre Anforderungen mit.