User Experience Webdesign Erzeugen eines positiven Nutzererlebnisses mittels Storytelling und Parallax Scrolling

Transkript

1 Hochschule der Medien Stuttgart Studiengang: Elektronische Medien Master Sommersemester 2013 User Experience Webdesign Erzeugen eines positiven Nutzererlebnisses mittels Storytelling und Parallax Scrolling Masterarbeit zum Erlangen des akademischen Grades Master of Arts (M. A.) Hinweis: Verkleinerte Online-Version Nur bedingt zum Drucken geeignet vorgelegt von: Michael Paul Stachurski Matrikelnummer: betreut von: Erstprüferin: Prof. Sabiha Ghellal Zweitprüferin: Prof. Ursula Drees

2 Zusammenfassung Die Fähigkeit einer Website, beim Nutzer positive Emotionen auszulösen und ihm somit ein positives Nutzererlebnis zu bieten, stellt einen entscheidenden Erfolgsfaktor einer Internetseite dar. Diese Arbeit behandelt die Techniken Storytelling und Parallax Scrolling im Webdesign und setzt diese in den Kontext der User Experience. Das erste Ziel besteht in der Erarbeitung von Wissen, mit dem eine erfolgreiche, d. h. sich positiv auf das Nutzererlebnis auswirkende, Parallax Scrolling/Storytelling-Website konzipiert und realisiert werden kann. Um dieses Ziel zu erreichen, wird neben einer Literaturrecherche auch eine Analyse von 30 Parallax Scrolling-Websites durchgeführt und zusätzlich eine eigene Website konzipiert und umgesetzt. Das zweite Ziel ist mit Hilfe eines Nutzertests und der zuvor entwickelten Website herauszufinden, welche konkrete User Experience durch den Einsatz von Storytelling und Parallax Scrolling hervorgerufen werden kann und inwieweit die Anwendung des zuvor erarbeiteten Wissens zu einer erfolgreichen Website führt. Abstract The ability to elicit positive emotions and thus to offer a positive experience to the user is one of the key success factors of a website. This paper deals with the techniques Storytelling and Parallax Scrolling in web design and puts them into the context of User Experience. The first objective is to gather relevant knowledge in order to be able to design and implement a Parallax Scrolling/Storytelling website that has a positive impact on the User Experience. This objective will be achieved by means of a literature research and an analysis of 30 Parallax Scrolling websites. In addition, an own website will be designed and implemented on the basis of the results of said research and analysis. The second objective is to find out what specific User Experience can be elicited by the use of Storytelling and Parallax Scrolling and to what extent the application of the acquired knowledge leads to a successful website. This objective will be achieved by means of a User Experience evaluation of the abovementioned website. Schlüsselwörter/Keywords: User Experience, Storytelling, Parallax Scrolling, Webdesign

3 Eidesstattliche Erklärung Hiermit erkläre ich, Michael Stachurski, an Eides statt, dass ich die Master-Thesis mit dem Titel: User Experience Webdesign: Erzeugen eines positiven Nutzererlebnisses mittels Storytelling und Parallax Scrolling selbstständig und ohne fremde Hilfe verfasst habe. Andere als die von mir angegebenen Quellen und Hilfsmittel habe ich nicht benutzt. Die aus den herangezogenen Werken wörtlich oder sinngemäß entnommenen Stellen sind als solche gekennzeichnet. Ort/Datum Unterschrift

4 Inhaltsverzeichnis 1. Einleitung Einführung User Experience Begriffserklärung Usability und User Experience Storytelling Parallax Scrolling Literatur zu Parallax Scrolling Aufkommender Trend? Mehr als nur ein Effekt User Experience im Webdesign Die dreistufige Hierarchie der Ziele Psychologische Bedürfnisse der Nutzer Experiencing und Experience User Experience formende Website-Elemente Einschränkungen im Web Vier Produktmerkmale Wichtige Eigenschaften der User Experience User Experience Modelle Flow-Konzept Zusammenfassung Geschichten erzählen auf Websites Analyse: Gestaltung von Parallax Scrolling-Websites Untersuchte Merkmale Zusätzliche Merkmale Zusammenfassung der Parallax Scrolling-Gestaltungsprinzipien Realisierung einer Parallax Scrolling-Website Konzeptionsphase Die Geschichte i

5 6.1.2 Grafische Umsetzung Interaktive Animationen Technische Umsetzung Parallax Scrolling Weitere Besonderheiten Anwendung der Ergebnisse der Kapitel 3 bis Zusammenfassung des erarbeiteten Wissens Nutzertest Testpersonen und Nutzungskontext Qualitative Interviews Auswertung der Interviews Ergebnisse AttrakDiff AttrakDiff-Fragebogen Auswertung Zusammenfassung der Ergebnisse Schluss Literaturverzeichnis Anhang A bis H ii

6 Abbildungsverzeichnis Abbildung 1: User Hierarchy of Needs Model... 7 Abbildung 2: Zwei Ausschnitte aus dem ebay-feed Video... 9 Abbildung 3: Parallax Scrolling Ebenen Abbildung 4: unterschiedliche Platzierung der Website-Elemente nach Scroll-Vorgang Abbildung 5: Moon Patrol Abbildung 6: Parallax Scrolling bei Google Trends (März 08 bis August 13) Abbildung 7: Single Page Website Abbildung 8: falsche Parallax Scrolling-Website Abbildung 9: humorvolle 404-Fehlerseite Abbildung 10: UX-Modell basierend auf Hassenzahl und Mahlke Abbildung 11: Lunch atop a Skyscraper (Charles C. Ebbets) Abbildung 12: Website Ben the Bodyguard Abbildung 13: Zwei bildschirmfüllende (22 Zoll Monitor) Parallax Scrolling-Websites Abbildung 14: Scroll-Hinweise durch Pfeil Abbildung 15: Harter Übergang Abbildung 16: Weicher Übergang Abbildung 17: Landschaft ohne Übergang Abbildung 18: Weicher Übergang Abbildung 19: Verschiedene Navigationsmenüs Abbildung 20: Konsistenz in Apple-Website Abbildung 21: Diversität in den Unterseiten Abbildung 22: Kontaktformular-Overlay Abbildung 23: Dynamische Veränderung des Inhalts nach Mausklick Abbildung 24: Bilder-Slideshow Abbildung 25: Tooltip bei Mouse-Over Abbildung 26: Unscharfe Elemente iii

7 Abbildung 27: Layout-Vorgang in Adobe Illustrator Abbildung 28: Interaktive Animation des Busses Abbildung 29: Interaktive Animation eines Videos Abbildung 30: Überraschende Animation bei Mouse-Over Abbildung 31: Geschichtliches Parallax Scrolling-Ereignis Teil Abbildung 32: Geschichtliches Parallax Scrolling Ereignis Teil Abbildung 33: Formen eines Herzens mittels Parallax Scrolling Abbildung 34: Genaue Positionierung mehrerer, sich überdeckender Grafiken Abbildung 35: Ende der Story Abbildung 36: Positive Experience durch Details Abbildung 37: Dynamische Grafik zum Anzeigen des Fortschritts Abbildung 38: Zusätzlicher Text-Inhalt Abbildung 39: Unscharfes Grafik-Objekt Abbildung 40: Ausschnitt aus Transkript iv

8 1. Einleitung 1. Einleitung Das Internet ist ein wichtiger und fester Bestandteil des privaten als auch beruflichen Alltages. Täglich rufen Nutzer eine Vielzahl an unterschiedlichen Websites zur Verfolgung von verschiedenen Zielen auf, wie z. B. dem Beschaffen von Informationen zu einem bestimmten Produkt. In diesem Fall hat die Website die Funktion, den Nutzer auf möglichst benutzerfreundliche Art zu informieren und das Produkt vorzustellen. Doch neben der Funktionalität und der Usability, also der Benutzerfreundlichkeit der Website, ist ein weiterer Aspekt von besonderer Bedeutung die User Experience. Diese beschreibt, vereinfacht ausgedrückt, das Erlebnis der Nutzer und die damit verbundenen Emotionen, die sie während und nach der Benutzung eines Produktes (hier: Website) empfinden. Die von einer Website ausgelöste User Experience entscheidet beispielsweise darüber, ob die Nutzer auf der Seite verbleiben (Lokman 2009, S. 6), welche Entscheidungen sie bezüglich ihres Kaufverhaltens treffen, wie sie den Inhalt aufnehmen und verstehen (vgl. Norman 2005) und ob sie das angebotene Produkt weiterempfehlen (vgl. Meiert 2005). Es ist also von enormer Bedeutung, wie sich ein Nutzer 1 während und nach der Benutzung einer Website fühlt. Eine positive User Experience trägt somit maßgeblich zum Erfolg einer Website bei. Diese Arbeit soll aufzeigen, wie die Techniken Storytelling und Parallax Scrolling im Webdesign einsetzt werden können, um dem Nutzer ein möglichst positives Erlebnis erfahren zu lassen. Im Fokus stehen hierbei Websites, die ein Produkt vorstellen. Diesbezüglich werden zunächst die Begriffe User Experience, Storytelling und Parallax Scrolling in Kapitel 2 einzeln definiert, um ihren Zusammenhang, der im Laufe der Arbeit deutlich wird, besser verstehen zu können. Anschließend wird in den Kapiteln 3 bis 5 durch eine ausführliche und anwendungsorientierte Beschreibung ein konkreter Bezug dieser drei Begriffe zum Webdesign hergestellt. Diese detaillierte Beschreibung basiert auf einer vorangegangenen Literaturrecherche und beinhaltet weiterhin die Analyse von dreißig Parallax Scrolling-Websites, deren Fokus die visuelle Gestaltung der Websites ist. Ziel ist es, ein Fundament an Wissen zu erarbeiten, 1. Selbstverständlich ist damit auch die Nutzerin gemeint. Zwecks Einfachheit soll in dieser Arbeit "der Nutzer" stellvertretend für die weiblichen und männlichen Nutzer stehen. 1

9 1. Einleitung mit dem eine Parallax Scrolling-Website konzipiert werden kann, die den Nutzern ein positives Erlebnis bietet. Der konkrete und praktische Bezug zu dem gewonnenen Wissen wird in Kapitel 6 hergestellt. In diesem Kapitel werden die Konzipierung und Umsetzung einer Parallax Scrolling- Website beschrieben, die die mobile Applikation Urban Storytelling vorstellt. Hierbei wird auch die technische Realisierung skizziert. Die Umsetzung einer Parallax Scrolling- Website soll des Weiteren zusätzliche Erkenntnisse zur Realisierung einer entsprechenden Internetseite liefern. Darüber hinaus wird in Kapitel 7 mit Hilfe eines Nutzertests, der an Hand der in Kapitel 6 erstellten Website erfolgt, erforscht, welches konkrete Erlebnis von Storytelling und Parallax Scrolling während der Benutzung der Website erzeugt wird. Hier soll auch die Frage geklärt werden, ob sich das Nutzererlebnis überhaupt eindeutig dem Storytelling und Parallax Scrolling zuordnen lässt. Zur Beantwortung dieser Fragen werden mittels Leitfaden-Interview Aussagen der Testteilnehmer eingeholt und anschließend interpretiert und ausgewertet. Weiterhin soll der Nutzertest und dessen Auswertung die zuvor erarbeiteten Ergebnisse zur Konzipierung und Realisierung einer Parallax Scrolling-Website überprüfen und ergänzen. Nachfolgend werden die Ziele dieser Arbeit nochmals zusammengefasst: 1. Erarbeiten von anwendbarem Wissen zum Konzipieren und Realisieren einer erfolgreichen 2 Parallax Scrolling-Website mittels Literaturrecherche, Analyse von dreißig Parallax Scrolling-Websites und Umsetzung einer Website 2. Durchführung eines Nutzertests zur Überprüfung und Ergänzung der zuvor erarbeiteten Ergebnisse zur Konzipierung und Realisierung einer Parallax Scrolling-Website zur Ermittlung des Nutzererlebnisses, das beim Einsatz von Storytelling und Parallax Scrolling erzeugt werden kann 2. Erfolgreich meint in diesem Fall die Fähigkeit der Website, eine positive User Experience hervorzurufen 2

10 1. Einleitung Weiterhin werden die erarbeiteten Ergebnisse und somit die Resultate eines jeden Kapitels (außer Kapitel 2) an entsprechender Stelle zusammengefasst. Somit soll das in dem jeweiligen Kapitel erarbeitete Wissen komprimiert dargelegt und hervorgehoben werden. Zusätzlich beinhaltet Anhang H einen Gesamtu berblick der anwendungsorientierten Ergebnisse aller Kapitel. Dieser Überblick wurde stichwortartig verfasst und kann z. B. als Checkliste zur Konzipierung und Realisierung einer Parallax Scrolling-Website verwendet werden. 3

11 2. Einführung 2. Einführung Wie bereits in der Einleitung angesprochen, sollen zunächst die entscheidenden Begriffe User Experience, Storytelling und Parallax Scrolling beschrieben werden. Ein Verständnis darüber muss vorhanden sein, bevor genauer bzw. tiefer auf diese Thematiken eingegangen werden kann. Grund hierfür ist, dass alle drei Begriffe in dieser Arbeit in einem engen Zusammenhang stehen. Anschließend folgt die detailliertere Betrachtung in einem möglichst anwendungsorientierten Kontext. 2.1 User Experience _2.1.1 Begriffserklärung Analog dem Begriff Usability, der sich in der deutschen Sprache etabliert hat und häufig statt Gebrauchstauglichkeit verwendet wird, wird auch das Nutzererlebnis überwiegend als User Experience bezeichnet. In dieser Arbeit werden folglich die Begriffe User Experience und Nutzererlebnis als äquivalent angesehen und dementsprechend verwendet. Viel wichtiger als der Begriff an sich ist natürlich der Inhalt, der sich dahinter verbirgt. Ein Erlebnis hat der Mensch prinzipiell mit jedem Produkt, das er benutzt. Dazu zählen folglich auch einfache Dinge wie beispielsweise eine Ketchup-Flasche. Um den Begriff direkt anschaulich darzustellen, soll nachfolgend ein Beispiel einer User Experience mit einer Ketchup-Plastikflasche beschrieben werden: Tobias möchte seine Pommes gerne mit Ketchup verfeinern. Doch trotz heftigen Drückens der Flasche will einfach nichts herauskommen. So schüttelt Tobias die Flasche mehrmals. Als er sie anschließend wieder drückt, kommt plötzlich eine viel zu große Ladung Ketchup heraus. Verärgert möchte er die Flasche schließen und schneidet sich dabei auch noch an einem angebrochenen, spitzen Stück Plastik. Der Appetit ist ihm endgültig vergangen. Wütend verlässt er die Küche. Die User Experience während der Nutzung der Flasche war in diesem Beispiel eindeutig negativ. Tobias empfand sicherlich Gefühle wie Wut oder Enttäuschung und hat sich vielleicht auch nicht kompetent genug gefühlt, die Plastikflasche zu bedienen. Doch auch nach der Benutzung, also nachdem die Flasche weggestellt wurde, bleiben diese Emotionen spürbar. Dies kann sogar soweit gehen, dass Tobias auf Grund der schlechten Erfahrung bzw. des schlechten Nutzererlebnisses eine Aversion gegen diesen Ketchup entwi- 4

12 2. Einführung ckelt und ihn in Zukunft meidet. Ein positives Nutzererlebnis hätte möglicherweise das Gegenteil erreicht, nämlich eine Präferenz für dieses Produkt. Mit diesem Beispiel ist der Begriff selbstverständlich noch nicht geklärt. Es erwähnt aber schon einen wichtigen Bestandteil der User Experience die Emotionen. Diese sind maßgeblich beim Treffen von Entscheidungen, Lernen, Fällen von Urteilen und vielem mehr (vgl. Norman 2005). Interessant hierbei ist die Tatsache, dass nicht separiert werden kann, wie Menschen denken und fühlen. Kognition und Gefühle sind unmittelbar verbunden. Somit werden Entscheidungen nie wirklich rational getroffen (vgl. Anderson 2011, S. 32). Damit ein Nutzer beispielsweise (gerne) auf einer Website bleibt und (sofern erwünscht) wiederkommt, muss die Website im Stande sein, den Nutzer emotional anzusprechen und somit eine positive User Experience hervorzurufen (vgl. Lokman 2009). Für den Begriff User Experience gibt es zahlreiche Definitionen. So zählt beispielsweise die Website allaboutux.org 3 27 Definitionen aus Literatur und Internet auf. Jede Definition umreißt das Thema grob und ist für sich genommen sicherlich nicht vollständig. Die meisten weisen als Gemeinsamkeit die vom Nutzer wahrgenommenen und sozusagen gefühlten Aspekte auf. Zusätzlich konzentrieren sie sich, im Gegensatz zur Usability, nicht mehr ausschließlich auf Effizienz und Nutzung eines Produktes, sondern gehen darüber hinaus. Lauralee Alben 4 z. B. definierte die User Experience schon vor vielen Jahren wie folgt (vgl. Alben 1996): All the aspects of how people use an interactive product: the way it feels in their hands, how well they understand how it works, how they feel about it while they re using it, how well it serves their purposes, and how well it fits into the entire context in which they are using it. Analog zu den verschiedenen Definitionen gibt es auch unterschiedliche Ansätze von einer Vielzahl von Experten. Der Fokus dieser Arbeit, bezogen auf das Feld der User Experience, liegt auf Marc Hassenzahls 5 Publikationen. Fokus bedeutet aber nicht, dass nur ausschließlich Hassenzahls Ansichten vertreten werden sollen. Diese werden auch mit Erkenntnissen anderer Experten bekräftigt und ergänzt. Die überwiegend allgemein gehal- 3. siehe letzter Abruf Lauralee Alben ist dafür bekannt, menschliche Werte in den Vordergrund des Design und der Technologien zu rücken. 5. Professor für Experience and Interaction an der Universität in Folkwang 5

13 2. Einführung tenen Ansätze (d. h. nicht auf eine bestimmte Technologie fokussiert, wie beispielsweise in Hassenzahl 2010) sollen in dieser Arbeit so weit wie möglich auf den Webbereich übertragen werden. Hassenzahls Werke werden oft zitiert, da er ein angesehener Experte auf diesem Gebiet ist. Er betrachtet das Thema ganzheitlich und rückt vor allem die menschlichen, psychologischen Bedürfnisse in der Vordergrund, wie folgendes Zitat 6 zeigt: Nutzererleben (user experience) [ ] fordert die Passung eines Produkts zu grundlegenden menschlichen Bedürfnissen, wie sozialer Nähe, Kompetenz, Autonomie, oder Stimulation. Gestaltungsziel ist das Wohlbefinden des Benutzers. Beide Ansätze finden ihre Verbindung in der starken Verankerung in Erfahrungswissenschaften, wie der Psychologie, und dem Anspruch auf wissenschaftliche Systematik im Gestaltungsprozess und der wissenschaftlichen Überprüfung von Gestaltungsergebnissen. Im Zusammenhang mit der User Experience ist das User Experience Design von besonderer Bedeutung. Es bezeichnet einen Ansatz, bei dem das gestaltende Erlebnis, also eine bestimmte User Experience, im Vordergrund steht und nicht nur das Produkt an sich und dessen Funktionen. Das bedeutet, dass das zu gestaltende Erlebnis in gewisser Weise vorschreibend sein kann und z. B. beim Design sogar gegen bewährte Prinzipien der benutzerorientierten Gestaltung verstoßen werden kann. Funktionen eines Produktes bzw. Handlungsmöglichkeiten des Nutzers können bewusst ausgeschlossen werden, um ein bestimmtes Erlebnis zu erzeugen (vgl. Thielsch et al. 2009, S. 235; ebenso Kapitel 3 dieser Arbeit). Zu beachten sei an dieser Stelle, dass ein Nutzererlebnis nur bedingt gestaltet werden kann. Dies wird in Kapitel 3 näher erläutert. _2.1.2 Usability und User Experience Da der allgemein bekannte Begriff der Usability schon mehrfach gefallen ist, soll schon an dieser Stelle etwas näher auf den Zusammenhang zwischen Usability und User Experience eingegangen werden. Die Usability befasst sich vordergründig mit Aspekten wie Effizienz, Effektivität, Erlernbarkeit und Ähnlichem. Sie versucht an Hand von Nutzertests, beispielsweise durch Beobachten und Messen (z. B. Zeit für eine Aufgabe, Anzahl von Klicks, usw.), objektive Aussagen zu treffen. Die User Experience hingegen ist subjektiv und die Methoden zum Erfassen bestehen weitgehend aus Befragungen der User, um 6. Das Zitat wurde von der Website der Universität Folkwang entnommen, de/home/gestaltung/lehrende/profil/?mehr=1&detaildozent=367, letzter Abruf

14 2. Einführung deren subjektiven Meinungen und Gefühle in Erfahrung zu bringen (vgl. Hassenzahl 2010, S. 9). Der Aspekt der Subjektivität wird ebenfalls in Kapitel 3 detaillierter beschrieben. Die Usability stellt generell eine Voraussetzung bzw. das Fundament der User Experience dar (vgl. Anderson 2011, S.10). Wenn etwas beispielsweise nicht richtig funktioniert oder nur schwer bzw. umständlich zu bedienen ist, wird das Erzeugen eines positiven Nutzererlebnisses sicherlich erschwert oder gar unmöglich gemacht. Der Zusammenhang kann beispielsweise an Andersons User Hierarchy of Needs Model, das in Abbildung 1 (Quelle: Anderson 2011, S. 10) zu sehen ist, beschrieben werden, ohne dabei auf die einzelnen Aspekte dieser Pyramide einzugehen zu müssen. Abbildung 1: User Hierarchy of Needs Model Vereinfacht ausgedrückt kann man sagen, dass sich der untere Teil der Pyramide auf die Aspekte der Usability bezieht. Es geht hier um objektive und aufgabenorientierte Werte 7

15 2. Einführung wie z. B. Funktionalität und Zuverlässigkeit. Der obere Teil hingegen rückt den Menschen bzw. dessen Bedürfnisse in den Vordergrund und beschreibt subjektive, auf das Erlebnis fokussierte (und somit spürbare ) Aspekte wie die persönliche Bedeutsamkeit des Produktes für den Nutzer und die Fähigkeit des Produktes, beispielsweise Vergnügen bzw. Freude zu verursachen. Somit kann man sagen, dass das Konzept der User Experience die Aspekte der Usability erweitert. Reine Effektivität steht somit nicht mehr im Vordergrund. Das Produkt wird menschengerechter. Ferner ist es möglich, dass sich ein Nutzerlebnis vorteilhaft auf die vom Nutzer wahrgenommene Usability auswirkt. So kann eine positive User Experience teilweise Usability- Fehler kompensieren. Norman (2003, S. 2) sagt diesbezüglich Folgendes: Happy people are more effective in finding alternative solutions and, as a result, are tolerant of minor difficulties. Erfährt der Mensch also positive Gefühle bzw. befindet sich in einem angenehmen oder gar glücklichen Zustand, kann er alternative (Problem)Lösungen finden und wird somit toleranter gegenüber geringfügigen Schwierigkeiten. Natürlich sollte man sich auf diese Tatsache nicht verlassen und es bevorzugen, keine Fehler entstehen zu lassen. Darüber hinaus weist der Begriff positiv im Zusammenhang mit dem Nutzererlebnis prinzipiell eine ungenügende Aussagekraft auf. Es stellt sich hierbei nämlich die Frage, was eigentlich positiv bedeutet. Aus diesem Grund spricht Hassenzahl (2010, S. 29) in diesem Zusammenhang von worthwhile und valuable. Eine positive User Experience ist also stets eine Erfahrung, die für den einzelnen Menschen erstrebenswert bzw. wertvoll ist, da sie seine psychologischen Bedürfnisse befriedigt. Der Ausdruck positive User Experience bezeichnet in dieser Arbeit also folglich ein erstrebenswertes Nutzererlebnis. 2.2 Storytelling Das Storytelling beschreibt eine Methode, bei der Geschichten bewusst eingesetzt werden, um ein bestimmtes Ziel zu erreichen. Es kann beispielsweise bei der Vorstellung eines Produktes oder einer Dienstleistung zum Einsatz kommen. Statt lediglich Fakten und Features eines Produkts zu nennen, werden diese narrativ in eine Geschichte verpackt. Geschichten sind eine Form der Kommunikation, die tief in unserer Psyche verankert ist. Sie stellen somit einen sehr natürlichen Weg zur Kommunikation dar (Quesenbery und 8

16 2. Einführung Brooks 2010, S. 50). Dieser Technik bedient sich beispielsweise u. a. das online Auktionsportal ebay bei der Vorstellung des ebay-feeds. In einem Video 7 wird eine Geschichte über eine Person namens Matt Miller erzählt und somit ganz nebenbei das Produkt vorgestellt. Abbildung 2: Zwei Ausschnitte aus dem ebay-feed Video Zu Beginn des Videos wird Matt vorgestellt (siehe Abbildung 2). Danach beginnt die Story, bestehend aus Voice-Over und Bildern des ebay-feeds. Die Geschichte lautet sinngemäß und gekürzt wiedergegeben wie folgt: Matt hat sich nach einem Aufenthalt in Florenz in alles verliebt, was italienisch ist. Dazu zählen Dinge wie z. B. italienische Skulpturen und Geräte zum Herstellen von Pasta [Produkte, die über ebay erworben werden können]. Matt möchte beständig mehr Italien zu seinem Leben hinzufügen. Aus diesem Zweck gibt er im ebay-feed Italien ein und bekommt genau was er möchte Italien. Er kann sich sofort Dinge wie Espresso-Maschinen und Handtaschen für seine zukünftige, italienische Freundin anschauen und auch kaufen. Natürlich ist ein Mensch wie Matt nicht nur an Italien interessiert, sondern auch an Fotografie, Fußball und mehr [Matt gibt diese Begriffe in den ebay Feed ein]. Je mehr Matt in den Feed eingibt, desto mehr spiegelt er ihn selbst wieder. Bei den Geschichten in Zusammenhang mit Storytelling kommt es nicht unbedingt auf eine ausgefeilte Spannungskurve an, wie auch das ebay-beispiel zeigt. Es geht vielmehr darum, Informationen in eine nachvollziehbare Erzählung zu packen, mit der sich die Nutzer möglichst identifizieren und den Inhalt bildhaft vorstellen können. Dabei werden Figuren (z. B. Matt Miller) in einen passenden (Nutzungs-)Kontext gebracht. Diese Geschichten können u. a. Menschen dabei helfen sich an den Inhalt bzw. Fakten besser zu er- 7. siehe letzter Abruf

17 2. Einführung innern und diese besser zu verstehen. Darüber hinaus können sie unterhalten, die Nutzer involvieren und im Endeffekt dabei behilflich sein, sie u. a. vom Kauf oder der Nutzung eines Produktes zu überzeugen (vgl. Quesenbery und Brooks 2010, S. 8). Ein bedeutsamer Aspekt ist zusätzlich, dass das Storytelling einen effektiven Weg darstellt, den Menschen emotional zu erreichen oder mit anderen Worten, bestimmte Emotionen bei ihm auszulösen (vgl. Inchauste 2010). Folglich ermöglicht der richtige und sinnvolle Einsatz von Storytelling einen positiven Einfluss auf die User Experience. Auf Grund all dieser vielfältigen Funktionen (Verständnis über diverse Sachverhalte erhöhen, trockene Daten menschlicher machen, unterhalten, Nutzer involvieren, Vorstellungskraft/Phantasie aktivieren, Nutzer überzeugen, emotional ansprechen etc.) wird die Technik des Storytellings auf verschiedenen Gebieten eingesetzt, also nicht nur im Zusammenhang mit dem Vorstellen von Produkten oder Dienstleistungen. Es wird beispielsweise auch schon bei der Produkt-Entwicklung eingesetzt oder beim Suchen nach einer Lösung für ein bestimmtes Problem, was letztendlich auch zu einem Produkt führen kann. Aber auch Bildung, Therapie, Rap, Film, Kunst u. v. m. bedienen sich dieser Methode. Neben den verschiedenen Einsatzgebieten gibt es folglich auch verschiedene Wege, eine Geschichte zu erzählen. Sie können mündlich, schriftlich und visuell wiedergegeben werden. Ferner kann man diese Möglichkeiten natürlich kombinieren und somit beispielsweise ein multimediales Erlebnis kreieren. Diese Arbeit konzentriert sich auf das interaktive Storytelling im Web. Da es aber auch hier mehrere Möglichkeiten des Erzählens gibt, liegt der Schwerpunkt auf der geschriebenen Geschichte, die durch grafische Elemente und die Möglichkeit der Interaktion unterstützt bzw. (metaphorisch gesprochen) getragen wird, so dass Website und Story eine Einheit bilden. Im Übrigen kommt auch Storytelling in dieser Arbeit zum Einsatz, um diverse Sachverhalte vereinfacht und anschaulich darzustellen. So wurde bereits in Kapitel 2.1 eine kleine Geschichte über Tobias und seine Ketchup-Flasche erzählt. Zu erkennen ist das Storytelling an einem eingerückten Absatz, der in einer kleineren, Serifenschrift geschrieben ist. 10

18 2. Einführung 2.3 Parallax Scrolling Das Parallax Scrolling basiert auf dem Wahrnehmungsphänomen der Bewegungsparallaxe und stellt ein bewegungsinduziertes Tiefenkriterium dar. Dies bedeutet folglich, dass ein räumlicher Tiefeneindruck entsteht, wenn der Mensch sich bewegt oder beispielsweise den Kopf dreht (vgl. Eiglsperger 2000). Ein häufig genanntes Beispiel stellt in diesem Zusammenhang die Fahrt in einem Zug dar. Blickt der Passagier aus dem Fenster eines fahrendes Zuges, so bewegen sich Objekte, die näher sind, schneller als Objekte, die sich weiter im Hintergrund befinden. Diesen Effekt macht sich das Parallax Scrolling zu Nutze. Scrollt der Nutzer auf einer Website, so bewegen sich die Objekte (z. B. Fotos oder Illustrationen) in unterschiedlichen Geschwindigkeiten und erzeugen somit einen Tiefeneindruck. In Abbildung 3 (Quelle: Hoffmann 2009, S. 274) sind vier Grafiken auf vier unterschiedlichen Ebenen zu sehen. Die Wiese (Grafik 4) befindet sich an vorderster Stelle und würde sich somit beim Scrollen am schnellsten bewegen. Am langsamsten wäre der hinterste Hügel (Grafik 1). Abbildung 3: Parallax Scrolling Ebenen Den konkreten Einsatz auf einer Website zeigt Abbildung 4 8. Auf hinterster Ebene befindet sich das Hintergrundbild, das im unteren Bereich der Abbildung zu sehen ist. Danach folgen das graue Textfeld, die Chipstüte, die Flasche mit rotem und schließlich, auf vorderster Ebene, die Flasche mit grünem Inhalt. Die Objekte verhalten sich nun in Bezug auf 8. Screenshot aus letzter Abruf

19 2. Einführung ihre Geschwindigkeit, mit der sie sich während des Scrollens bewegen, entsprechend ihrer Verteilung auf diesen (Tiefen-)Ebenen. Der rechte Teil der Abbildung zeigt den gleichen Ausschnitt der Website, nachdem gescrollt wurde. Zu erkennen ist beispielsweise, dass die Flasche mit rotem Inhalt die andere überholt hat und dass beide Flaschen sich schneller bewegen, als die Chipstüte. Beim genaueren Betrachten fällt allerdings auf, dass sich das graue Textfeld schneller als die Chiptüte bewegt hat. Das ist nach dem Prinzip der Bewegungsparallaxe unlogisch, da sich die Chiptüte räumlich betrachtet eindeutig vor dem Textfeld befindet. Abbildung 4: unterschiedliche Platzierung der Website-Elemente nach Scroll-Vorgang Diese Technik fand schon vor vielen Jahren in Spielen und Animationen Verwendung. Eines der ersten Computerspiele, das sich des Parallax Scrollings bediente, war das Spiel Moon Patrol (Abbildung 5 9 ) aus dem Jahre Somit wird ersichtlich, dass diese Technik nicht erst in der heutigen Zeit gebraucht wird und man sie schon zu Zeiten, als die Computertechnik vergleichsweise noch nicht so weit fortgeschritten war, verwendet hat. Abbildung 5: Moon Patrol 9. Screenshot aus YouTube-Video letzter Abruf

20 2. Einführung _2.3.1 Literatur zu Parallax Scrolling Es existiert wenig Literatur, die sich mit dem Thema Parallax Scrolling auf Websites befasst. In Büchern, in denen dieses Thema skizziert wird, wird lediglich in wenigen Sätzen erklärt, um was es sich bei Parallax Scrolling handelt. Teilweise wird zusätzlich grob erläutert, wie diese Methode technisch umgesetzt werden kann (vgl. Hoffmann 2009; Shupe 2009; Shankar 2013 u. v. m. ). Im Internet versuchen manche Websites das Thema etwas näher zu beschreiben und bringen es auch in den Zusammenhang mit User Experience und Storytelling. So nennt beispielsweise die bei Internetnutzern beliebte (und bei Google gut auffindbare) Blog-Website eines niederländischen Usability-Unternehmens blog.usabilla.com einige Gründe für die Verwendung von Parallax Scrolling, wie beispielsweise das Involvieren, Unterhalten und Motivieren des Nutzers (vgl. Idler 2012). Auf diese Punkte wird im Laufe der Arbeit näher eingegangen. Auch die bekannte und beliebte Website Smashing Magazine befasst sich mit dieser Thematik und bietet ein wenig mehr, als nur ein paar Sätze zur Erklärung des Begriffes. Es wird z. B. kurz skizziert, dass Parallax Scrolling zu einer interactive storytelling experience (Shepherd 2011) führen kann. Dieser Ausdruck beschreibt gut, dass Parallax Scrolling und Storytelling gewissermaßen zusammengehören. Zusätzlich werden viele, ausführliche Tutorials zur Umsetzung angeboten. 10 Des Weiteren konnten keine wissenschaftlichen Arbeiten gefunden werden, die sich mit diesem Thema befassen und beispielsweise die (emotionale) Wirkung oder Ähnliches auf den Nutzer untersuchen. Gleiches trifft auf die Gestaltung von Parallax Scrolling-Websites zu. _2.3.2 Aufkommender Trend? Im Internet ist oft zu lesen, dass Parallax Scrolling einen aufkommenden Trend im Webdesign darstellt (vgl. Snyder 2012, Meyer 2012). Parallax Scrolling is a technique in web design that is also a trend now and will remain in the upcoming years. Parallax Scrolling is very popular nowadays., schreibt beispielsweise ein Autor (Badayos 2012) in der Design-Community designhash. Gibt man Parallax Scrolling bei Google Trends ein, so 10. Diese Arbeit wird nicht detailliert auf den technischen Hintergrund eingesehen, so wie es beispielsweise ein Tutorial tut. 13

21 2. Einführung bestätigt sich zumindest das steigende Interesse an diesem Thema, wie Abbildung 6 11 zeigt. Abbildung 6: Parallax Scrolling bei Google Trends (März 08 bis August 13) Eine der ersten, bekannten Parallax Scrolling-Websites, die für viel Diskussion im Internet gesorgt hat, ist Nike Better World 12. In diesem Sinne schreibt Shepherd 2011 folgendes in einem Artikel auf Smashing Magazine: Perhaps one of the most talked about websites in the last 12 months has been Nike Better World. It s been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce. Wichtig zu erwähnen ist an dieser Stelle sicherlich, dass es prinzipiell unwichtig ist, ob Parallax Scrolling nun einen Trend darstellt oder nicht Trends kommen und gehen. Viel entscheidender ist die Wirkung von Parallax Scrolling auf den Nutzer und ein sinnvoller und begründeter Einsatz dieser Technik (dazu mehr im Laufe dieser Arbeit). _2.3.3 Mehr als nur ein Effekt Das Parallax Scrolling im Webdesign beschreibt mehr als nur einen Effekt, der einen Tiefeneindruck erzielt. Ein sehr wichtiger Aspekt ist die Art der Websites, auf denen Parallax Scrolling verwendet wird. Hierbei handelt es sich zum größten Teil um sogenann- 11. Screenshot eines Ausschnittes der Google Trends-Website 12. Die Website ist inzwischen offline, kann aber jedoch beispielsweise auf YouTube angeschaut werden. Als Suchbegriff sollte Nike Better World Parallax Scrolling eingegeben werden. Ein direkter Link zu einem Video lautet: letzter Abruf

22 2. Einführung te Single Page Websites (Abbildung 7 13 ). Das bedeutet, dass der komplette Inhalt der gesamten Website auf einer einzigen Seite dargestellt wird und somit mittels Scrollen erreichbar ist. Ein Navigieren über Menüpunkte ist daher nicht notwendig. Diese Methode führt u. a. dazu, dass die Website-Betreiber die Reise durch die Website in einem gewissen Maße bestimmen können. Da eben keine Menüpunkte zur Navigation notwendig und oftmals nicht vorhanden sind, schaut sich der Nutzer im besten Fall die gesamte Website der Reihe nach bzw. von oben nach unten an. Dies kann auch im Zusammenhang mit Storytelling wichtig sein, wenn eine lineare Geschichte erzählt werden soll, die in einer bestimmten Reihenfolge betrachtet werden muss (dies ist oft der Fall beim Storytelling). Zusätzlich führt das Prinzip der Single Page Websites zu teilweise langem Scrollen. Diese Eigenschaft wirkt sich positiv auf das Parallax Scrolling aus, da diese Technik vom Scrollen abhängig ist. Abbildung 7: Single Page Website Der Einsatz von Parallax Scrolling führt des Weiteren zu einer anderen bzw. eigenen Form der Interaktion. Wie bereits erwähnt, wird hauptsächlich gescrollt und weniger bis gar nicht (z. B. auf Menüpunkte) geklickt. Es ist auch denkbar die Website so zu gestalten, dass sozusagen nicht einmal der Mauszeiger bewegt werden muss. Darüber hinaus interagiert der Nutzer mit der Geschichte, u. a. indem er sie durch das Scrollen vorantreibt und auch die Geschwindigkeit des Ablaufes bestimmen kann. Somit sollte der bereits zitierte Ausdruck interactive storytelling experience (Shepherd 2011) an dieser Stelle an Klarheit gewonnen haben. Darüber hinaus kann das Scrollen diverse Vorteile gegenüber dem Paging, also dem Durchklicken von einer Seite zur anderen, aufweisen. Diesbezüglich äußert sich beispielsweise Nielsen (2010b) wie folgt: Scrolling beats paging because it's easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article. Diese Aussage wird ebenfalls von einer Usability-Forschungsinstitut bekräftigt (Baker 2003): Usability studies by the 13. Screenshot aus letzter Abruf

23 2. Einführung Software Usability Research Laboratory s show that users can read long, scrolling pages faster than paginated ones. Their studies confirm that people are accustomed to scrolling. Das Scrollen kann also in diesem Zusammenhang sicherlich die Beibehaltung des Flow-Zustandes (mehr dazu in Kapitel 3.7) fördern. Ist der Nutzer vertieft in die Story bzw. seine Reise durch die Website, wird diese nämlich nicht durch einen Klick auf weiter oder Ähnliches unterbrochen. Ferner bringt Parallax Scrolling zwangsläufig Bewegung in eine Website. Die Seite wird also schon allein durch die Verwendung dieser Methode weniger statisch, also dynamischer und dadurch gewissermaßen lebhafter. Dieser Aspekt kann sich ebenfalls positiv auf die User Experience auswirken, wie der Nutzertest (siehe Kapitel 7) zeigen wird. Natürlich gibt es auch die Möglichkeit, den Tiefeneffekt dezenter auf einer konventionellen Website zu verwenden. Beispielsweise erzeugt das Wordpress-Theme Hero 14 nur im Header einen Tiefeneindruck mittels Parallax Scrolling. Anders ausgedrückt bedeutet das, dass sich die komplette Gestaltung dieses Themes bzw. dieser Website nicht am Parallax Scrolling orientiert. Der Fokus dieser Arbeit liegt jedoch auf Parallax Scrolling Single Page Websites, die diese Methode nicht nur als Effekt verwenden, sondern sie sinnvoll und begründet mit der gesamten Seite verschmelzen lassen und sich dem Storytelling bedienen. Parallax Scrolling führt folglich in diesem Fall gewissermaßen zu einer unkonventionellen Darstellung der Website. Eine unkonventionelle Darstellung hat im Übrigen gute Chancen, stimulierend auf den Nutzer zu wirken (vgl. Van Schaika & Lingb 2008, S. 425). Abschließend soll noch darauf hingewiesen werden, dass im Internet oftmals die Rede von Parallax Scrolling-Websites ist, obwohl es sich streng genommen nicht um Parallax Scrolling handelt. Es geht meistens um Single Page Websites, bei denen ebenfalls das Scrollen im Vordergrund steht, da zum einen oftmals die gesamte Interaktion dadurch stattfindet und zum anderen diverse, teils aufwändige Animationen dadurch ausgelöst werden. Jedoch wird kein Tiefeneindruck basierend auf der Bewegungsparallaxe erzeugt. Eines der 14. Live-Beispiel des Themes unter: letzter Abruf:

24 2. Einführung vielen Beispiele hierfür ist die Internetseite bagigia.com (Abbildung 8 15 ). Während der Nutzer scrollt, dreht sich die Tasche in Abhängigkeit der Scroll-Geschwindigkeit. Jedoch entsteht an keiner Stelle ein Tiefeneindruck bzw. Parallax-Effekt. Trotzdem wird diese Website auf mehreren Internetseiten 16 als Parallax Scrolling- Website bezeichnet. Bei den im Rahmen dieser Arbeit untersuchten Websites handelt es sich ausschließlich um echte Parallax Scrolling-Websites. Abbildung 8: falsche Parallax Scrolling-Website 15. Screenshot aus letzter Abruf z. B. auf websites-inspiration/35-interactive-parallax-scrolling-website-designs; parallax-scrolling-where-form-meets-function,letzter Abruf [alle]

25 3. User Experience im Webdesign 3. User Experience im Webdesign Da diese Arbeit die Ansätze des User Experience Designs auf das Web transferiert, soll zunächst genau geklärt werden, welche Kategorie von Websites im Vordergrund steht. Webseites können schließlich unterschiedliche Funktionen erfüllen. So gibt es beispielsweise Online-Shops, die dem Verkauf von Produkten dienen, Websites, die unterhalten (z. B. YouTube), Web-Applikationen (z. B. Google Docs, Dropbox, diverse E- Mail-Anbieter), Online-Banking und vieles mehr. Eine gewisse Abgrenzung ist somit unerlässlich, da bei jeder Website-Kategorie unterschiedliche Dinge mehr oder weniger relevant sind. Wie bereits in der Einleitung angesprochen, konzentriert sich diese Arbeit auf Websites, die über ein Produkt informieren bzw. ein Produkt vorstellen. Ein Grund hierfür ist u. a., dass das Parallax Scrolling gerade für diese Zwecke bestens geeignet ist. In diesem Sinne stellt die Website, die basierend auf den Erkenntnissen dieser Arbeit erstellt wird (siehe Kapitel 6), die mobile Applikation Urban Storytelling vor. Diese Fokussierung bedeutet jedoch nicht, dass die Erkenntnisse nicht auf andere Website-Kategorien übertragen werden können, da vieles trotzdem allgemein gehalten und somit allgemein gültig oder übertragbar ist. Weiterhin sei daran erinnert, dass in diesem Kapitel größtenteils auf Hassenzahls allgemeine (d. h. auf keine Technik fokussierte) Ansätze zurückgegriffen wird und diese auf das Web transferiert werden. Des Weiteren ist es wichtig zu wissen, dass der Begriff Webdesign nicht nur die visuelle Gestaltung einer Website beschreibt, wie das Wort möglicherweise vermuten lässt. Webdesign ist vielmehr ein multidisziplinäres Tätigkeitsfeld, das u. a. die komplette Planung und Umsetzung der Website umfasst, was wiederum Tätigkeiten wie beispielsweise Zielgruppenanalyse, Strukturieren von Informationen, visuelle Gestaltung, technische Umsetzung u. v. m. beinhaltet. Obwohl das Thema User Experience auch im Web von großer Bedeutung ist, liest man oftmals in Büchern über Webdesign hauptsächlich von Usability und die damit verbundene Notwendigkeit von Einfachheit, Schnelligkeit und Ähnlichem. Die komplexen Aspekte der User Experience werden dabei oft wenig bis gar nicht beachtet (vgl. Stiegert 2011, Hoffmann 2009, Jacobsen 2011, Arndt 2006). Deswegen muss man etwas genauer suchen, um Literatur zu finden, die sich mit dieser Thematik auseinandersetzt. Nichtsdestotrotz legen sinnvollerweise viele Website-Betreiber, neben Usability, einen großen Wert 18

26 3. User Experience im Webdesign auf eine positive User Experience. In diesem Zusammenhang wird oftmals Mailchimp (ein Dienst zum Versenden von Newslettern) als positives Beispiel genannt (vgl. Anderson 2011, S. 57). Die Betreiber von Mailchimp haben beispielsweise großen Wert auf Details, Bilderwelten und Humor gelegt, um somit ein positives Nutzererlebnis zu erzeugen. Weiterhin finden sich immer öfter humorvoll gestaltete 404-Fehlerseiten im Internet. Statt lediglich darüber zu informieren, dass die gewünschte Seite nicht gefunden wurde, wird versucht, aus der eigentlich dadurch resultierenden negativen Emotion eine positive zu formen. Die Website tinsanity.net (Abbildung 9 17 ) z. B. zeigt ein Maskottchen, das panisch durch das Bild läuft und dabei schreit. Zusätzlich wird dem Nutzer Folgendes mitgeteilt: You just got 404 d - the page you are looking for does not exist. Sorry : ( Weitere Beispiele, die das positive Nutzererlebnis in den Vordergrund stellen, zeigen selbstverständlich die Parallax Scrolling-Websites, auf die im Laufe dieser Arbeit näher eingegangen wird. Abbildung 9: humorvolle 404-Fehlerseite Thielsch (2008, S. 32) sagte schon vor einigen Jahren Folgendes zu dieser Thematik: Im Produktdesign findet sich seit mehreren Jahren ein Trend, neben der Benutzbarkeit weitere, emotionsbezogene Aspekte zu betrachten. Das ebenfalls bei der Rezeption von Websites Faktoren jenseits der reinen Usability eine Rolle spielen, scheint für viele Autoren inzwischen Konsens zu sein. Somit sollte ersichtlich sein, dass das Thema User Experience heutzutage eine wichtige und gar entscheidende Rolle im Webdesign spielt. Es trägt maßgeblich zum Erfolg oder Misserfolg einer Website bei. In den nachfolgenden Kapiteln wird nun tiefer auf die Theorie der User Experience bzw. des User Experience Designs eingegangen. Begonnen wird mit der dreistuffigen Hierarchie der Ziele. 17. Screenshot aus letzter Abruf

27 3. User Experience im Webdesign 3.1 Die dreistufige Hierarchie der Ziele Der ganzheitliche Ansatz der User Experience erfordert einen bestimmten Umgang mit der dreistufigen Hierarchie der Ziele, die der Nutzer beim Umgang mit Interaktiven Systemen verfolgt 18. Ziele stellen in diesem Fall Handlungen dar, die ein Mensch mit interaktiven Systemen, wie beispielsweise einer Website, ausüben möchte. Nachfolgend sollen die drei Arten der Ziele kurz beschrieben und anschließend in einem Beispiel veranschaulicht werden. Die drei Arten von Zielen lauten wie folgt (vgl. Hassenzahl 2010, S. 22; Fischbein 2010): Be-Goals Motivation: Warum tut der Nutzer etwas; warum nutzt er das Produkt/die Website? Do-Goals Handlungsziele: Was möchte der Nutzer erreichen bzw. was möchte der Nutzer mit dem Produkt/der Website erreichen? Motor-Goals Motorische Ziele: Wie erreicht der Nutzer es? Beim Entwickeln von interaktiven Systemen liegt der Fokus in vielen Fällen bei den Punkten Do- und Motor-Goals. Hierbei stellen oftmals Usability und Funktionalität des Produktes die wichtigsten Aspekte dar. Beim User Experience Design hingegen wird zusätzlich die Be-Goals-Ebene hinzugezogen und sogar in den Vordergrund gerückt. Be-Goals motivieren das menschliche Handeln bzw. stellen Beweggründe zur Nutzung von Produkten dar. Konkret ausgedrückt handelt es sich bei den Be-Goals um psychologische Bedürfnisse der Nutzer, deren Befriedigung zu einer positiven User Experience führt. Zu diesen menschlichen, psychologischen Bedürfnissen zählt z. B. das Bedürfnis nach Kompetenz (sich fähig fühlen), Zugehörigkeit (Bedürfnis nach Nähe zu anderen Menschen) und Stimulation (z. B. überrascht und unterhalten werden). Da diese Bedürfnisse eine entscheidende Rolle im User Experience Design spielen, wird im anschließenden Kapitel detaillierter auf sie eingegangen. 18. englisch: A three level hierarchy of goals (siehe Hassenzahl 2010, S. 22) 20

28 3. User Experience im Webdesign Do-Goals stellen konkrete Handlungsziele oder anders ausgedrückt Absichten dar. Ein Beispiel dafür wäre in diesem Kontext das Surfen im Internet. Demgegenüber beschreiben Motor-Goals, welche Handlungen dazu nötig sind, um die Do-Goals zu erreichen. In diesem Beispiel wäre für das Surfen im Internet das Aufrufen eines Browser mittels Mausklick, das Eingeben einer URL per Tastatur, das Klicken und Scrollen und Ähnliches notwendig. Zur Verdeutlichung des Zusammenhangs dieser drei Ziele soll nachfolgend ein vereinfachtes Beispiel genannt werden. Britta liest bereits seit Stunden monotone Studien, die relevant für ihre Master-Thesis sind. Sie ist inzwischen sehr gelangweilt (Mangel an Stimulation) und benötigt deswegen nun auf irgendeine Art und Weise Abwechslung und somit Stimulation (Be-Goal). Motiviert von dem Mangel an Stimulation (Be-Goal als Beweggrund zur Nutzung eines Produktes) beschließt sie also eine Website anzusurfen (Do-Goal), die ihr ein Freund empfohlen hat. Dazu stellt sie ihren Laptop auf ihren Schoß, gibt im Browser die URL ein und schaut sich mittels Scrollen und Klicken auf ihrem Touchpad (Motor-Goals) die Website an. Der neuartige 3D-Effekt auf der Parallax Scrolling-Website, die sie sich anschaut, überrascht Britta und weckt ihre Aufmerksamkeit und Neugierde (positiver Einfluss auf Bedürfnis nach Stimulation). Diese Stimulation genießend betrachtet sie neugierig und interessiert die gesamte Website (Motivation zur Weiternutzung auf Grund der Befriedigung des Stimulation-Bedürfnisses) und macht sich anschließend wieder zufrieden an die Arbeit (positive User Experience). Die eigentliche Interaktion mit einem Produkt, in diesem Beispiel mit der Website, findet folglich zwischen Do- und Motor-Goals statt. Hinsichtlich der User Experience sind aber alle drei Ziele bzw. Goals von Relevanz, da sie alle Bestandteil des Nutzererlebnisses sind. Folglich ist es wichtig, die Sicht während des Entwicklungsprozesses einer Website auf das Warum der Interaktion, also das Be-Goal, zu erweitern. Im Optimalfall stellt das Be- Goal sogar den Kernaspekt dar, da es sich hierbei eben um den Grund für die Nutzung eines Produktes handelt. Beim User Experience (Web-)Design steht also das zu kreierende Nutzererlebnis im Vordergrund. In diesem Sinne kann z. B. ein Ziel des Webdesigns sein, den Nutzer mittels Parallax Scrolling und Storytelling und die damit verbundene Befriedigung seines Bedürfnisses nach Stimulation eine positive User Experience erleben zu lassen. 21

29 3. User Experience im Webdesign 3.2 Psychologische Bedürfnisse der Nutzer Wie bereits erwähnt, ist es von großer Bedeutung, auf die psychologischen Bedürfnisse (Be-Goals) der Nutzer einzugehen. Wichtig hierbei ist, dass die Bedürfnisbefriedigung oftmals eher das Ergebnis und nicht das explizite Ziel einer Aktivität ist. Bezogen auf das Beispiel im vorherigen Kapitel bedeutet dies, das Britta die Website möglicherweise gar nicht aufruft, um bewusst ihr Bedürfnis nach Stimulation zu befriedigen, obwohl dieses da ist. Britta verfolgt mit der Aktivität auf Website surfen also nicht explizit das Ziel der Befriedigung ihres Stimulations-Bedürfnisses. Sie möchte sich lediglich ablenken oder hat einfach Lust, sich die Internetseite anzuschauen. Da sie aber einen monotonen Tag hatte, wächst in ihrem Fall das Bedürfnis nach Stimulation, ohne dass sie sich dessen bewusst ist. Durch das Surfen auf der Website wird dieses anschließend unterbewusst befriedigt. Darüber hinaus gibt es Situationen, in denen ein Bedürfnis mehr in den Vordergrund rückt und der Person bewusster wird. Die Befriedigung wird dringender. Ein Beispiel hierfür wäre ein Mensch, der sich spürbar einsam fühlt und deswegen dringend und bewusst sein Bedürfnis nach Nähe zu anderen befriedigen möchte. Hassenzahl (2010, S. 46) nennt zehn wichtige psychologische Bedürfnisse, die prinzipiell von gleicher Bedeutung hinsichtlich des Erzeugens eines positiven Nutzererlebnisses sind. Folglich kann das Befriedigen von Bedürfnissen, die eine Person für sich selbst als unwichtig einstuft, ebenfalls zu positiven Erlebnissen (Sheldon et al. 2001) führen. Das Deutsche Institut fu r Vertrauen und Sicherheit im Internet (DIVSI) beispielsweise teilt Menschen in verschiedene Gruppen bzw. Internet-Sinus-Milieus ein. Im Zusammenhang mit Bedürfnissen dieser Sinus-Milieus finden sich u. a. Aussagen zu den Gruppen Internentferne Verunsicherte (Internet-Gelegenheitsnutzer) und unbekümmerte Hedonisten (unkonventionelle spaßorientierte Nutzer). Erstere haben nach eigenen Aussagen vor allem ein Bedürfnis nach Sicherheit im Internet. Bei letzteren steht das Bedürfnis Stimulation und Selbstverwirklichung im Vordergrund (vgl. DIVSI 2012). Daraus sollte man nach Sheldon et al. (2001) jedoch nicht schließen, dass man beispielsweise nur durch Stimulation und Selbstverwirklichung eine positive User Experience bei den unbekümmerten Hedonisten erzeugen kann. Wie bereits angedeutet, ist hingegen die Dringlichkeit, auf die der Webdesigner natürlich keinen Einfluss hat, entscheidender. Je größer das Verlangen nach einer Befriedigung (bewusst oder unterbewusst) ist, desto positiver ist das damit verbundene Nutzererlebnis (vgl. Hassenzahl 2010, S. 57). Nachfolgend wird auf einige der zehn 22