Embed Size (px)
Citation preview
LeseprobeErlebnisse schaffen, Erlebnisse gestalten. User Experience Design ist zu einer eigenen Disziplin geworden, UX-Designer sollen Nutzer verstehen und verführen können. Doch was steckt dahinter? Wie funktionieren Erlebnisse?
Johannes Ippen
Web Fatale – Wie Du Webseiten gestaltest, denen niemand widerstehen kann348 Seiten, broschiert, in Farbe, März 2016 34,90 Euro, ISBN 978-3-8362-3898-4
www.rheinwerk-verlag.de/3982
Auszug aus dem Kapitel: »Das Spiel mit den Reizen: User Experience«
Inhaltsverzeichnis
Index
Der Autor
Leseprobe weiterempfehlen
Know-how für Kreative.
59
Die Anatomie von Erlebnissen Colossos. Schon seit einer halben Stunde stehen wir in der Schlange, gleich ist es so weit. Noch etwa 30 Menschen stehen zwischen uns und der schnells-ten Holzachterbahn Europas. 110 Stundenkilometer, 52 Meter hoch, 61 Grad geht es abwärts. Alle zweieinhalb Minuten ist das Kreischen zu hören, wenn es wieder steil bergab geht.
Meine Knie werden langsam weich. Ich bin mir unsicher, ob ich über-haupt noch mitfahren will, eine leichte Panik überkommt mich. Jetzt ist es zu spät – wir werden in den Zug gewunken, nehmen auf den harten Plastik-bänken Platz, die Stahlbügel senken sich. Ein Ruck geht durch den Zug – es gibt kein Zurück mehr. Die Bahn fährt langsam an, um die Kurve und dann Stück für Stück den Berg hoch. Ich lächele, tue cool, aber eigentlich will ich mir nur in die Hose machen.
Zwei Minuten und dreiundzwanzig Sekun-den später fährt der Zug wieder in der Station ein, die Angst ist Euphorie gewichen. Wow! Noch einmal! Ich weiß gar nicht, wovor ich gerade Angst hatte. Mein Körper schüttet En-dorphine aus, Glückshormone. Ob ich ein Foto kaufen möchte, werde ich gefragt. Mein Gott, sehe ich blöd aus, wenn ich schreie – auf gar keinen Fall! Dieses Erlebnis werde ich im Kopf behalten und erzählen – auch ohne ein teures Andenken – und so bald wie möglich wieder-holen!
Das Spiel mit den Reizen: User Experience Erlebnisse schaffen, Erlebnisse gestalten. User Experience Design ist zu einer eigenen Disziplin geworden, UX-Designer sollen Nutzer verstehen und verführen können. Doch was steckt dahinter? Wie funktionieren Erlebnisse?
Was hat eine Achterbahn-fahrt eigentlich mit Web-design zu tun?
60
NUTZER (VER)FÜHRENUSER EXPERIENCEUSABILITYEINLEITUNG
Das ultimative ErlebnisEine Achterbahnfahrt ist das ultimative Erlebnis und illustriert ganz genau das, was wir im User Experience Design auf Websites erreichen wollen: Aus Unsicherheit wird in wenigen Minuten Zufriedenheit und Glückseligkeit.
Um zu verstehen, wie Erlebnisse funktionieren, müssen wir einen kleinen Ausflug in die Psychologie machen. Das menschliche Gehirn ist in jeder Se-kunde Millionen von Reizen ausgesetzt – Gerüche, Geräusche, Farben, Lich-ter. In diesem Moment fliegt eine winzige Fruchtfliege um meine Schreib-tischlampe, die das dunkle Zimmer erhellt, durch das geöffnete Fenster höre ich einen Zug vorbeirauschen, auf dem Balkon hüstelt meine Nachbarin. Es riecht nach frisch gewaschener Wäsche und dem Zigarettenqualm von Ne-benan. Ich sitze auf meinem Bein, dass langsam taub wird und zu kribbeln beginnt. Mein Mund ist trocken, mein Körper verspürt das Verlangen, einen Schluck Wasser zu trinken.
All diese Dinge werde ich Sekunden, nachdem sie passiert sind, vergessen haben, sie werden von unserem Bewusstsein als irrelevant verworfen. Reize und Situationen, die als ausreichend relevant eingestuft werden, um gespei-chert zu werden, nennen wir Erfahrungen.
So wach warst du noch nie Generell unterscheiden wir zwischen spontanen und geplanten Erfahrungen. Eine spontane Erfahrung kann durch eine be-sonders überraschende Stimulation hervorgerufen werden, die in der Regel mehrere Sinne anspricht. Eine Explosion zum Beispiel kommt für die meis-ten Menschen völlig unerwartet, sie lässt sich sehen, hören, riechen und über die Druckwelle auch spüren. Auch Fahrradunfälle, Überraschungspar-tys oder die K-fee-Werbung von 2004 fallen in diese Kategorie.
Vielleicht erinnerst du dich noch an diese Werbung, denn gehypt wurde sie enorm: In den Werbespots wurde eine besonders ruhige, harmonische Situation gezeigt. Ein Auto fährt über eine kurvige Landstraße, die Sonne strahlt über die Bäume. Plötzlich taucht mit einem grellen Schrei im Vor-dergrund ein grün geschminkter Dämon auf, gefolgt vom Claim »So wach warst du noch nie«. Nicht nur das, außerdem speichert unser Hirn diese Art der Erfahrung dauerhaft ab – in der Verhaltenspsychologie spricht man von traumatischen Erfahrungen.
Aubade-Lektion Nº 34Spiel mit seinen Nerven.
So wach warst du noch nie. Die Screenshots aus einer K-fee-Werbung
zeigen, wie ein Erlebnis funktioniert.
61
NUTZERBINDUNG MARKTSTRATEGIEN SOCIAL MEDIA NUTZERTESTS
62
NUTZER (VER)FÜHRENUSER EXPERIENCEUSABILITYEINLEITUNG
Da wir unsere Nutzer verführen und nicht traumatisieren wollen, ist für uns die zweite Kategorie interessanter. Geplante Erfahrungen hingegen beste-hen aus drei Phasen: Vorbereitung, Erlebnis und Reflexion.
K In der Vorbereitung wird das Gehirn auf das bevorstehende Ereignis kon-ditioniert. Eine Erwartungshaltung wird generiert, je nach Art des Erleb-nisses wird sie auch gern Vorfreude oder Lampenfieber genannt. Im Falle unserer Achterbahnfahrt ist das Schlangestehen ein extrem wichtiger Be-standteil des Erlebnisses: Nur wenn wir warten müssen, haben wir genug Zeit, ordentlich Herzrasen zu entwickeln, welches das Erlebnis zu etwas Besonderem macht.
K Beim Erlebnis findet die eigentliche Aktion statt – also der Teil, in dem wir in der Achterbahn festgegurtet sind. Wichtig ist, dass ein Erlebnis nur eine bestimmte, kognitiv erfassbare Zeitspanne umfassen darf – sonst wird es vom Gehirn nicht mehr als Einheit wahrgenommen. Aus diesem Grund finden wir auch Achterbahnfahrten spannend, eine ICE-Fahrt von Berlin nach Frankfurt aber weniger – obwohl die Geschwindig-keiten in etwa die gleichen sein dürften. In der Regel ist das Erlebnis durch einen klaren Anfangs- und Endreiz geprägt, den der Nutzer untrennbar mit dem Erlebnis verbindet. Das kann das Klacken der Anschnallbügel in der Achterbahn sein oder der Applaus vor und nach einem aufregenden Vortrag. Wichtig ist, dass das Gehirn spürt: Hier beginnt das Erlebnis – und hier endet es.
K Die Reflexionsphase benötigt das Gehirn, um das Erlebte zu verarbeiten und abzuspeichern. In der Reflexion wird das Ereignis im Gehirn immer und immer wieder wiederholt, durch Erinnerungen, Erzählungen oder Nachstellen beziehungsweise Beobachten. Darum sind die Fotos nach der Achterbahnfahrt auch so wichtig: Selbst wenn man kein Andenken erwirbt, so hat man zumindest eine externe Beobachtung auf das Erlebte – das hilft beim Verarbeiten.
Die Erlebnisphasen im WebdesignLässt sich diese Methodik auf unsere Weberlebnisse übertragen? Absolut! Ein typisches Beispiel sind News-Artikel: Wir entdecken einen Teaser auf Facebook, lesen den Anreißer, öffnen den Artikel, lesen ihn und teilen oder liken oder kommentieren ihn anschließend. Auch hier die drei Phasen: Vor-bereitung, Erlebnis und Reflexion. Nach diesem Prinzip funktionieren heute die meisten Onlineshops: Ich sehe eine Werbung, klicke und shoppe, und anschließend erhalte ich eine Bestätigungsmail.
Merke: Verführen, nicht traumatisieren.
Darauf warten, an der Reihe zu sein – bei Mailbox wichtiger Teil des Erlebnisses.
63
NUTZERBINDUNG MARKTSTRATEGIEN SOCIAL MEDIA NUTZERTESTS
Die Visitenkarten-Bestellung als Erlebnis Ein gutes Beispiel dafür ist der Be-stellprozess für Visitenkarten. Wer schon einmal Visitenkarten im Internet bestellt hat, der weiß, dass das wahrlich kein Spaß ist. Man kämpft sich durch einen endlos langen Bestellprozess, klickt sich durch Unterseiten und Zwischenschritte, auf einmal wer-den die Kosten höher als noch auf der Startseite beworben, aus Verse-hen hat man eine Kaffeetasse mit dazugekauft, und dann heißt es erst einmal warten.
Ganz anders beim britischen An-bieter MOO (moo.com): Wer hier Karten der Luxe-Edition bestellen möchte, kommt zunächst auf eine Übersichtsseite, auf der das Produkt näher erläutert wird.
Die Vorbereitungsphase bei MOO Offensichtlich handelt es sich nicht um normale Karten, das preisgekrönte Mohawk-Superfine-Papier ist offensicht-lich das Beste und Feinste, was der Visitenkartenmarkt zu bieten hat. Detail-lierte Informationen über verfügbare Templates und Größen bereiten den potentiellen Käufer auf das eigentliche Erlebnis vor – das Kaufen.
Was wird auf dieser Web-site verkauft? Visitenkarten? Gleich zwei Overlays verde-cken die Sicht.
Das Erlebnis bei MOO beginnt auf der Startseite.
64
NUTZER (VER)FÜHRENUSER EXPERIENCEUSABILITYEINLEITUNG
Premium Papierqualität so schwer wie drei Cookies!
Das fühlt sich gut an: MOO lobt den Nutzer.
Die Erlebnisphase bei MOO Der Bestellvorgang ist bewusst kurz gehalten: Die Gestaltung der Visitenkarte findet grafisch statt, Vorschau von Vorder- und Rückseite sind gleich nach Eingabe der Daten ohne Seitenwechsel mög-lich. Eingabe von Liefer- und Zahlungsdaten finden ebenfalls auf einer Seite statt, nach nur wenigen Minuten ist der Vorgang abgeschlossen.
65
NUTZERBINDUNG MARKTSTRATEGIEN SOCIAL MEDIA NUTZERTESTS
Die Reflexionsphase bei MOO Jetzt beginnt die Reflexionsphase: Dem Käu-fer wird angeboten, den erfolgreichen Visitenkartenkauf per Knopfdruck direkt bei Facebook oder Twitter zu teilen. Obwohl ich niemanden kenne, der diese Funktion schon mal genutzt hätte, wird hier suggeriert: Ich habe soeben etwas erfolgreich bestellt – etwas, was anscheinend großartig und mitteilungswürdig ist. Allein die Möglichkeit des Sharens kommuniziert dem Nutzer, was er gerade Tolles erlebt hat.
Ähnlich funktioniert es mit dem Foto der Achterbahnfahrt: Nüchtern be-trachtet werden wir einfach nur in einem offenen Stahlkasten eine Schiene entlang geschubst, so wie Tausende andere Menschen täglich. Das Foto aber macht es zu etwas Besonderem: Jemand hat sich die Mühe gemacht, diesen Moment festzuhalten – dieser Moment ist etwas ganz Besonderes.
Was dann folgt, ist ein Meisterstück der E-Mail-Kommunikation. MOO verschickt nicht einfach nur eine Bestätigungsmail, nein, es meldet sich »Little MOO«, der freundliche kleine Druckroboter, der uns mitteilt, dass un-ser Druck bald an »Big MOO«, die große vertrauenswürdige Druckmaschine, geschickt wird.
Gelungene Erlebnisse werden geteilt – biete deinem Nutzer die Möglichkeit dazu!
Einfach und übersichtlich – der MOO-Visitenkarten-Editor
Die Dankes-E-Mail von Little MOO. Weiter geht’s zu Big MOO, der Druckmaschine.
66
NUTZER (VER)FÜHRENUSER EXPERIENCEUSABILITYEINLEITUNG
Kurze Zeit später dann noch eine Mail: Little MOO berichtet uns, dass der Druck erfolgreich war und sich unsere Visitenkarten auf dem Weg befinden. Die Geschichte mit den kleinen Robotern ist nicht nur witzig, vor allem er-innert sie uns ständig an das schöne Bestellerlebnis und begleitet uns in der Reflexionsphase.
Und was bedeutet das jetzt? Die Phasen von Erlebnissen lassen sich in je-dem Feld nachvollziehen – nicht nur im User Experience Design. Auch wenn jede Website ein wenig anders ist und die Arten dieser Phasen unterschied-lich ausgeprägt sind, so folgen sie doch immer diesen Prinzipien.
Bei genauerer Betrachtung stellen wir fest: So viele verschiedene Arten von User Experiences gibt es eigentlich gar nicht. Im Großen und Ganzen unterscheiden wir drei Kategorien von User Experiences: Konsum, Konver-sion und Komplexität. Schauen wir uns diese Kategorien einmal genauer an.
Lies mich – Consumption Design Als Tim Berners-Lee das WWW konzipierte, hatte er vor allem den regen In-formationsaustausch zwischen Wissenschaftlern im Sinn. Auch heute noch ist der Hauptzweck der meisten Websites die Vermittlung von Inhalten – Vi-deos, Streams, Bildergalerien und vor allem: Texte!
Im Gegensatz zu dem, was unsere Großeltern behaupten, lesen und schrei-ben wir im Internet heute mehr denn je. Ein durchschnittlicher 16-Jähriger
Meistgelesenes Medium der Welt: Wikipedia
67
NUTZERBINDUNG MARKTSTRATEGIEN SOCIAL MEDIA NUTZERTESTS
hat höchstwahrscheinlich auf seinem Smartphone bereits mehr Wörter und Texte produziert als Goethe in seiner gesamten Schaffenszeit.
Genau darum geht es beim Consumption Design: Gestalten, um gelesen zu werden. Newsseiten, Newsfeeds, Foren, Webblogs oder ganze Blogplattformen werden darauf optimiert, vom Nutzer vollständig und angenehm konsumiert zu werden. Dabei kommt es stets auf die Art des Inhalts und die Leseart an.
Verschiedene LeseartenDie unendliche Flut an Texten, Blog-Posts und Editorials übertrifft schon heute die legendären Bibliotheken von Alexandria und des US-Kongresses zusammen. Jeden Tag frisch informiert über Newsreader, Twitter und Face-book-Feed. Was uns vor eine schwierige Aufgabe stellt: Wie bringen wir Nut-zer dazu, im schieren Informationsüberangebot ausgerechnet unsere Inhal-te zu konsumieren?
Dabei kommt es zunächst einmal auf die Art des Inhalts und die Haltung des Nutzers an. Unterschiedliche Leseformen erwarten unterschiedliche Aufbereitungen eines Inhalts:
K Beim konsultierenden Lesen ist der Nutzer auf eine bestimmte Informati-on aus, die er versucht aus dem Text herauszulesen – eine Zahl, einen Fakt oder einen Sachverhalt. Ein gutes Beispiel sind tatsächlich Wikipedia-Ar-tikel: Informationen sind klar gegliedert, mit ausreichend Zwischenüber-schriften versehen, am Anfang eines längeren Artikels befindet sich im-mer eine kurze Zusammenfassung mit den wichtigsten Informationen.
K Beim informierenden Lesen »überfliegen« wir Texte – man könnte auch sagen, wir scannen sie. Ziel ist, den generellen Informationsgehalt aus ei-nem Text zu ziehen, bestimmte Schlagwörter und Satzgruppen aufzuneh-men. Nachrichtenseiten wie Spiegel Online werden in der Regel informie-rend gelesen. Kurze, klare Sätze dominieren, Nebensätze und kunstvolle Ausschmückungen werden auf das Nötigste reduziert.
K Lineares Lesen ist am ehesten das, was wir als klassisches Lesen bezeich-nen können: Wir beginnen oben und lesen Wort für Wort bis zum Ende. Nach diesem Prinzip werden Romane oder Kurzgeschichten gelesen, im-mer mit dem Ziel, von dem Text möglichst gut unterhalten zu werden, und der Angst, etwas Wichtiges zu verpassen.
Ein Blog-Post wäre eine Mischung aus mehreren Leseformen: Im Idealfall ist er so unterhaltsam geschrieben und gestaltet, dass der Nutzer ihn linear liest, also von Anfang bis Ende.
Unterschiedliche Lese-formen erwarten unter-schiedliche Aufbereitun-gen: andere Texte, andere Layouts.
68
NUTZER (VER)FÜHRENUSER EXPERIENCEUSABILITYEINLEITUNG
Wahrscheinlicher ist es, dass der Leser den Inhalt zunächst überfliegt und sich dann einliest – oder später beim nochmaligen Lesen eher konsultierend nach einer bestimmten Information sucht. Genauso funktionieren auch Fachtexte wie dieses Buch – ich wette, du hast bereits Teile übersprungen und nur die Überschriften und Bildunterschriften gelesen; das nehme ich nicht persönlich, denn tatsächlich ist das auch so gedacht.
In 100 Zeichen Lust auf den Inhalt machenAuf Websites kannst du das Leseverhalten deiner Nutzer steuern. Dabei sind die Überschrift und der Anfang des Textes entscheidend – »der erste Satz eines Werkes muss den Leser in das Buch ziehen, er muss nicht zwangsläu-fig etwas mit dessen Inhalt zu tun haben, sagt Schopenhauer«. Zumindest behauptet das Harald Schmidt, dessen Buch »Tränen im Aquarium« mit den Worten beginnt.
Heute ist der erste Satz nicht mehr nur der obere Teil der Seite, sondern auch der Teaser, der auf Facebook oder Google geteilt wird. Hier muss in 100 Zeichen oder weniger Lust auf den Inhalt gemacht werden – eine Herausfor-derung für jeden Informationsarchitekt. Mit ein paar Tricks lassen sich Texte so optimieren, dass sie für den Nutzer besonders attraktiv erscheinen.
Der Publikationsdienst Medium (medium.com) hat festgestellt, dass Texte besonders häufig vollständig gelesen werden, wenn sie in 7 Minuten aufge-nommen werden können. Das ist für den Bildschirm eine vertretbare Länge, und noch lang genug, um mehr als einen Grundgedanken zu kommunizieren.
tl;dr»Too long; didn’t read« ist ei-gentlich eine freche Antwort auf ellenlange E-Mails von Kunden und Vorgesetzten – heute wird das Kürzel gerne vor Zusammenfassungen gesetzt.
Medium-Artikel sind aufs Lesen optimiert. Der linke Artikel lässt sich in 4 Minuten lesen.
NUTZERBINDUNG MARKTSTRATEGIEN SOCIAL MEDIA NUTZERTESTS
Bei Medium bekommt der Nutzer sogar direkt angezeigt, wie lang ein Text ist – und ob es sich lohnt, diesen noch schnell vor dem nächsten Meeting zu lesen. Auch die Angabe von Autoren und eine Zusammenfassung am Anfang des Textes helfen dabei, Leser zu gewinnen.
Lesen muss einfach sein Im Endeffekt geht es darum, das Lesen so einfach wie möglich zu machen – auch die Wahl der richtigen Schriftart, Größe und Abstände spielt dabei eine Rolle. Webfonts machen es uns dabei einfach, aus einer Vielzahl von Typefaces auszuwählen, auch wenn diese nicht auf dem System des Nutzers installiert sind.
Serifenschriften wie Georgia oder Freight Text erhöhen durch wohlgesetz-te Kontraste und Akzente den Lesefluss und sind besonders für längere Tex-te ideal. Serifenlose Schriften wie Roboto, San Francisco oder Lucida Grande sind speziell für hochauflösende Displays optimiert und erlauben eine opti-male Scanbarkeit – gut für Fakten, Interfaceelemente oder kurze Texte.
Was ist eigentlich mit Helvetica und Times New Roman? Beide Schriften sind als Systemfonts wahrscheinlich die populärsten, machen allerdings auf dem Screen keine allzu gute Figur. Die serifenlose Helvetica wurde 2015 als Interfacefont aus Apples Betriebssystemen gekickt, die Serifenschrift Times New Roman ist aus irgendeinem Grund immer noch die Standardschrift in den meisten Webbrowsern.
Eine besondere Rolle spielen Editorials, also Texte, die besonders aufbe-reitet sind. Ihren Ursprung haben sie im Magazindesign; da Editorials be-sonders aufwendig zu gestalten sind, sind sie verhältnismäßig selten anzu-treffen – aber großartig für den Konsum.
Font oder Typeface?Eine Typeface ist die Schrift-art, also die Summe aus Formen und Buchstaben. Ein Font ist lediglich die Software, die die Schriftart einbettet.
Das Editorial Design beim Aside Magazine
Checkliste: Gelungenes Leseerlebnis kreieren
Arbeite mit Teasern. Eine Zusammenfassung am Anfang des Textes hilft, Leser zu gewinnen.
Halte dich kurz: Texte werden besonders häufig dann vollständig gelesen werden, wenn sie in 7 Minuten aufgenommen werden können.
Wähle die richtige Schrift aus, um den Leser das Lesen so einfach wie möglich zu machen.
Integriere gegebenenfalls eine Anzeige, die signalisiert, wie lang der Text ist.
69
5
EinleitungAuf Websites verführen ........................................................................................... 11
Warum eigentlich Web Fatale? .............................................................................. 12
Ein Auftritt mit Klasse: UsabilityDrücken, drehen, schieben: die Oberfläche als Tor zum Anwender ......... 15
Es hat Klick gemacht – von Mäusen und Fenstern ......................................... 24
Der Weg des geringsten Widerstands – Fitts’ Law ........................................... 32
Keep it simple ............................................................................................................. 38
Von Metaphern und Missverständnissen ......................................................... 43
Drücken, wischen, tippen ...................................................................................... 49
Das Spiel mit den Reizen: User Experience Die Anatomie von Erlebnissen ............................................................................. 59
Lies mich – Consumption Design ....................................................................... 66
Kauf mich – Conversion Design ........................................................................... 73
Bedien mich – Complex Design ........................................................................... 80
Interfaces, die Spaß machen .................................................................................. 85
Chancen und Grenzen der Gamification ........................................................... 91
Inhalt
6
Doppelte Agenda: Nutzer (ver)führenVon Köttbullar bis Hotdog – das IKEA-Prinzip ................................................. 99
»Du …, äh, ich …« – von der Kunst, die richtigen Worte zu finden .............. 113
Navigation: Einfach und ganz schön komfortabel ......................................... 116
Die 7 ± 2-Regel: Miller’s Law .................................................................................... 123
Onlineformulare: reduziert und im richtigen Flow ....................................... 126
Onboarding – aller Anfang ist schwer ................................................................. 131
Um Kopf und Kragen: Nutzerbindung»Alle ist der größte Niemand«: Blind Date mit der Zielgruppe .................. 141
Personas – das zweite Date ..................................................................................... 146
Und täglich grüßt das Murmeltier – Daily Active Users ............................... 152
Positive Verstärkung – ein Ausflug in die Verhaltenspsychologie ............ 156
Contentstrategie – Inhalte schmackhaft machen ........................................... 160
Aus Nutzern Fans machen ...................................................................................... 163
Gamification in der Praxis ..................................................................................... 170
Hinreißende Absätze: MarktstrategienNicht nur was man sagt – Tonalität ..................................................................... 181
Deine Freunde finden’s gut – Social Proof ........................................................ 191
Lass uns in die Sterne schauen ............................................................................. 198
Den richtigen Preis finden ...................................................................................... 204
Kleine Geschenke erhalten die Freundschaft ................................................... 216
Komm doch wieder – die Macht von Retargeting .......................................... 221
Inhalt oder Werbung? Content-Marketing ........................................................ 226
7
Lass uns Freunde bleiben: Social MediaDer Nutzer als soziales Wesen ............................................................................... 237
Soll ich? Die Wahl des richtigen Netzwerks ...................................................... 240
Welches Netzwerk darf es denn nun sein? ........................................................ 246
Social Media rocken – so geht’s richtig ............................................................... 252
Kommentare, Bewertungen und Shitstorms – wie reagieren? ................... 259
Erlebnisse mit Social Media – Lernen von Oreo und Co. .............................. 267
Bitte keine Stereotypen: NutzertestsDem Nutzer über die Schulter geschaut ............................................................ 287
Aufgaben statt Anweisungen ................................................................................ 291
Guerillatests – Ergebnisse mit kleinem Budget ............................................... 296
Testen mit Prototypen ............................................................................................. 302
Tests richtig auswerten ............................................................................................ 311
Fifty-fifty: Optimieren mit A/B-Tests .................................................................. 315
Tracking: Ich weiß, wohin du klickst ................................................................... 323
Big Context: persönliche Erlebnisse generieren ............................................. 331
FazitBleib dran! .................................................................................................................... 341
Index .............................................................................................................................. 342
342
1-Click Checkout 477±2-Regel 1237-Minuten-Regel 68§ 284 StGB 15940–20–10 15298 %-Regel 83
AAbove the Fold 118A/B-Test 315Adobe Comet 304Airbnb.de 87Americasarmy.com 172App 80
98 %-Regel 83Airbn 103Calendar 39Clear 89Dumb Ways to Die 2 82Epic Win 95Focus List 53GitHub 25Gmail 39Hipmunk 81Instagram 83, 133It’s fucking raining now 90Jelly Splash 82Kamera 83kmpkt 53Midddle 124Notizen (Apple) 44Paper 47Session 83Slack Messenger 87Spotify 84
Streaks 81Tinder 51Trello 87Uber 41uMake 217WhatsApp 166
App Analytics 153AppAnnie.com 153App Experiences 83Apple
Kamera-App 83Apple.com 28, 36Apple Watch 54Apps
Primer 72Apptypen 80Aside Magazin 69AWS 213
BBadges 93, 170Banner Blindness 225Bannerwerbung 221Barrierefreiheit 22Belohnung 111, 156Benjerry.com 183Benutzbarkeit 16Benutzeroberfläche 15Berliner S-Bahn 38Bestellprozess 63
Erlebnis 63Bewertungen 198, 259
Dos und Don’ts 203Fake 200positive 202
Bezahlschranke 208B. F. Skinner 157Big Brother 123Big Context 331Big Data 141Bilder 70, 75Bildschirmseite 31Bildwelt 188
definieren 188Blackbox.cool 22Bleiwüste auflockern 70Blog 160Blogpost 72, 227Border-Layout 25Brad Frost 29Branding 44Brandon Stanton 278Breadcrumbs 117Bug 313Bullshit 29Burrito Lunch 297Businessblog 160Button
Anordnung 34Positionierung 20
BWL-Crashkurs 204
CCall to Action 76CAPTCHA 130Cascading Information 95Cathrine.co 17Cathrine Understrup 17Choice kills Conversion 215Chris Anderson 217
Index
343
Clickbait 258Clickdummy 302, 304Clicky.com 330Clippy 132Code Prototype 306Coffee Circle 231Complex Design 80Consumer Insight 150Consumption Design 66Content Apps 80Content-Marketing 226
Beispiele 230Contentpyramide 160
Wochenplan 161Contentstrategie 160
posten 253Rhythmus 161Rushhour 162
Conversion Design 73Core Game Loop 82CoverFlow 85Crossposting 249
DDaily Active Users 152Dark Pattern 163, 173Dateneingabe 108, 126DAU ¦ Dailiy Active UsersDavid Carson 190Deathtobullshit.com 29Demografische Faktoren 142Dennis Crowley 91Design 18
Einmaleins 18fensterbasiert 31Größe 19Gruppen 20Positionierung 20Weißraum 19
Designmodo.com 307Dialogbox 28, 30DINK 145DNU 152Dopamin 239Douglas Atkin 238Dove 276
Dribbble.com 136Drive-now.com 194Dropbox 132DRU 152Dumb Ways to Die 232Du oder Sie? 181Dustin Curtis 72, 114Dynamic Pricing 209
EEasybell.de 101eBay 198E-Book 227E-Commerce 73Editorials 69Eingabefeld 129Elon Musk 77E-Mail-first-Politik 164E-Mail-Marketing 163, 165Emailonacid.com 166Emotionalität 105Emotionen 71, 238Endless Scrolling 31Endowment-Effekt 106Engaged 113Engagement 113Envato.com 230Epic Meaning 94Erfahrung 60
geplante 62spontane 60traumatische 60
Erlebnis 60teilen 65
Erlebnisphasen im Webdesign 62Erlebnisphase 64Reflexionsphase 65Vorbereitungsphase 63
EVA-Prinzip 81
FFacebook 169, 237, 290
Facepile 192Page Insights 256
Facebook-Feed
Banner 224Fake-Bewertungen 200Farbe
Bedeutung 21Feature Walkthrough 133
Nachteile 133Feedback 87
Mouse-over 88Fehlermeldung 129FHTW 33
Redesign 36Fitts’ Law 32Fitzgerald Steele 297Fold.it 176Font 69Footer Navigation 117Force Touch 35Foursquare 91, 199Frankenstein-Prototype 305Frederick Herzberg 100FREE 166Freemium 218Frequency Capping 225Freshmail.com 165Freunde werben Freunde 194Frontlineshop.de 102
GGamification 91, 170
Badges 93Epic Meaning 94Fortschritt 92Grundelemente 92Highscore 93Kollaboration 95Levelanzeige 92Quests 94Rangliste 93
Gefakte Inhalte 263Gekaufte Nutzer 265Geklaute Inhalte 264George Orwell 186Geplante Erfahrung 62
Erlebnisphase 62Reflexionsphase 62Vorbereitungsphase 62
344
Geschenke 216Gesten 49, 50, 86
ikonische 51Getbootstrap.com 307Gewohnheitsnutzer 161Gleichförmigkeit 20Glücksspiel 159Goldilocks-Prinzip 126Goldsprint.de 327Good Cop, Bad Cop 115Google 40
Knowledge Graph 41Suche 40
Google+ 244Google Analytics 153, 320, 324Goratchet.com 307Graphicalcooking.co 79, 219, 249Gregory Wood 72Gruppieren 20, 34Guerilla Monitoring 300Guerilla Prototype 299Guerillatest 296
Burrito-Lunch 297Guided Session 135
Sidekick 135Gutschein 111
HHacking 110Hamburgernavigation 120Hashtags 266Haul 161Hauptnutzen 39Heatmap 292Heroku 213Highscore 93Hipmunk.com 86Hollerith-Lochkarte 15Holzconnection.de 107How-tos 160HTTPS-Verbindung 75Humans of New York 278Hygiene 100Hyper-Personalisation 332Hyrum Denney 116
IIce Bucket Challenge 238Icons 120Identifikation 103IKEA-Prinzip 99
Emotionalität 105Hacking 110Hygiene 100Inspiration 102Involvement 106Rationalität 104Reward 111
Ikonische Gesten 51Influencer-Marketing 195Infografik 229Informierenden Lesen 67Innocent 280
Smoothie 182Website 182
Insights 256Inspiration 102Instagram.com 31Interaktion 85Interface 85
Feedback 87Overlay 134
Interface-Overlay 134Intervallverstärkung 158Involvement 106, 109
JJaegermeister.de 188Jakob Nielsen 55Jason Santa Maria 72Jetzt kaufen! 114John Maeda 40Joneses-Effekt 191Joni Korpi 122Jony Ive 38Jugendmarketing 144Jung von Matt 126
KKai’s Power Soap 47
Katzenbaby 258Keeping up with the Joneses 191Keller-sports.de 73Keyword 117K-fee 60Kickstarter.com 89KISS-Prinzip 38Kitkat 259Klassischen Konditionierung 157Klickrate 114Kommentare 259Konkurrenz 252Konsultierendes Lesen 67Kontextmenü 34Kontinuierliche Verstärkung 157Kontraste 22Konversion 73Kostenlose Produkte 217KPI 318Kritische Masse 322Kultgeste 51Kult-Paradox 238Kundenhotline 101
LLanding Page 77, 119
scrollen 79Late Night Shopping 111Lesbarkeit 16, 69
Kontraste 22Lesearten 67
informierendes Lesen 67konsultierendes Lesen 67lineares Lesen 67
Lesen 667-Minuten-Regel 68Lesearten 67
Lifestyle 78, 102Lightbox 28Like-Button 192Likes 95Lineares Lesen 67Listen 228Litmus.com 166Load more 31Log-out 137
345
LOHAS 145Losttype.com 218LOVOS 145Lumosity.com 158
MMailChimp.com 43, 79, 165, 187, 300Making-of 230Makrofeedback 88Marissa Mayer 39Marke 182
Bildwelt 188Sprachwelt 182
Markenkern 184Marketing Page 77Marktdynamik 210Marktstrategie 181
Empfehlungen 192Preis 204
Mark Zuckerberg 237Marvin Clifford 162Maskottchen 91Massenprodukt 206Master-Detail-Navigation 117Material Design 39MAU 154Maus 24Mausweg 37Medium.com 68Melville Stone 212Mentales Modell 120Messenger-Marketing 166Metapher 43, 46
Brief 43Dos und Don’ts 48Einkaufswagen 46
Metaphorisches Branding 44Microsite ¦ Landing Page Mikrofeedback 88Milieus (Sinus-Milieus) 144Miller’s Law 123, 135MisterSpex.de 107Mixpanel.com 329Modal 28MOO.com 63Moodboard 149, 189
Motivation 92, 113Mouse-over 88MS Paint 47MTV-Mindset 144Multitasking 24Multitouch 50Mylapka.com 19
NNavigation 116
Breadcrumbs 117Hamburger 120innovativ 121Master Detail 117mehrstufig 117Suche 122Tabs 117
Neofonie 50Nest Cam 78Nest.com 78Netzwerke 240
allrounder 240auswählen 240Business 243fotobasierte 241kombinieren 246lokale 244Musik 242Nische 245Nutzerzahlen 246Video 242
Newsletter 163Niice.co 189Nike+ 174Notepad 44Notepad+ 44Notifications 53, 155Nutzeraktivität
messen 153Nutzerbindung 141
Belohnung 156Contentstrategie 160DAU 152Erinnerung 155Fans 163Gamification 170
persönlicher Service 164positive Verstärkung 156via Social Media 169
Nutzererlebnis 81Nutzerführung 99
Feature Walkthrough 133IKEA-Prinzip 99Navigation 116Offboarding 137Onboarding 131Tipps und Tricks 131
Nutzertest 289auswerten 311Frequenz 289Testablauf 295Testkandidat 290Testsituation 292
OOatly 282Offboarding 137Ohne teuer 184Omnigraffle 304Onboarding 131, 132
Animation 133Slideshow 132Wann? 136
Onlineformular 126Onlineshop 73, 105
Bewertungen 198Einkaufswagen 46Gutschein 111Nutzer-Orientierung 101Produkte präsentieren 75Produktkombination 103Produktprobe 107Smart Shopper 110Trusted Shop 101Vertrauen schaffen 75
OnPage.org 109Open Source 219Operante Konditionierung 157Optimizely.com 319Opt-in-Marketing 163, 168
E-Mail 163Oreo 267
346
Out of the Box 137Oxytocin 239
PPanic.com 72Paper Prototype 302Patrick le Quément 15Paul Fitts 34Pawlowsche Hunde 156Pay what you want 218Personas 146
Don’ts 151erstellen 147Komponenten 147Namen 147Stockfotos 149
Persönlichkeit 90Peter Figge 126Phablet 49Phänomen der Sieben 123Piwik.org 330Podcast 227Popapp.in 302Positive Verstärkung 156Posten 253Poundandgrain.com 21Preis
Ertragskosten 204festlegen 204Konkurrenzanalyse 205Marktüberblick 205pay what you want 218Spielraum 205Trends 205
Preisgestaltung 211transparent 208
Preispsychologie 212Preisstrategie 206Premiumprodukt 207Pril 263Procreate.si 118Produkbeschreibung 104Produkt
Beschreibung 104High Involvement 104Low Involvement 105
Vergleich 104Produkte präsentieren 75Produktkombination 103, 209Produktprobe 107Produktvideo 75Programmfenster 24Prototyp 302
auf Papier 302Clickdummy 304Frankenstein 305per App 308programmierter 306
Psychografische Faktoren 143Psychologie 60, 100, 106, 110, 156, 212Push-Mitteilung 155
QQuotenverstärkung 157
RRainer Mallebrein 24Ralf Haberich von Webtrekk 113Raph Koster 85Ratenverstärkung 158Ratings 198Rationalität 104Reduktion 71Referral-Link 195Referral-Marketing 194
YouTube 195Referral-Traffic 326Referrer-Spam 326Remote Testing 300Retargeting 221, 223
Dos und Don’ts 225Retention-Rate 152Reward 111Reziprozität 238Ribbonhero.com 177Richard Littauer 301Richtig posten 253Rollkugel 24RTFM 131Rushhour 162
SSaaS 135Saturn.de 75Schieberegler 87Schisslaweng.net 162Schriftwahl 17, 69
Emotion 17Lesbarkeit 16
Scoial MediaSelbstdarstellung 238
Scrollen 31Secrets Festival 261Sensortower.com 153Serifen 17Serifenlose Schriften 69
Helvetica 69Lucida Grande 69Roboto 17, 69San Francisco 69
Serifenschriften 17, 69Freight Text 69Georgia 17, 69Times New Roman 17, 69
Session 83Sharen 65Shares 95Shitstorm 259
managen 260Skala 260vermeiden 263
Shop-Usability 47Sidekick 135Sinus-Milieus 144Skeuomorphismus 44Slackbot 135Slide to Unlock 51SMART 252Smartphone 49Smart Shopper 110Social Media 169, 237
Emotionen 238Strategie 258Sucht 238
Social Proof 191SOHO 145Spaß 85
347
Spotify 84Sprachwelt 182Sprout.com 260SSL-Zertifikate 75Stefan Sagmeister 121Stephen P. Anderson 85Stereotypen 145Sternchenbewertung 201Sterne 198Sticky Navigation 116Stockfotos 149Storytelling 77Struktur 70Strukturmarketing 196Styleguide 184Suche 122Suchtraffic 327Sueddeutsche.de 166Surge Pricing 209Swedishmoments.de 185Systemfonts 69
Helvetica 69Times New Roman 69
TTablet 49Tabs 117Taco Bell 262Tailorstore.de 108Teamtreehouse.com 170Testkandidaten finden 290Testzeitraum 323Textanzeigen 221Theuserisdrunk.com 301Tipps und Tricks 131tl;dr 68Tobias van Schneider 90, 164Tonalität 181
Du oder Sie 181Styleguide 185
Too long; didn�t read 68Touch Design 55Touchscreens 49Tracking 323Transparenz 104Travis Kendrick 42
Trello.com 194Trusted Shop 101Tumblr 95Tupper-Party 196Tutorial 134
Guided Session 135Tweetdeck.com 260Twitter 93, 193, 254
Analytics 256Typecast.com 18Typeface 69Type-scale.com 17Typologisierung 143
UÜberraschung 89Überzeugen 104Uifaces.com 149Uistencils.com 302UI ¦ User InterfaceUnsplash.com 233Unwahre Inhalte 264Usability 15
Barrierefreiheit 22Benutzbarkeit 16Benutzeroberfläche 15Bullshit 29Design-Einmaleins 18Fitt’s Law 32Lesbarkeit 16Scrollen 32Test 287Vereinfachung 42
Usabilitylabor 292, 293Usabilitytest 295User Experience 59
98 %-Regel 83Apps 83Belohnung 88Emotionen 78Erlebnis 60Gamification 91Interaktion 85Komplexität 80Konsum 66Konversion 73
Landing Page 77Lesen 66Life Style verkaufen 78Nutzererlebnis 81Onlineshop 73Persönlichkeit 90Schieberegler 87Spaß 85Überraschung 89
Userinterface 23, 24Useronboard.com 136Usertesting.com 300User Tests 287UX ¦ User Experience
VVereinfachung 42Verführen zum Lesen 70Verführung 99
Empfehlungen 192Versandkostenfrei 209Versus.com 104Vertrauen 75, 101
schaffen 75Video 230Visitsweden.com 184Virtuelles Gut 213Visualisierung 71Voiceandtone.com 187VVV-Prinzip 40
WWAU 154Wayfair.de 75Web-App 26, 80Website 26
Gestensteuerung 51Ladezeit 55Miller’s Law 123Navigation 116Nutzerbindung 141Nutzerführung 99Onlineformulare 126optimale Mauswege 37Usability 15
348
User Experience 59User Tests 287Wortwahl 113
Weißraum 19Welt.de 274Werbung 226Whatsbroadcast.com 167Wikipedia 66WOOF 145Wooga 290
Bagdes 93Corporate 272Spiele 270
Wording 18, 79Wortwahl 113, 114
Klickrate 114
XXkcd.com 201
YYelp 199Yuppie 146
ZZapf Dingbats 190Zeilenlänge 18Ziele definieren 252Zielgruppe 141, 252
definieren 145demografische Faktoren 142Klassifikationen 142Personas 146psychografische Faktoren 143Stereotypen 145Typologisierung 143
Zwei-Faktoren-Theorie 100
Wissen, wie’s geht.
Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel-lung von der E-Book-Fassung des vorgestellten Buches abweichen können. Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nut-zungs- und Verwertungsrechte liegen beim Autor und beim Verlag.
Teilen Sie Ihre Leseerfahrung mit uns!
Johannes Ippen
Web Fatale – Wie Du Webseiten gestaltest, denen niemand widerstehen kann348 Seiten, broschiert, in Farbe, März 2016 34,90 Euro, ISBN 978-3-8362-3898-4
www.rheinwerk-verlag.de/3982
Johannes Ippen ist Designer in Berlin. Er arbeitet beim Spieleentwickler Wooga und gründete das Thanksalot Design Collective. Sein täglich Brot: Marken- und Marketing-Design. In der Freizeit: Apps entwickeln und Webdesign natürlich.
Know-how für Kreative.
