Tech und UXD zusammen denken und gestalten: UX- und Webdesign im Tech-telmechtel [Interview]

Tech-telmechtel is back. Die Pause war lang, das Comeback ist dafür umso gewaltiger. Denn wir feiern nicht nur zehntes Jubiläum, sondern bringen euch heute auch den ersten Tech-telmechtel Dreier im Double-Feature auf die Displays. Nochmal langsam: 10. Interview. 2 Experten. 2 Teile. Heute Teil 1.

Was euch erwartet? 1A Know-how, ehrliche Antworten und zahlreiche Learnings aus der UX- und Webdesign Praxis von unseren jungen Seniors Josephine Gutschner und Carsten Behr. Fortan Josi und CC genannt. Conversion Carsten 😉 und Josi haben in zahlreichen Projekten namenhafte Kunden auf ihrem Weg zu einer optimalen User Experience begleitet. Darunter zum Beispiel: myAgrar.de, PERI, Bader, Porsche, Precitool, Netto und TROX.

Wir starten den ersten Teil des Double Features mit Design- und Usability-Anforderungen (auf beiden Seiten: Nutzer und Designer), wir blicken auf die Verschmelzung von DEV und UXD für gute User Experiences und erfolgreichen E-Commerce. Im zweiten Teil des Tech-telmechtels geht es dann um aktuelle Webdesign-Trends, für wen sie sich eignen, aber auch: für wen nicht. Bis es soweit ist, wartet eine neue Artikelreihe auf euch. Ja, ne Menge los heute und in den nächsten Wochen.

Tech und UXD impersonalised: Carsten Behr und Josephine Gutschner im Interview

Josi und Carsten, erzählt doch mal, was macht ihr?
CC:
Mein Fokus liegt auf Konzeption, Prototyping und Conversion-Optimierung. Ganz nebenbei bin ich noch Frontendentwickler für Magento bei unserem Kunden Mövenpick Wein.

Josi:
Ich bin für das Visuelle zuständig. Ich kümmere mich in der Bestands- und Anforderungsaufnahme um die Konzeption und Spezifikation sowie im Anschluss um die Umsetzung des Designs.

Start und Konzeptionsphase inklusive Wireframing-Erstellung machen Carsten und ich bzw. unsere Kolleg:innen aus der UX- und Usability Delivery gemeinsam. Im Designprozess biegt Carsten dann kurz ab und setzt sich auf die Bank, bis er den Staffelstab ab Livegang zurückbekommt.

Tech und UXD Hand in Hand: Wireframing quick and dirty

Ihr habt eben Wireframing erwähnt. Was kann ich mir darunter vorstellen?
CC:
Übersetzt sind Wireframes Gitternetzmodelle. Wir benutzen dieses Grundgerüst zur extrem groben Strukturierung einer Seite. Zum Beispiel: Slider oben, dann Teaser-Elemente, Produkte, SEO-Text und Footer.

Da geht es erst einmal nur um die Verortung von Inhalten. Wir gehen also vom Groben ins Detail. Die Shopsystemauswahl gibt da häufig auch schon bestimmte Richtlinien vor.
Apropos Richtlinien. Worauf müsst ihr noch achten? Beim Wireframing, wie auch darüber hinaus?

CC:
Da sind drei entscheidende Dinge relevant:
1. Die Nutzerbedürfnisse
2. Die Business Bedürfnisse
3. Die technischen Restriktionen

Stell dir die drei Sachen in drei Kreisen vor, die ineinander übergehen.

Wir als UX Designer müssen den Shop oder die Webseite gestalten, die sich genau in dem Sweet Spot – also der Schnittmenge dieser drei Faktoren befindet.

Josi:
Man muss auch die Fallstricke kennen, die bestimmte Systeme mit sich bringen. Wenn ein Kunde sagt: Wir hätten es gern standardnah, da musst du schon wissen, was das überhaupt bedeutet.

Tech und UXD: Wissen teilen, ist Macht und sorgt für gute User Experience

Heißt, ihr seid neben UX Designern auch Shopsystem Experten?
Josi:
Experten haben wir dafür hier auf jeden Fall. Wir haben das Glück, dass Wissen bei uns geteilt wird und wir uns im intensiven Austausch mit unseren Devs und auf Übersichtsseiten das Systemwissen aneignen können, das für uns relevant ist.

Habt ihr Beispiele für die erwähnten Fallstricke?
CC:
Check-outs sind da ein gutes Beispiel. Bei einigen Shopsystemen hat man da nicht allzu viel Spielraum. Will der Kunde beispielsweise vier Steps, um es wiederum seinen Kunden einfach zu machen, stößt man bei festgezurrten Check-outs, die nur ein großer Step sind, an Grenzen.

Man kann den Prozess umgestalten, um die vier gewünschten Steps visuell abzubilden, aber rein technisch würde das Aufwände verursachen, die gar nicht abgesprochen sind.

Josi:
Das ist übrigens auch aus Usability-Sicht nicht immer das Beste. Umso wichtiger ist es, die Wünsche der Kunden ehrlich zu beantworten. Würde in dem Fall heißen:
Wenn du standardnah bleiben willst, leidet die Usability gegebenenfalls darunter.

Tech und UXD: B2B vs. B2C

Könnt ihr noch näher auf Wireframes im B2B eingehen?
CC:
Sehr plakativ gesprochen, sind B2B Wireframes hauptsächlich produktdatengetrieben. Es geht weniger um Bilder, Emotionen und die Konsumentenpsychologie, sondern mehr darum, Verkaufsinformationen und Produktdaten übersichtlich darzustellen.

Das muss effizient sein, das muss schnell gehen. Nutzer, die sich auf B2B-Plattformen bewegen, sind B2C-Plattform-Nutzer. Wenn ein Produkt minderwertig dargestellt wird, dann bleibt das negativ im Kopf der Nutzer hängen.

Die Entwicklung der letzten fünf Jahre zeigt ja dennoch, dass Bilder und Emotionen auch im B2B eine immer größere Rolle spielen. Wie seht ihr das?
Josi:
Es ist ein Mix aus beidem. Natürlich rutscht Content-Commerce immer mehr in B2B rein. Im B2B müssen Informationen trotzdem schneller dargeboten werden. Man lässt quasi den ganzen Chichi weg und stellt informationsgetrieben dar.

CC:
B2B ist bei mir im Kopf ein gepimpter B2C-Shop. Du hast alle Funktionen, die auch ein B2C-Shop bietet aber eben noch mehr. Du hast zum Beispiel Warenkorbverwaltung und Mitarbeiterverwaltung. Alles ist einfach sehr service-getrieben. Alles wiederum im gleichen Rahmen darzustellen, ist die Herausforderung.

Josi:
Man muss zweierlei kombinieren: Wie hol ich den Nutzer (emotional) ab, geb ihm aber gleichzeitig auch schnell die Infos, die er braucht.

Tech und UX: Optimierung dank Audits

Wie überprüft ihr die Web- oder Shopseiten, wenn Kunden mit dem Wunsch nach einer UX-Optimierung an euch herantreten?
CC:
Wir führen UX- und Design-Audits durch. Ein Experte schaut sich die Seite an und prüft sie auf gängige Konventionen und gute Usability.

Wir haben da eine riesige Liste an Heuristiken. Das kannst du dir wie Checklisten vorstellen.

Josi:
Teilweise sind da auch ganz banale Sachen dabei: Ob zum Beispiel das Logo im Header ist und ob dieses mit der Startseite verlinkt ist. Denn auch wenn es vermeintlich banal ist, das wird vom Nutzer so erwartet.

Habt ihr hier noch mehr Beispiele, die auf dieser Checkliste stehen?
Josi:
Ja, zum Beispiel die Einhaltung der CI Farben, oder aber Einheitlichkeit, was Buttonfarben angeht. Oder:
– Sind Headlines richtig dargestellt?
– Passen die Abstände des Textes zwischen den Headlines?

CC:
Da geht es um das große Thema: Gesamteindruck. Beim UX-Audit schauen wir daher:
– Was steht hinter eurer Marke?
– Wo tritt eure Marke noch auf? Habt ihr Flyer, Kataloge, Display-Werbung, TV-Werbung? Und bietet all das eine einheitliche User Experience?
– Spiegelt euer Webauftritt euren Charakter/ euer Markenimage überhaupt wider?

Tech und UX: Heuristiken und Dialogprinzipien

Wo kommen die Heuristiken denn her? Wer legt fest, was Standard ist?
CC:
Heuristiken sind Kombinationen aus Best Practices der allgemeinen Wettbewerberanalyse aus der Branche direkt mit verschiedenen Normen und Prinzipien, die beispielsweise aus der ISO-Norm kommen.

Darin sind zum Beispiel sieben Dialogprinzipien enthalten, die Vorgaben liefern, wie ein System mit einem Nutzer kommunizieren sollte. Die Heuristiken fußen auf diesen ISO-Normen. Das ist alles stark e-Commerce-geprägt.

Josi:
Ein Beispiel ist die Erwartungskonformität, wie wir es zu Beginn auch schon mit dem Logo oben links hatten, das klickbar sein muss und zurück auf die Startseite verlinkt.
Dann gibt es auch noch Gestaltgesetze – die haben sich über die Jahrzehnte entwickelt. Wie zum Beispiel das Gesetz der Nähe. Also sorgen Abstände zwischen Headline und Fließtext für eine Einheit oder wird über die Darstellung etwas abgeschlossen.

Vielen Dank, ihr Zwei. Das soll es für heute gewesen sein.
CC:
Josi:
Gern, hat Spaß gemacht.

Tech und UX im Fokus: Neue Handelskraft Serie

Mehr zu ISO-Normen, Dialog- und Gestaltprinzipien und wie diese helfen, Nutzererlebnisse zu verbessern, bekommt ihr im nächsten Teil unserer großen UXD-Reihe. Warum nicht nur ein UX-Audit der beste Beweis für die Kraft des Testens ist, erfahrt ihr zudem im aktuellen Whitepaper »A/B-Testing« Methoden und Tools zur Performance- und Usability-Optimierung.

Die Besten testen. Das ist Fakt. Denn, wer testet, investiert in die Verbesserung der Nutzererlebnisse. Und damit in den Ausbau seiner Kundenbeziehungen, kurzum: in seinen Erfolg.