Kennst du den Compasso d'Oro? Nein, das ist nicht dieser Fußballpreis, der anscheinend nur an zwei verschiedene Spieler vergeben werden darf, sondern eine der renommiertesten und ältesten Auszeichnungen im Bereich des Industriedesigns weltweit.
Erhalten haben sie bereits Designs für Autos, Leuchten, Möbel und Schreibmaschinen. Dinge zum Anfassen also – und genau deshalb war die Vergabe des Compasso d'Oro 1994 so eine wichtige Zäsur. Denn damals gewann die Auszeichnung erstmals ein digitales Produkt: das Graphical User Interface (GUI) von Olivetti Synthesis.
Über 30 Jahre später und inzwischen ist es selbstverständlich, dass wir bei der Arbeit Icons anklicken. Wahrscheinlich würden wir uns heute sogar kolossal über die Bedienbarkeit dieser ersten GUIs aufregen. Schließlich hat sich in Sachen UX- und UI-Design in drei Jahrzehnten jede Menge getan.
In diesem Beitrag möchten wir UX und UI daher genauer unter die Lupe nehmen: Was zeichnet gutes UX- und UI-Design aus? Was sind absolute No-Gos? Wie realisierst du das alles für deinen Shop, was hast du davon und welche Trends zeichnen sich am Horizont ab?
Jede Menge Fragen, bei deren Beantwortung uns unsere eigene Expertin zur Seite steht: Olga Dobriakova ist UX-Designerin bei Eshop Guide und weiß genau, warum gut gemeint bei UX selten gut gemacht ist. Olga, dürfen wir bitten?
Olga Dobriakova, UX-Designerin bei Eshop Guide
Uuhhh … Was genau sind UX, UI und Usability eigentlich?
Achtung, schlechtes Wortspiel: Wir wollen dir natürlich kein X für ein U vormachen. Damit du genau weißt, wovon wir reden, lass uns kurz die Begriffe klären.
Das ist UX
UX steht für User Experience – also Nutzererfahrung. Gemeint ist damit die Funktionalität eines (digitalen) Produktes. Wie lässt es sich bedienen, welches Feedback gibt es aus, was passiert bei Fehlern? Wenn du schon mal eine Stunde gebraucht hast, um die Uhr an deiner Mikrowelle einzustellen, hattest du Kontakt mit schlechter UX.
Übertragen auf einen Onlineshop geht es bei der User Experience insbesondere um Menüs, Schaltflächen, die Anordnung der einzelnen Elemente auf den Seiten, den Warenkorb und den Checkout. Wie lange brauchen Shoppende, bis sie bei ihrem Wunschprodukt landen? Wie selbsterklärend sind Icons? Und wie viele Klicks benötigt der Bezahlvorgang?
Das ist UI
UI ist die Abkürzung für User Interface – die Benutzeroberfläche. Hier dreht sich alles um Formen, Farben und Schriftarten. Denn die einfache Bedienung eines Produktes ist nur die halbe Miete: Sollten Anwender:innen beim Betrachten desselben einen leichten Brechreiz verspüren, haben sie erst gar keine Lust, es auszuprobieren.
Für deinen Onlineshop bedeutet das: Formen, Fonts und Farben sollten zwar deine Markenidentität widerspiegeln, aber gleichzeitig auch ansprechend wirken und vor allem lesbar sein. Weiße Schrift auf gelbem Grund mag für das Logo noch funktionieren. Zieht sich dieses Design aber durch den gesamten Shop, tun Besucher:innen bald die Augen weh.
Richtig eingesetzt ist die UI dagegen in der Lage, ganze Gefühlswelten zu vermitteln. Stimmt die Ästhetik, erzeugt sie genau die Emotionen, mit denen die Besuchenden deinen Store betreten haben. Deine Gäste fühlen sich ab dem ersten Klick abgeholt, erinnern sich noch lange an den Einkauf bei dir und schauen gerne wieder vorbei.
Das ist Content
Moment, Content? Davon war doch noch gar keine Rede! Stimmt – und in vielen Guides wirst du davon auch nichts lesen. Aber wir wären nicht die Eshop-Nerds, wenn wir dir die Dinge nicht besonders gründlich erklären würden. Daher:
Content – also der Inhalt einer Webseite – geht Hand in Hand mit UX und UI. Denn auch der komfortabelste Onlineshop im schönsten Design wird zum Flop, wenn sich die Texte ähnlich unterhaltsam lesen wie ein Schreiben vom Finanzamt oder die Produktbilder so steril wirken wie OP-Besteck. Guter Content gehört immer mit dazu.
Das ist Usability
Aus UX, UI und Content wird zusammen die Usability – die Nutzbarkeit eines Onlineshops. Im besten Fall bewegen sich die User:innen mit traumwandlerischer Sicherheit durch deinen Store, zieht sich die Identität deiner Brand wie ein roter Faden durch das Design und jede einzelne PDP macht Lust, noch ein wenig weiter zu stöbern.
Klingt nach viel Arbeit und reichlich Fehlerpotenzial? Gut möglich, deshalb beantworten wir dir direkt die Frage, die sich gerade in deine Gedanken geschlichen hat:
Gute UX und UI – Was hast du davon?
Um es kurz zu machen: jede Menge. Die Usability ist hauptverantwortlich für:
-
Mehr Conversions: Wer sich in deinem Shop leicht zurechtfindet und auch optisch angesprochen fühlt, wird leichter vom Besuchenden zum Kaufenden.
-
Weniger Warenkorbabbrüche: Jeder eingesparte Klick und jede vermiedene Unsicherheit sind eine Chance weniger für stehen gelassene Warenkörbe.
-
Höherer Wiedererkennungswert: Wenn dein Store deine Brand vollumfänglich repräsentiert, bleibst du deutlich länger im Gedächtnis haften.
-
Mehr wiederkehrende Kund:innen: Hat der Einkauf Spaß gemacht, kommen die Shopper:innen gerne wieder.
-
Vollere Warenkörbe: Wo mit Begeisterung und einem sicheren Gefühl eingekauft wird, landet schnell ein Artikel mehr im Körbchen.
-
Mehr Empfehlungen: Ein positives Einkaufserlebnis heißt immer auch, dass du bessere Bewertungen erhältst und auf Social Media gerne empfohlen wirst.
Wenn das keine triftigen Gründe sind, viel Wert auf hervorragende UX und UI zu legen, wissen wir es auch nicht. Deshalb machen wir gleich weiter mit der nächsten Frage, die dir durch den Kopf spukt. Ja, wir können Gedanken lesen. Aber verrate es bitte niemandem.
UX- und UI-Design in der Praxis: So setzt du es um
Dein aktueller Store ist eine ästhetische Ohrfeige und in der Handhabung etwa so transparent wie die Grundsteuerreform? Dann ist es Zeit, zu handeln. Ob du dabei einen Shop-Relaunch planst oder die Migration in ein neues Shopsystem (wir empfehlen Shopify!), spielt keine große Rolle. Selbst, wenn es sich um deinen allerersten Auftritt im Web handelt, geben wir dir denselben Ratschlag:
Arbeite für UX und UI immer mit den Expert:innen zusammen.
Und das sagen wir nicht, damit du uns engagierst und wir die Lobby endlich mit Carrara-Marmor auslegen können, sondern um dir viel Ärger und damit Kosten zu ersparen. UX- und UI-Design sind inzwischen eigene Wissenschaften geworden. Selbst bei Einsteigerbüchern zum Thema handelt es sich um Schinken mit 600 Seiten; an den Universitäten Hamburg und Potsdam besitzen die Disziplinen inzwischen ihre eigenen Studiengänge.
Allerdings bedeutet das nicht, dass du gar nichts tun kannst oder solltest. Wenn du ein wenig Vorarbeit leistest, bevor du dich an Profis wendest, werden die Ergebnisse besser und die Umsetzung erfolgt schneller. Olga rät dazu:
#1 Branding immer vor UX- und UI-Design
Ein Logo und/oder einen Slogan zu entwickeln, ist mega aufwendig und auch nicht die Aufgabe des UX- oder UI-Designs. Vollziehe demnach nie den zweiten Schritt vor dem ersten, sondern kümmere dich immer erst um UX und UI, wenn du weißt, wie deine Brand eigentlich aussieht.
Dazu gehört nicht nur deine Bildmarke – im besten Fall hast du auch schon Farben im Kopf und kannst ein paar Sätze zu deiner Schriftart sagen. Wichtig dabei: Du musst den Designer:innen natürlich kein finales Ergebnis vorsetzen. Aber du solltest die Richtung kennen, in die es dich zieht. Daher gleich der nächste Punkt:
#2 Kenne deine Marke, dein Publikum und dich
Verkaufen funktioniert primär über Emotionen, und die sind bekanntlich vielschichtig. Für dich bedeutet das, dass du dir Gedanken über folgende Fragen machen solltest:
1. Was macht deine Brand besonders?
Es muss Attribute geben, die dich auszeichnen und von deinen Marktbegleitern abheben. Luxusmodelabels gibt es zum Beispiel viele. Aber wenn du mal einen Blick auf die Seiten mit Herrenmode von Polo by Ralph Lauren wirfst, wirst du schnell feststellen, dass sich dort stark auf ein Thema spezialisiert wurde:
Im Vordergrund steht komplett das Understatement des britischen Gentlemans. Elegant, aber nie auffällig. Etwas vintage, dennoch zeitlos. Im Großstadtappartement genauso zu Hause wie zwischen wogenden Kornfeldern.
Dieses Bild zieht sich durch Fotos, Wording, Farben und sogar die Serifenschrift. Polo ist minimalistisch, klassisch, hochwertig, schlicht und sportlich – und damit anders als seine Marktbegleiter.
In eine ähnliche Richtung – und doch ganz anders – zielen UX und UI von Alo Yoga: Weiblich, sportlich, mit sanften Pastellfarben und einem sehr klaren Schriftbild. Stellst du die zwei Stores einander gegenüber, weißt du sofort, was wir mit dem roten Faden meinen.
2. An wen verkaufst du?
Natürlich solltest du auch deine Zielgruppe zumindest grob umreißen können. Denn Jugendliche wollen ganz anders angesprochen und abgeholt werden als junge Eltern. Je tiefer du dabei ins Detail gehen kannst, desto besser. Denn ein junges Elternpaar aus der Großstadt hat ganz andere Wünsche und Vorstellungen als eines vom Land.
Dabei spielt es nicht unbedingt nur eine Rolle, an wen du tatsächlich verkaufst, sondern auch, an wen du verkaufen willst. Coca-Cola ist die Blubberbrause für coole junge Party People. Getrunken wird sie allerdings auch von adipösen Stubenhockern – die vermutlich gerne cool und jung wären und auch mal auf eine Party eingeladen werden wollen.
3. Wer bist du?
Zuletzt musst du dich selbst beschreiben können. Denn die Menschen wissen gerne, mit wem sie ein Geschäft machen und lassen sich deutlich schneller zu einem Kauf überreden, wenn Ihnen ihr Gegenüber sympathisch ist.
Als Beispiel noch einmal zurück zu Polo: Wenn du dich durch die Kollektion klickst, spürst du den Verkäufer im Dreiteiler förmlich hinter dir stehen. Natürlich spricht er dich mit „Sir“ an, erkennt mit einem Blick, was dir steht und greift ungefragt zum passenden Gürtel und den perfekten Schuhen.
Polo als Mensch ist also diskret, zuvorkommend, ausnehmend höflich, gebildet und dabei eher leise.
#3 Stelle deine Analysedaten bereit
Mach dich weiterhin darauf gefasst, dass deine UX-Designer:innen einen Blick in deine Google Analytics Daten werfen möchten. Dabei bitte keine falsche Scheu; niemand hat die Absicht, dich auszuspionieren, und Peinlichkeiten wie eine 90-prozentige Abbruchquote haben wir alle schon mal gesehen. Es geht primär darum, die größten Baustellen in deinem Store zu identifizieren.
Dabei hilft die Erfahrung, die deine Designer:innen hoffentlich mitbringen, Schwachpunkte zu finden, die dir niemals aufgefallen wären. Und solltest du jetzt sagen: „Aber ich habe doch gar keine Analysetools installiert“, so antworten wir: „Dann aber los!“. Denn ohne eine fundierte Datengrundlage wird das UX-Design schnell zum Ratespiel und dein Budget ineffizient aufgebraucht.
#4 Höre auf deine Kund:innen
Zuletzt raten wir dir dazu, ein wenig auf Social Media zu spionieren oder deine Kundschaft einfach ganz unverblümt anzusprechen: Was gefällt ihnen an deinen Produkten und deinem jetzigen Shop und was finden sie nicht so gut?
Die meisten Menschen helfen gerne – vor allem dann, wenn ihnen eine Marke gefällt. Erfährst du dann zum Beispiel, dass die Käufer:innen deines Hundefutters sich eine Filterfunktion für Fleischsorten wünschen, ist das nicht nur ein Hauptgewinn für Dackel Hubert, sondern vor allem für das UX-Design.
Für alle Autodidakt:innen
Du bist noch nicht so weit, dass eine Agentur ins Budget passt? Kein Grund, sich zu schämen. Denn alle haben mal klein angefangen.
Unser Rat lautet dann ganz schlicht: Investiere ein wenig Geld in eines der professionellen Themes auf Shopify. Denn die wurden in Zusammenarbeit mit echten UX- und UI-Designer:innen entwickelt und helfen dir ohne viel Tamtam, die schlimmsten Fehler zu vermeiden.
Alles, was dort 300 EUR und mehr kostet, haben wir bereits ausprobiert und für gut befunden. Du musst nur Texte und Bilder austauschen und am Rest möglichst wenig ändern. Dann sieht dein Store anfangs zwar vielen anderen Shops extrem ähnlich, aber das muss nicht unbedingt schlecht sein. Denn da wären:
Die großen Pfuis: No-Gos bei UX- und UI-Design
Natürlich ist es dein Store und du darfst dort treiben, was du möchtest. Allerdings gibt es fünf problematische Punkte, über die wir bei UX und UI immer wieder stolpern und wegen der wir uns schon oft den Mund fusselig reden mussten.
Möchtest du wirklich gute UX und UI, dann bestehe bitte niemals auf:
#1 Es anders zu machen, nur, damit es anders ist
Menschen stehen Neuem oft skeptisch gegenüber. Damit es angenommen wird, muss es nicht nur besser sein als das Alte, sondern am besten auch selbsterklärend. Das Clickwheel am iPod etwa war genial und konnte nur durch Touchscreens abgelöst werden, weil die sich noch einfach bedienen ließen.
Versuche also nicht, in deinem Store irgendwas anders zu machen, nur um dich von der Masse abzuheben. Onlineshops existieren mittlerweile schon so lange, dass viele Menschen sie intuitiv bedienen. Die Suchleiste etwa hat oben zu sein und nicht unten! Auf einen Crashkurs zu deinem cleveren, neuen Seitendesign hat beim Shopping niemand Lust.
#2 Riesige Logos platzieren
Eine weitere Unsitte sind Stores, in denen Besucher:innen zunächst seitenlang an einem Logo vorbeiscrollen müssen, bis sie das erste Produkt zu Gesicht bekommen. Da mag die Marke noch so bekannt und wichtig sein, der Spaß am Shopping vergeht den Menschen dabei trotzdem.
Ganz besonders dann, wenn sie deinen Store über ein Mobilgerät ansteuern, denn auf dem kleinen Display nervt das Riesenlogo gleich doppelt und dreifach. Immer noch nicht überzeugt? Im stationären Handel präsentieren selbst die teuersten Marken Waren im Schaufenster und pappen nicht einfach ihr Logo an die Scheibe.
#3 Erklärbärtexte
Was ist das Ergebnis, wenn du den Content deiner PDPs eigenhändig produzierst? Meist die gefürchtete Wall-of-Text, die sowieso niemand liest. Natürlich kennst du deine Produkte selbst am besten, aber genau deshalb läufst du immer Gefahr, zu viel oder zu wenig zu erzählen, unwichtige Details zu erklären und das wirklich Wichtige aus den Augen zu verlieren.
Also: Nicht zu viel Text auf die Seiten ballern und ein wenig der Intelligenz der Kund:innen vertrauen. Die wissen schon, was eine Soundbar ist, sonst würden sie nicht danach suchen. Arbeite lieber mit Icons, Ziehharmonika-Texten und vor allem mit professionellen Texter:innen.
#4 Content aus allen möglichen Quellen auf die Seite stopfen
Du hast ein Video, in dem du zeigst, wie sich in der Antihaftpfanne die besten Steaks braten lassen? Prima, aber das gehört auf YouTube und nicht auf deine PDPs. Niemand möchte sich einen Fünf-Minuten-Clip zu einem einzigen Topic anschauen, wenn er nach Kochgeschirr sucht.
Hier punktest du viel eher mit einer Montage, die die USPs deines Produkts in ein paar Sekunden zusammenfasst. Deshalb gilt: Stopfe deinen Content nicht zwanghaft in deinen Store, auch wenn die Produktion noch so teuer war.
#5 Am falschen Ort zu viel erzählen
„Herzlich willkommen bei Socken-Hans. Schon unser Urgroßvater Aloys stellte 1873 in seiner Schneiderei in Bad Salzuflen Wollsocken her, für die er ausschließlich Wolle von Schafen verwendete, die glücklich und zufrieden auf der nahegelegenen Wiese von Bauer Schulte-Schlusemann grasen durften …“
Das. Interessiert. Niemanden. Zumindest dann nicht, wenn es direkt auf deiner Startseite steht. Die Menschen wollen Socken kaufen! Natürlich haben die Unternehmensgeschichte, dein Engagement für die Umwelt oder die Vorstellung deines Teams ihren Platz und ihre Berechtigung.
Aber bitte immer auf Unterseiten und nicht in vollem Umfang im Eingangsbereich. Dort reichen ein paar knappe Hinweise. Die USPs deines Unternehmens sind Umweltbewusstsein und Tradition? Dann stelle diese Eigenschaften mit einem Icon und einem kurzen Text dar, der mit dem berühmten „Erfahre mehr“ endet.
Als schönes Beispiel haben wir für dich den Store von Colorful Standard herausgesucht. Dort bemüht man sich sehr um eine nachhaltige Produktion und hat dem Thema eine eigene Kategorie gegönnt. Unaufdringlich, aber nicht versteckt; inklusive verschiedener Unterseiten und einem eigenen Icon.
Was geht morgen ab? Aktuelle UI- und UX-Trends
Also: Bitte nicht auf der zugekleisterten Hero Area bestehen, der gestengesteuerten Suchfunktion oder dem Spielfilm auf der Produktseite. Worüber du mit deinen Designer:innen auf jeden Fall reden kannst, zeigen wir dir zum Ende dieses Beitrages. Olga verrät uns nämlich die drei großen UX-Trends:
#1 Shop the Feeling
Wir haben ja bereits erwähnt, dass Verkäufe immer emotionsgesteuert sind und genau diesen Umstand sollten Shops sich noch stärker zunutze machen. Zum Beispiel, indem sie ihre Produkte nicht nur öde vor einem weißen Hintergrund präsentieren, sondern in Szenen aus dem wirklich wahren Leben.
In manchen Branchen – zum Beispiel bei Mode – ist diese Technik längst üblich. Kleidung wird immer auch getragen abgebildet (es sei denn, der Shop ist Murks): Der Schlafanzug beim Kuscheln im Bett, das Sommerkleid im Café am Strand. Andernorts kommt die Erkenntnis, dass Emotion zieht, gerade erst an.
Ergo: Ruhig ein wenig Mut bei den Produktbildern beweisen. Der Staubsaugerroboter düst durchs Wohnzimmer, während die Familie entspannt am Tisch sitzt. Das Kaninchen macht sich glücklich in der Nagetierhängematte breit. Der Werkzeugkoffer steht funkelnd auf der Werkbank im Hobbykeller.
Produktbilder sind dabei natürlich nur ein Beispiel, denn inzwischen sollte klar sein, dass UX und UI immer ein Gesamtkunstwerk bilden. Auch deine Schriftart kann technisches Know-how widerspiegeln, eine durchdachte Menüführung mit dem Design deiner Produkte Hand in Hand gehen und der minimalistische Auftritt als Statement dienen. Denke immer Richtung Innovation und komm weg vom Elektronikkaufhaus. Wenn du Livebilder davon haben möchtest, wie eine gelungene Umsetzung aussehen kann, dann schau doch mal bei Sonos vorbei. Für deren Store scheint ein anderes Team verantwortlich zu sein als für die App …
#2 Community
Wer ein Produkt kauft, möchte sich oft auch einer Gruppe zugehörig fühlen. Das erste Paar Wanderschuhe geht schneller über den Ladentisch, wenn eine erfahrene Trackerin dem Anfänger zum Kauf rät. Der Plattenspieler verkauft sich besser, wenn phonophile Menschen von seinem Sound schwärmen.
Deshalb heißt es, Synergien zu nutzen: Etwa indem du nicht einfach nur Kund:innenbewertungen auf den PDPs anzeigst, sondern zum Beispiel auch Social Media einbindest. Die Menschen posten begeistert Fotos auf Instagram in deiner Designerkleidung? Dann binde sie in einer eigenen Galerie auf den Produktseiten mit ein! Frag nur vorher um Erlaubnis.
Im selben Atemzug kannst du das Community-Feuer natürlich noch weiter anfachen. Erstelle eine eigene Sektion für Insta-Fotos und Co. in deinem Shop. Wer sein Bild dort veröffentlicht sehen möchte, postet es einfach mit deinem Hashtag. Community läuft immer in zwei Richtungen.
Nike (die Schuhmarke, nicht die Göttin) hat genau damit wahnsinnigen Erfolg auf Instagram. Die Hashtags #nikeshoes und #nikeairmax liefern über 10 Millionen Treffer.
#3 Noch mehr Punkte sammeln
Bonusprogramme ziehen immer. Das Stempelkärtchen im Bubble Tea Shop, die Punkte an der Supermarktkasse oder das Gesundheitsprogramm bei der Krankenkasse. Klar, dass auch viele Onlineshops das Konzept bereits für sich entdeckt haben, allerdings ist noch Luft nach oben.
Warum Punkte nicht nur für einen Einkauf vergeben, sondern einfach für einen Besuch im Shop? Denn wer schon einmal da ist, nimmt eher was mit als jemand, der gar nicht vorbeischaut. Jemand hat ein Reel davon gepostet, wie sein Kater auf deine Katzenminze steil geht? Hier sind ein paar Punkte für den Stubentiger. Punkte machen glücklich, sorgen für wiederkehrende Kundschaft und sogar für Weiterempfehlungen. Nutze sie!
Wenn du das Kundenkonto dann noch um Services wie eine Bestellhistorie, Abomanagement oder Wunschzettel erweiterst, wird die Sache richtig rund. Denn wer möchte schon gerne händisch immer wieder den gleichen Verbrauchsartikel bei dir ordern oder Screenshots von seinem Traumkleid machen müssen?
Wie das in einer Modeboutique aussehen kann, demonstriert etwa der Shop von Maison 123.
Ein ganz anderes Marktsegment bedient AniForte – aber auch für Tiernahrung gilt: Service via Kundenkonto zieht.
UX und UI einfach machen
Noch Fragen? Wahrscheinlich. Denn UX- und UI-Design sind ein so weites Feld, dass wir nur ein wenig an der Oberfläche kratzen konnten.
Deshalb geh doch einfach direkt ins Gespräch mit uns und unseren Designer:innen. Wir sorgen für den gelungenen Relaunch deines Shops inklusive allem, was zu einer guten UX und einer ansprechenden UI gehört. Erzähle uns einfach, was dir vorschwebt.
Ebenso sind wir für dich da, wenn du von deinem Shopsystem mit Grusel-UI und träger UX aus dem letzten Jahrtausend zu Shopify migrieren möchtest. Du musst nur kurz über das Kontaktformular messagen und wir melden uns bei dir, um einen Termin für ein unverbindliches Erstgespräch zu vereinbaren.
Wenn du dann den Compasso d'Oro für deinen Shop gewinnst, bitten wir nur darum, dass wir auch mit aufs Siegerfoto dürfen. Wir werden auch darauf achten, dass wir uns dabei passend zu deiner Markenidentität anziehen. Versprochen!
Cover Bild: David Travis, weitere Bilder: Eshop Guide, Sarah Kilian
