Partielles Redesign des Lebensmittel-Shops saymo.de: sinnvolle Ergänzungen und weiteres Optimierungspotential

saymo Logo

Der Lebensmittel Online-Shop saymo.de wurde vor wenigen Wochen einem kleinen Facelift unterzogen.

Das Design selbst – Farbgebung und grundsätzliches Layout der einzelnen Seiten – blieb weitestgehend erhalten. Die größten und sofort sichtbaren Veränderungen wurden im Kopfbereich (Header) der Seite vorgenommen. Die Bedienung des Shops ist grundsätzlich recht einfach. Es gibt allerdings noch ein paar Schwachstellen, deren Optimierung die Nutzung noch weiter vereinfachen bzw. angenehmer gestalten würden.

Vergleich der Startseite

saymo.de: Startseite (September 2010)

saymo.de: Startseite (September 2010)

saymo.de: Startseite (September 2011)

saymo.de: Startseite (September 2011)

saymo.de: Startseite (März 2012)

saymo.de: Startseite (März 2012)


Die einzelnen Abbildungen verdeutlichen sehr schön die Entwicklung der saymo.de-Startseite über die letzten Jahre hinweg. Im Jahre 2010 wirkte die Startseite recht überladen aufgrund der vielen Informationsboxen. Im mittleren Seitenbereich wurden verschiedene Einstiege und Produkte angeboten. Im linken und rechten Bereich wurden Nutzer mit zusätzlichen Informationen förmlich überflutet.

Im Rahmen eines Redesigns wurde diese Informationsfülle deutlich reduziert und das Grundlayout wurde von 3 Spalten auf lediglich 2 Spalten umgestellt. Durch diese Umstellung war es viel besser möglich die alternativen Einstiege sowie Produkte direkt auf der Startseite zu bewerben. Die Seite wirkt insgesamt aufgelockerter und angenehmer.

Bei genauer Betrachtung der Startseiten aus dem Jahre 2011 und 2012 fällt auf, dass die Startseite selbst etwas kürzer geworden ist. Anstatt 16 Top-Sellern werden nun nur noch 12 angezeigt. Zudem wurde der Kopfbereich überarbeitet sowie die linke Navigations-/Informationsspalte.

Vergleich des Headers

saymo.de: Header (September 2011)

saymo.de: Header (September 2011)

saymo.de: Header (März 2012)

saymo.de: Header (März 2012)

Betrachten wir nun einmal die Veränderungen im Header etwas genauer:

  • Im Zentrum des Headers ist nun die Suche positioniert sowie der USP: 66 Tage Rückgaberecht.
  • Rechts daneben die Warenkorbübersicht. Beim Überfahren des kleinen grünen Pfeil mit dem Mauszeiger besteht die Möglichkeit sich eine Vorschau des Warenkorbs anzeigen zu lassen.
  • Die horizontale Navigation wurde um ein Haus-Icon ergänzt, mit dem Nutzer auf die Startseite zurückkehren können.
  • Unterhalb der Hauptnavigation wurde eine weitere etwas kleiner gestaltet Navigationsleiste ergänzt. Diese enthält verschiedene Service-Links und Verweise – z.B. zum Kochblog von saymo.
  • Zudem wurden direkt am Seitenbeginn in einer Leiste die Kontaktmöglichkeiten (Telefon und E-Mail) sowie die Anmeldung/Registrierung eingefügt.

Alle diese Anpassungen im Header erscheinen durchweg sinnvoll und erleichtern die Bedienung der Seite und das Finden von Informationen bzw. Produkten deutlich.

Es gibt jedoch wie einleitend erwähnt, allerdings auch noch ein paar Schwachstellen.

Keine Vorschlagsfunktion

Die Suche bietet keine Unterstützung bei der Eingabe eines Suchbegriffs in Form einer Vorschlagsfunktion.
Auf mich wirkt die Seite insgesamt modern und innovativ. Aus diesem Grund habe ich erwartet, dass es eben eine solche Funktion auch gibt. Daher war ich sehr verwundert als es eben keine Vorschläge gab, nachdem ich mit dem Eintippen begonnen hatte.

Zudem schätze ich die Zielgruppe – aus meiner Erfahrung heraus – als shoppingerfahren, internetaffin und experimentierfreudig ein. Die sicherlich eine Vorschlagsfunktion bei der Suche sehr begrüßen würde, um schneller und noch zielgerichteter das gewünschte Produkt finden zu können.

Icons auf der Produktdetailseite

Icons können häufig bei der Verdeutlichung einer Funktion helfen, aber nur wenn Nutzer ein Icon auch wirklich eindeutig dieser Funktion zuordnen können.

Exakt diese eindeutige Zuordnung ist bei den verwendeten Icons auf der Produktdetailseite aus meiner Sicht nicht gegeben. Oder wüssten Sie ohne weiteres welches Icon für welche Funktion steht?

Icons auf der Detailseite

Icons auf der Detailseite

Glücklicherweise besitzt jedes Icon einen aussagekräftigen Tool-Tipp, der die dahinterstehende Funktion erläutert. Für (Erst-)Nutzer bzw. Gelegenheitsnutzer bedeutet dies, dass sie jedes einzelne Icon kurz überfahren müssen, um deren Bedeutung zu verstehen.
Zudem lösen die einzelnen Icons unterschiedliche Aktionen auf der Website aus.

Icon
Bedeutung Aktion
#1
Zahlungsarten Es öffnet sich ein Layer in dem die möglichen Zahlungsarten erläutert werden.
#2
Ihre Vorteile Es öffnet sich ein Layer in dem die Vorteile der Nutzung aufgelistet werden.
#3
Artikeldetails Die Seite scrollt automatisch bis zu den Artikeldetails nach unten.
#4
Zur Merkliste hinzufügen Der Artikel wird zur Merkliste hinzugefügt. Ist der Nutzer nicht angemeldet, lädt sich eine neue Seite, auf der zu Beginn ein entsprechender Fehlerhinweis eingeblendet wird.
#5
Zum Wunschzettel hinzufügen Der Artikel wird auf den Wunschzettel gesetzt. Ist der Nutzer nicht angemeldet, lädt sich eine neue Seite, auf der zu Beginn ein entsprechender Fehlerhinweis eingeblendet wird.
#6
Weitere Services Die Seite scrollt automatisch bis zur Servicebox im unteren Bereich der Detailseite.

Aus meiner Sicht sollte die Produktdetailseite etwas überarbeitet werden.

Kurz einige meiner Ideen:

saymo.de – Abbildung einer kompletten Produktdetailseite

saymo.de – kompletten Produktdetailseite

  • Die Bestätigung der Ablage und der Hinweis auf die nötig Anmeldung bei der Nutzung der Merkliste bzw. des Wunschzettels sollten sich auch im Layer öffnen, damit Nutzer nicht die Seite verlassen und selbst wieder zurücknavigieren müssen.
  • Die Icons sollten entweder durch passende Texte ergänzt werden oder die Erläuterungen sollten durch eigens gestaltete Tool-Tipps direkt beim Berühren des Icons eingeblendet werden. Eben ohne die lästige Wartezeit.
  • Die Produktinformationen sollten weiter nach oben rücken. Denkbar wäre es beispielweise die weiteren Ansichten eines Produkts kleiner und rechtsbündig im der großen Abbildung als Laufband zu positionieren. So könnte auf das Icon für die Produktdetails verzichtet werden.
  • Ebenso könnte aus meiner Sicht auch auf das Icon für „Weiter Services“ verzichtet werden, wenn diese direkt unterhalb der Produktinformationen anschließen.

Die Überarbeitung des Headers ist auf jeden Fall gelungen, er bietet jetzt deutlich mehr Handlungsoptionen als vorher ohne zu erschlagend zu wirken. Es gibt aber noch einige Schwachstellen im Shop, deren Optimierung sicherlich die Zufriedenheit und Nutzungsfreunde steigern kann.

Ein Gedanke zu „Partielles Redesign des Lebensmittel-Shops saymo.de: sinnvolle Ergänzungen und weiteres Optimierungspotential

Schreibe einen Kommentar

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