Onlineshop-Gestaltung mit WP WooCommerce (Teil 3): Finetuning & Usability

Onlineshop Gestaltung Finetuning und Usability

In den vorangegangenen Beiträgen unserer Serie zum Thema Onlineshop-Gestaltung ging es in erster Linie um die vorbereitenden Arbeiten im sogenannten „Backend“ von WooCommerce. Wir haben uns mit der Einrichtung der Grundfunktionen beschäftigt (siehe „Onlineshop-Gestaltung mit WordPress und WooCommerce (Teil 1)“ ) und erklärt, worauf Sie beim Aufbau des Onlinekatalogs und der Produktpräsentation achten sollten (siehe auch „Onlineshop-Gestaltung mit WordPress WooCommerce (Teil 2): Produktpräsentation„). Der Online-Shop ist ab jetzt im Prinzip betriebsbereit, allerdings fehlen ihm sowohl jeder Ansatz von Benutzerfreundlichkeit und Verkaufsförderung sowie die individuelle Note in Ihrem Corporate Design für den Wiedererkennungswert Ihrer Firmen- und Produktmarke.

Schritt 1: Wahl des passenden Themes zum Onlineshop

Ab jetzt sind Ihre Spezialisten für Design und Kundenkommunikation gefragt. Denn es geht um die Frage: welches Standard Shop-Theme erfüllt von Anfang die meisten Ihrer Design- und Funktionsanforderungen bzw. passt am besten zu Ihrer Kundenzielgruppe und den angebotenen Produkten? Lassen Sie sich bitte nicht beirren, Designer und Entwickler neigen dazu, Ihnen Eigenentwicklungen anzubieten, weil das angeblich besser, billiger und schneller geht. In fast 20 Jahren Onlinebusiness hat sich dieser Optimismus zugunsten der kompletten Individualentwicklungen leider nie bestätigt. Diese Projekte wurden immer deutlich teurer, deren Umsetzung dauerte ebenso deutlich länger und die langfristige Pflege der Software war wegen Personalfluktuation selten gewährleistet – es sei denn, die Entwicklungen wurden Inhouse aus einer Konzern-Struktur heraus gestemmt.

Für kleine und mittlere Unternehmen empfiehlt sich, aus der Liste der fertigen WooCommerce Themes ein passendes auszuwählen, welche folgende Funktionalitäten von Hause aus mitbringt:

  • Verwendung der eigener Navigationselemente wie individuelle Menüs oder Widgets
    in Kopfbereich/Header, Fussleiste/Footer und Seitennavigation/Sidebar
  • Verträglichkeit mit WooCommcerce Germanized, um alle Vorteile dieses System nutzen zu können
  • Eignung für mobile Endgeräte wie Smartphones, Tablets etc., Stichwort: „responsive Design“
  • Upgrade-Möglichkeit auf „Professional“ Versionen, also Kauf von Lizenzen mit integrierten Support-Leistungen
  • Einbettung von eigenen Logos, Header- und Hintergrundbildern und Farben
VendiPro Shoptheme einrichten
Einrichtung des Onlineshop Themes „VendiPro“

In unserem Beispiel des Onlineshops für Domains unter „Parkhaus.Domain-Hotel.de“ haben wir uns für „VendiPro“ entschieden, da es für das Thema Domainverkauf die notwendige Schlichtheit aufwies und bereits perfekt fürWooCommerce Germanized optimiert ist. Doch selbstverständlich liefert die WordPress Community auch andere Themes, die zu diesem Shopsystem passen.

Wenn Sie bzw. Ihre Entwicklungsabteilung mit der WordPress-Philosophie vertraut sind, fällt der erste Individualisierungsschritt leicht, denn die Einrichtung des Shop-Themes funktioniert genau so, wie Sie es von „normalen“ Vorlagen gewöhnt sind.

Schritt 2: Noch mehr Individualität mit Child Themes

Sollte das gewählte Onlineshop-Theme nicht von Hause aus die maximale Gestaltungsfreiheit aufweisen, können Sie sich hier erneut die WordPress Philosophie zu eigen machen und ein sogenanntes Child Theme anlegen (lassen). Diese Designvorlage erbt alle Eigenschaften des Haupt-Themes, in unserem Fall VendiPro, und enthält nur die individuellen Anpassungen von Schrift, Farben und anderen Designmerkmalen, welche sich nicht über die Standardmaske bei WordPress haben ändern lassen. Für einen Web-Designer bzw. Programmierer sind diese Anpassungen in der Regel ein Kinderspiel. (Mehr Hintergrundinformationen zum Thema Child Themes …)

Schritt 3: Einfache Navigation für sichere Kaufabschlüsse

Im Zeitalter der mobilen Nutzung des Internets bewahrheitet sich eine alte Verkaufsweisheit: weniger ist (oft viel) mehr. Immer seltener sitzen Ihre Kunden vor den großen Bildschirm am PC und werden sich die Zeit nehmen, Ihre Angebotspalette in Ruhe zu studieren. Ihre Kunden erwarten auf dem Smartphone „en passant“ einen Überblick und „per Fingerzeig“ einen schnellen Einblick in Angebote und Services. Daher ist es wichtig, dass bei der Gestaltung Ihres Online-Shops ein paar Grundregeln einhalten:

  • Scrollen immer erlauben.
    Nur so können auch Smartphone-Nutzer alle Inhalte der Shopseite lesen. Responsive Themes berücksichtigen dies von Hause aus.
  • Das Wichtigste zuerst und Oben.
    Sonderangebote und Aktionen sollten auch auf dem kleineren Smartphone-Bildschirm schnell zu sehen bzw. zu finden sein.
  • Einfache Suchhilfen bieten.
    Ein Suchfeld für textliche Eingaben, Schlagwortwolke und eine klare Struktur der Kategorien im Online-Katalog sind ein Muss.
  • Menü-Gestaltung unter WordPress
    Individuelle Shop-Menüs mit WordPress gestalten

    Klare Navigations-Strukturen verwenden.
    In das Header-Menü bzw. in die Kopfzeile gehören alle für den Online-Kauf relevanten Funktionen und Auswahlmöglichkeiten: „Shop-Startseite“, „Kundenkonto“, „Warenkorb“, Anzeige der Warenkorbfüllung, Prodult-/Kategorie-Wahl und wichtige Kundenhinweise, z.B. über Services, Lieferzeiten etc.
    Im Footer (Fußzeile) erwarten Ihre Kunden Links zu rechtlichen Informationen (AGBs, Widerruf, Datenschutz), Lieferbedingungen, Zahlungskonditionen und andere relevante Hintergundinformationen.

  • Gut erkennbare Bilder und kurze informative Texte.
    Lesen von viel Text ist sowohl auf kleinen Handy-Displays als auch normalen Bildschirmen anstrengend und kostet Zeit, die im Falle von Onlineshops immer gegen Sie arbeitet. Bilder helfen bei der Orientierung und Entscheidung: das will und braucht Ihr Kunde! Daher ist es wichtig, dass Sie auf die hohe Qualität des Bildmaterials achten, damit auch gezoomte Darstellungen noch gut aussehen. Gleiches gilt für die beschreibenden Texte: kein Marketing-Blabla und Werbegewäsch.

Schritt 4: Funktionstests

Vielleicht sind Sie schon einmal der Methode der „agilen Softwareentwicklung“ begegnet. Sie setzen sich zu Beginn eines Software-Entwicklungsprozess Ziele, sogenannte Meilensteine, die definieren, wann was in welcher Qualität fertig sein und getestet werden soll. Natürlich können Sie mit den Funktionstests warten, bis das Design „steht“, doch erfahrungsgemäß sparen Sie Zeit, wenn Sie zum Beispiel nach der Fertigstellung einer einzelnen Navigationsebene gleich die dazugehörigen Links und Funktionen testen. So vermeiden Sie das Anhäufen von Fehlern und dämmen das Risiko ein, am Ende mit einem zwar optisch brillianten, aber funktional desaströsen Onlineshop dazustehen.

Insbesondere das Erscheinungsbild unter den gängisten, aktuellen Browsern Internet Explorer, Mozilla Firefox, Google Chrome, Opera und Safari und mit den wichtigsten Endgeräten sollten Sie regelmäßig überprüfen, um Irrwege zu vermeiden. Natürlich müssen Sie hierzu nicht alle Endgeräte kaufen, denn hier gibt es inzwischen Online-Werkzeuge wie z. B. Screenfly, welche Handy- und Tablet-Nutzung nahezu perfekt simulieren.

Schritt 5: Friendly User als Beta-Tester

Sobald Ihr Design steht, sollten Sie Ihren Online-Shop unbedingt von Dritten auf die Probe stellen lassen. Wenn Sie dieser eine Schlüsselposition im Unternehmen zuordnen, empfiehlt sich sogar die Beauftragung von Test-Profis. Denn diese nehmen nicht nur die technische Funktionstüchtigkeit unter die Lupe, sondern werten mit den Beta-Testern auch die sogenannte Usability, zu Deutsch „Nutzerfreundlichkeit“ nach klar vordefinierten Standards aus. Wenn es eine Nummer kleiner sein darf, genügen auch Freunde, Familie und Mitarbeiter, um diesen freundlichen Test durchzuführen. In jedem Fall erhalten diese „Friendly Users“ hierzu kleine Testszenarien wie Bestellen, Kaufen, Widerrufen, Nachfragen, bestimmte Produkte suchen, Bewertungen schreiben – also alle Standard-Situationen im Online-Shop. Dazu werden sie gebeten, Fehler, Unklarheiten und andere Auffälligkeiten zu protokollieren und ggf. Verbesserungsvorschläge zu machen. So erhalten Sie ein ehrliches und brauchbares Feedback, welches Ihnen bei der Perfektionierung des Shops wertvolle Hilfestellung leisten wird.

WordPress hilft mit Widgets und Plugins

Widgets bringen Nutzerfreundlichkeit in den Shop
Widgets bieten Kunden zusätzliche Navigationshilfen im Onlineshop.

Ein Rat noch zum Schluss: Bevor Sie für einzelne Individualfunktionen teure Entwicklungsaufträge vergeben, lohnt sich die Suche in der WordPress-Community nach fertigen Widgets und Plugins, denn so können Sie die Design-Hilfen dieses Content Management Systems zu Gunsten Ihres Online-Shops voll ausnutzen und eventuell viel Zeit und Geld sparen.

Fazit

Ein Onlineshop ist eigentlich nie ganz „fertig“, denn Sie müssen Ihn regelmäßig bearbeiten, anpassen und erweitern, um den Wünschen Ihrer Kunden gerecht zu werden. Sei es, dass sich die Wahrnehmungs- und Nutzungsgewohnheiten Ihrer Kundschaft ändert, Ihr Produktsortiment angepasst werden muss oder Sie an der generellen Verbesserung Ihrer Services im eBusiness arbeiten wollen.

Letztlich ist die Akzeptanz Ihres Online-Shops bei den Kunden von verschiedenen Faktoren abhängig, aber ein Kriterium schlägt alles: Service. Egal wie schön Ihr Shop geworden ist, wie gut er technisch funktioniert und welche hohen Qualitätsansprüche Ihre Produkte erfüllen, Ihrer Onlineservice-Versprechen müssen Sie dauerhaft einhalten, sonst gefährden Sie Ihre Bemühungen. Ein guter Geschäftsfreund fasste dies einmal in einem schönen Bild zusammen: „(Online)Kunden sind wie scheue Rehe: schwer anzulocken, noch schwerer zu halten und sehr leicht zu verscheuchen.“ Aber lassen Sie sich nicht entmutigen: der Aufwand, einen richtig guten Shop zu bauen und die passenden Services im Unternehmen zu etablieren, lohnt sich. Denn nichts ist schöner, wenn Ihnen die Kunden doch letzlich aus der Hand fressen, weil Sie Ihre Sache gut gemacht haben.