Shopping-Apps – Aufbaumuster für vier zentrale Seiten

Unterwegs Einkaufen, in der heutigen Zeit kein Problem mehr. Viele Online-Shops bieten ihren Nutzer hierfür eigene Apps an.

Ich habe einmal drei Shopping-Apps – Otto, SportScheck und Globetrotter – etwas näher betrachtet und die unterschiedlichen Ansätze für die zentralen Seiten kurz herausgearbeitet. Die zentralen Seiten sind:

  • Startscreen
  • Produktliste
  • Kategorien(-übersicht)
  • Produktdetailseite

Startscreen: Oberstes Ziel – die mobilen Shopper abholen

Die drei Startscreens könnten unterschiedlicher nicht sein.

Startscreen Otto

Otto – kompakter Startscreen

Startscreen SportScheck

SportScheck – Teaserboxen bieten unterschiedliche Einstiege

Startscreen Globetrotter, gekürzt

Globetrotter – per Kachelstruktur werden Kategorien vorgestellt

Der Startscreen der Otto-App ist kompakt gehalten. Er kann fast komplett – ohne Scrollen – auf dem Display dargestellt werden.
Im Mittepunkt stehen die wechselnde Bühne mit verschiedenen Teasern sowie die Suche. Darunter befindet sich noch diverse andere Funktion, wie…

  • eine Art Wegweiser (Was möchten Sie tun?),
  • ein Code-Reader/Scanner und
  • Verweise auf Facebook, Twitter bzw. Outfit of the Day.

SportScheck hat den Startscreen etwas umfangreicher gestaltet. Zentrales Element auch hier: Die Suchfunktion.
Ansonsten wird eine Vielzahl an Einstiegen ins Sortiment angeboten. Hierbei wird deutlich, dass SportScheck ein Multichannel-Versender ist.

Stöberer können sich das komplette Sortiment anzeigen lassen oder über Topseller, Topmarken bzw. aktuelle Angebote nach gewünschten Produkten suchen.

Ebenso wird in der App auch auf die stationären Geschäfte von SportScheck verweisen, mit Hilfe eines Filialfinders (SportScheck in deiner Nähe).

Abgerundet wird das Ganze durch zwei Foto-Funktionen.

  • Mit Print-2-Mobile können Produkte aus dem Katalog abfotografiert und mobil bestellt werden.
  • Mit dem Outfitter können Produkte in der realen Welt fotografiert werden und Nutzer erhalten Vorschläge zu ähnlichen Produkten im Sortiment.

Ich denke insgesamt hält die Startseite für jeden mobilen Shopper einen passenden Einstieg bereit.

Globetrotter verfolgt einen eher emotionalen Ansatz. Jede Produktkategorie wird über eine Bildkachel ergänzt um den Kategorienamen vorgestellt. Der Startscreen wird hierdurch zwar sehr lang – in der Abbildung verkürzt dargestellt – aber aus meiner passt diese Darstellung zur Thematik Outdoor. Die Produkte werden direkt in Action stimmungsvoll vorgestellt.

Schnelleinsteiger können im Header auch eine Suche oder einen Code-Scanner aufrufen und so zügig ihre Produktsuche starten.

Kategorien: Einfache Listen zum durchtabben

Kategorien Otto, gekürzt

Otto – Liste mit gewohnter Farbgebung der Website

Kategorien SportScheck

SportScheck – Schlichte Sortimentsliste

Kategorien Globetrotter gekürzt

Globetrotter – Piktogramme für verschiedene Produktgruppen

Otto und SportScheck verwenden einfache Listen mit deren Hilfe Nutzer durch die verschiedenen Sortimentsebenen navigieren können.

Globetrotter bleibt dem vom Startscreen bekannten Kachel-Konzept treu stellt die jeweiligen Produktgruppen einer Kategorie mit Hilfe von klar verständlichen Piktogrammen dar.

Produktlisten: Produktabbildung und erste Infos sind Standard

Der grundlegende Aufbau der Produktliste ist bei allen drei Apps der Gleiche. Neben einer Produktabbildung werden erste Infos zum Produkt gegeben: Marke, Produkttitel und Preis.

Lediglich im Punkto Filterung lassen sich unterschiedliche Ansätze erkennen:

  • Otto bietet zu Beginn der Liste einige Filter sofort sichtbar an. Weitere können optional zugeschaltet werden.
  • Bei Sportscheck sind die Filter auf eine eigene Seite ausgelagert und können über den Filter-Button im Header aufgerufen werden.
  • Bei Globetrotter können die Filter über einen Layer zugeschaltet werden. Am Ende der Produktliste befindet sich eine halbtransparente schwarze Fläche, die immer mitscrollt. Eine explizite Benennung mit Filter oder ähnlichem fehlt.

Produktdetailseite: Große Abbildung und Preis als erstes zu sehen

Produktdetailseite Otto

Otto – Produktinfos, Social Media und allg. Services

Produktdetailseite SportScheck

SportScheck – Produktinfos und Social Media

Produktdetailseite Globetrotter

Globetrotter – Produktinfos und weitere Services

Die Produktdetailseiten aller drei Apps beginnen relativ identisch, alle zeigen zunächst eine größere Produktabbildung. Danach lassen sich im Layout gewisse Unterschiede ausmachen:

  • Bei Otto stehen rechts neben der Abbildung die Preisinformationen. Darunter können Produktmerkmale (Farbe, Größe) gewählt werden und die Ablage im Warenkorb bzw. auf dem Merkzettel ist möglich.
    Danach wird die Produktbeschreibung angezeigt, sowie verschiedene Social Media-Elemente und weitere Services.
    Aufbaumuster:
    Bild/Preis > Auswahl/Kauf > Beschreibung > Social Media & Services
  • SportScheck bietet neben der großen Produktabbildung noch kleine Miniaturansichten der weiteren Farben an.
    Die Preisinformation steht direkt unterhalb der Abbildung gefolgt von der Produktbeschreibung.
    Danach ist die Auswahl der Produktmerkmale und die Ablage im Warenkorb möglich. Am Ende der Seite werden noch Social Media-Elemente angeboten.
    Aufbaumuster:
    Bild/Preis > Beschreibung > Auswahl/Kauf > Social Media
  • Globetrotter geht hier wieder einen etwas anderen Weg. Die Preisinformation ist in die Auswahl und Ablage des Produkts integriert. Darunter wird eine ausführliche Produktbeschreibung angeboten sowie weitere Funktionen (Beratung, Up-Selling, Services und Social Media) in einer Liste.
    Aufbaumuster:
    Bild/Preis/Auswahl/Kauf > Beschreibung > diverse Funktionen

Haben Sie Interesse an weiteren Good practices? Auch zu anderen Themen und Anwendungen? Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

2 Gedanken zu „Shopping-Apps – Aufbaumuster für vier zentrale Seiten

  1. Pingback: Links der Woche: So holen Sie Kaufabrecher zurück, Facebook: gute Ergebnisse mit “Sponsored Results” » Take-me-to-auction

  2. Pingback: 10 Lesetipps der Woche für Shopbetreiber » shopbetreiber-blog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.