BN RA BRA DN ED ED BTR R B A R N A N E D E BIBRNB A D N E D D E D R A N D E D RA A N D E IBN N T R ER IIC TO N T R E RIN IC TIN TN R E ITAE TETRE R IAN TEN R NI O S NS TIO O TN NSNSN AACAC ICO N CO TIN IS O SS CTATA ITAC SIO BRANDED INTERACTIONS
SG P IEERS & K A T J A W E N M A R C O S P I E S & K AMT A J AR C WOE N
Lebendige Lebendige Markenerlebniss Markenerlebnisse für eine neue Zeit eine neue Zeit
Das Das Standardwerk Standardwerk zur Markenführung zur Markenführung in der digitalen in der digitalen Transformation Transformation
M A R C O S P I E S & K ATJ A W E N G E R
BRANDED INTERACTIONS Lebendige Markenerlebnisse für eine neue Zeit
Dass man etwas schön findet, mag sich ändern, aber was gut funktioniert, funktioniert eben. RAY EAMES
Nimm deine Vergnügungen ernst! CHARLES EAMES
BRANDED INTERACTIONS – DRITTE, ÜBERARBEITETE AUFLAGE
Wichtiger als die konsistente Umsetzung eines Gestal tungsprinzips über alle Medien und in allen Märkten ist die kohärente Übertragung auf die relevanten Kontakt punkte und für die jeweiligen Bezugsgruppen.
Die Welt wird komplexer. Jahrzehnte alte Gewissheiten lösen sich auf. Gesellschaftliche Machtgefüge ändern sich:
Wir haben mit think moto und mit unseren beiden
die Spielregeln der Politik, die Gesetzmäßigkeiten der
Startups, flyiin und Whooosh, vieles selbst ausprobieren
Märkte, das Konsumverhalten der Kunden, Arbeits- und
müssen. Nicht alle Experimente (wir verstehen sie als
Verfahrensweisen. Unternehmen müssen darauf reagieren
Prototypen) waren von Erfolg gekrönt. Und nicht immer
– der Innovationsdruck wächst. Digitale Transformation
ist der neue auch wirklich der bessere Weg. Aber alles
ist das Heilsversprechen. Die Rezepte: Design-Thinking,
in allem arbeiten wir heute – in der Produktentwicklung
Agilität, Lean Management und New Work. Was aber
wie in der strategischen Markenführung – fokussierter,
verbirgt sich dahinter? Was davon ist für Gestalter und
iterativer und vor allem teamorientierter als früher. In die
Produktentwickler relevant? Wie lassen sich die Prinzi
vorliegende dritte, inhaltlich intensiv überarbeitete
pien der Agilität auf die Markenführung übertragen? Die
Auflage von Branded Interactions ist dieses Praxiswissen
jeweils relevanten Methoden, Modelle und Prozesse
eingeflossen.
sinnvoll in den eigenen Design-Workflow zu integrieren, das bleibt die große Herausforderung für jeden Projekt
Branded Interaction Design geht weit über die visuelle
verantwortlichen.
Gestaltung digitaler Markenanwendungen hinaus. Digitale Touchpoints werden zahlreicher und vielfältiger
Branded Interactions – Digitale Markenerlebnisse planen
in ihren Anforderungen an die Gestaltung. Es gibt nicht
und gestalten hat in den vergangen Jahren viele Designer,
mehr die Website im Unternehmen. Neben der Corporate
Produktmanager und Berater in Agenturen und Unter
Website zur Unternehmensdarstellung gibt es Websites
nehmen als Leitfaden für digitale Markenprojekte beglei
und Apps für Marketing und Kommunikation, den Ver
tet – und damit einen Transformationsprozess mitgestal
trieb, den Kundenservice. Häufig sind digitale Anwen
tet, der die Marken- aber auch die Agenturlandschaft
dungen eigenständige Produkte im Angebots-Portfolio
nachhaltig verändert hat. Etablierte Marken orientieren
eines Unternehmens. Die Hälfte dieser Anwendungen
sich bei der Markenführung an jungen Startups, nicht
wird heute auf dem Smartphone genutzt. Google schaut
ohne in die ein oder andere Falle zu tappen. Klassische
beim Erstellen seines Suchindexes zunächst nach mobilen
Werbe- und Designagenturen wissen längst, dass digitale
Seiten. Responsive Webdesign ist mittlerweile eine
Anwendungen auch für ihre Arbeit zentral sind und
Selbstverständlichkeit. Klassische, auf statischen Rastern
trotzdem fällt es ihnen schwer, innerhalb bestehender
basierte Layoutprinzipien sind damit obsolet. Virtual
Agenturmodelle neu zu denken. Denn wichtiger als die
Reality und Augmented Reality stellen völlig neue Anfor
Proklamation von Botschaften ist die Produktion von
derungen an die Interaktion mit Gesten. Die Fortschritte
Bedeutung für den Kunden in der Interaktion mit ihm.
auf den Forschungsfeldern der künstlichen Intelligenz
5
BRANDED INTERACTIONS
lassen Conversational Interfaces und Chatbots zu
dahin ist oft sehr mühsam und in unzähligen Diskussio
relevanten Markenschnittstellen werden. Interaktive
nen und Feedbackrunden mit den unterschiedlichen
Touchpoints befinden sich auch im realen Raum:
Stakeholdern geht vieles von der ursprünglichen Idee
ob als Installation am Messestand oder als interaktives
verloren. Solche Diskussionen sind manchmal unab
Billboard an der U-Bahn-Station. Und mit dem Internet
dingbar und im besten Fall auch zielführend – nämlich
der Dinge bekommen Gegenstände ein Verhalten, das
dann, wenn Kunde und Stakeholder aus ihrem Kom
aktiv gestaltet werden muss. Das Ziel von Branded
petenzfeld heraus argumentieren. Sobald jedoch persönli
Interaction Design (im Folgenden als BIxD abgekürzt) ist
cher Geschmack ins Spiel kommt, sollten lange Diskussi
es, ein gleichwertiges Markenerlebnis über die unter
onen vermieden werden. Wer aber User Experience
schiedlichen Markenkontaktpunkte (TOUCHPOINTS
und visuelle Gestaltung konsequent aus den strategischen
S. 110) zu schaffen.
Anforderungen ableitet und den Kunden von diesem Vorgehen zu überzeugen weiß, wird eine objektiv nach
Marken sind lebendige, sich ständig verändernde Wesen.
vollziehbare Argumentationskette vorweisen können, so
Flexible identitätsstiftende Gestaltungssysteme ersetzen
dass sich viele Diskussionen erübrigen.
das klassische Logo-zentrische Corporate Design. Das Spektrum der zu gestaltenden Markensignaturen ist breit
Das vorliegende Buch ist Anleitung, Hilfe und Inspiration
gefächert: Logo, Typografie, Seitenraster, Bildwelt und
für all jene, die mit der Gestaltung von interaktiven
Texttonalität, Klang und Bewegung, Navigation, Interak
Anwendungen für Marken befasst sind. Es richtet sich
tion, Architektur. Aber auch und vor allem die Art und
sowohl an Einsteiger als auch an Profis. Es kann genauso
Weise, in der ein Unternehmen seine Prozesse und
vom freiberuflichen Einzelkämpfer, der für kleinere
Interaktionen mit dem Kunden gestaltet ist markenprä
regionale Unternehmen oder für ein Startup arbeitet,
gend. Am Ende zählt die Summe der Interaktionen mit
genutzt werden, wie von UX / UI Designern, die in
einer Marke. Diese sinnvoll zu orchestrieren erfordert
großen Unternehmen oder Agenturen an internationalen
eine komplexe, multidisziplinäre Vorgehensweise, welche
Markenauftritten arbeiten.
die Bedürfnisse und das Verhalten der Nutzer in den Mittelpunkt rückt.
Das Buch ist relevant für alle, die digitale Marken, Produkte und Services entwickeln:
FÜR WEN IST DIESES BUCH?
—— User Experience und User Interface Designer —— Konzepter und Informationsarchitekten —— Interaction Designer
Agenturen, aber auch Inhouse-Design-Teams in Unter
—— Produkt- und Service-Designer
nehmen kennen die Situation: Sie haben tolle Ideen
—— Corporate Designer
und sind gut in der Umsetzung. Sie gewinnen Awards und
—— Informationsdesigner und Generative Gestalter
entwickeln nutzerfreundliche Lösungen. Aber der Weg
—— Motion- und Sound-Designer
6
INTRO
Darüber hinaus gibt das Buch allen, die über die Gestal
CHECKBOXEN
tung hinaus mit Branded Interaction Design (BIxD)- Projekten zu tun haben, hilfreiche Anleitung für Projekt
Zur besseren Übersicht haben wir an manchen Stellen wieder in rot Checkboxen eingebaut.
planung und Methodenwahl: —— Markenberater und Strategische Planer
Dieses Zeichen
—— Brand- und Marketing-Manager
signalisiert eine wichtige
Zusatzinformation.
—— Projektmanager und Agile Coaches —— Produktmanager in Startups und Unternehmen
Checkboxen mit diesem Zeichen sind Listen
—— Gründer und Entrepreneure
zum Abhaken.
—— Web- und App-Entwickler —— Creative Coder
ZUM AUFBAU DES BUCHES
SETUP Bevor wir mit der Konzeption und Gestaltung beginnen,
Das Buch stellt den BIxD-Prozess mit seinen fünf Phasen
muss das Projekt erst richtig »aufgesetzt« werden. Des
Schritt für Schritt vor:
halb thematisiert das Kapitel SETUP (
S. 24 FF) , was
ein gutes Briefing beinhalten sollte, wie die ideale
1 DISCOVER
2 DEFINE
3 DESIGN
4 DELIVER
5 DISTRIBUTE
Teamkonstellation aussieht, was bei der Planung von Zeit und Budget zu beachten ist und was man über die technischen Rahmenbedingungen eines Projektes wissen sollte.
PROZESS
Die jeweils relevanten Methoden und ihre Einbettung in den Gesamtprozess werden praxisnah beschrieben und mit
Hier beschreiben wir den PROZESS (
zahlreichen Beispielen illustriert. Sie können das Buch vom
erläutern den Unterschied zwischen »Wasserfallmodell«
Anfang bis zum Ende durcharbeiten – müssen es aber
und agiler Projektentwicklung mittels Design-Sprints,
nicht. Die einzelnen Unterkapitel bieten Ihnen praktische
erklären die einzelnen Prozessschritte und die Rollen der
Anleitung und Illustration für spezifische Problemstellun
Prozessbeteiligten.
gen im Alltag und machen das Buch zum praktischen Nachschlagewerk. Sämtliche Kapitel enthalten zahlreiche Methodenbeispiele.
7
S. 42 FF) . Wir
BRANDED INTERACTIONS
DISCOVER Im Kapitel DISCOVER (
DELIVER S. 58 FF) stellen wir
Untersuchungsmethoden vor, die dem Design-Team
Wie Sie Materialien und Templates produzieren und in Form von Styleguides dokumentieren, wird im Kapitel
helfen, Business, Marke und Nutzer zu verstehen. Dazu
DELIVER (
gehören verschiedene Auditing-Verfahren ebenso wie
zeigen wir, wie mithilfe von User Experience Guidelines
die Arbeit mit Personas und Szenarien. Eine Zielmatrix
dynamische Markensignaturen wie bewegte und inter
hilft, die gefundenen Insights abzugleichen und zu
aktive Elemente bereitgestellt werden. Zum erfolgreichen
gewichten.
Abschluss eines BIxD-Projektes gehört aber auch die
S. 276 FF) beschrieben. Darüber hinaus
Qualitätsbeurteilung nach dem Launch.
DEFINE Das Kapitel DEFINE (
DISTRIBUTE S. 106 FF) beschreibt, wie aus
Zielen Maßnahmen werden, wie man mithilfe einer User
Am Ende des BIxD-Prozesses steht die Bereitstellung
Journey die wichtigsten Markenkontaktpunkte identifi
des Designs für die Anwendungen in der Praxis, seine
ziert und welche strategischen Modelle zur Positionie
Implementierung und gegebenenfalls der Rollout in ver
rung einer Marke Designer kennen und nutzen sollten,
schiedenen Anwendungen oder Märkten. Dabei spielen
bevor sie mit der Ideenentwicklung beginnen.
die Vermittlung der Gestaltungsidee und die Schulung von Mitarbeitern und Dienstleistern eine wichtige Rolle,
DESIGN
wie das Kapitel DISTRIBUTE (
S. 306 FF) zeigt. Da
BIxD-Projekte nie beendet sind, geht es außerdem um die Die Entwicklung von Ideen, Konzept und Gestaltung
kontinuierliche Produktweiterentwicklung mit agilen
steht im Fokus des DESIGN -Kapitels (
Methoden, aber auch darum, wie Branded Interactions
S. 168 FF) .
Die Design-Phase steht im Zentrum des Prozesses. Wir
einen kulturellen Wandel im Unternehmen voranbringen
zeigen, wie man in Design-Sprints Ideen generiert,
können.
prototypisch umsetzt, testet und bewertet, wie man Inhalte strukturiert und das Look & Feel sowie das
Marco Spies und Katja Wenger
Designvokabular für BIxD-Projekte definiert.
Berlin, im Sommer 2018
8
INTRO
VORWORT DER VERLEGER
profunde Erfahrung, die Katja Wenger und Marco Spies auch über ihre Agentur hinaus mit ihren Startup-Beteili gungen gemacht haben, floss in den Text ein und machte
In mehreren Auflagen und Sprachen hat sich Branded
ihn von Lektoratsrunde zu Lektoratsrunde besser und
Interactions als internationales Standardwerk zur Mar
besser.
kenführung in der digitalen Transformation etabliert. Während der Erfolgsgeschichte des Titels ist die Welt der
Am Schluss hatte ein kritisch lektorierendes Verlegerpaar
digitalen Markenführung vielfältiger, komplexer und noch
Herzklopfen vor Vorfreude und Glück über dieses Buch.
agiler geworden. Ursprünglich als überarbeitete Neuauf
Deshalb möchten wir hier öffentlich wiederholen, was
lage geplant, wurde das vorliegende Buch zu einem hoch
unter dem letzten Text stand, der in der Entstehungs
wirksamen, massiv praxiserprobten Werkzeugkasten
phase dieses Buches zurück nach Berlin ging: »Sprachlos,
zur Gestaltung von digitalen Markenerlebnissen für eine
beeindruckt und stolz, Eure Verleger zu sein, applaudie
neue Zeit.
ren wir und grüßen von Herzen, Karin und Bertram«.
Katja Wenger und Marco Spies öffnen dabei die Türen
Danke an dieser Stelle an Marco und Katja für ein neues
ihrer Agentur think moto weit über den berühmten
Buch auf solidem Fundament seiner Vorgänger. Danke
Blick durchs Schlüsselloch hinaus. Sie geben Erfahrung
an Katrin Schacke für die einfühlsame neue und doch ver
weiter, deren Wert den Ladenpreis dieses Buches weit
traute Gestaltung. Danke an unsere Lizenzpartner, die
übersteigt. Und sie geben Ihnen das Rüstzeug für
Branded Interactions in die Welt trugen – be assured, this
ein neues Designverständnis – und eine neue Rolle.
one is even better!
Denn Design macht Unternehmen – und deren Verände rung – sichtbar. Je schneller die Welt sich verändert,
In Zeiten von »always beta« ein Buch (!) über digitale
desto agiler müssen Unternehmen sich, ihre Produkte und
Markenführung zu machen, scheint auf den ersten Blick
Dienstleistungen und ihre Marken-Touchpoints anpas
anachronistisch. Auf den zweiten Blick zeigt sich genau
sen. Dabei rücken Designer, die Markenführung in digita
hier die Stärke eines sequentiellen, gut strukturierten,
len Zeiten verstehen, zu Beratern auf Unternehmensfüh
handlichen Mediums.
rungsebene auf. Und jetzt viel Freude beim Lesen, Erkennen, Entdecken, Um in dieser Liga mitspielen zu können, brauchen sie
Denken und Weiterdenken und viel Erfolg mit Ihren
neue Kompetenzen. Die vermittelt dieses Buch. Katja und
BIxD-Projekten!
Marco dachten, es ginge um ein paar Aktualisierungen, als wir sie um eine Überarbeitung des Erfolgstitels baten.
Herzlich
Stattdessen blieb kaum ein Stein auf dem anderen. Die
Karin und Bertram Schmidt-Friderichs
9
INTRO
5
I N H A LT
10
EINFÜHRUNG
16
S E T U P.
Das Projekt planen
1
24 26
DAS BRIEFING
—— Rahmenparameter im Briefing —— Rebriefing —— Offene Briefings
I N H A LT
2
29
DAS TEAM —— Größe und Zusammensetzung von Teams
—— Agile Teamkultur —— Rollen im BIxD-Kernteam —— Teamaufstellung als Taktiktafel 3
36
DIE PROJEKTPL ANUNG
—— 8 Schritte bei der Projektplanung 4
38
DIE TECHNIK
—— Austausch mit der Technikabteilung —— Techniker haben die Systemsicht – Designer haben die Nutzersicht —— Microservices und Lean & Agile Design PROZESS.
Rückgrat des Projekts
42
44
1 WORKFLOW-MODELLE
2 BRANDED-INTERACTION-
47
DESIGN-PROZESS
—— Die 5 Phasen des BIxD-Prozesses 3
AGILE, LEAN & CO.
—— Haltung, Werte und Prinzipien —— Gemeinsamkeiten von Agile und Lean —— Agilität bedeutet mehr Planungssicherheit – nicht weniger — — Mehrere Projekte gleichzeitig agil managen
10
53
1 D I S C O V E R R E S E A R C H & A N A LY S E
3
DEN NUTZER VERSTEHEN
82
—— User Insights —— Empathie
58
—— Mentale Modelle —— Zielgruppenanalyse und Segmentierung —— Zielgruppe ist nicht gleich Zielgruppe —— Personas —— Persona Moodboard
1
—— What’s in your bag? DAS GESCHÄFT VERSTEHEN
—— Personas vs. reale Nutzer
62
—— Stakeholder-Analyse
—— Jobs-to-be-done
—— Kick-off-Workshop
—— Job Stories und User Stories dokumentieren
—— Fokusgruppen
—— Use Cases und Nutzerszenarien
—— Workshop Facilitation Kit
—— A day in the life of …
—— Stakeholder-Interviews
—— Shadowing
—— Questionnaire
—— Cultural Probes und Nutzertagebücher
—— Umfragen
—— Personas und Szenarien im weiteren Prozess
—— Der Elevator Pitch als Rollenspiel
—— User Research Kit – eine Einkaufsliste
—— Content- und Service-Audits
—— Card Sorting und Tree Testing —— Wettbewerbs-Audit und Benchmark-Analyse
4
—— Zielmatrix
—— Produktanalyse
—— Anforderungen dokumentieren
—— Risk / RewardSM: Nutzerverhalten in Produkt
—— User Stories …
kategorien
—— … und Job Stories
—— Data & Analytics
—— Epics
—— Vom »Was passiert?« zum
—— Fazit
»Warum passiert es?« —— Daten und Intuition —— Sekundär-Research zum Thema 2
DIE MARKE VERSTEHEN
ZIELE SETZEN
76
—— Markenpersönlichkeit —— Die Marke als Social-Media-Profil —— Markenarchetypen —— Markenarchitektur —— CD / CI evaluieren —— UI Inventory
11
101
3
2 DEFINE
DAS NUTZERERLEBNIS PLANEN
140
—— Konzeptmodell
STRATEGIE & SYNTHESE
—— Konzeptmodelle visualisieren
106
—— Die Joy-of-Use-Pyramide —— Das Zugangskonzept —— Site Maps und Content Maps —— User Task Flows
1
4
IDEEN GENERIEREN
150
—— Die kreative Leitidee
110
DIE KOMMUNIKATION PL ANEN
— — Touchpoints: die Kontaktpunkte einer Marke
— — Ideen für Produkte und Services
—— Der Customer Life Cycle
—— Kreativmethoden
—— Die Customer Journey
—— Brainstorming
—— Moments of Truth
—— Crowdsourcing
—— Micro-Moments
—— Co-Creation
—— Service-Systeme planen und gestalten
—— Weitere Methoden
—— Service Design Sketches
—— Ideen auswählen und interpretieren
—— Multiscreen-Erlebnisse
—— Ideen bewerten und vermitteln
—— Inhalte planen —— User-generated Content
5
—— Messbarkeit von Maßnahmen
Storytelling —— Geschäftsmodelle generieren
—— Produkt-Backlog
—— L EGO Serious Play
—— Story Mapping
—— Value Proposition
—— Sprint Backlog —— Creative Brief
2
MASSNAHMEN DEFINIEREN
—— Maßnahmenkatalog
—— Liquid Experiences und Transmedia-
129
DAS MARKENERLEBNIS PLANEN
—— Markenpositionierung —— think moto Brand BIOS ® – ein Modell für dynamische Markenführung —— Markenbedeutung: das Warum einer Marke —— Marke und Gesellschaft —— Positionierung im Marktumfeld
—— Markenpositionierung nach Lebenswelten —— Lebenswelten vs. Behaviour —— Verhaltensarchetypen —— Brand Filter als Richtlinien für die interaktive Gestaltung —— Das visuelle Markenleitbild in Form von Moodboards
12
160
3 D E S I G N
KO N Z E P T & G E S TA LT U N G
—— Von der Seite zum Atom: Atomic Design —— UX Design Pattern —— Gamification
168
—— Mikro-Interaktionen —— Digitale Anwendungen im medialen Verbund —— Die Oberfläche gestalten —— Der erste Entwurf —— Unterschiedliche Entwürfe —— Raster und Seitenaufbau
1
DESIGNAUFGABEN STRUKTURIEREN
—— Look & Feel
172
—— Komposition einer Seite
—— Design-Direction-Präsentation (DDP )
—— Typografie
—— Detailed-Design-Dokumentation (DDD )
—— Header, Logo, Navigation
—— Design präsentieren
—— Form follows function: Visuelle Kategorien
—— Agile Produktentwicklung in Design-Sprints
in grafischen Interfaces
—— Arbeiten in Design-Sprints
—— Interaktionselemente
—— Minimum Viable Product
—— Metaphern
—— Vom Minimum Viable Product zum Minimum
—— Simplicity
Lovable Product
—— Flat Design
—— Minimum Viable Brand
2 G R U N D L A G E N F Ü R
183
4
realen Raum
—— Vom GUI zum NUI
—— Eigenschaften raumbasierter Medien
—— Interaktion mit Touchscreens
—— Multisensorische Nutzererlebnisse erfordern
—— Freie Gesten
interdisziplinäre Teams
—— Hürden und Herausforderungen
—— Den Raum und den Ort verstehen
—— NUI : Natural UI oder No UI?
— — Interaktionsmuster ableiten
—— Maschinen lernen, Menschen zu verstehen
—— Storytelling im Raum
—— Der menschliche Körper als Interface
—— Von der Rauminszenierung zum Event
—— Zusammenspiel mehrerer Interfaces
—— Vier Formate für Markeninteraktionen im
—— Klassische Markensignaturen verändern sich —— Neue Markensignaturen
realen Raum
—— Marken brauchen Haltung – auch politisch!
5 V I R T U A L U N D A U G M E N T E D R E A L I T Y
— — Big Data für Branded Interactions
G E S TA LT E N
—— Algorithmen und Big Data als Marken
—— Das Reality-Virtuality-Continuum
signaturen
—— Augmented Reality gestalten
SCREEN-BASIERTE INTERAKTION
218
—— Die Infosphäre: unsere digitale Umwelt im
BRANDED INTERACTIONS
3
I N T E R A K T I O N I M R AU M G E S TA LT E N
—— Anwendungsbereiche für Mobile AR
196
—— Wearable AR-Anwendungen
G E S TA LT E N
—— Virtual Reality gestalten
—— Das Nutzererlebnis gestalten
—— Virtual-Reality-Anwendungen
—— Informationsarchitektur von bildschirm
—— Verträglichkeit von VR
basierten Anwendungen
—— Gestaltungsaspekte für Virtual Reality
—— Wireframes
im Überblick
—— Wireframes für Responsive Design —— Wireflows —— Storyboards
13
226
6
KO N V E R S AT I O N E N G E S TA LT E N
242
—— Chatbots: Text vs. Voice —— Conversational User Interfaces
4 D E L I V E R
DOKUMENTATION & PRODUKTION
—— Vorteile von C UIs aus Nutzersicht
276
—— Vorteile und Herausforderungen aus Markensicht —— Die Persönlichkeit eines Chatbots —— Wissen und Fähigkeiten von Chatbots —— Conversational User Interfaces benötigen
neue »Design«-Skills
1 B I x D - S Y S T E M E E N T W I C K E L N
—— 5 Schritte für die Gestaltung von marken
280
—— Anwendergruppen von Designsystemen
gerechten Konversationen
—— Vorgehen bei der Entwicklung
—— Design-Prinzipien
7 S M A R T T H I N G S G E S T A L T E N
257
—— Design Pattern
—— Was Smart Things auszeichnet
—— Besonderheiten digitaler Medien
— — Markenprodukte im Zeitalter des Internet
der Dinge
2
—— Der Brand Fit und die richtige Produkt
STYLEGUIDES ERSTELLEN
287
—— Wieviele Styleguides braucht eine Marke?
kategorie
—— Stylesheet-Vorgaben und Styleguide-Poster
—— Intimität zwischen Nutzer und Markenprodukt
—— Styleguides online bereitstellen
—— Smart Things und Mikro-Interaktionen
—— Inhalt und Aufbau eines Website-Styleguides
—— Die Marke verändert sich entlang der User
Journey
3
—— Herausforderungen für Marken
PAT TERN LIBRARIES ERSTELLEN
293
—— Pattern Libraries —— Interaction Guidelines
8 PROTOT YPING
264
—— Von der Pattern Library zum Living Styleguide
—— Mockups, Fakes und Paper Prototyping
—— Mehrere Marken – eine Experience
— — Interactive Prototyping für Websites und
Apps
4
—— Im Browser gestalten
DIE PRODUKTION BEGLEITEN
—— Prototyping für Chatbots
—— Qualitätssicherung
—— Prototyping für Virtual Reality
—— Inhalte einpflegen
—— Video Prototyping
—— Service-Experience-Prototyping
5 PROJEKT-L AUNCH
—— Physical Prototyping
—— Do-It-Yourself Prototyping
UND NACHBESPRECHUNG
—— Den Launch planen
—— Hackathons
—— Projektnachbesprechung
—— Retrospective durchführen
9 TESTING
—— Feiern gehört dazu
269
—— Akzeptanztest mit der Zielgruppe —— Usability Testing —— User-Experience Testing
297
—— Gap-Analyse und Modulliste
—— Fallstudie anlegen
—— Try it yourself —— 5 Whys —— A / B-Tests —— Fake Door Testing —— Demo-Day
14
301
5 D I S T R I B U T E
ROLLOUT & WEITERENTWICKLUNG
ANHANG 306
—— Leseempfehlungen —— Index —— Bildnachweis —— Dank —— Die Autoren —— Impressum
1 BIxD IMPLEMENTIEREN
310
—— BIxD vermitteln —— Warum statt Was —— Mitarbeiter schulen —— Formate für Trainings und Schulungen —— Brand-Engagement-Konzepte —— Storytelling, Produktfilme und Guided Tours —— Einen Rollout planen 2 BIxD BEREITSTELLEN UND STEUERN
320
—— Design am Projekt entwickeln —— Brand-Management-Portal oder Brand-Management-Ökosystem? —— Brand Book —— Brand Hub
3 BIxD WEITERENTWICKELN
323
—— Das Produkt agil weiterentwickeln —— Lean UX —— Die Marke agil weiterentwickeln —— Brand Review Meetings —— Setup für ein agiles Brand- und DesignManagement —— Testen, Messen, Optimieren —— Messbarkeit und KP Is für Markensignaturen —— Trends und Entwicklungen beobachten —— Design Fictions —— Anpassungen des Produkt- oder ServiceModells —— Die weitere Zusammenarbeit
4 B IxD U N D KU LT U R E L L E R WA N D E L
335
—— Designer als Agenten einer neuen Unter‑ nehmenskultur —— Vier neue Mindsets für Unternehmen —— Marken für Menschen
15
339
SETUP
TEAMAUFSTELLUNG ALS TAKTIKTAFEL
wieder komplexe Projekte mit ähnlich aufgestellten Teams in kürzester Zeit realisiert und mussten häufig feststellen, dass – ähnlich wie beim Fußballspiel – das gute Zusam menspiel der Teammitglieder wichtiger sein kann als die
Vor einigen Jahren haben wir mit einem Design-Team
Erfahrung eines jeden einzelnen Teammitglieds.
auf Agenturseite innerhalb von nur drei Monaten das Interactive Corporate Design eines führenden MobilfunkUnternehmens neu entwickelt. Das Design-Team bestand aus dem Creative Director, zwei Informationsarchitekten, einem Art Director und einem Screen Designer. Außer dem gab es einen Strategischen Planer, der die Stakehol der auf Agenturseite vertrat, und einen Projektmanager, der ausschließlich fürs Time- und Budgetmanagement verantwortlich war. Täglich um 18 Uhr wurden der Pro
A happy team makes a tough task look simple. Scrum-Prinzip
jektstand besprochen und die Aufgaben für den nächsten Tag definiert. Wir schlossen uns mit dem Design-Team in einen Extraraum ein. Es gab einen Teamplan, der an der Wand hing und alle Verantwortlichkeiten beschrieb. Die Schnittstellen nach außen – zum Kunden, zur Technik und zu anderen Agenturen – wurden in die Teamaufstellung mit aufgenommen. Unter Zeitdruck hilft es, das Team auf die Aufgabe einzuschwören und das Projekt als sportliche Herausfor derung zu verstehen. Wir haben einen Teamplan auf gemalt, der aussah wie ein Fußballfeld und nicht nur die eigenen Spieler zeigte, sondern auch die des Kunden auf der »Gegenseite«. Es ging hierbei nicht darum, den Kunden als Gegner darzustellen, sondern die »MannDeckung« und die Verantwortlichkeiten im Team deutlich zu machen: Der Creative Director spricht mit der BrandManagerin, der Strategische Planer ist der agenturinterne Sparringspartner von Service und Vertrieb. Der ver antwortliche Art Director und der Informationsarchitekt stehen gemeinsam im Sturm. Wir haben später immer
32
2
DAS TEAM
SALES TEAM
BRAND MANAGER
SERVICE TEAM UX MANAGER
UX DESIGN LEAD
PRODUCT OWNER
VISUAL DESIGN LEAD
SCREEN DESIGN
UX DESIGN TEAM
BUSINESS ANALYST
PRODUCT MANAGER
DESIGN TEAM LEAD (C R E AT I V E DIRECTOR)
PROJECT MANAGER
TAKTIKTAFEL TEAMAUFSTELLUNG
WEITERE SPIELER
Die Analogie zur taktischen Planung auf dem Fußballfeld hilft,
Spezialisten, die bei Bedarf hinzugezogen werden oder nur
sich die Rollen der Teammitglieder auf Kunden- und Designteam-
temporär im Team mitarbeiten: Strategische Planer / Researcher /
seite zu vergegenwärtigen.
Business- und System-Analysten / Usability Tester / Motion und Sound Designer, Fotografen, Texter, 3D-Spezialisten, Architek-
Stakeholder auf Kundenseite
ten … / Software-Entwickler / Projekt- und Account-Manager /
Mitglieder des Design-Teams
Content Manager / Konzepter / Texter
33
PROZESS
Process is messy. Process is never the same thing twice. Process is an ideal that everybody aspires to. BRIAN GILLESPIE.
W O R K F L O WMODELLE
Anfang der 2000er Jahre füllte das Workflow-Diagramm einer Online-Agentur gut und gerne drei DIN -A3-Seiten. Den meisten Raum nahm die Darstellung der Schnitt stellen zwischen den einzelnen Disziplinen ein. Vor allem bei der Stabübergabe zwischen Strategie und Kreation sowie zwischen Kreation und Technik gab es eine Menge zu beachten. Anwendungskonzepte beinhalteten beschrei benden Text, Wireframes und Use Cases. Diese Doku mente zählten oft Hunderte von Seiten und waren ent sprechend schwer zu handhaben. Denn wenn nur ein inhaltliches Modul sich während der Konzeption änderte, musste das komplette Dokument durchsucht und an jeder Stelle, an der das Modul auftauchte, angepasst werden. Die Anwendungskonzepte wurden an Programmierer und visuelle Gestalter übergeben und mussten für beide Seiten die jeweils nötige Information bereitstellen. Wenn während des weiteren Projektverlaufs Fragen auf tauchten, war die Hälfte des Konzeptteams schon wieder im nächsten Projekt untergetaucht. Um dieRei bungsverluste zu verringern, wurden alternative Work flows ausprobiert. Verbesserungsansätze galten meist der Schnittstelle zwischen Design und Technik. Eine Weile versuchten Informationsarchitekten die Interakti onsabläufe mithilfe von Diagrammtypen aus der Unified Modelling Language (UML ) zu beschreiben, einer
44
1 WORKFLOW-MODELLE
W A SS E R
ANFORDERUNGEN
FA LL M O D
ITERATION 1
E LL
USER STORY
KONZEPTION
1 ITERATION 2 USER UX / UI
STORY 2
DESIGN ITERATION 3 USER
PROTOTYP 1
UX / UI
STORY 3
UMSETZUNG T E S T / REVIEW
PROTOTYP
UX / UI
2
A G IL E
T E S T /
PROTOTYP
E
3
N
REVIEW
TW IC K LU N
T E S T /
G
REVIEW
W O R K F L O W - M O D E L L E
Zwei Entwicklungsmodelle für interaktive Projekte. Beim Wasserfallmodell wird die jeweilige Phase abgeschlossen, bevor es in die nächste Phase geht. Bei der agilen Entwicklung werden Teilschritte in Iterationen realisiert. Durch frühes Prototyping und Testing können Risiken verringert werden.
45
PROZESS
ED D N A BR ION T C A INTER IGN DES ESS Z O R P
1 DAS GESCHÄFT VERSTEHEN
2 DIE MARKE VERSTEHEN
3 DEN NUTZER VERSTEHEN
DISCOVER 4 ZIELE SETZEN
1 DIE KOMMUNIKATION PL ANEN
DEFINE 2 DAS MARKENERLEBNIS PLANEN
3 DAS NUTZERERLEBNIS PLANEN
4 IDEEN GENERIEREN
5 MASSNAHMEN DEFINIEREN
48
3 SCREEN-BASIERTE I N T E R A K T I O N G E S TA LT E N
2 G R U N D L A G E N F Ü R BRANDED INTERACTIONS
1 D E S I G N A U F G A B E N STRUKTURIEREN
4 I N T E R A K T I O N I M R A U M G E S T A L T E N
5 V I R T U A L & A U G M E N T E D R E A L I T Y G E S TA LT E N
6 K O N V E R S A T I O N E N G E S T A L T E N
DESIGN 7 S M A R T T H I N G S G E S T A L T E N
7 PROTOTYPING
8 TESTING
DISTRIBUTE
DELIVER
4 B I x D U N D KU LT U R E L L E R WA N D E L
1 B I xD I M P L E M E N T I E R E N
3 B I xD W E I T E R E N T W I C K E L N
2
B I x D B E R E I T S T E L L E N UND STEUERN
5 PROJEKT-L AUNCH & NACHBESPRECHUNG
1 B I xD - S Y S T E M E E N T W I C K E L N
2 S T Y L E G U I D E S E R S T E L L E N
4 DIE PRODUKTION BEGLEITEN
3 P A T T E R N L I B R A R I E S ERSTELLEN
49
1 DISCOVER
1
2
4 3
6
5
7
8 10
9 11
WHAT’S IN YOUR BAG?
Der Inhalt einer Handtasche besteht meist aus sehr persönlichen Dingen und kann einen tiefen Einblick in die Persönlichkeit des Besitzers geben.
92
3
WARUM WIR MIT PERSONAS ARBEITEN Die Arbeit mit Personas bringt zahlreiche Vorteile, und es lohnt sich immer, den Kunden davon zu überzeugen, den meist nicht allzu hohen Aufwand zu bezahlen. Zumal er sich dabei gerne einbringen kann und die Ergebnisse auch an anderer Stelle im Unternehmen genutzt werden können. Hier ein paar Argumente für die Verwendung von Personas:
DEN NUTZER VERSTEHEN
PERSONA MOODBOARD
Das Persona Moodboard visualisiert die Vorlieben und den Lebensstil einer Persona in Form einer Bildcollage. Es enthält Bildmaterial zu Markenkleidung, zur Lieblings website, zu Wohnstil, Arbeitsstätte, Auto und Hobbys der Persona, ihren Lieblingsfarben und ihrem Lieblingsessen und vielem mehr. Persona Moodboards eignen sich sehr gut für die Abstimmung mit dem Kunden, da hier unter schiedliche Vorstellungen schneller sichtbar werden, als
Sie ermöglichen eine effektive Kommunikation
bei rein textbasierten Personas.
über die Zielgruppe innerhalb des Design-Teams und mit dem Kunden. Sie helfen, sich in den Nutzer hineinzuversetzen und diese Perspektive
WHAT’S IN YOUR BAG?
während des gesamten Designprozesses leicht immer wieder einnehmen zu können. Der Inhalt einer Handtasche sagt sehr viel über seinen Sie ermöglichen es in der Discover-Phase und
Besitzer oder seine Besitzerin aus. Er zeigt, was ihr
bei späteren Iterationen, Anforderungen aus
wichtig ist, ob und welche Zigarettenmarke sie raucht,
Nutzersicht zu finden, diese zu priorisieren und
welches Auto sie fährt, ob sie eine Vorliebe für Kitsch
damit die Notwendigkeit von Features einzu-
hat, abergläubisch ist oder ihre Termine analog plant.
schätzen. Diese Anforderungen könnenwir in
Eltern haben ein Foto ihres Kindes dabei. Eine Hand
Use Cases und Nutzerszenarien (
tasche enthält das persönliche Inventar: die Dinge, die
S. 95)
oder als User Stories im Lean-UX-Prozess (DISTRIBUTE
S. 306 FF)
dokumentieren.
Menschen wichtig sind. Sie ist ein Spiegel des persönli chen Lebensstils. Sie zeigt Verhaltensmuster und persönliche Werte und gibt Aufschluss über Wohnort,
Sie machen die Arbeit messbar und helfen,
Alter, Familienstand, Hobbys, Markenaffinität und den
neue Marketing- oder Werbemaßnahmen
persönlichen Geschmack einer Persona. Vor allem aber
zu bewerten.
macht es Spaß, die Collagen zusammenzustellen.
Sie helfen uns, Testcases zu definieren (mit den dazugehörigen Nutzerszenarien, siehe nächstes Kapitel) und liefern Profile für die Rekrutierung von Testpersonen.
93
2 DEFINE
Gehalt der Marke für den Kunden dar, es ist der Mehr-
MARKE UND GESELLSCHAFT
wert, den Marken über ihre eigentliche Leistung hinaus bieten können. Grundlage des Brand BIOS ® Modells ist eine Sichtweise, die Marken als Entitäten mit menschlichen Wesenszügen MARKENBEDEUTUNG: DAS WARUM EINER MARKE
versteht, mit einer quasi-menschlichen Persönlichkeit
Die Markenbedeutung entspricht dem innersten
sehen. Marken brauchen daher eine gesellschaftliche
Kreis des Golden Circle, mit dem Simon Sinek 2009 in einem TED-Vortrag den Erfolg von Apple erklärte. Darin machte er anschaulich, dass viele Unternehmen zwar wissen und kommunizieren, was sie tun (ihr Leistungsangebot in Form von Produkten und Services) und wie sie es tun (ihre Differenzierung im Wettbewerb), aber nur wenige sich überhaupt bewusst machen, warum es sie gibt. Laut Sinek fängt Apple in seiner Marketing-Botschaft genau dort an: »With everything we do, we aim to challenge the status quo. We aim to think differently.« Das Wie und das Was folgen erst: »Our products are user friendly, beautifully designed, and easy to use. We just happen to make great computers. Want to buy one?« Den Vortrag, der zu den 10 meistgesehenen TEDVorträgen überhaupt gehört, gibt es hier: ww.ted.com/talks/simon_sinek_how_great_ w
leaders_inspire_action
und Verhalten. Das lässt sich folgerichtig nicht losgelöst von gesellschaftlichem und kulturellem Hintergrund Verankerung und einen Bezug zum jeweiligen Zeitgeist und kulturellen Kontext, um überhaupt eine Bedeutung herstellen zu können. Das kommt der Sichtweise von Gestaltern entgegen, denen es häufig ein Bedürfnis ist, gesellschaftliche Bedeutung zu erzeugen. Gestalter wie Charles Eames oder Otl Aicher sahen in ihrer Arbeit für Marken immer auch ein gesellschaftliches Moment. Heute unterscheiden wir nur allzu schnell zwischen gemeinnützigen Not-for-Profit-Projekten und kommer ziellen Markenprojekten. Die einen sind moralisch und ethisch gut – sozusagen fürs Gewissen – die anderen wirtschaftlich relevant. Solange wir aber mit dieser Schere im Kopf arbeiten, wird es schwer, kommerzielle, wirtschaftlich relevante Markenprodukte zu schaffen, die auch moralisch und ethisch vertretbar sind. Im Brand BIOS ® ist daher eine gesellschaftliche Dimension enthalten: Behaviour, Image, Offering und Story lassen sich so vor dem Hintergrund gesellschaftlicher Grundwerte, Moden und Trends, Mythen und ökonomischen Wertvorstellungen betrachten und auf Relevanz prüfen.
132
2
DAS MARKENERLEBNIS PLANEN
DIE MARKE
MODE UND TRENDS
alten und Verh das s s e chreibt. he ke b elc Mar w , er en er d kt
,w e ihr lche er s Ik o
IMAGE
Ziel:
Ziel:
ERLEBBARKEIT
EINZIGARTIGKEIT
MEANING
OFFERING
MY T H E N U N D KU LT U R
bolcharakter, m Sym h re t. in i h re i b ke esc ar M fie b a gr
no
STORY
Ziel:
Ziel:
R E L E VA N Z
GLAUBWÜRDIGKEIT
al e L Nu e i s t u ng t ze n f smerk mal ür die Me n s chen.
ch e r M d ie H e ar ke rkunf t, erz ählt .
tr en e s z sch i da kt es Da s e l c h e n fa Ma r d k e n an g e b ot , w e r it d Mar ke defin t – und dam ier
el ,w n e t ch de chi gen ges e n e L k r Die Ma nd en u die Myth
de
WERTE UND GRUNDWERTE
bild
e
B E H AV I O U R
n
rken
di
Da s Ma dam rken it d v en erh Ch a lt ar a
Da s M a
BENEFITS UND ÖKONOMISCHER WERT
MARKENBESTANDTEILE
BRAND BIOS TM : Das Markenmodell von think moto zeigt die vier Bestandteile der Marke und ihre Bedeutung für die Menschen. In der Define-Phase sollten diese Aspekte einmal für die Verwendung in der interaktiven Kommunikation definiert werden.
133
3 DESIGN
TOUCH GESTURES
1
2
TAP
6
3
4
DOUBLE TAP
DRAG
7
SLIDE
8
SWIPE
9
PRESS AND DRAG
ROTATE
5
HOLD / PRESS
10
PINCH
SPREAD
1
»Antippen« – Objekt auswählen
6
2
»Doppelt antippen« – Objekt auswählen / aktivieren
7
»Wischen« – Screen durchblättern, scrollen »Drehen«, mit einer oder zwei Händen – Objekt drehen
3
»Ziehen« – Objekt bewegen
8
»Drücken und ziehen«, ein- oder beidhändig
4
»Schieben« – Schalter bewegen
9
»Zusammenziehen« – verkleinern
5
»Gedrückt halten«
1 0 »Auseinanderziehen« – vergrößern
MOBILE GESTURES
READ QR
BLOW INTO MIC
USE CAMERA
BUMP
SHAKE
ICONS FÜR GESTISCHE INTERAKTION
Die Gestensymbole können in Wireframes und Storyboards
in verschiedenen aktuellen Formaten heruntergeladen und für
verwendet werden. Unter www.think moto.de/gestures können sie
eigene Dokumente verwendet werden.
188
2
GRUNDLAGEN FÜR BRANDED INTERACTIONS
BODY GESTURES
1
2
WAV E
5
3
ONE ARM OUT
HANDS ON HIPS
6
NOD
9
7
PINCH
11
CLAP
TURN HEAD
8
SPREAD
10
THUMB UP
4
LEAN LEFT / RIGHT
12
STANDING / ARMS DOWN
STEP LEFT / RIGHT
Auswahl freier Gesten 13
14
für die Interaktion in
15
Environments und Installationen
JUMP
LIFT LEG
ON ONE LEG
10
»Klatschen« – aktivieren / deaktivieren
2 + 3 »Hand ausstrecken / an der Hüfte« – Pause oder Stop
11
»Arme anliegend« – deaktivieren, initialisieren
4 + 5 »Kopf drehen / nicken« – vertikal / horizontal scrollen / blättern
12
»Schritt rechts / links« – nach rechts / links bewegen
6 + 7 »Arme zu- / auseinander bewegen« – verkleinern / vergrößern
13
»Sprung« – Objekt auswählen oder überspringen
8
»Oberkörper beugen« – Objekt bewegen oder ausweichen
14
»Bein rechts / links heben« – Avatar nach rechts / links drehen
9
»Daumen hoch« – Auswahl bestätigen
15
»Auf einem Bein stehen« – rechts / links scrollen
1
»Winken« – aktivieren, bewegen, scrollen
3 DESIGN
Farbe ist immer noch eine starke Markensignatur und
lichen Wert des Produktes dar: beim Lacoste-Shirt zahlt
hilft von jeher bei der Wiedererkennung und der Abgren-
der Kunde den Preis fürs Krokodil, nicht fürs Shirt. In
zung zum Wettbewerb. Digitale Anwendungen haben
dem Maße, wie der neue Konsumbürger jedoch Qualität,
jedoch meist eine wesentlich höhere Komplexität. Farbe
Ehrlichkeit und Nachhaltigkeit einfordert, erodiert
muss hier mit Bedacht eingesetzt werden, damit Inhalte
auch die Bedeutung des Logos zugunsten anderer Marken
und Funktionen gut wahrnehmbar bleiben. Marken,
signaturen. Das Erlebnis ersetzt das Statussymbol. Das
die nur eine Auszeichnungsfarbe haben, tun sich schwer
macht das Logo nicht völlig obsolet, verändert aber seine
bei der Kennzeichnung von Interaktions-Elementen.
Rolle und seine Gestalt. Adaptierbarkeit und Flexibilität
Wir empfehlen, das Farbspektrum zu erweitern und meh-
spielen eine wichtige Rolle. Google setzt neben dem
rere Farben für das digitale Informationsdesign zu
eigentlichen Logo sogenannte »Doodles« ein: spielerische
definieren. Immer mehr Marken wagen ohnehin, auf eine
Logo-Varianten, die animiert oder interaktiv sind und auf
dominierende Markenfarbe zu verzichten und sich
aktuelle Tagesereignisse Bezug nehmen – und die Marke
einer Palette von Farben zu öffnen. Prominente Beispiele
so als ständig in Bewegung und am Puls der Zeit zeigen.
sind Google und Slack. Andere verwenden dynamische Farbschemata als Teil einer flexiblen Identität. Als Beispiel sei hier das Erscheinungsbild von Merck genannt.
NEUE MARKENSIGNATUREN
Air France wiederum verwendet in der Kommunikation diverse Farbschemata, die Wiedererkennbarkeit ist hier durch das Zusammenspiel von Komplementär-Farben
Haben die interaktiven und dynamischen Eigenschaften
gewährleistet.
der digitalen GUI -basierten Medien bereits die klassischen Markensignaturen in ihrem Einsatz und ihrer
Die Bildsprache einer Marke ist stets dem Zeitgeist
Bedeutung verändert, so ergeben sich durch die gestische
untergeordnet. Allerdings können Marken durch einen
und sprachbasierte Interaktion zahlreiche neue marken-
innovativen Bildstil immer wieder neue Trends setzen.
prägende Gestaltungsprinzipien. Einige Beispiele:
Die Bildqualität steht mittlerweile klassischen Medien in nichts nach, in Verbindung mit Filteralgorithmen und
Wichtig wird die Stimme der Marke. In dem Maße, in
Animationen lassen sich sehr charakteristische Erschei-
dem Conversational UIs (KONVERSATIONEN GESTALTEN
nungsbilder schaffen.
S. 242) an Bedeutung gewinnen, müssen immer
mehr Unternehmen sich fragen: Welche Stimme hat denn Am stärksten verändert sich die Rolle des Logos, der
eigentlich unsere Marke? Spricht ein Mann oder eine
klassischsten aller Markensignaturen. Logos sind
Frau? Mit welchem Sprachstil und Duktus spricht sie?
spätestens seit der zweiten Hälfte des 20. Jahrhunderts
(DIE RICHTIGE STIMME
omnipräsent. Einst Zeichen der Herkunft und Qualität
artig. Richtig gewählt schafft sie Nähe zum Benutzer,
eines Produktes, stellten sie seit der Hochphase des
die bisher so nicht möglich war.
Konsumismus in den 80er und 90er Jahren den eigent
192
S. 238) Die Stimme ist einzig-
2
GRUNDLAGEN FÜR BRANDED INTERACTIONS
Raumgefühl / Dimensionalität
Formensprache
Typografie Stimme
Klang
Raster / Layoutstruktur
MARKE
Sprache / Text
Farbe Logo Ikonografie
Duft
Infografik
Bildwelt
Micro Interactions
Bewegung / Animation
Materialität / Haptik
Navigation
Prozesse
Geschmack Stories
Pattern und Texturen
ALGORITHMEN
MARKENSIGNATUREN FÜR LIVING BRANDS
Living Brands besitzen eine zahlreiche Markensignaturen. Zu den »klassischen« Signaturen wie Logo, Typografie und Bildwelt kommen neue, flexible Kennzeichen hinzu. Über marken spezifische Algorithmen können die einzelnen Markensignaturen dynamisiert werden, ohne ihren markenprägenden Charakter zu verlieren.
193
3. 5
3 DESIGN
Virtual und Augmented Reality haben mittlerweile ihren festen Platz im Touchpoint-Mix zahlreicher Marken.
VIRTUAL UND AUGMENTED REALITY G E S TA LT E N
Die dahinterliegenden Technologien entwickeln sich rasant weiter und die Möglichkeiten des Einsatzes sind nicht annähernd ausgelotet. Weil hier noch keine festen Standards definiert sind, werden Begriffe noch unscharf verwendet. Sie bezeichnen im Wesentlichen verschiedene Stufen im Reality-Virtuality-Continuum (SIEHE ABBILDUNG GEGENÜBER) . Wir beschränken uns im Folgenden
auf Virtual und Augmented Reality, die beiden derzeit verbreitetsten Ansätze, wollen jedoch im Folgenden einen Überblick über die unterschiedlichen Begriffe geben:
1
VIRTUAL REALITY (VR)
Virtual Reality bezeichnet computergenerierte 3D-Welten, in die der Nutzer mittels einer entsprechenden VR-Brille eintaucht und in denen er sich – je nach Anwendungstyp – mehr oder weniger frei bewegen kann. In der Virtual Reality ist der Nutzer vollständig von der natürlichen Außenwelt entkoppelt. VR erfordert ein grundsätzliches Umdenken von an 2D geschulten Gestaltern, da viele der zu gestaltenden UX und UI Aspekte sich auf das Verhalten des menschlichen Körpers sowie physischer Objekte in einem 3-dimensionalen (sphärischen) Raum mit entsprechenden physischen Eigenschaften (z. B. Schwerkraft) beziehen.
Schnuppern Sie mal frische Holodeck-Luft, das wird Ihnen guttun. C APTAIN PICARD. In Star Trek: Next Generation 4 / 19
226
V I R T UA L U N D AU G M E N T E D R E A L I T Y G E S TA LT E N
REALE WELT
VIRTUELLE WELT
5
REALITY
EXTENDED REALITY
XR
AUGMENTED REALITY
MIXED / HYBRID REALITY
AUGMENTED VIRTUALITY
VIRTUAL REALITY
AR
MR
AV
VR
DAS REALIT Y-VIRTUALIT Y-CONTINUUM
Das Reality-Virtuality-Continuum zeigt die unterschiedlichen Stufen im Übergang vom realen Raum zur vollständig virtuellen Umgebung.
227
3 DESIGN
einheitlichen Markenwahrnehmung bei. Wir raten davon
Kinder soll ich suchen?«. Dann ist es wichtig, dass die
ab, so zu tun, als sei der Chatbot tatsächlich ein Mensch.
Marke unterscheidbar bleibt und einen starken, eigen-
Das löst Irritationen aus und führt zu Unglaubwürdigkeit.
ständigen Charakter besitzt, der den Nutzer-Kontext
Transparenz ist wichtig, basieren die (KI-gestützten)
versteht und darauf reagiert.
Chatbots doch vor allem auf einer Vielzahl persönlicher Informationen des Nutzers. Vom sensiblen Umgang damit
Mehr als bei jedem anderen Medium gilt bei Chatbots:
hängt das Vertrauen des Nutzers und damit auch die
die Markenpersönlichkeit IST das Nutzererlebnis. Wie
Akzeptanz der Anwendung ab.
begegnet uns die Marke im Chatbot? Ist er ein Freund? Ein Helfer? Ein Challenger? Ein Trainer? Die markenar-
Eine besondere Herausforderung stellt die hybride Ver
chetypische Rolle (VGL. MARKENARCHETYPEN
wendung von Voice-basierten Sprachassistenten und
S. 79) wird relevant und nicht jede Persönlichkeit eig-
GUI -basierten Anwendungen dar. Der Nutzer aktiviert
net sich für jede Aufgabe. Deshalb sollten je nach
dabei mit seiner Spracheingabe eine App oder eine
Situation und Anwendungskontext unterschiedliche
Webanwendung und wird aus dem Sprechmodus heraus
Persönlichkeitsfacetten betont werden. So wie ein
zur Interaktion mittels Touchgesten oder Point-und-
Service-Mitarbeiter andere Soft Skills und Charakter
Click geführt, wobei es im schlimmsten Fall zu einem
eigenschaften braucht als ein Verkäufer, so muss auch
irritierenden Medienbruch kommen kann. Grundsätz
der Chatbot, der den Nutzer in Service-Aufgaben
lich sollte man daher prüfen, ob bei bildschirmbasierten
unterstützt, anders »ticken« als der Shopping-Chatbot.
Geräten nicht der Einsatz eines textbasierten Chatbots sinnvoller ist.
Wenn wir die Persönlichkeit eines Chatbots definieren, sollten wir Charakter und Verhalten unterscheiden. Der Charakter bleibt gleich, das Verhalten aber kann sich über
WER SPRICHT? DIE PERSÖNLICHKEIT EINES CHATBOTS
Zeit seinem Gegenüber in einem von der Marke zu definierenden Korridor an den Nutzer anpassen und so dazu beitragen, eine dauerhafte Beziehung aufzubauen.
Messaging-basierte Chatbots müssen sich oft mit anderen Chatbots die Aufmerksamkeit des Nutzers teilen. Es ist durchaus denkbar, dass ein Nutzer neben seinen menschlichen Kontakten gleich mehrere virtuelle ChatbotKo takte in seinem Messenger hat. Diese wird er genauso »anpingen« wie seine menschlichen Kontakte: »Hey Anna, ich muss morgen für einige Tage nach London reisen, kannst du mir einen Flug vorschlagen?« »Gerne, fliegst du alleine oder für wieviele Erwachsene und
Great writing and user understanding is the pillar of good conversational design. A DRIAN ZUMBRUNNEN. Google
246
6
KO N V E R S AT I O N E N G E S TA LT E N
SITUATIVER KONTEXT
BEGRÜSSUNG
Hej! Ich bin Anna von flyiin. Erzähl mir von …
DIALOG
Ich möchte vom 22. - 29. Juli nach New York.
Schön! Der Big Apple ist toll zu dieser Jahreszeit.
EMPFEHLUNG
BUCHUNG
Welche Buchungsklasse bevorzugt ihr?
Economy Premium
Business
Alles klar! Wie viele Gepäckstücke möchtet ihr aufgeben?
Auf dem Hinflug nur Handgepäck. 2 Koffer auf dem Rückflug.
Ich schlage vor, dass ihr in der Premium Economy Klasse fliegt. Für nur 30€ mehr pro Person bekommt ihr mehr Komfort.
Deal!
Sehr gut! Ich leite dich jetzt zum sicheren Bezahlen zu Paypal weiter.
Ok. ist notiert
DELIGHTFUL
CLEAR
DYNAMIC
B R A N D F I LT E R I M F O KU S
AUSSTEUERUNG DER PERSÖNLICHKEIT BEI EINEM CHATBOT
Ein Chatbot für flyiin: Je nach Anwendungskontext werden die Persönlichkeitsaspekte der Marke stärker oder weniger stark gespielt.
247
3 DESIGN
kann eine Smartwatch derzeit nicht einlösen. Auch
schaffen Data & Analytics und Machine Learning
die Handwerkskunst, die viele Luxusobjekte zu Unikaten
Algorithmen eine neue Intimität: Das Produkt weiß viel
macht, kann ein digitales Produkt nicht bieten. Als
mehr über den Nutzer als früher, gleichzeitig erfährt
ergänzende Funktion – sofern sie mit dem Anspruch der
der Nutzer aber auch das Produkt auf eine ihm angepasste
Marke in Einklang zu bringen ist – kann das Digitale
Art und Weise, die Nähe schafft. Ein perfektes Beispiel
jedoch ein Manufaktur-Produkt aufwerten und so z. B.
für Nests Anspruch ein »thoughtful home« zu schaffen.
auch Luxus- oder Premium-Produkten einen neuen Markt erschließen. Ein Beispiel hierfür gibt Steinway & Sons, die ihre weltbekannten Flügel wahlweise mit einem hochauflösenden Selbstspielsystem ausstatten.
SMART THINGS UND MIKROINTERAKTIONEN
Mit Steinway Spirio lassen sich so Hunderte von Auf nahmen der Steinway Artists von Lang Lang bis Billy Joel auf dem iPad auswählen und über den Flügel so wieder-
Die geschilderte Intimität wird vom Nutzer positiv
geben, als würde der Künstler selbst daran sitzen.
wahrgenommen, wenn wir die Informationen, die wir über ihn oder die jeweilige Nutzungssituation haben, für kleine Interaktionen einsetzen, die den Nutzer positiv
INTIMITÄT ZWISCHEN NUTZER UND MARKENPRODUKT
überraschen. Solche Mikrointeraktionen können markenprägend sein. Den Türgriff des Tesla haben wir schon erwähnt. Ein weiteres Beispiel: Nests Farsight-Thermostat. Das runde Thermostat, das an der Wand angebracht
Im Internet der Dinge interagieren Smart Things aber
wird, hat ein digitales Display, dessen Interface sich
nicht nur mit dem Nutzer, sondern auch miteinander. Sie
in der Darstellungsgröße der Entfernung des Betrachters
sprechen nicht nur mit dem Kunden, sondern auch über
anpasst: steht man direkt davor ist die Schrift kleiner,
ihn. Durch den ständigen Austausch von Informationen
zeigt aber mehr Informationen an, als wenn man einige
entstehen Big Data. Wenn Marken diese Daten klug
Meter entfernt steht.
nutzen, können sie Ereignisse triggern, die dem Kunden nützlich oder vergnüglich sein sollten. Allerdings: wie immer wenn Dritte Entscheidungen für andere treffen, ist dabei Vorsicht geboten.
DIE MARKE VERÄNDERT SICH ENTLANG DER USER JOURNEY
Denn Smart Things schaffen eine doppelte Intimität zwischen Gerät und Nutzer. Zum einen geschieht dies
Die User Journey ist ein zentraler Bestandteil des Mar
durch die Unmittelbarkeit der Interaktion im Alltag:
kenerlebnisses – gerade bei Smart Devices, die als
beim≈Einsatz von Sprach- und Gestensteuerung stehen
aktiver Begleiter des Nutzers konzipiert sind. Über den
keine physischen Interfaces mehr im Weg. Zum anderen
Zeitraum der Nutzung verändert sich diese Beziehung.
260
7
S M A R T T H I N G S G E S T A L T E N
e H E A LT H
SMART MOBILITY
– Telemedizin – Vernetzte Implantate – Gesundheitsüberwachung – Quantified Self
– Connected Car – Smart Parking – Autonomes Fahren – Ortsbasierte Dienste – Verkehrsmanagement – Anti-Diebstahl – Sharing-Systeme
SMART ENERGY
– Smart-Grid – Smart Metering – Speicherung nachhaltiger Energien – Ladestationen – Klimaschutz
WEARABLES
– Smartwatches – Smart Textiles / Fashion – Schmuck und Accessoires
SMART HOME
– Heimautomatisierung (Licht, Sicherheit, Komfort) – Selbstdiagnose von Haushaltsgeräten – Energieeffizienz
SMART FACTORY
– Mass Customization – Automatisierte Produktion – Qualitätssicherung – Logistik
SMART CITIES
– Umwelt-Monitoring – Intelligente Verkehrssysteme – Adaptive Beleuchtung – Abfallwirtschaft – Gebäudemanagement
SMART RETAIL
– Produkt-Tracking – Inventarisierung – Intelligentes Shopping – Marketing – Item Location
SMART THINGS UND DAS INTERNET DER DINGE
Ein weites Feld für markengerechte Interaktionen: Das Internet der Dinge (IoT) vernetzt Produkte und Services aus vielen Bereichen des täglichen Lebens.
261
BRANDED INTERACTIONS Branded Interaction Design (BIxD) – die markengerechte
DIESES BUCH BRINGT IHNEN
Gestaltung interaktiver Anwendungen – geht weit über die visuelle Gestaltung hinaus. Die Anzahl digitaler
—
PL ANUNGSSICHERHEIT:
Sie kennen die Phasen
Marken-Kontaktpunkte wächst rasant; sie kohärent
des BIxD-Prozesses, wissen, worauf es in den
im Sinne der Marke zu entwickeln und zu orchestrieren,
verschiedenen Phasen ankommt und können komplexe
stellt Unternehmen und Agenturen vor neue Heraus-
Projekte souverän und strukturiert umsetzen.
forderungen. Katja Wenger und Marco Spies begleiten
—
HANDWERKSZEUG:
Sie werden gerne auf die praxis-
mit ihrer Agentur namhafte Unternehmen in der
erprobten Tipps und Tools bauen, auf Grafiken und
digitalen Transformation. Sie wissen, wie man Marken
Checklisten zurückgreifen und sie in Ihren Projekten –
im digitalen Raum glaubwürdig erlebbar macht und
kleinen oder großen – nutzbringend einsetzen.
wie man digitale Produkte und Services im Sinne der
—
STRUKTUR:
Sie erfahren, worauf es in der Vielzahl
Marke plant und gestaltet. Sie kennen die Unterneh
möglicher Touchpoints ankommt, worin die jeweiligen
mensseite aus eigenen StartupErfahrungen und geben
Chancen und Risiken liegen – und was es in Konzeption und Gestaltung zu beachten gilt.
dieses Wissen weiter. Profund und praxisnah. Struk —
turiert und verständlich.
AGILITÄT:
Sie erkennen, wie Ökonomie und IT,
Gesellschaft und Design heute interagieren und weshalb flexible Strukturen belastbarer sind als starre.
Dieses Buch sollte eine Überarbeitung des Erfolgstitels werden. Es wurde ein neues Buch. Für eine neue Zeit.
—
S TA R T U P-KU LT U R:
Sie lassen sich anstecken vom
Mindset einer neuen Zeit, das dieses Buch durchzieht
Für Ihren Erfolg in dieser Zeit.
wie ein roter Faden.
Hier bestellen
I S B N 9 7 8 -3 - 8 74 3 9 - 9 0 7- 4