Donald Lim
2
3
4
6
7• Decision about whether totrust a website are basedheavily on superficial aspectof UI.[BJ Fogg’s study of website credib...
8Structure of InformationInformation FocusDesign Look of the Site
9• Evolved an efficient way of dealing with the millions ofpieces of sensory information• Most of the information we take ...
10
11Grabs attention:• Attractive• Looking right at thecamera• Large enough to see thefaceHold attention:• Message that is of...
12
13• A person’s response and behavior may vary dependingon the behavior of other people which are salient tothem.• When in ...
14
15Online, when people areuncertain, they look for:• Testimonials• Ratings• ReviewsGood testimonials have thefollowing char...
16• People want to feel that they are growing and acquiringknowledge in a field or gaining skill in a task.• To get sense ...
17Some general behavior pattern:• The shorter the distance togoal, the more motivated• Boost of motivation can betriggered...
18• We end up clicking to various website instead offollowing a linear path to our objective.• 3 Key reasons:A. We are wir...
19
20• Easy to draw attention as it is easy to distract.• But getting people to concentrate on one part may behard.• Things t...
21• Herbert Simon: People operate on a principle called“satisficing”.• Pick the option that is adequate rather than optima...
22• Design website for scan, not read(Steve Krug, Don’t make me think)• Assume people look for shortcuts.• But if shortcut...
23• Mental Model – People’s assumption on how things maywork when they interact with it– Shape behavior– Influence attenti...
24
25• User create models very quickly• Mental models are subject to change with experience• Based on prior experience with s...
26A mental model is therepresentation that a person has inhis mind about the object he isinteracting with.A conceptual mod...
27• Why the distinction matters? Product become hard to learn and usewhen:– Product conceptual model doesn’t match user’s ...
28After learning user mental model to know how it diverges.Training can be done through:A) Contextual Tutorial B) Video
29• People make mistake often, and they don’t like beingwrong• Reality = something always goes wrong.
30
31
32Defensive design (Design for when things go wrong):• Employs validation to check for mistakes before theyfrustrate the u...
33Inline & Contextual Help Slow ConnectionForm Validation & Error Handling On-Site SearchServer Error“Page not found” error
34• Think about what mistake are likely to occur and adjust accordingly• Create a prototype and get real people to use it ...
35• People:1. Made most decisions unconsciously2. Make quick judgment on whether to trust your site3. Look to others when ...
36
Web Design Through The Lens of Psychology
Upcoming SlideShare
Loading in …5
×

Web Design Through The Lens of Psychology

1,014 views

Published on

We think of ourselves as logical and creative.
However, these concept applies only when we are processing information. Fundamentally, there are still some behavior that applies to all of us, and thats how we (humans) are wired. The key intent of this presentation is share more about how our brain are wired and how we process information so we design better interface

Follow me on twitter @limdonald

Published in: Design, Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
1,014
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide
  • A participant in a room, smoke seep in from underneath the doorAction when alone – took actionAction when in a group and no one reacted – no action
  • http://www.youtube.com/watch?v=u6XAPnuFjJc&feature=youtu.be&t=6m43s
  • Human learned that they survive longer and live better if they conserve energy.----- Meeting Notes (19/6/13 18:38) -----How did you guys choose travel insurance?
  • Owner hope they read but knows that what they actually do most of the time is glance, scan some text and click on the first link that catches their interest or resemble the things they are looking for.People look for ways to do things faster in few steps, especially repetitive one.
  • Before the invoice can be padid, it is necessary that the payment date be set earlier than the invoice creation dateEnter an invoice payment date that falls before the invoice creation date
  • Web Design Through The Lens of Psychology

    1. 1. Donald Lim
    2. 2. 2
    3. 3. 3
    4. 4. 4
    5. 5. 6
    6. 6. 7• Decision about whether totrust a website are basedheavily on superficial aspectof UI.[BJ Fogg’s study of website credibility with 2500 participants]Superficial evaluationRequires processingRequires prior experience
    7. 7. 8Structure of InformationInformation FocusDesign Look of the Site
    8. 8. 9• Evolved an efficient way of dealing with the millions ofpieces of sensory information• Most of the information we take in is processedefficiently and quickly – unconsciouslyIs this good or bad?Can I eat it?Dangerous or harmless?
    9. 9. 10
    10. 10. 11Grabs attention:• Attractive• Looking right at thecamera• Large enough to see thefaceHold attention:• Message that is ofrelevance or interest Processing sets in• What are the USP ormessages worthhighlightingFurther engagement• Supported by imagery andkey messages
    11. 11. 12
    12. 12. 13• A person’s response and behavior may vary dependingon the behavior of other people which are salient tothem.• When in doubt, people look for social cues
    13. 13. 14
    14. 14. 15Online, when people areuncertain, they look for:• Testimonials• Ratings• ReviewsGood testimonials have thefollowing characteristics:• More information than just ascore• Tell a story
    15. 15. 16• People want to feel that they are growing and acquiringknowledge in a field or gaining skill in a task.• To get sense of mastery  need to feel progresshttp://www.youtube.com/watch?v=u6XAPnuFjJc&feature=youtu.be&t=6m43s
    16. 16. 17Some general behavior pattern:• The shorter the distance togoal, the more motivated• Boost of motivation can betriggered with illusion ofprogress• Motivation plummets right aftergoal is reach. Need moreincentive to start on the nextone.
    17. 17. 18• We end up clicking to various website instead offollowing a linear path to our objective.• 3 Key reasons:A. We are wired to scan for food, danger or anything that mightaffect us in a positive/negative ways.B. While our central vision may be focusing on a subject, ourperipheral vision scan for hint.C. We can’t multi-task, hence, we get distracted when there aremore than one sensory input.
    18. 18. 19
    19. 19. 20• Easy to draw attention as it is easy to distract.• But getting people to concentrate on one part may behard.• Things that grabs attention or annoy:– Anything that moves (video, animation, scrolling banners)– Photos of people, food, sex and dangerous scenes– Anything that blinks• Use distraction to grab attentions but eliminate themwhen you want people to stay focused.
    20. 20. 21• Herbert Simon: People operate on a principle called“satisficing”.• Pick the option that is adequate rather than optimal• Analyzing all option mayA. not worth the investment orB. not possibleSatisfy + Suffice = Satisfice
    21. 21. 22• Design website for scan, not read(Steve Krug, Don’t make me think)• Assume people look for shortcuts.• But if shortcuts are too hard to figure out, they’ll do it theold way. (perceived effort)• Provide defaults
    22. 22. 23• Mental Model – People’s assumption on how things maywork when they interact with it– Shape behavior– Influence attention– Define how people approach and solve problem
    23. 23. 24
    24. 24. 25• User create models very quickly• Mental models are subject to change with experience• Based on prior experience with something similar,assumption, observation and direct experience with theproduct.• People use them to predict what a product will do andwhat they should do with it.
    25. 25. 26A mental model is therepresentation that a person has inhis mind about the object he isinteracting with.A conceptual model is the actualmodel that is given to the personthrough the design and interface ofthe actual product.
    26. 26. 27• Why the distinction matters? Product become hard to learn and usewhen:– Product conceptual model doesn’t match user’s mental model– When designer didn’t account/study for user’s mental model– When product has multiple user group and conceptual model is design tojust match one user– When conceptual model is not deliberate and designed to matched thehardware and software• Understand the user’s mental model (through task analysis,observation, interview, etc)• Designing a conceptual model to fit user’s mental model (throughinterface design, iteration, validation testing, etc)
    27. 27. 28After learning user mental model to know how it diverges.Training can be done through:A) Contextual Tutorial B) Video
    28. 28. 29• People make mistake often, and they don’t like beingwrong• Reality = something always goes wrong.
    29. 29. 30
    30. 30. 31
    31. 31. 32Defensive design (Design for when things go wrong):• Employs validation to check for mistakes before theyfrustrate the user,• Expands available options based on the user’s impliedintent,• Protects site visitors from server errors and broken linkswith informative messages and• Assists the user before mistakes happen.
    32. 32. 33Inline & Contextual Help Slow ConnectionForm Validation & Error Handling On-Site SearchServer Error“Page not found” error
    33. 33. 34• Think about what mistake are likely to occur and adjust accordingly• Create a prototype and get real people to use it to see what errorsthey made• Write error message in plain language. They need to cover:– That an error has been made and– What is the error– How can it be corrected– Where to go for more help• Use active voice and be direct.• The more costly the mistake, the more you need to do to avoidthem.
    34. 34. 35• People:1. Made most decisions unconsciously2. Make quick judgment on whether to trust your site3. Look to others when they are uncertain (social validation)4. Are motivated by desire for mastery (game mechanics)5. Are easily distracted6. Are inherently lazy (satisfice)7. Have mental model of how something work (familiarity)8. Made mistake (defensive design)
    35. 35. 36

    ×