Zielführendes Design für Onlineshops – Experteninterview mit Martin Hahn

Handbuch Webdesign

Martin Hahn hat ein sehr umfassendes Handbuch zum Thema Webdesign geschrieben, das als Referenz in seinem Bereich gilt. Wir sprachen mit ihm darüber, wie sich ein Onlineshop ideal gestalten lässt, welche Positivbeispiele es gibt, und was man bei der Zusammenarbeit mit Dienstleistern beachten sollte.

In wie weit sollte man sich als Shopbesitzer mit Themen wie Design-Konzeption, Zielgruppenanalyse, Typografie, Responsive etc. auseinanderzusetzen? Oder überlässt man all das nicht besser einem Profi, der nach einigen Interviews das Endergebnis abliefert?

Naja, zumindest mit den konzeptionellen Aspekten sollte sich ein Shopbesitzer (oder der dafür in dem Unternehmen Verantwortliche) auseinandersetzen. Wie wollen wir uns positionieren? Welche Zielgruppe haben wir, bzw. wollen wir erreichen? Welche Inhalte sind gewichtig und sollen – gerade auf mobilen Geräten, wo der zur Verfügung stehende Platz geringer ist – entsprechend prominent platziert sein?

Der Webdesigner oder die Webdesign-Agentur kann und sollte da auch beraten und aktiv mitwirken, aber am erfolgsversprechendsten ist eine Zusammenarbeit. Bei Gestaltungsfragen liegt der Schwerpunkt sicherlich eher beim Auftragnehmer. Die Schriftwahl, die exakte Schriftgröße, den genauen Farbton usw. kann ein Designer besser bestimmen. Absegnen muss es der Kunde am Ende ja sowieso.
 
Kann es auch gefährlich sein, wenn sich der Auftraggeber mit seinem Halbwissen in den Design-Prozess einmischt? Wie gehst du selbst in deinen Projekten damit um?

“Gefährlich” ist sicherlich der falsche Begriff. “Nervig” kann es höchstens manchmal sein… “Ergänzend” und “befruchtend” sollte die “Einmischung” eher sein. Es ist eben eine ZusammenArbeit. Der Auftraggeber kennt sein Produkt, seine Leistungen, hoffentlich auch schon seine Zielgruppe und seine Wettbewerber entsprechend gut und hat womöglich bereits eine Vorstellung, wohin die Reise gehen soll – auch optisch. Dies kann und sollte er vermitteln. Als Auftragnehmer sollte man dankbar für den Input sein und dann schauen, was man daraus macht. Es bringt ja nichts, an den Erwartungen des Auftraggebers vorbei zu gestalten. Zuallererst ist der Webdesigner daher aber auch Berater. Er muss die Gestaltungsideen des Kunden in die richtigen Bahnen lenken, erklären, aufklären und Ansätze aufzeigen.

Martin Hahn
Martin Hahn
Unangenehm ist es sicherlich, wenn es ein “Design by committee” gibt. Zu viele Köche können den Brei eben verderben. Dann hat man schnell den optisch kleinsten gemeinsamen Nenner, also nicht den großen Wurf. Wenn man hier gleich zu Beginn ein, zwei Verantwortliche festlegt, die das Design Kundenseitig absegnen und als alleinige Ansprechpartner dienen, kann das viel Wert sein. Meetings in der großen Runde (also mit vielen Mitarbeitern des Auftraggebers) finde ich zu Beginn eines Projektes noch interessant und hilfreich, weil dies viele unterschiedliche Einblicke liefern mag. Aber Designabstimmungen im großen Kreis sind für einen Designer meist nicht sehr angenehm und zielführend.

Die typische Situation: Einem gefällt der Entwurf, einem nicht und dem anderen ist es egal… Hat man hier nur einen Ansprechpartner, der sich klar äußern kann, erleichtert und beschleunigt es den Gestaltungsprozess. Sich klar zu äußern ist wichtig. Alleine zu sagen “Gefällt mir so nicht”, ist für einen Designer immer undankbar. Je genauer man formulieren kann, was einem genau nicht gefällt, umso besser. Ich schaue mir daher zu Beginn eines Projektes gerne mit dem Kunden unterschiedliche Webseiten/Shops an. Dazu gehört eine eventuell schon vorhandene Kundenseite, Konkurrenten und auch Beispiele aus anderen Branchen. Möglicherweise hat der Kunde Seiten, die ihm gefallen.

Ich stelle ihm gleichzeitig moderne Designs vor und so bekommt man häufig ein gutes Gefühl dafür, was dem Kunden gefällt. Der Kunde erfährt gleichzeitig, was man selber unter gutem Design versteht und wie modernes Webdesign aussehen kann. Dies verhindert, dass man im Gestaltungsprozess zu oft aneinander vorbeiredet.
 
Was muss man in der Konzeption berücksichtigen, damit das Webdesign am Ende tatsächlich zu den Produkten passt und die richtige Zielgruppe anspricht?

Zuerst sollte ein umfangreiches Briefing stehen, damit für die Agentur detailliert klar ist, um was es überhaupt geht. Dazu müssen jede Menge Fragen gestellt werden. Viele Sachen sind für den Auftraggeber klar, aber für den Auftragnehmer nicht. Als Auftragnehmer sollte man den Auftraggeber und seine Produkte “verstehen”, seine Konkurrenten und die Zielgruppe kennen. Hierzu können Zielgruppenanalysen und/oder die Erstellung von Personas hilfreich sein. Es gibt dann meistens nicht nur “die eine” Zielgruppe, sondern mehrere mit unterschiedlichen Erwartungen und Bedürfnissen.
 
Und wie kann man für diesen Fall Marktforschung betreiben, wenn kein großes Budget bereitsteht? Hast du hierfür ein paar Tipps?

Hier geht es darum, die Wettbewerber, erfolgreiche Konkurrenten und auch erfolgreiche Webseiten/Shops aus anderen Branchen zu analysieren. Wie ist deren Inhaltsaufbau? Welche grafischen Schwerpunkte werden jeweils gelegt? Wie sind die Informationen gegliedert? Wie sieht die Informationsarchitektur aus.? Indem man sich solche Fragen stellt, kann man schon jede Menge von den “Best Cases” lernen und schauen, was man davon für das eigene Projekt übernehmen beziehungsweise besser machen kann.
 
Viele Onlineshops überfordern potenzielle Kunden mit zu vielen Navigations- und sonstigen Elementen. Wie kann man das Dilemma “möglichst viel zeigen” vs schlichte Strukturen designtechnisch lösen?

Ja, ein übliches Problem. Oft ist für den Kunden ja alles – zumindest vieles – wichtig. Gleichzeitig gibt es die anhaltende Entwicklung zur Einfachheit. Wobei auch Shops, die eher überfrachtet wirken (wie zum Beispiel Amazon) sehr erfolgreich sein können.

Prinzipiell sollte man zuerst das “wirklich wichtige” vom “auch wichtigen” trennen. Daraus entwickeln sich dann die Inhalte der einzelnen Seiten, sowie die Seitenstruktur an sich. Oft ist ja auch nicht die Homepage eines Shops die Einstiegsseite. Durch Suchmaschinen und Links von anderen Seiten landen die Besucher meist schon auf Unterseiten.

Hat man dann aber doch viele Inhalte auf einer Seite zu zeigen, dann kann man beispielsweise mit Tabs oder Akkordeon-Effekten arbeiten. Gerade bei Produktseiten wird das sehr gerne gemacht. Die Produktbeschreibung, technische Details, User-Bewertungen etc. können so platzsparend untergebracht werden und überfluten den Besucher nicht gleich mit Informationen. Für die Navigationsstruktur kann sich ein Mega-Drop-Down-Menü anbieten. Es klappt sich also nicht bloß eine öde Textliste mit den Unterseiten auf, sondern ein entsprechend großes Feld, in dem die Unterpunkte teilweise bebildert oder sogar noch mit Informationen ergänzt werden.

megamenu
Ein beispielhaftes Mega-Menü, gesehen auf porsche.de

Allgemein sollten sich Auftragnehmer und Auftraggeber aber bei jedem Objekt (grafisch und inhaltlich) fragen: Brauchen wir das wirklich?
 
Du schreibst in deinem Buch: “Vertrauen schaffen ist ein sehr wichtiges Kriterium beim Online-Verkauf”. Was sind typische vertrauensfördernde Designelemente?

Vertrauen ist natürlich gerade im E-Commerce ein ganz wichtiger Faktor. Reine Informationen kann ich vielleicht noch von einer nur halbwegs vertrauenswürdigen Seite beziehen. Aber eine Bestellung tätigen und dabei die privaten- sowie Kontodaten preisgeben, das machen die meisten vermutlich nur bei einem sehr vertrauenswürdigen Online-Shop.

Diese Glaubwürdigkeit muss sich ein Shop erst erarbeiten. Ein professionelles Design ist da sicherlich ein erster Schritt. Man könnte jetzt länger diskutieren, ab wann ein Design professionell ist. Die meisten Shop-Systeme haben ja schon Standard-Layouts integriert, die so etwas wie eine Basis-Professionalität vermitteln. Noch individueller, hochwertiger und damit auch professioneller wirken aber Shop-Designs wie bei fitbit.com oder gude-stoff.de. Der Aufbau erinnert dann eher an eine Corporate Webseite oder an das typische Landing Page-Design.

gude-stoff
Die Webseite von gude-stoff.de

Zur Glaubwürdigkeit gehören auch so selbstverständliche Dinge wie keine toten Links, ein Impressum und generell eine gute Usability, die wiederum nicht unbedingt immer so einfach zu erreichen ist. Texte sollten gut lesbar, die Seite responsiv und die Inhalte immer aktuell sein. Das sind ja eigentlich schon Standardanforderungen, wenn ich mit meinem Shop verkaufen will. Das Ganze kann man aber mit weiteren vertrauensbildenden Maßnahmen ergänzen. Dazu gehören die sogenannten Gütesiegel (wie beispielsweise Trusted Shops). Diese vermitteln dem Käufer, dass es sich um einen von Dritter Stelle geprüften und für gut befundenen Shop handelt. Je bekannter das Siegel, umso vertrauenswürdiger. Also schnell mal ein eigenes Siegel basteln, dass keiner kennt, kann dann eher nach hinten losgehen.

Positiver Kundenbewertungen (gerne in Form von Sternchen angezeigt), Berichte von Testimonials, Logos der beliebten Zahlungsmethoden wie PayPal oder ClickandBuy, sowie der Verweis auf Garantien und Rückgaberecht erhöhen die Glaubwürdigkeit enorm. Wenn dann dazu noch die Möglichkeit einer leichten Kontaktaufnahme (per Telefon, E-Mail oder Formular) besteht, ist es wunderbar. Zu sehen sind viele dieser Elemente zum Beispiel bei tennis-point.de.
 
Wie können Shopbesitzer ein gestalterisches Alleinstellungsmerkmal schaffen, das ja doch immer wichtiger wird? Was bleibt bei Kunden und Interessenten haften, ohne allzu aufdringlich zu wirken? Gibt es hierfür Beispiele?

Es ist gar nicht so einfach, in der Masse an Webseiten und Online-Shops noch aufzufallen und in Erinnerung zu bleiben. Viele Shops ähneln sich im Aufbau ja sehr. Zum einen weil es die Shop-Systeme schon so vorgeben. Zum anderen, weil bestimmte Designs modern und somit zu einer Art “Design-Standard” geworden sind. Um sich abzuheben gibt es daher vor allem zwei gestalterische Mittel: Farben und Bilder.

Diese beiden Gestaltungselemente haben auch die emotionalste Wirkung. Und das Hervorrufen von positiven Emotionen ist ja bekanntermaßen ein nicht unerhebliches Verkaufskriterium. Jeweils zwei Beispiele dazu: Mit schönen Produktbildern überzeugen eden-made.de und pfeffersackundsoehne.de. Und mit gezieltem Farbeinsatz sorgen beispielsweise trixi-park.de und ecoglas.de/shop für eine Differenzierung und hohe Wiedererkennung.

eden-made
Stimmige Produktbilder bei eden-made.de

Gerade wenn nur die Herstellerfotos von Produkten vorliegen und das Budget für eigene individuelle Bilder begrenzt ist, lässt sich mit der Farbgebung ein gestalterisches Alleinstellungsmerkmal schaffen. Dafür ist ja dann der Webdesigner da…
 
Woran erkennt man, ob ein Freelancer oder eine Agentur wirklich dazu geeignet ist, einen Webshop statt einer „normalen“ Seite zu designen und zu konzipieren?

Der Auftraggeber sollte sich im voraus gut mit der Materie und dem Projekt auseinandersetzen. Was will er eigentlich genau, wen will er ansprechen, welche Produkte will er anbieten, welches Budget steht zur Verfügung und wie sowie durch wen soll der Shop gepflegt werden. Damit hat er eine gute Basis, um in Erstgesprächen mit potentiellen Auftragnehmern zu gehen.

Hierbei wird man recht schnell merken, ob die “Chemie” stimmt. Dies mag zwar nichts über die fachlichen Qualifikationen aussagen, aber für eine gemeinsame Projektumsetzung ist es sicherlich hilfreich. Dazu sollte der potentielle Auftragnehmer mögliche Umsetzungsvarianten gut und verständlich erklären können. Beratend und nicht verkaufend sollte er sein.

Sicherlich ist es für viele schwierig, die fachliche Qualifikation zu beurteilen. Ab wann ist ein Design gut, ab wann ist der Shop wirklich SEO-optimiert, ab wann ist eine Seite wirklich responsiv… Hier hilft es nur, sich als Auftragnehmer selber weiter in die Materie einzuarbeiten und die Anforderungen genau schriftlich festzuhalten, im Idealfall schon als Checkliste fürs erste Briefing. Und dann sind natürlich Referenzprojekte der Agenturen eine gute Möglichkeit, sich von deren Erfahrungen und deren Designs einen Eindruck zu verschaffen.
 
Ein paar Worte zu dir und deiner Agentur?

Ich arbeite unter dem Label hahnsinn – Büro für Design & Webentwicklung seit vielen Jahren als selbständiger Webdesigner für KMUs und Existenzgründer. Mit einem kleinen feinen Team aus weiteren Freiberuflern setzen wir Corporate Designs und Webseiten um. Das sind größtenteils klassische Corporate Websites, ab und an auch mal ein Online-Shop. Ende letzten Jahres habe ich im Rheinwerk Verlag ein Buch veröffentlichen dürfen: Webdesign – Das Handbuch zur Webgestaltung. Und seit kurzem schreibe ich fleißig in meinem Blog Webdesign Journal Artikel rund um effektives Webdesign.

Du hast Fragen an Martin oder generell zum Thema Webdesign für Onlineshops? Stelle diese gerne in den Kommentaren zum Beitrag.

Beitrag teilen

Author Avatar

Redakteur bei MarketPress. Blogger aus Leidenschaft, Corporate Blog & Content Marketing Trainer, Buchautor (u.a. "Blog Boosting"). Mit-Organisator des WP Camp Berlin.

Auch interessant:

Neue Produktfilter WordPress

Plugins angetestet: WooCommerce Products Filter - Erweiterte Produktfilter

von Michael Firnkes

WooCommerce enthält bereits die wichtigsten Funktionen, damit deine Kunden Produkte nach Preis, Kategorie etc. filtern können. Wem diese Möglichkeiten n ...

Weiterlesen
youtube

Neu: Video-Tutorials für German Market

von Michael Firnkes

Du willst wissen, wie sich die einzelnen Module in unserer Rechtssicherheits-Suite German Market für WooCommerce bedienen lassen? Dann helfen wir dir jetz ...

Weiterlesen
woonews20

WooCommerce Wochenrückblick #20: Conversion, Produktkonfigurator und Woo-Argumente

von Michael Firnkes

Wir sammeln Argumente für das führende Onlineshop-System und für Open Source. Und: Einen Produktkonfigurator kannst du auch mit WooCommerce umsetzen. Di ...

Weiterlesen
ERP

Warum sich der Einsatz eines ERP Systems auch für kleine Händler lohnen kann

von Max Ager

Die eCommerce-Branche ist eine der am schnellsten wachsenden Brachen überhaupt. Über eine Million Onlineshops basieren auf dem bekannten WooCommerce-Syst ...

Weiterlesen

Kommentare

2 Kommentare

2 Pingbacks

  1. Lieblinks – November 2015 | Interview: Design für Online-Shops, Elevator Pitch, Alleinstellungsmerkmal
  2. Das Webdesigner-Blogger ABC | hahnsinn | Büro für Design & Webentwicklung in Leipzig und Frankfurt a.M.

Schreibe einen Kommentar

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

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">