Does your website make your users fat?
Transcript of Does your website make your users fat?
Does Your
Website Make
Your Users Fat?
Reducing User's Cognitive Load
With Easy To Ingest Web Design
LITA 2014 Forum
Zoë Chao
Memorize
7 numbers
Memorize
2 numbers
Shiv, B., & Fedorikhin, A. (1999). Heart and mind in conflict: The interplay of affect and cognition in consumer decision making. Journal of consumer Research, 26(3), 278-292.
vs
“The dogs required to exert self-control
(i.e., inhibit behavior) appeared to have
depleted some important resource, which
led to decreased persistence on the
unsolvable task. By contrast, the dogs not
required to exert self-control did not
deplete this resource and persisted for a
longer duration.”
Miller, H. C., Pattison, K. F., DeWall, C. N., Rayburn-Reeves, R., & Zentall, T. R. (2010). Self-control
without a “self”? Common self-control processes in humans and dogs. Psychological Science.
Affective
Feelings
Impulsive self
Emotional side
“Heart”
Cognitive
Thoughts
Prudent self
Rational side
“Head”
Nielsen, J. (1999). User interface directions for the web. Communications of the ACM, 42(1), 65-72.
“Content is king. Even though I was often
testing sites to evaluate their interaction
design, the test users were far more
focused on the actual page content. Most
users don’t go to the Web to “have an
experience” or to enjoy the site designs:
the UI is the barrier through which they
reach for the content they want.”
USABILITY GOALS
Learnability
Efficiency
Memorability
Errors (as in low error rate)
Satisfaction
Nielsen, J. (1994). Usability engineering. Elsevier.
Affective
Design
Experience/having fun
Aesthetics
Creative
Cognitive
Content
Usability
Information architecture
Conventional
visceral designthe immediate perception, appearances
behavioral designthe functional and usable properties
reflective designthe user’s subsequent opinion about the product
Norman, D. A. (2013). The design of everyday things. Basic books.
“Good feelings increase the
tendency to combine material
in new ways and to see
relatedness between
divergent stimuli.”
Isen, A. M., Daubman, K. A., & Nowicki, G. P. (1987). Positive affect facilitates creative
problem solving. Journal of personality and social psychology, 52(6), 1122.
“Beauty was an important
predictor of the Overall
Impression.”
“[W]hen the same content is presented
using different levels of aesthetic
treatment, the content with a higher
aesthetic treatment was judged as
having higher credibility.”
Robins, D., & Holmes, J. (2008). Aesthetics and credibility in web site
design. Information Processing & Management, 44(1), 386-399.
Schenkman, B. N., & Jönsson, F. U. (2000).
Aesthetics and preferences of web pages.
Behaviour & Information Technology, 19(5),
367-377.
“The visual aesthetics that
frame and define content are
much more than simply a ‘skin’
that we can apply or discard
without consequence. ”
Lynch, P. (2009). Visual decision making. A List Apart: For People Who Make Websites, 286.
http://alistapart.com/article/visual-decision-making
Williams, R. (2004). The non-designer's design book. Peachpit Press. SUPER USEFUL!
Proximity
Alignment
Repetition
Contrast
Proximity
Alignment
Repetition
Contrast
Williams, R. (2004). The non-designer's design book. Peachpit Press.
Lim, R. W., & Wogalter, M. S. (2000, July). The position of static and on-off banners in WWW
displays on subsequent recognition. In Proceedings of the Human Factors and Ergonomics
Society Annual Meeting (Vol. 44, No. 4, pp. 420-423). SAGE Publications.
B A N N E R
7 +/- 2 “chunks” of information
Miller, G. A. (1956). The magical number seven, plus or minus two: some limits on our capacity for
processing information. Psychological review, 63(2), 81.
512 documents
3 levels
8 links per level16 top level,
32 second level
Larson, K., & Czerwinski, M. (1998, January). Web page design: Implications of memory, structure and
scent for information retrieval. In Proceedings of the SIGCHI conference on Human factors in computing
systems (pp. 25-32). ACM Press/Addison-Wesley Publishing Co.
32 top level,
16 second level
Tuch, A. N., Bargas-Avila, J. A., & Opwis, K. (2010). Symmetry and aesthetics in website
design: It’s a man’s business. Computers in Human Behavior, 26(6), 1831-1837.
Proximity
Similarity
Closure
Symmetry
Common fate
Continuity
…
{ } [ ] <
>
Gestalt
The whole is greater than the sum of its parts.
“High quality typography
appears to induce a positive
mood, similar to earlier mood
inducers such as a small gift or
watching a humorous video.”
Larson, K., & Picard, R. (2005, February). The aesthetics of reading. In Appears in Human-
Computer Interaction Consortium Conference, Snow Mountain Ranch, Fraser, Colorado.
Bonnardel, N., Piolat, A., & Le Bigot, L. (2011). The impact of colour on Website appeal and
users’ cognitive processes. Displays, 32(2), 69-80.
Tube Map
Patterson, R. E., Blaha, L. M., Grinstein, G. G., Liggett, K. K., Kaveney, D. E., Sheldon, K. C., ... &
Moore, J. A. (2014). A human cognition framework for information visualization. Computers &
Graphics, 42, 42-58.
“Using findings and guidelines like
these allow web designers to start
with a good initial design, or prevent
silly mistakes, but it doesn’t
guarantee a useful, usable web site
when all the variables are combined
together into one design.”
Czerwinski, M., & Larson, K. (2002). Cognition and the Web: moving from theory to Web
design (pp. 147-165). Erlbaum: NJ.