Presentation from Form Function & Class Web Design Conference held by Philippine Web Designers Organization on October 22-23, 2016.
The user experience is a narrative comprised of two kinds of stories: universal and unique stories. Universal stories apply to all users based on common factors between people, while unique stories take into consideration nuances in preferences and behavior brought about by differences in culture, physiology, skills etc. Knowing and designing for universal stories helps you create interfaces that are usable, learnable and satisfying. Catering to unique stories on top of universal ones allow you to refine your solutions even further to tailor experiences to your audiences.
5. Recognize this?
Images from http://www.idownloadblog.com/2014/10/16/instagram-iphone-6-update/
However, this on its own isn’t what instagram’s UX looks like.
7. Recognize this?
Image from Getty Images / Apolega AB
This is what an Instagram user experience looks like. See the difference?
8. ISO 9241-2101
What is UX?
• the perceptions and responses that result from
the use or anticipated use of a product, system
or service.
• includes all the users' emotions, beliefs,
preferences, perceptions, responses, behaviors
and accomplishments that occur before, during
and after use.
Source: International Organization for Standardization (2009). Ergonomics of human system interaction - Part
210: Human-centered design for interactive systems (formerly known as 13407). ISO 9241-210:2009.
25. People are easily frustrated by tasks that are
confusing or require too much effort.
Story #1
Image from leisuregrouptravel.com/tips-for-coping-with-information-overload/
26. Cognitive Load
The mental effort required by the brain to
perceive, process and retain information.
Image by Jon Yablonski. https://blog.prototypr.io/design-principles-for-reducing-cognitive-load-84e82ca61abd
45. Guide users as needed.
Draw their attention to where they should look.
Image from https://instapage.com/blog/landing-page-mistakes/page/2
46. Guide users as needed.
Walk them through complex tasks.
Images from http://blog.jasonshah.org/post/42648846774/mailbox-ux-delivering-subtle-beauty
47. Guide users as needed.
Walk them through complex tasks.
Image from http://blog.usabilla.com/6-design-principles-for-effective-elearning/
48. Get rid of this.
Cognitive Load
Excess Load
• Organize information meaningfully.
• Remove unnecessary elements, tasks or info.
• Guide users as needed.
Ways to Reduce Cognitive Load
49. What are the colors of the mail app
icon on your phone?
Question & Answer # 1
50. Describe the steps you take when
you check your mail on your phone.
Question & Answer # 2
51. How do you check your mail
on your phone?
Question & Answer # 3
52. People are better at doing things than
describing them.
Story # 2
Image from leisuregrouptravel.com/tips-for-coping-with-information-overload/
53. People are better at doing things than
describing how to do them.
Also…
Image from leisuregrouptravel.com/tips-for-coping-with-information-overload/
59. Declarative or Procedural?
Image from http://www.topgear.com.ph/news/motoring-news/lto-website-shows-exactly-
what-s-wrong-with-driver-licensing-examination-a00058-20160224
65. Practice makes perfect.
(Or in this case, ease of use.)
Story # 3
Image from https://waytogo.cebupacificair.com/3-awesome-weather-apps-for-your-smartphone/
66. Don’t break expectations. Be consistent.
Image from http://www.logicearth.com/blog/ux-design-for-elearning-10-tips
68. Leverage familiar patterns.
Image from https://waytogo.cebupacificair.com/3-awesome-
Familiarity on your site/app isn’t isolated. Familiarity with other
apps also affect your procedural knowledge. That’s why people
can generally find their way around a new site/app despite having
never used it before. It’s because they are familiar with how things
work on other sites/apps.
69. Disrupt familiarity ONLY for good reason.
Any change to a system disrupts a user’s familiarity, requiring
them to re-learn it. This can be frustrating especially if they’ve
gotten used to the old system. It’s not that the new one is
difficult to use, but the added cognitive load makes them feel
like it’s more difficult.
70. Disrupt familiarity ONLY for good reason.
That’s also why you feel some difficulty switching between
Android and iOS devices. The patterns are different from what
you might’ve gotten used to before.
75. People spend different amounts of effort to
process information.
Story # 4
Image from http://www.psfk.com/2016/02/compatible-consumers-checkly-nintendo-reddit-fan-matching.html
76. People spend different amounts of effort to
process information.
Story # 4
Image from http://www.psfk.com/2016/02/compatible-consumers-checkly-nintendo-reddit-fan-matching.html
The mental effort required to process information varies between different people.
Physiological traits, intelligence, skill level, nature of work, etc. All these things affect
the amount of effort they need to process stuff. For example, unlike adults, a child will
find it more difficult to read long text.
77. Different users have different learning curves.
Also…
Which means that you have to adapt to these different curves, or focus on one.
78. External factors can affect how people perceive,
process and respond to information.
Story # 5
79. External factors can affect how people perceive,
process and respond to information.
Story # 5
And this is one of the reasons why mobile design is so difficult. Because your
user can literally be ANYWHERE, at ANY TIME. So there are more design
nuances to consider.
80. A person’s internal state affects how they
perceive and process information.
Story # 6
81. A person’s internal state affects how they
perceive and process information.
Story # 6
There are no such things as stupid users, just users who are not at their best.
A calm person will have more patience when learning and processing. But an
agitated person may have less patience and be prone to making mistakes.
Notes
84. UX is not just about making things easier.
It’s about making things better.
85. This can be a good thing.
Cognitive Load
Excess Load
86. Some things are deliberately difficult
to use - and ought to be.
- Don Norman, Design of Everyday Things
87. Image posted by tohster on UX Stack Exchange, http://ux.stackexchange.com/questions/83295/should-you-
always-minimize-cognitive-load
88. Screen capture from http://www.travelandleisure.com/articles/airplane-passenger-tries-to-open-emergency-exit-midflight
Sometimes, we have to deliberately add friction in order to
help our users make better, conscious decisions. Prevent
your users from making careless and costly mistakes.
95. References & Readings:
Greenberg, Saul, Carpendale, Sheelagh, Marquardt, Nicolai, and Buxton, Bill.
Sketching User Experiences (The Workbook). Morgan Kauffman, 2012.
International Organization for Standardization (2009). Ergonomics of human
system interaction - Part 210: Human-centered design for interactive
systems (formerly known as 13407). ISO 9241-210:2009.
Johnson, Jeff. Designing with the Mind in Mind. 2nd ed., Morgan Kauffman, 2014.
Julien, Jordan. Cognition and the Intrinsic User Experience. UX Magazine, 2012.
https://uxmag.com/articles/cognition-the-intrinsic-user-experience.
Accessed 20 Oct 2016.
Leech, Joe. “Psychology for UX and Product Design”. UX Hong Kong. 6 March
2016, Innocentre, Kowloon Tong, Hong Kong. Workshop.
Lidwell, William, Kritina Holden, Jill Butler, and Kimberly Elam. Universal
Principles of Design. Rockport Publishers, 2010.
96. References & Readings:
Nickols, Fred. The Knowledge in Knowledge Management. Distance Consulting,
2012, www.nickols.us/Knowledge_in_KM.htm. Accessed 21 Oct 2016.
Norman, Don. The Design of Everyday Things. Revised and Expanded ed., Basic
Books, 2013.
Spencer, Donna. A Practical Guide to Information Architecture. Five Simple
Steps, 2011.
Weinschenk, Susan. 100 Things Designers Should Know About People. New
Riders, 2011.
Yablonski, Jon. Design Principles for Reducing Cognitive Load. Prototypr.io,
2015. blog.prototypr.io/design-principles-for-reducing-cognitive-
load-84e82ca61abd. Accessed 20 Oct 2016.