webdesign -wahrnehmung & aufmerksamkeit-

Web Design : 

Ruben Schenzle und Solveig Meister Web Design Seminar Wahrnehmung & Aufmerksamkeit WS 2007/08 Dipl.-Psych. Raisig

Web Design : 

Ruben Schenzle und Solveig Meister Web Design Web Design Usability Eye Tracking Studie Diskussion

Web Design : 

Ruben Schenzle und Solveig Meister Web Design Wahrnehmung Die Gestaltgesetze Aufmerksamkeit

Wahrnehmung im Web : 

Ruben Schenzle und Solveig Meister Wahrnehmung im Web Wahrnehmung fast ausschließlich über das visuelle System Schnellere Ermüdung der Augen am Bildschirm, als bei gedrucktem Text

Wahrnehmung im Web : 

Ruben Schenzle und Solveig Meister Wahrnehmung im Web Optimal: - strukturierte Menüpunkte - am linken oder oberen Rand der Seite - kontrastreiche Schrift: - schwarz auf weiß - gelb auf schwarz

Gestaltgesetze : 

Ruben Schenzle und Solveig Meister Gestaltgesetze Gesetz der Nähe Gesetz der Ähnlichkeit Gesetz der Geschlossenheit Gesetz der Prägnanz

Gestaltgesetze : 

Ruben Schenzle und Solveig Meister Gestaltgesetze Gesetz der Nähe

Gestaltgesetze : 

Ruben Schenzle und Solveig Meister Gestaltgesetze Gesetz der Ähnlichkeit

Gestaltgesetze : 

Ruben Schenzle und Solveig Meister Gestaltgesetze Gesetz der Geschlossenheit

Gestaltgesetze : 

Ruben Schenzle und Solveig Meister Gestaltgesetze Gesetz der Prägnanz

Slide 11: 

Ruben Schenzle und Solveig Meister Fokussierte Aufmerksamkeit vs. Schwebende Aufmerksamkeit Aufmerksamkeit

Aufmerksamkeit : 

Ruben Schenzle und Solveig Meister Aufmerksamkeit Intensität Farbe Ausnahmegesetz Dissonanzgesetz Biologische Signale Wear-Out Effekt

Intensität : 

Ruben Schenzle und Solveig Meister Intensität

Farben : 

Ruben Schenzle und Solveig Meister Farben

Farbbedeutung : 

Ruben Schenzle und Solveig Meister Farbbedeutung Natur Hoffnung

Ausnahmegesetz : 

Ruben Schenzle und Solveig Meister Ausnahmegesetz Objekt mit stärkerer Intensität zieht unsere Aufmerksamkeit auf sich (Vgl. Intensitätsgesetz) Und hier? Das Quadrat mit der geringeren Intensität (die Ausnahme) erregt unsere Aufmerksamkeit

Dissonanzgesetz : 

Ruben Schenzle und Solveig Meister Dissonanzgesetz

Biologische Signale : 

Ruben Schenzle und Solveig Meister Biologische Signale Bewegung Sog. Eye-Catcher

Biologische Signale : 

Ruben Schenzle und Solveig Meister Biologische Signale Augenpaare Gesichter

Biologische Signale : 

Ruben Schenzle und Solveig Meister Biologische Signale Erotische Reize

Wear-out Effekt : 

Ruben Schenzle und Solveig Meister Wear-out Effekt Bei Wiederholungen passt sich unsere Wahrnehmung sehr schnell an Reize an. Was beim ersten, zweiten und dritten Mal noch neu und spannend ist wird sehr schnell zur Regel - und was der Regel entspricht, versetzt uns nicht mehr in Erstaunen. Beispiele: Popups, Werbebanner

Web Design : 

Ruben Schenzle und Solveig Meister Web Design Die Versuchung bei der Gestaltung einer Internetseite so viele Techniken wie möglich zum Einsatz zu bringen (v.a. Eye-Catcher und Farbe), hat eine geringe Übersichtlichkeit für den Nutzer zur Folge. Es gilt: kontrollierter und gezielter Einsatz

Usability : 

Ruben Schenzle und Solveig Meister Usability Definition Glaubwürdigkeit ISO-Norm als Leitfaden

Usability : 

Ruben Schenzle und Solveig Meister Usability „There are numerous guides on Web design but for the most part, these are based on designer‘s intuition and common sense – with little theoratical or experimental validation.“ Dalal et al. 1999

Definition : 

Ruben Schenzle und Solveig Meister Definition Usability = Bedienbarkeit, (ease of use) Benutzerfreundlichkeit, Verwendbarkeit, Nutzbarkeit, Gebrauchstauglichkeit = die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einem System

Slide 26: 

Ruben Schenzle und Solveig Meister Definition Benutzer, Aufgabe und System optimal aufeinander abstimmen („tuning“) Der Benutzer sollte von der zugrunde liegenden Technik möglichst wenig bemerken

Ergonomie : 

Ruben Schenzle und Solveig Meister Ergonomie ERGONOMIE (gr.) ergon = Arbeit, Werk, Mühe nomas = Gesetz, Regel  Wissenschaft von der Gesetzmäßigkeit menschlicher Arbeit  optimale Schnittstelle Mensch- Maschine

Slide 28: 

Ruben Schenzle und Solveig Meister Ergonomie Kriterien • Aufgabenangemessenheit • Selbsterklärungsfähigkeit (Transparenz, Hilfesysteme) • Systemrückmeldung (verständliches Feedback) • Übereinstimmung mit Erwartungen • Anpassbarkeit an die Aufgabe • leichte Erlernbarkeit (Gisel, 1992)

Ergonomie Kriterien : 

Ruben Schenzle und Solveig Meister Ergonomie Kriterien Ergonomie Kriterien Kompetenzförderlichkeit Anpassbarkeit an den Benutzer Benutzerpartizipation bei der Entwicklung Leichte Bedienbarkeit Fehlerrobustheit (System nie fehlerfrei  OPTIMIERUNG)  ERGONOMIE angesichts der Begrenztheit bewußter visueller Wahrnehmung (selektiver Aufmerksamkeit) besonders wichtig

Ergonomie : 

Ruben Schenzle und Solveig Meister Ergonomie Die MCI – Triade (Mensch-Computer-Interaktion) Aufgabe Benutzer System Funktionalität Aufgabenbewältigung Benutzbarkeit (Frese & Brodeck,1989)

Web Browsing - visuelle Suche : 

Ruben Schenzle und Solveig Meister Web Browsing - visuelle Suche Paradigma: visuelle Suche Webbrowsing  geführte visuelle Suche (guided search) Aufgabe des Usability- Designs

Slide 32: 

Ruben Schenzle und Solveig Meister Kommunikation Allgemeines Kommunikationsmodell: Medium Beziehung Sender Botschaft Empfänger Inhalt   Dialog  an unterschiedliche Benutzertypen angepasst

Gedächtnis : 

Ruben Schenzle und Solveig Meister Gedächtnis Sensorisches Gedächtnis / Ultrakurzzeitgedächtnis 1-2 Sek.  schnell erlöschender „Nachhall“ Kurzzeitgedächtnis/Arbeitsgedächtnis bewusstes Aufnehmen von 7(+/-2) Elementen chunking WEB:5(+/-2) Elemente Langzeitgedächtnis einen Platz im Langzeitgedächtnis, nicht in den bookmarks

Motivation : 

Ruben Schenzle und Solveig Meister Motivation Welche Motive hat der Benutzer?  bestimmte Bedürfnisse bauen(hierarchisch) aufeinander auf

Motivation : 

Ruben Schenzle und Solveig Meister Motivation Bedürfnispyramide (Hierarchie), Maslow, 1943  auf Ebenen des WWWs übertragbar

Lernen und Problemlösen : 

Ruben Schenzle und Solveig Meister Lernen und Problemlösen Training im Umgang mit Webseiten webbrowsing als visuelle Suche zurückgreifen auf selbstangelegte chunks;  konsistent mit der Seitenverlinkung?

Emotionen : 

Ruben Schenzle und Solveig Meister Emotionen Erfolgreiche Suche  Motivation, Freude, Belohnung schön gestaltete Schnittstellen  bessere Benutzbarkeit, höhere Belastbarkeit (u.a. Bettina Langwitz, 2003) „hässliche(re)“ Schnittstellen (Farbkombination)  niederere Belastbarkeit, Stimmungsverschlechterung, Müdigkeit

Slide 38: 

Ruben Schenzle und Solveig Meister “Someone who is relaxed ,happy, in a pleasant mood, is more creative,more able to overlook and cope with minor problems with a device- especially if it is fun to work with.“ (Donald Norman)  Affekte bzw. positive Stimmung  Problemlösefähigkeit

Glaubwürdigkeit : 

Ruben Schenzle und Solveig Meister Glaubwürdigkeit ist immer subjektiv  Für- Wahrhalten eines Inhalts Glaubwürdigkeit  verhaltensorientiert  inhaltsorientiert  quellen- und kontextorientiert (für Webseiten am relevantesten)

Glaubwürdigkeit : 

Ruben Schenzle und Solveig Meister Glaubwürdigkeit „...Die Glaubwürdigkeit einer Webseite steigt, wenn die Menschen und die Organisation, die hinter der Webseite stehen “real“ abgebildet werden.“ (Fogg,B.J.2003.Persuasive Technology)

Usability – ISO- Norm als Leitfaden : 

Ruben Schenzle und Solveig Meister Usability – ISO- Norm als Leitfaden ISO-Norm 9241 Qualitätssicherung von Webseiten durch Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Steuerbarkeit Erwartungskonformität Fehlertoleranz Individualisierbarkeit Lernförderlichkeit

Usability - Praxis : 

Ruben Schenzle und Solveig Meister Usability - Praxis 1. Vermeide lange Seiten mit Scroll-Balken. 2. Verwende kurze Textsegmente mit aussagekräftiger Überschrift. 3. Verlinke nur Internetseiten mit engen inhaltlichen Bezügen zueinander. 4. Verwende im Text so wenig Links wie möglich. 5. Vermeide lange Ladezeiten. 6. Präsentiere auf der ersten Seite eine Übersicht über die Struktur des Hypertextsystems.

Usability- Praxis : 

Ruben Schenzle und Solveig Meister Usability- Praxis 7. Verwende ein Navigations-System, das dem Nutzer Auskunft gibt, wo er sich gerade im Text befindet. 8. Gib zu den bewältigten Aufgaben ein spezifisches Feedback. 9. Verwende hierarchische und keine netzwerkartigen Verlinkungsstrukturen. 10. Gib dem Nutzer die Möglichkeit, sich an den Webadministrator zu wenden. (TU Chemnitz)

Eye Tracking : 

Ruben Schenzle und Solveig Meister Eye Tracking J. Nielsen et al. 2006/07 Untersucht wurden die Augenbewegungen bei der Nutzung des Internet 232 Versuchspersonen über 1000 Websites

Eye Tracking : 

Ruben Schenzle und Solveig Meister Eye Tracking Web-User scannen den Text in einer F-Form Die ersten Zeilen der ersten Abschnitte werden gescannt Die Zeilenanfänge werden gescannt -> Suche nach aussagekräftigen Schlagwörtern

Banner-Blindheit : 

Ruben Schenzle und Solveig Meister Banner-Blindheit Werbebanner werden nicht beachtet Bannerähnliche seiteneigene Elemente werden ebenfalls nicht beachtet

Banner-Blindheit : 

Ruben Schenzle und Solveig Meister Banner-Blindheit

Banner-Blindheit : 

Ruben Schenzle und Solveig Meister Banner-Blindheit 14% 30% 56% Der Versuch die normalerweise meistgesuchte Info hier hervor zu heben, schlug leider fehl: Farbwahl verursachte Banner-Blindheit bei 30% 56% nahmen Info wegen uneindeutiger Wortwahl nicht wahr „Population Clock“, „Quick Facts“

Video Eye-Tracking : 

Ruben Schenzle und Solveig Meister Video Eye-Tracking Dauer: 24 sec

Video Eye-Tracking : 

Ruben Schenzle und Solveig Meister Video Eye-Tracking Internetnutzer unter- scheidet sich vom Fern- sehzuschauer. Internetnutzer ist aktiv auf der Suche nach Info und Unterhaltung

Eye-Tracking : 

Ruben Schenzle und Solveig Meister Eye-Tracking Fazit: interessante Schlagwörter an den Zeilenanfang bewusster Umgang mit Bannern konkrete Wortwahl dem Nutzer Interaktions- möglichkeiten bieten

Quellen : 

Ruben Schenzle und Solveig Meister Quellen  Fogg, B.J.(2003). Persuasive Technology  Ling.J, v.Shaik(2006) Computers in Human Behavior  Nielsen, J.(2004). Designing Web- Usability  Norman, D.A. (1989).die Herausforderung ans Design. Dinge des Alltags  Weber, C.W.(2005). Webdesign- ein neues Feld der Wahrnehmungspsychologie  Wirth, T. (2002). Missing Links- Über gutes Webdesign  http://fit-fuer-usability.de Fraunhofer Institut  http://kommdesign.de  http:useit.com/eyetracking  http://www.psych.uni-mainz.de/abteil/aep/download/forschung  http://psychology.wichita.edu/surl/usabilitynews/41/web_object-ecom.htm

Unser Institut im Web : 

Ruben Schenzle und Solveig Meister Unser Institut im Web http://www.psychologie.hu-berlin.de

Internetpräsenzen anderer Universitäten : 

Ruben Schenzle und Solveig Meister Internetpräsenzen anderer Universitäten Duma, Ulrike & Hecht, Heiko (2006). Die Benutzerfreundlichkeit der Homepages deutscher Universitäten: Ein Internet Usability Vergleich http://www.psych.uni-mainz.de/abteil/aep/download/forschung/

Diskussion : 

Ruben Schenzle und Solveig Meister Diskussion Wo seht ihr innerhalb des Webdesigns ein Betätigungsfeld für (Wahrnehmungs-) Psychologen? Hätte die Eyetracking-Studie in anderen Kultur-kreisen (Ostasien) andere Erkenntnisse geliefert? Vom Web-Design zur virtuellen Welt: Fluch oder Segen? Wer beeinflusst wen (Web 2.0)?

thx 4 ur attention. cu (-: : 

Ruben Schenzle und Solveig Meister thx 4 ur attention. cu (-: