Shop-Review: MM-Germany.com

Da wir nicht alle Seiten des Shops einzeln analysieren werden, nehmen wir die Startseite als Beispiel.

---

---

Die Meta-Daten der Startseite sind technisch korrekt, außer das Fehlen eines lang-Subtags.

---

---

Überschriften

Die H1- bis H6-Überschriften sind semantisch korrekt verwendet worden.

---

---

Im Folgenden haben wir die Semantik der Headlines dargestellt:

---

---

Beim Aufrufen der Website begrüßt den Besucher zunächst ein Pop-up, welches einen Gutscheincode anpreist. Diese Pop-ups können jedoch von den Facebook- und Google-Crawlern negativ aufgefasst werden. Warum? Hardneckige Pop-ups sind ein gängiges Element auf Scam-basierten Seiten, welche über Facebook ihre Werbeanzeigen schalten. Auch Google ist kein besonders großer Freund von Pop-ups, welche bei der Seitenöffnung erscheinen und dadurch das Nutzererlebnis schwächen.

---

---

Dabei ist das Pop-up farblich eher im Kontrast zum restlichen Design der Website gestaltet. Auch geht nicht direkt hervor, dass durch Anklicken des Code-Feldes dieser in die Zwischenablage kopiert wird. Zudem erscheint das Pop-up auch nach dem Anklicken des Code-Buttons / einer Pop-up-Conversion. Dies stört auf Dauer stark.

---

---

Social Trust

Das Trusted-Shops-Icon ist grundsätzlich gut für mehr Social Trust. Jedoch überdeckt auf MM-Germany.com dieses Element einige wichtige CTAs, wenn die Seite mobil geladen wird.

---

---

Ladezeiten

Auf Desktopgeräten überzeugt die Geschwindigkeit der Website. Für Mobilgeräte sollte an diesem Wert noch gearbeitet werden - mehr Informationen gibt's im SEO-Abschnitt.

Ankündigungsleiste

Die Ankündigungsleiste enthält mit "GRATIS-VERSAND ✓ GRATIS-RETOUREN (14 TAGE) ✓ RATENKAUF ✓ RECHNUNGSKAUF ✓ 2 JAHRE GARANTIE" eine gute Zusammenfassung verschiedenster USPs. 

Header

Im Header sind mehr, als die empfohlenen (max.) 7 Links enthalten. Eine Reduktion der Linkanzahl kann zu einer besseren Verteilung des Linkjuices führen.

Footer

Die Sektion "Service & Rechtliches" kann aufgeräumter dargestellt werden, indem die Rechtstexte von sonstigen Links separiert werden.

Startseite

Auf der Startseite sollte klar erkennbar sein, worum es im Onlineshop geht. Das gelingt MM-Germany.com unserer Auffassung nach gut. Doch der strukturelle Aufbau bietet an ein paar Stellen noch Verbesserungspotenzial.

Slider-Element

Die CTAs im Silder sind UX-unpassend angelegt. Warum? Zum einen werden sie durch das Social-Trust-Pop-up von Trusted-Shops auf Mobilgeräten verdeckt. Zum anderen lesen Nutzer Websites in "Z"-Richtung. 

Somit sollte ein wichtiger CTA immer mittig oder (unten) rechts platziert werden, um entsprechend mehr Aufmerksamkeit zu erhalten. Auch ein box-shadow kann dabei helfen, mehr Blicke auf dieses Element zu leiten.

CSS

---

.button {
    box-shadow: rgba(0 40 60 / 30%) 0px 10px 20px;
}

---

Ein weiterer Vorteil von der Platzierung unten rechts - auf Mobilgeräten - ist die Nähe zum Daumen. Ja, dies ist tatsächlich ein UX-Faktor. Auf immer größeren Mobile-Screens kann es für kleine Hände teils schwierig sein einen Button zu erreichen, welcher auf der anderen Bildschirmseite platziert wurde. 

Da 9 / 10 Personen Rechtshänder sind, sollte der CTA ebenfalls unten rechts, nah am Daumen platziert werden.

Auszeichnungen

Die gewonnenen Awards sind ein tolles Zeichen für Neukunden, aber können visuell ansprechender aufbereitet werden, bspw. in einer Story- oder Timeline, mit dazugehörigen Artikeln.

Produktabschnitt

Angebote, Bewertungen und (Farb-)Varianten stellen angemessene Ergänzungen zu den Produkte auf der Startseite dar.

Kundenstimmen

Auch eine Sektion für die Meinungen von zufriedenen Kunden ist auf der Startseite - als Slider-Element - zu empfehlen.

Kategorieseite

Dies sind die wichtigsten Seiten im Onlineshop - abgesehen von den Produktseiten. Wieso? Ganz einfach, es sind die Kategorieseiten, welche via SEO in der organischen Suche ranken. Füge hier also relevanten Content hinzu, um diese Seiten für Onpage-SEO aufzubereiten. 

Bei MM-Germany.com finden sich hier kurze Texte zur eigenen Marke. Empfehlenswert ist es in Überkategorien nicht die einzelnen Produkte, sondern die Unterkategorien mit dazugehörigen Beschreibungen anzuzeigen.

Als Inspiration können die Onlineshops anderer Uhrenhersteller dienen.

Produktseite

Auf der Produktseite entstehen gerne einmal Fehler, welche die Conversion-Rate stark (negativ) beeinflussen können. Doch nicht nur das - häufig zeigen sich auch ausgelassene Chancen.

Im Allgemeinen ist die Produktseite auf MM-Germany.com gut aufgebaut. Einige Punkte konnten wir dennoch finden, zu denen wir gerne unser Feedback hinterlassen möchten.

Für dieses Review stützen wir uns auf die Produktseite der Damenuhr "M&M DAMENUHR BASIC LINE 36 | MODELL 813".

---

---

Produktbilder

Die Produktbilder sind - inkl. der Verpackung - hübsch und klar gestaltet. Die Aufmachung der Bilder deckt sich mit dem Designkonzept des Unternehmens. Eine Möglichkeit die Bilder noch weiter aufzuwerten, wäre eine 360°-Ansicht. In Shopify gibt es die notwendigen Applikationen dazu im App Store. Auch ist ein 60-sekündiges GIF denkbar, in welchem bei Uhren mit Sekundenzeiger eine volle Umdrehung dargestellt wird. Diese Bilder verleihen den Armbanduhren mehr Dynamik und veranschaulichen das Produkt.

Für Schmuck sind ähnliche (360°-)Produktbilder umsetzbar.

Produktname

Wir empfehlen die Titel der Uhren zu kürzen, sodass Kunden sich leichter den Produktnamen merken können. Das hat insbesondere Vorteile, wenn man auf Mund-zu-Mundpropaganda setzen möchte.

Accordions

Die Wahl eines Accordion-Elements wurde gut getroffen. Jedoch sollte die Tab-Überschrift "GRATIS VERSAND & RETOUREN (14 TAGE) ✓ 2 JAHRE GARANTIE (UHRENARMBÄNDER AUSGESCHLOSSEN) ✓ KREDITKARTE ✓ PAYPAL ✓ SOFORTÜBERWEISUNG ✓ RATENKAUF ✓ RECHNUNGSKAUF ✓" deutlich gekürzt werden. Ein Vorschlag von uns lautet "Versand- und Zahlungsinformationen".

Die Struktur des Tabs ist ebenfalls klar aufgebaut. Um das Vertrauen der Kunden zu stärken, kann hier auf eine Bildzeile gesetzt werden. Diese stellt das eigene Logo (optional) in Kombination mit den Zahlungsdienstleistern und / oder Lieferanten dar. Ratsam ist hier eine einheitliche Farbgebung - zum Beispiel wie folgt:

---

---

Größenbestimmung

Die Hilfe zur Größenbestimmung wird nach dem Anklicken als PDF in einem neuen Tab geladen. Leider geht hierbei die Aufmerksamkeit von der eigenen Website weg. Der Kunde muss aktiv werden und wieder zum alten Tab zurückkehren, um seinen Einkauf fortzusetzen. Wir raten daher zu einem onClick-Pop-up.

HTML

---

<div class="popup" onclick="meineFunktion()">Klick mich! <span class="popuptext" id="meinPopup">Pop-up Text...</span> </div>

---

CSS

---

/* Pop-up-Bereich */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Das Pop-up */
.popup .popuptext {
  visibility: hidden;
  width: 480px;
  background-color: #fff;
  color: #000;
  text-align: left;
  border: none!;
  border-radius: 0px;
  padding: 10 10 10;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -50px;
}

/* Pop-up Toogle, wenn angezeigt (Dauer) */
.popup .anzeigen {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s
}

/* Pop-up-Animation (FadeIn) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

---

JavaScript

---

<script>
// Pop-up öffnet sich nach Klicken auf <div>.
function meineFunktion() {
  var popup = document.getElementById("meinPopup");
  popup.classList.toggle("anzeigen");
}
<script>

---

Des Weiteren fehlt in dem PDF ein Branding.

Produktbeschreibung

Bei der Produktschreibung empfiehlt es sich, die Eckdaten übersichtlich in eine Tabelle zu einzutragen und oben in der Produktbeschreibung oder als Produktbild einzubinden.

CTA-Button

Dem Call-To-Action-Button "In den Warenkorb legen" fehlt ein Hover- & Activated-Effekt. Dafür haben wir einmal eine passende Farbabstufung in CSS dargestellt (basierend auf der aktuelle Firmenfarbe).

CSS

---

.button {
	background: #0a6e86;
	color: #fff;
}
.button:hover {
	background: #0b86a3;
}
.button:activated {
	background: #075a6e;
}

---

Produktbewertungen

Leider fehlt es auf der Produktseite völlig an Social Trust. Durch die Einbettung einer Review-Funktion kann dieses Problem schnell und einfach gelöst werden.

Warenkorb(-seite)

Nachdem der Warenkorb-Button geklickt wurde, wird der Nutzer direkt auf die Warenkorbseite weitergeleitet. Dies kann für den User-Flow fördernd, für das Cross-Selling aber negativ sein. 

Hier kommt es auf A/B-Testing an. Eventuelle Performance-Unterschiede bei Warenkorbeinschub oder -hinweis, im Kontrast zur direkten Weiterleitung können dadurch erfasst werden. 

Up- und Cross-Selling

Die Warenkorbseite ist eine tolle Gelegenheit, um den potenziellen Kunden eine weitere Empfehlung vorzustellen, ganz ähnlich zu den Kaugummis an der Supermarktkasse.

Bei Armbanduhren besteht die Möglichkeit weitere Armbänder zum Wechseln oder eine verlängerte Garantie als Up-Sell anzubieten. Auch kann das passende Schmuckstück zu einer Armbanduhr als Cross-Sell vorgeschlagen werden.

Warenkorb-Checkbox

Gut finden wir den Einsatz einer AGB-Checkbox im Warenkorb. Dies gibt den Nutzern meist ein unterbewusstes Gefühl von Seriosität. Eine Anleitung hierzu haben wir einmal verlinkt.

Zur Kasse

Auch bei diesem CTA-Button fehlen die oben genannten CSS-Effekte, um mehr Aufmerksamkeit, hin zum nächsten Schritt zu generieren. 

Dieser Abschnitt ist Shopify-gemäß strukturiert aufgebaut. Eine starke Personalisierung ist hier lediglich mit einem Shopify Plus Plan möglich. Daher möchten wir einmal auf die möglichen Optimierungen eingehen, für alle Basic bis Advanced Shopify-Nutzer.

Logo

Das Standardlogo wurde im Header hochgeladen. Hier wäre alternativ die oben erwähnte Bildzeile mit den Zahlungsanbietern zu empfehlen.

Express Check-out

Dieser kann die Conversion-Rate negativ beeinflussen, sollte die Seite durch die iFrame-Einbettung länger laden oder bei dem jeweiligen Anbieter ein Verbindungsfehler auftreten. Zudem missverstehen einige Kunden die Buttons als einzige Zahlungsmöglichkeit und brechen daher den Check-out-Prozess ab.

Post-Purchase-Up-Selling

Nachdem ein Kauf getätigt wurde, empfehlen sich vor allem Garantieverlängerungen als PP-Up-Sells bei mittel- bis höherpreisigen Produkten.

Zwischenfazit: 6 / 10 Punkte

Viele Punkte werden von MM-Germany.com bereits korrekt und solide umgesetzt. An anderen Stellen, insbesonders beim Leiten der Aufmerksamkeit, dem Social Trust und einigen Up-Sell-Möglichkeiten sind Nachbesserungen ratsam. Zudem sollten Pop-ups korrekt eingestellt werden, um die Besucher und Crawler nicht zu verärgern. Bei der Optimierung hilft unser Partner Webchaniker als kompetente Web-Agentur weiter. Hierzu kann eine einfache Anfrage über das verlinkte Formular gestellt werden.

Content

Ein Onlineshop benötigt natürlich auch Unterseiten, welche informationsbasierte Suchintentionen verfolgen.

Im Bereich Uhren und Schmuck wären hier Styleratgeber mit Shoppable-Content-Einbettungen eine gute Gelegenheit, um direkt zwei Suchintentionen miteinander zu verbinden. 

Blog

MM-Germany.com besitzt einen Blog mit einigen Content-Pieces. Allerdings empfehlen wir die einzelnen Bilder innerhalb der Beiträge auch auf diversen sozialen Medien zu recyclen. 

Wir werden in diesem kostenfreien Review nicht weiter auf den Content innerhalb der einzelnen Blog-Posts eingehen. Hier kann einer unserer SEO-Experten weiterhelfen.

Im Allgemeinen empfehlen wir für das Content- und Themen-Mapping MindMeister. Für die Content-Planung ist hingegen MeisterTask eine Empfehlung wert.

Social Media

Im Header ist u.a. die Verlinkung "Instagram" enthalten. Diese Leitet auf eine Unterseite mit allen Instagram-Posts weiter. Bei dem Überfliegen des Instagram-Profils ist aufgefallen, dass die Posts keinen Shoppable-Content enthalten. 

Das heißt, die Produkte aus den Posts wurden nicht als Katalog im Facebook-Commerce-Manager hinterlegt, bzw. wurde der Commerce-Manager nicht mit dem Instagram-Profil verbunden.

Über uns

Empfehlenswert ist außerdem eine "Über uns"- oder "Das Team"-Seite, auf der die Mitarbeiter vorgestellt werden. Das stärkt den Social Trust und stellt ggf. eine emotionale Verbindung her, sofern eine überzeugende Geschichte erzählt wird.

Zwischenfazit: 6 / 10 Punkte

Es besteht eine gewisse Fülle von Content auf verschiedenen Kanälen. Allerdings fehlen Produkt-Tags in den Instagram-Posts, sowie eine Über-uns-Seite. Den Blog-Content haben wir hierbei nicht im Detail analysiert. 

Fazit: 27 / 40 Punkte

Der Onlineshop von MM-Germany.com ist auf einem stets guten Weg. Es fehlt lediglich an Detailarbeiten, welche aber einen großen Unterschied machen. Überzeugen konnte uns vor allem das Branding und technische SEO der Website. Davon abgesehen werden einzigartige Produkte verkauft - dies ist vermutlich der größe Pluspunkt.

Wir wünschen weiterhin viel Erfolg! ✌

Der Shop wurde analysiert von: Ole N. Mai & Bastian Winkelsen