Your SlideShare is downloading. ×
0
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Web Design Through The Lens of Psychology
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Design Through The Lens of Psychology

608

Published on

We think of ourselves as logical and creative. …

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
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
608
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Donald Lim
    • 2. 2
    • 3. 3
    • 4. 4
    • 5. 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. 8Structure of InformationInformation FocusDesign Look of the Site
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 28After learning user mental model to know how it diverges.Training can be done through:A) Contextual Tutorial B) Video
    • 28. 29• People make mistake often, and they don’t like beingwrong• Reality = something always goes wrong.
    • 29. 30
    • 30. 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. 33Inline & Contextual Help Slow ConnectionForm Validation & Error Handling On-Site SearchServer Error“Page not found” error
    • 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. 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. 36

    ×