Warum ein Re-Design sich lohnt
Sie haben einen Powergap Responsive Shop, der schon etwas in die Jahre gekommen ist? Oder Ihre Umsätze stagnieren bzw. sind nicht so zufriedenstellend, wie Sie sich erhofft haben? Dann könnte dieser Beitrag interessant für Sie sein.
Wie jedes Ladengeschäft braucht auch ein Online Shop ab und zu einen neuen Anstrich. Gerade im Online Handel ist es wichtig, sich so modern und ansprechend wie möglich zu präsentieren. Neue Techniken und moderne Design-Konzepte erlauben immer mehr Möglichkeiten, ein Shop-Design ansprechender zu gestalten, die Usability zu optimieren und somit die Conversion-Rate deutlich zu erhöhen.
Powergap bietet nahezu unbegrenzte Möglichkeiten, das Shop Design so individuell zu gestalten, dass sich Ihr Shop deutlich von der Konkurrenz abhebt, ein Wiedererkennungseffekt erreicht wird und der Shop an die aktuellsten Anforderungen angepasst werden kann.
Meist haben Shopbetreiber nicht die Zeit oder verfügen nicht über die technischen Kenntnisse, sich um HTML5, Java Script, CSS, Bannergestaltung oder das Design selbst zu kümmern. Zumal die Anforderungen und Kenntnisse bei responsiven Systemen wesentlich komplexer geworden sind. Deshalb bleibt oft eine ansprechende und zeitgemäße „Renovierung“ auf der Strecke. Das kann Folgen haben! Denn nebst dem Aufbau von Vertrauen gilt: alle User, egal ob jung oder alt, müssen sich ohne Probleme zurechtfinden, die Konkurrenz schläft nicht und Google und Co. schon gar nicht.
Bei einem Re-Design wird nicht nur das Design überarbeitet, sondern es werden auch Schwachstellen und Stolpersteine aufgespürt, deren Beseitigung zu einem deutlich verbesserten Kaufprozess führen kann. Und das bedeutet: mehr Umsatz!
Worauf es bei einem gut gestalteten Shop ankommt:
Usability
Jeder Shop sollte so gestaltet sein, dass User instinktiv den Kaufprozess von Anfang bis Ende durchlaufen können. Kaufabbrüche, die aufgrund von Unklarheiten innerhalb des gesamten Kaufprozesses stattfinden können, müssen vermieden werden!
Idealerweise sind alle Prozesse intuitiv gestaltet, damit jedem User sofort klar ist, was im nächsten Schritt getan werden muss, bis der gesamte Kaufprozess abgeschlossen ist. Auch das Auffinden von Service-Seiten wie Kontakt, Hilfe, FAQ, Zahlungsmöglichkeiten etc. sollte so deutlich wie möglich gestaltet werden, es sei denn, man will z.B. die Kontaktaufnahme absichtlich erschweren.
Um das Shop-Handling so intuitiv wie möglich zu gestalten, können an einigen Stellen Anpassungen an die angebotene Produkt-Palette erforderlich werden. Das gilt besonders dann, wenn Artikel vom Kunden konfiguriert werden müssen.
Auch der besonders wichtige Part des gesamten Kassenprozesses sollte kritisch untersucht werden. Im Kassenbereich dürfen beim User keine Fragen aufkommen! Ein gutes Beispiel, wie der gesamte Kassenbereich inklusive des SSL Bereiches aussehen kann, finden Sie bei
Beispiel einer überarbeiteten LogIn Seite
Startseite
Neukunden gewinnen ihren ersten Eindruck auf der Startseite. Deshalb ist sie so wichtig wie die Eingangshalle eines Hotels, in der ein interessierter Gast entscheidet, ob das Hotel seinen Vorstellungen entspricht. Das wissen auch Hoteliers, die ihre Eingangshallen gerade aus diesem Grund so eindrucksvoll wie möglich gestalten lassen.
Für einen Onlineshop bedeutet das: bereits auf der Startseite entscheiden Interessenten, ob sie diesem Shop Vertrauen entgegen bringen wollen, ihr Interesse geweckt wird und sie sich zum Stöbern animiert fühlen. Ist dies nicht der Fall, werden Besucher schon nach dem Sichten der Startseite den Shop unmittelbar wieder verlassen. Das wirkt sich negativ auf die Conversion-Rate und somit auf den Umsatz aus! Deshalb gilt:
| Auf der Startseite muss der bestmögliche Eindruck vermittelt werden! |
Eine moderne und ansprechende Startseite wurde in Zusammenarbeit mit Powergap für Gummistiefelprofi.de realisiert. Um Mobile-Kunden den Einkauf zu erleichtern, sind auf der Startseite die Artikel als Touchslider eingebaut, so dass auf mobilen Endgeräten die Artikel mit dem Finger durchgeblättert werden können. Außerdem wurde das Main-Pic über die gesamte Breite gezogen, wodurch der Shop einen zeitgemäßen und modernen Eindruck vermittelt.
Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)!
Torantriebe und deren Technik ist das Gebiet von AS-Torantriebe. Die Startseite dieses Shops konnte so gestaltet werden (alle Banner. Symbole und das gesamte Design von frasche.de), dass sie für die Interessenten von Torantrieben informativ und ansprechend zugleich ist.
Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)!
Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)!
Selbstverständlich sind alle Seiten in vollem Umfang responsive, was bedeutet, dass bei mobilen Endgeräten die Lesbarkeit gewährleistet ist, sich alle Container auf das Hochformat anpassen und sich das Bannerdesign von Querformat auf Hochformat ändert.
Mobile first
Google & Co fordern eine so ausgelegtes Shopdesign, dass Shops auf mobilen Endgeräten leicht bedient werden können. Das ist wichtig, denn schon jetzt werden weit über 50% der Online-Käufe mobil durchgeführt.
Powergap bietet eine CORE WEB VITALS Optimierung an, mit der die Technik auch für mobile Endgeräte optimiert wird.
Sie sollten sich die Zeit nehmen, Ihren Shop einmal auf dem Handy durchzutesten und einen kompletten Kaufprozess durchspielen. Meine Erfahrung hat gezeigt, dass bei den meisten responsiven Shops die Handy-Ausgabe bisher nicht so hoch gewichtet wurde, wie es für das heutige Nutzerverhalten notwendig geworden ist.
So verwenden viele Shops beispielsweise Bilder/Banner, die über keine alternative Hochformatdarstellung verfügen, was dazu führt, dass sie auf Handys zu klein dargestellt werden. Dadurch verlieren sie ihre Werbewirksamkeit! Hinzu kommen Texte, die im Blocksatz formatiert sind, wodurch auf den Handys teilweise riesige Lücken zwischen den Wörtern entstehen. Das sieht nicht nur unprofessionell aus, sondern erschwert auch deutlich die Lesbarkeit. Des Weiteren sind manche Schriften so klein, dass sie nur durch Zoomen gelesen werden können. Oftmals fiel auch auf, das H1-H3 Tags als Headlines bzw. Subheadlines nicht wahrgenommen werden, da sie nicht im richtigen Größenverhältnis formatiert wurden.
Suchergebnisse
Die Suchergebnis-Seiten (Banner) können in Powergap sehr ansprechend gestaltet werden. So können z.B. Doppel-Kacheln mit Bild und Text, Textkacheln oder Bildkacheln die Seiten auflockern und gleichzeitig weiterführende Informationen beinhalten. Ein gelungenes Beispiel für eine solche Suchergebnis-Seite finden Sie hier:
Diese Seite beinhaltet weiterführende Buttons, CTA, ausreichend Text, auffällige Banner, die zwischen den Artikelkacheln platziert sind, Bilder und im Fußbereich weiterführende Informationen.
Artikeldetailansicht
Ein sauberer Aufbau, ein übersichtliches Design und ausreichend Informationen sind gerade in der Artikeldetailansicht von größter Wichtigkeit. Denn hier entscheidet Ihr Kunde, ob er den Artikel in den Warenkorb legt, oder ob nicht. Auch in der Artikeldetail-Ansicht geht hausschuh.com mit gutem Beispiel voran und zeigt, was in der Zusammenarbeit mit Powergap und frasche.de möglich ist.
Auch die Mockups und Feinarbeiten für die Artikeldetail-Ansichten von gummistiefelprofi.de und as-torantriebe.de stammen aus der Feder von frasche.de. Das Design des Konfigurators wurde für as-torantriebe.de komplett neu ausgearbeitet und so gestaltet, dass Kunden damit problemlos zurechtkommen.
Artikeldetailansicht Hausschuh.com
Artikeldetailansicht mit Konfigurator
Navigation
Die Navigation sollte so klar und deutlich wie möglich aufgebaut werden. Eine ansprechende und leicht verständliche Navigation, die beim Hovern aufklappt, wurde z.B. für schaumstoffnachmass.ch und as-torantriebe.de realisiert. Das Design der Navigation und sämtliche Icons und Symbole dieser Shops wurden von frasche.de erstellt.
Bei komplexer Navigation erstelle ich Mockups und Symbole, um den Einbau für Powergap so effizient wie möglich zu gestalten.
Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)!
Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)!
Konfigurator
Sie haben einen Konfigurator? In enger Zusammenarbeit mit Powergap haben wir den Konfigurator auf einen neuen Level bringen können. In dieser Version wird die Konfiguration komplett über ein Overlay dargestellt, wodurch Kunden ihre individuelle Artikel-Konfiguration wesentlich verständlicher durchführen können.
 Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)! |  Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)! |
Service Portal
Ihre Kunden sollen sich in Ihrem Shop leicht zurechtfinden. Ein optimale Möglichkeit hierfür ist die Zusammenfassung aller Service-/ Informationsseiten zu einem Portal. Hier könnten Seiten wie Zahlung/Versand, Kontakt, Retoure, Bewertungen, Gutscheine, FAQs usw. zusammengefasst werden, so dass Kunden nur noch über einen Button navigieren müssen, um alle Service Leistungen übersichtlich auf einer Portal-Seite zu finden.
Service Portal mit Icons  Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)! | Service Portal mit Bildern  Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)! |
Banner
Breite Banner sollten in einem responsive gestalteten Shop immer in 2 Formaten angelegt werden:
| Breitformat | (Desktop, Notebook) |
| Hochformat | (Tablet, Handy) |
Breitformat Banner  Wird auf Desktop und Notebook angezeigt | Hochformat Banner  Wird auf Tablet und Handy angezeigt |
Mit Hilfe von ein wenig HTML wird für Desktop und Notebook das Breitformatbild ausgegeben, auf dem Tablet und Handy hingegen das Hochformatbild. Mit dieser Technik wird sichergestellt, dass Banner in jedem Ausgabeformat die gleiche Gewichtung erhalten.
Meist beinhalten Banner Texte und Bilder. Durch notwendige Komprimierungen, welche die Ladezeit positiv beeinflussen, kommt es oft vor, dass dadurch Texte nicht mehr sauber dargestellt werden. Manchmal sind grafische Elemente und Texte in den Bildern unvermeidlich, in den meisten Fällen jedoch kann man Texte und Buttons als CSS-Container über das Bild legen, die dann gestochen scharf ausgegeben werden.
Grafiken und Logos werden aus Gewohnkeit immer noch von manchen Grafikern im PNG-Format erzeugt. Das ist nicht mehr zeitgemäß, da heutzutage jeder Browser SVG Dateien darstellen kann. Grafiken sollten prinzipiell im SVG-Format angelegt werden. Scalable Vector Graphics (SVG) sind skalierbare Vektorgrafiken, die durch ihre Skalierbarkeit bei geringer Datengröße in jeder Auflösung eine optimale (nahezu verlustfreie) Darstellung bieten. Das SVG-Format wird auch vom W3C empfohlen.
Google Maps
Sie haben auch ein Ladengeschäft oder einen Lagerverkauf? Dann empfiehlt es sich, falls noch nicht geschehen, Google Maps zu integrieren, damit Kunden zu ihrem Standort über Google Maps navigieren können.
Google Maps zur direkten Navigation
FAQs als Accordion
FAQs können mittels eines Aufklapp-Menüs sauber und übersichtlich gestaltet werden.
Auf das Bild klicken, um zum Shop zu gelangen (neues Fenster)!
Formulare
Sicherlich haben Sie ein Formular für die Kontaktaufnahme in Ihrem Online Shop. Aber auch Formulare für beispielsweise einen Rückrufservice oder Sonderformulare aller Art sind möglich. Selbstverständlich werden die DSGVO Richtlinien in jedem Formular erfüllt.
Beispiel eines Formulars nach Kundenwunsch
Sonstiges
Powergap Blog, Kundenbewertungen, Newsletter bestellenAuch der Powergap Blog lässt sich mit etwas CSS verschönern. Eine einfache Variante wurde hier realisiert:
Selbstverständlich können auch Geschenkgutschein oder andere Powergap Goodies optimiert bzw. angepasst werden.
Noch Fragen?
Durch jahrelange Erfahrung mit dem Powergap Shopsystem, einer engen Zusammenarbeit mit den Powergap-Mitarbeitern und die Überarbeitung etlicher Powergap Shops konnte ich ausreichend Erfahrungen sammeln und weiß, worauf es ankommt!
Im Vorfeld kann ich gerne Ihren Shop analysieren und mit Ihnen abklären, was innerhalb eines für Sie wirtschaftlich sinnvollen Rahmen realisiert werden kann. Sprechen Sie mich an. Ich bin mir sicher, dass wir gemeinsam Ihren Shop erfolgreicher gestalten können.
Quick Mails
Responsive Status Mail 1 & 2 mit Ihrem Logo und ArtikelbildernÜber die responsive Gestaltung der Status Mail 1 & 2 habe ich bereits im Dezember 2020 einen ausführlichen Beitrag gepostet. Zwischenzeitig ist es auch möglich, Quick Mails als responsive Mails zu gestalten. Bei Interesse bitte ich Sie, sich einfach bei mir zu melden.
Powergap Shop Referenzen
Hausschuh.com | Haflingerversand.de | Hausschuhexperte.de | German-Slippers.com | Tierschilder.com | AS-Torantriebe.de | Schaumstoffnachmass.ch | Gummistiefelprofi.de | u.v.w.Für weitere Informationen können Sie mich jederzeit über die E-Mail fs@powergap.de bzw. info@frasche.de sowie im Internet unter www.frasche.de erreichen. Gerne auch telefonisch mit einen kostenlosen Anruf über WhatsApp unter +66 8100 27805.
Frank Scheuber
