UI/UX für mobilen E-Commerce

Denken Sie immer daran, dass mobile Benutzer große Schaltflächen (>40 Punkte) brauchen. 

M-commerce (mobile commerce)

M-Commerce (Mobile Commerce) bezeichnet den Kauf und Verkauf von Produkten und Dienstleistungen über drahtlose Handheld-Geräte wie Smartphones und Tablets. Es ist eine Art von E-Commerce, der es Kunden ermöglicht, auf Online-Einkaufsplattformen zuzugreifen, ohne einen Desktop-Computer verwenden zu müssen.

M-Commerce hat den größten Einfluss auf die folgenden Branchen:

1. Finanzdienstleistungen wie Mobile Banking (bei dem Verbraucher ihre Handheld-Geräte verwenden, um auf ihre Konten zuzugreifen und ihre Rechnungen zu bezahlen) und Maklerdienste (bei denen Aktienkurse angezeigt und der Handel mit demselben Handheld-Gerät durchgeführt wird).
2. Telekommunikation, bei der Dienständerungen, Rechnungszahlungen und Kontoüberprüfungen alle mit einem einzigen mobilen Gerät durchgeführt werden können.
3. Service und Einzelhandel, bei dem Kunden Artikel unterwegs aufgeben und bezahlen können.
4. Informationsdienste wie Finanznachrichten, Sportstatistiken und Verkehrsmeldungen werden an ein einzelnes mobiles Gerät gesendet.

„Webdesign ist Responsive Design (mobil). Responsive Webdesign ist Webdesign – richtig gemacht.“

Responsive Design ist derzeit eine Designstrategie für grafische Benutzeroberflächen (GUI) zum Erstellen von Inhalten, die sich leicht an verschiedene Bildschirmgrößen anpassen lassen. Designer verwenden relative Einheiten (Prozentsätze) und Medienabfragen, um sicherzustellen, dass sich ihre Designs an den Browserbereich anpassen und die Einheitlichkeit der Inhalte auf allen Geräten aufrechterhalten.

Sie entwerfen für Flexibilität in allen Bereichen des responsiven Designs, einschließlich Bildern, Text und Layouts. Hier sind einige Empfehlungen:

Betrachten Sie die „Mobile First“-Strategie:

Entwerfen Sie für größere Bildschirme, indem Sie Designs in Handygröße vergrößern

Denken Sie immer daran, dass mobile Benutzer große Schaltflächen (>40 Punkte) brauchen. Zudem muss Ihr Design doppelt so intuitiv sein wie die Desktop-Äquivalente, da der Bedarf an gut dimensionierten Elementen auf kleineren Bildschirmen zu Krämpfen und Verwirrung führen kann.

Gestalten Sie Grafiken und Raster, die beweglich sind

Erstellen Sie Fotos in Originalgröße. Wenn Sie nicht genug Platz haben, sollten Sie es schneiden, um das Beste aus Ihrem Bereich zu machen.

Verwenden Sie nur skalierbare Vektorgrafiken (SVGs). Das sind auf XML basierende 2D-Grafikdateiformate mit Interaktivität und Animationen.

Schließen Sie mindestens drei Breakpoints ein (d.h. Design für drei oder mehr Geräte)

Priorisieren und verstecken Sie Material basierend auf dem Kontext des Benutzers. Untersuchen Sie die visuelle Hierarchie und nutzen Sie progressive Offenlegungs- und Navigationsschubladen, um den Verbrauchern zuerst die Informationen bereitzustellen, die benötigt wird. Stellen Sie Unwesentliches (nice-to-haves) zurück.

Streben Sie nach Einfachheit und Minimalismus

Wenden Sie Entwurfsmuster an – Um die Benutzerfreundlichkeit für Benutzer in ihren Kontexten zu maximieren und ihre Vertrautheit zu beschleunigen: z.B. die Spalte fällt in ein Muster und passt den Inhalt an viele Bildschirmtypen an.

Setzen Sie Barrierefreiheit mit Schriftgrößen/-stilen ans Ziel. Bauen Sie Kontrast und Hintergrund effektiv ein. Machen Sie Überschriften mindestens 1,6-mal größer als den Fließtext. Entwickeln Sie den gesamten Text auf responsiv, damit dieser in den jeweiligen Proportionen angezeigt wird. Da sich einige Benutzer auf Screenreader verlassen, machen Sie Ihren gesamten Text „echt“ statt Text in Bildern.

Insgesamt ist das Responsive-Design ein leistungsstarker und sparsamer Ansatz, aber seine „einfache“ Natur täuscht.

Vor- und Nachteile des Mobile-Commerce

Zu den Vorteilen von M-Commerce gehören:

Zusätzliche Kundenbindung durch leichteren Zugriff.
Mehr Komfort für Kunden beim Vergleichen von Preisen, Lesen von Rezensionen und den Einkäufen ohne die Notwendigkeit eines Desktop-Computers.
Größere Vielfalt an Produkten und Dienstleistungen.
Automatisiert den Kundenkontakt und den Verkauf eines Unternehmens.

Zu den Nachteilen von M-Commerce gehören:

Ein schlecht ausgeführtes mobiles Erlebnis kann Kunden vom Kauf abhalten.
Mobile Zahlungsoptionen sind nicht an jedem geografischen Standort verfügbar und unterstützen möglicherweise nicht alle Arten von digitalen Geldbörsen.
Unternehmen müssen die Steuergesetze und -vorschriften aller Länder, in die geliefert werden, kennen und einhalten (einige Unternehmen vermeiden das, indem sie nur Käufe und Lieferungen aus ihrem Herkunftsland zulassen).

Wenn Sie mehr über E-Commerce-Entwicklungsplattformen oder Apps erfahren möchten, lesen Sie unsere Lexika für Shopify und Shopware. Unser engagiertes Outsourcing-Team kann Ihr Partner im E-Commerce sein.