Invisible Boxes - Why Parts of Your Web Design are Not Seen
•Download as PPTX, PDF•
1 like•623 views
Lisa Fast presented examples of Invisible Boxes in a webinar with Gerry McGovern and at UXCamp Ottawa in November 2014. Invisible boxes are boxes and images in your web page design that simply are seen when people use the site to perform tasks. Lisa explains the digital psychology underpinnings of why the boxes aren't seen (Gestalt principles, Inattentional blindness, priming by ads). Understanding these principles can help you avoid invisible boxes in your web designs.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (11)
Similar to Invisible Boxes - Why Parts of Your Web Design are Not Seen
Similar to Invisible Boxes - Why Parts of Your Web Design are Not Seen (20)
More from Neo Insight
More from Neo Insight (6)
Recently uploaded
Recently uploaded (20)
Invisible Boxes - Why Parts of Your Web Design are Not Seen
- 1. Seeing Outside the Box Why Parts of Your Design Are Invisible
- 2. Lisa Fast @neoinsight Customer Carewords Partners lisa@neoinsight.com
- 3. Great designs are focused on supporting tasks …
- 5. Visual designs can support or sabotage tasks
- 6. Use Digital Psychology Principles to Support Tasks
- 7. Perception Gestalt Principles predict what people notice
- 8. • Financial managers • Human resources managers • Purchasing managers • Insurance, real estate and financial brokerage managers • Managers in health care • Financial auditors and accountants • Financial and investment analysts • Securities agents, investment dealers and brokers • Other financial officers • Civil engineers • Mechanical engineers • Electrical and electronics engineers • Petroleum engineers • Information systems analysts and consultants • Database analysts and data administrators • Software engineers and designers • Computer programmers and interactive media developers
- 9. Financial managers Human resources managers Purchasing managers Insurance, real estate and financial brokerage managers Managers in health care Financial auditors and accountants Financial and investment analysts Securities agents, investment dealers and brokers Other financial officers Civil engineers Mechanical engineers Electrical and electronics engineers Petroleum engineers Proximity Principle
- 10. Financial managers Human resources managers Purchasing managers Insurance, real estate and financial brokerage managers Managers in health care Financial auditors and accountants Financial and investment analysts Securities agents, investment dealers and brokers Other financial officers Civil engineers Mechanical engineers Electrical and electronics engineers Petroleum engineers Similarity Principle
- 11. Managers Financial managers Human resources managers Purchasing managers Insurance, real estate and financial brokerage managers Managers in health care Similarity Principle Finance Financial auditors and accountants Financial and investment analysts Securities agents, investment dealers and brokers Other financial officers Engineers Civil engineers Mechanical engineers Electrical and electronics engineers Petroleum engineers
- 12. Managers Financial managers Human resources managers Purchasing managers Insurance, real estate and financial brokerage managers Managers in health care Finance Financial auditors and accountants Financial and investment analysts Securities agents, investment dealers and brokers Other financial officers Engineers Civil engineers Mechanical engineers Electrical and electronics engineers Petroleum engineers Computing Information systems analysts and consultants Database analysts and data administrators Software engineers and designers Computer programmers and interactive media developers Common Region Principle
- 13. Managers Financial managers Human resources managers Purchasing managers Insurance, real estate and financial brokerage managers Managers in health care Finance Financial auditors and accountants Financial and investment analysts Securities agents, investment dealers and brokers Other financial officers Engineers Civil engineers Mechanical engineers Electrical and electronics engineers Petroleum engineers Computing Information systems analysts and consultants Database analysts and data administrators Software engineers and designers Computer programmers and interactive media developers Common Region Principle
- 16. Risk: Boxes Influence Perception Excperpted from 100 Things Every Designer Should Know about People,Susan Weinschenk http://www.creativepro.com/files/downloads/20110601.pdf
- 17. Proximity No Similarity Page is a Common Region
- 19. Perception What we notice Attention What we focus on
- 20. Attention – will you notice something unexpected?
- 21. https://www.youtube.com/watc h?v=IGQmdoK_ZfY Daniel Simons on You Tube at: https://www.youtube.com/channel/UCoUA-CpKaFCCV2Uz__qNJZwAww See also: https://www.youtube.com/watch?v=b7LuvAM6XLg
- 22. 50% don’t see it “We experience far less of our visual world than we think we do….” - C. Chabris, D. Simons, ‘The Invisible Gorilla and Other Ways Our Intuitions Deceive us’
- 23. 75% think they will notice
- 24. 100% of web designers think you will see everything
- 25. Inattentional Blindness: focus attention on the expected
- 26. What IS expected? Next step of task is on BODY of page 2006, Nielsen F-Shaped Pattern
- 27. 1. Perception + Box is a separate region + Box isn’t in close proximity + Box looks dissimilar 2. Attention + Box is in unexpected location = Invisible
- 28. Errors dropped 75% - Applied Similarity (Color) & Proximity
- 29. Perception What we notice Attention What we focus on Memory What we remember consciously and unconsciously…
- 30. Q: What do ‘other sites’ do that impacts behaviour on your site?
- 32. Behaviour ‘primed’ by ad exposure
- 33. “There’s nothing obvious telling me this is somewhere I could report a fraud.”
- 34. Ignored in the past = less likely to see in the future http://www.journalofvision.org/content/11/11/159.short
- 35. Tullis Study 1: Messages with and without Images A B C D From: ‘Are People Drawn to Faces on Web Pages’ http://dl.acm.org/citation.cfm?id=1520641
- 36. Heatmaps (red = most time looking)
- 37. Least ‘Box-Like’ = More Looks & More Successful Clicks Total Number of Fixations Total Fixation Time (secs) Number of Clicks Per Design
- 38. Focus Attention on the Task & Direct It Tullis, Siegel & Sun 2009
- 39. 1. Perception + Task step in a box 2. Attention + Box is in unexpected location 3. Priming + Box looks like an ad = Really Invisible!
- 40. What to do?
- 41. 1. Apply perceptual principles appropriately
- 43. 2. Recognize you have illusions about attention
- 44. Challenge your illusions sign up at whichtestwon.com
- 45. Think about what’s expected
- 46. 3. Avoid using images for task steps
- 47. 4. Avoid anything that looks like an ad
- 48. 5. Most important: test test test
- 49. Now go check your site for: