Does Your

Website Make

Your Users Fat?

Reducing User's Cognitive Load

With Easy To Ingest Web Design

LITA 2014 Forum

Zoë Chao

Serious Pony

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”

USABILITY USER

EXPERIENCE

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.

http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/

“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.

WHO ARE THE

USERS?

THE COLOUR TEST

Bonnardel, N., Piolat, A., & Le Bigot, L. (2011). The impact of colour on Website appeal and

users’ cognitive processes. Displays, 32(2), 69-80.

Stacked Bar

ThemeRiver

Sunburst

Treemap

Gantt chart

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.

http://googleblog.blogspot.com/2009/03/make-sense-of-your-site-tips-for.html

A B

“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.

THANK YOU!

So now, which one?

Whether it be the sweeping eagle in his

flight, or the open apple-blossom, the

toiling work-horse, the blithe swan, the

branching oak, the winding stream at its

base, the drifting clouds, over all the

coursing sun, form ever follows

function, and this is the law.

Louis Sullivan