Ein Schaufenster für mobilen E-Commerce
Die Optimierung von Websites für das mobile Web ist mühsam. Und die Optimierung von E-Commerce- Websites für das mobile Web ist ein Biest, mit dem Designer und Entwickler erst begonnen haben zu zähmen.
Es überrascht nicht, dass größere Unternehmen das Medium zuerst annehmen, wahrscheinlich, weil sie die Ressourcen und den Absatzfluss haben, um es zu rechtfertigen. Selbst wenn eine E-Commerce-Website beträchtlichen Traffic erhält, wird ein kleiner Prozentsatz davon mobil sein. Und ein noch kleinerer Anteil dieses Verkehrs wird ihre Verkäufe tatsächlich abschließen.
Da die Dynamik in diesem Bereich erst richtig einsetzt, sind die Erfahrungen der Menschen mit mobilen E-Commerce-Transaktionen begrenzt. Dies macht die Nische bestenfalls zu einer experimentellen. Glücklicherweise kann der Erfolg angesichts der Natur des E-Commerce sorgfältig gemessen und getestet werden. Dies ist ein Medium, das noch definiert werden muss.
Eine große Hürde für den Fortschritt ist die Mangel an Beispielen. Surfen Galerien, um eine Tonne von interessanten Ideen zu finden, ist nicht einmal kurz davor, schnell und einfach. Es gibt nur wenige kleine Sammlungen von Mobile Design, noch weniger für E-Commerce. Um das anzugehen, habe ich 10 fantastische Beispiele für mobilen E-Commerce gesammelt. QR Codes wurden hinzugefügt, um das Browsen zu erleichtern. Sie können viele Apps für Ihre Mobiltelefone finden, die diese Codes lesen können.
1. Walmart
Eine gemeinsame Herangehensweise aller hier vorgestellten Websites ist eine portalartige Homepage. Walmart ist nicht anders. Während die meisten Websites auf textbasierten Listen basieren, verfügt dieser jedoch über ein Raster aus Symbolen, das viel einfacher zu durchsuchen ist. Viele der mobilen Websites, die hier behandelt werden, haben Listen, die so klein sind, dass sie schwer zu verwenden sind. Walmart kombiniert Symbole mit Text, um die Ziele leichter zu treffen.
Der größte Fehler auf der Walmart-Website ist, dass Sie auf die Hauptwebsite springen müssen, um eine Transaktion abzuschließen. Dennoch sind die Informationen und Tasten extrem einfach zu bedienen, klar in der Funktion und gut organisiert.
2. Spielzeug-R-Us
Das Spielzeug-R-Uns Website ist ein Schritt in die richtige Richtung. Aber es könnte ein paar wichtige Dinge besser machen. Zuerst fand ich die Liste der Buttons auf der Homepage etwas zu klein. Ich verstehe die Versuchung, sie zu reduzieren, um Platz zu sparen, aber sie wären viel einfacher zu benutzen mit nur ein bisschen mehr Platz. Klar, ich müsste mehr scrollen, aber das ist ein guter Kompromiss.
Sobald Sie an der Startseite vorbeikommen, wird es viel besser. Insbesondere hat diese Website eine der besseren Warenkorbseiten. Die Tasten sind klar und das Gleichgewicht zwischen Dichte und Tap-Fähigkeit scheint richtig zu sein. Alles in allem ein gutes Beispiel dafür, wie man Aktionspunkte klar kommuniziert.
3. Crocs
Mobile Entwicklung wird immer noch stark von Entwicklern dominiert, daher ist es eine Erleichterung, eine schön gestaltete mobile Website zu finden. So ist es bei Crocs . Seine Website ist gut umgesetzt und eine Schönheit zu betrachten.
Die Kataloglistenansicht ist besonders sauber. Der einzige Weg, um es schlanker zu machen, wäre, Produktnamen zu eliminieren. Unabhängig davon ist jede Zeile ein einfaches Ziel mit klaren und relevanten Informationen.
4. JC Penny
Ein Problem, dass Designer der JC Penny Mobile Store konfrontiert war Produktumfang. Wie können Sie Benutzern ermöglichen, in einem Bereich wie etwa Herrenhosen effektiv eine Vielzahl von Optionen zu durchsuchen? Die Lösung, ein einfaches Drop-Down-System, ermöglicht es Kunden, Kriterien schnell zu filtern, um zu den Produkten zu gelangen, die sie benötigen.
Die großen Bilder sind ein wirklich nettes Feature. Beachten Sie, wie einfach es ist, die tatsächlichen Artikel in der Produktdetailansicht zu sehen. Ich vermute, dass die Conversion-Rate von mobilen Websites extrem niedrig ist, und ich kann nicht anders, als zu denken, dass großartige Fotografie wie diese eine der wenigen Waffen ist, um das zu bekämpfen.
5. Pottery Barn
Die Formel sollte jetzt ziemlich klar sein: Logo oben, Suche darunter, eine Lead-in-Grafik, um ein Produkt oder einen Verkauf zu bewerben, gefolgt von einer Liste der wichtigsten Produktkategorien. Und wir finden diese genaue Struktur auf Töpferei 'S mobile Website.
Ein absolut brillantes Detail ist die Lösung der Website für das Problem der langen Brotkrumen. Sie werden in der Liste der Produktkategorien feststellen, dass die Brotkrumenspur stark verkürzt wurde und nur den letzten Teil der Zeichenfolge enthält. Vergleichen Sie dies mit der Aufdringlichkeit der Brotkrume auf Toys-R-Us, und Sie werden diese platzsparende Lösung zu schätzen wissen.
6. Threadless
Es ist keine Überraschung, dass fadenlos 'mobile Website ist fantastisch. Die Homepage folgt der Kategorie Portalformel, aber mit einem Twist. Ähnlich wie die Walmart-Website ist der Rasteransatz hier viel einfacher zu verwenden als die meisten anderen. Die Fotografie ist ansprechend und lässt den Laden wie ein echtes Einkaufserlebnis wirken. Etwas daran fühlt sich einfach weniger mechanisch an als die meisten anderen Geschäfte, die hier behandelt werden.
Sie finden den gleichen Rasteransatz in der Produktlistenansicht, was ein schönes Relief ist und die Produkte sehr gut präsentiert. Die Designer haben es geschafft, Platzverschwendung zu minimieren und gleichzeitig die Benutzerfreundlichkeit beizubehalten.
7. Brookstone
Brookstone Der Mobile Store leidet unter einer dichten Homepage. Aber sobald Sie darüber hinwegkommen, wird die Website besser. Die große klare Fotografie wird sehr geschätzt. Ich weiß nicht, ob die Bilder für mobile Geräte optimiert wurden, aber sie gehören sicher zu den am leichtesten zu sehenden in diesem ganzen Stapel.
Ein Schwachpunkt ist der Umfang des Scrollens auf der Warenkorbseite, um zur Check-Out-Schaltfläche zu gelangen. Der Inhalt könnte mit etwas Beschneidung und Optimierung zu tun, um den Deal zu schließen.
8. Dooney & Bourke
Ich schätze die Fotografie sehr Dooney & Bourke 'S Homepage. Es vermittelt genau, was das Unternehmen verkauft, sobald Sie auf der Seite landen. Ein subtiles Detail, um es gelinde auszudrücken, aber sicherlich etwas zu beachten.
Ein irritierender Punkt in der Produktdetailansicht ist, dass das Mengenfeld standardmäßig leer ist. Ich musste eine "1" hinzufügen, um ein Produkt zu meinem Warenkorb hinzuzufügen. Aber es ist unwahrscheinlich, dass ich mehr als einen gleichen $ 150 Beutel bestellen würde.
Auch die Einkaufswagenseite fühlt sich ein wenig wie ein nachträglicher Einfall an. Aber ich werde der Firma Anerkennung dafür geben, dass sie wichtige Action-Punkte an die Spitze gesetzt hat. Die Chancen, dass Kunden vergessen, was sie gerade in den Einkaufswagen gelegt haben, sind gering. Daher ist es eine kluge Idee, sich darauf zu konzentrieren, ihnen zu helfen, zur Check-out-Seite zu gelangen.
9. Buy.com
Die Homepage von Kaufen.com hat etwas, das keine andere Homepage in diesem Artikel hat: ein aktuelles Produkt. In den meisten E-Commerce-Stores denkt man daran, ein mobiles Portal zu schaffen, das es den Nutzern ermöglicht, sich in die gesamte Produktlinie einzuarbeiten. Während dies wichtig sein könnte, inspiriert Buy.com mich, Alternativen in Betracht zu ziehen.
Was, wenn ein besserer Ansatz darin besteht, sich auf Deals zu konzentrieren? Die Homepage ist Prime Real Estate; Angesichts der Herausforderung, den Verkauf zu beenden, warum sollten Sie sich nicht all Ihren Bemühungen widmen, etwas unwiderstehliches vor den Kunden zu machen? Beachten Sie, dass Sie vor dem Erreichen der Liste der Abteilungen auf dieser Website das vorgestellte Produkt und vier separate Links zu Verkäufen, Angeboten und Specials sehen.
10. Petco
Eine großartige Eigenschaft des mobilen Webs ist, dass es Flusen eliminiert. Also, wenn ich die Homepage von sehe Petco 'S mobile Website, ich kann nicht helfen, aber frage mich, ob das große Foto in irgendeiner Weise nützlich ist. Der Firmenname und das dazugehörige Hunde- und Katzensymbol vermitteln den Produktfokus. Warum also dieses dumme Bild zeigen? Stattdessen würde ich entweder ein spezielles Angebot oder ein Raster mit Kategoriesymbolen erstellen. Während ich die Politur der Website zu schätzen weiß, könnte sie ein wenig verbessert werden.
In der Produktdetailansicht trifft das Unternehmen auf eine geniale Idee, indem es den reinen Internet-Verkauf hervorhebt. Warum nicht einen Schritt weiter gehen und einige von ihnen nur für Handys machen. Abgesehen davon ist die Produktdetailseite fantastisch sauber und klar. Es scheint auch eine weise Entscheidung zu sein, die Beschreibungen in voller Länge unter den Schlüsselfunktionen und Informationen zu verstecken.
Fazit
Das Entwickeln von mobilen Websites ist schwierig und das Entwerfen von mobilen E-Commerce-Websites ist vielleicht doppelt so. Herauszufinden, wie man Kunden helfen kann, das richtige Produkt zu finden und wie man diesen Prozess in einen Verkauf umwandeln kann, ist alles andere als einfach. Ich hoffe, dass diese kleine Sammlung von Ressourcen einige frische Ideen zu Ihrem nächsten (oder vielleicht ersten) mobilen Website-Design bringt.
Geschrieben exklusiv für WDD von Patrick McNeil . Er ist freiberuflicher Schriftsteller, Entwickler und Designer. Insbesondere liebt er es, über Webdesign zu schreiben, Leute für Webentwicklung zu schulen und Websites zu erstellen. Patricks Leidenschaft für Webdesigntrends und -muster findet sich in seinen Büchern auf TheWebDesignersIdeaBook.com . Folge Patrick auf Twitter @designmeltown .
Was denkst du, wenn diese Beispiele? Bitte teilen Sie die Kommentare unten ...