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.

1. Using Stories To Design Interfaces

2. ! ! ! ! !
! ! ! ! !
! ! ! ! !
!
UX Designer
Enjoys collecting design books,
Mew cards and rocks.
HERE’S WHAT I DO
Interface Design
Info Architecture
UX Research
Usability Testing
Systems Design
Systems Analysis
Product Design
Teaching
Sam Lorraine Chan
! - years of experience
! ! ! ! ! !
! ! ! ! !
! ! ! ! !
! ! !

3. Image from http://keystonemarketing.ca/10-things-to-increase-business-value/

4. Recognize this?
Images from http://www.idownloadblog.com/2014/10/16/instagram-iphone-6-update/

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.

6. Recognize this?
Image from Getty Images / Apolega AB

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.

9. = Interface

10. = Experience
= Interface

11. Interface
User
Context
= Interface
=

12. = Narrative
= Interface

13. The user experience is a narrative of how
a person interacts with your product/service.

14. The user experience is a collection of stories of how
a person interacts with your product/service.

15. The interfaces you create can make
or break the narrative.
Image from https://dribbble.com/shots/2466019-Dispatch-Health-App-Screens

20. This is their improved version, after the recent update.

21. Analyse the narrative and make
decisions accordingly.
Image from Sketching User Experiences (The Workbook). Morgan Kauffman, 2012.

22. Image (right) © Elena Andreeva / Shutterstock
Universal Unique
TWO KINDS OF STORIES

23. Universal Stories are applicable to all users.

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

27. User’s Motivation
Cognitive Load

28. User’s Motivation
Cognitive Load
Excess Load

29. User’s Motivation
Cognitive LoadFriction
Excess Load

30. Excess Cognitive Load
• Too many choices
• Too much thought required
• Lack of clarity
CAUSED BY:

34. User’s Motivation
Cognitive LoadFriction
Excess Load

35. Some Ways to Reduce Cognitive Load
• Organize information meaningfully.
• Remove unnecessary elements, tasks or info.
• Guide users as needed.

36. Organize information meaningfully.
Distinguish sets of information from each other.

37. Organize information meaningfully.
Group related information together.

38. Organize information meaningfully.
Establish order and hierarchy.

39. Remove unnecessary elements, tasks & info.
Only ask for what you really need.

40. Remove unnecessary elements, tasks & info.
Automate tasks that require extra effort.
Image from http://babich.biz/designing-more-efficient-forms-structure-inputs-labels-and-actions/

41. Remove unnecessary elements, tasks & info.
Automate tasks that require extra effort.

42. Remove unnecessary elements, tasks & info.
Automate tasks that require extra effort.
Images from https://waytogo.cebupacificair.com/3-awesome-weather-apps-for-your-smartphone/

43. X
Don’t sacrifice clarity for simplicity’s sake.
Guide users as needed.

44. Don’t sacrifice clarity for simplicity’s sake.
Guide users as needed.

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/

54. Procedural
Knowledge
Declarative
Knowledge
• Facts
• Methods
“Describing”
• Motor Skills
• Mental Skills
“Doing”
Source: Nickols, Fred. The Knowledge in Knowledge Management

55. Declarative or Procedural?
Image from http://www.aplikante.info/bir-tin-id-tin-number-application/

56. Declarative or Procedural?
Image from http://voyapon.com/asking-directions-japan-take-look-map/

57. Declarative or Procedural?

58. Declarative or Procedural?

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

60. Declarative or Procedural?
(except for this guy.)

61. Cognitive Load
Declarative
Knowledge
Procedural
Knowledge
Declarative knowledge requires more load
than Procedural knowledge.

62. Declarative or Procedural?
A. B.

63. Procedural
Knowledge
Declarative
Knowledge
• Facts
• Methods
“Describing”
• Motor Skills
• Mental Skills
“Doing”
Source: Nickols, Fred. The Knowledge in Knowledge Management

64. Procedural
Knowledge
Declarative
Knowledge
• Facts
• Methods
“Describing”
• Motor Skills
• Mental Skills
“Doing”
Source: Nickols, Fred. The Knowledge in Knowledge Management

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

67. Provide aids in recall & learning.

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.

71. Cognitive Load
Declarative
Knowledge
Procedural
Knowledge

72. Universal Stories are just a
starting point.

73. Unique Stories

74. Unique stories are grounded in universal ones,
but bound by specific users and contexts.
Image (right) © DrAfter123/Getty , Image (left) from www.dialtosave.co.uk/blog/2012/07/
smartphone-shipments-overtake-feature-phones-in-china/

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

82. Unique Stories require user research to
discover the nuances in the stories.

83. If you must start anywhere, start with user testing.
Image © Samantha Lorraine Chan, 2016

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.

89. Analyse the narrative and make
decisions accordingly.

90. Universal Unique
TWO KINDS OF STORIES

91. Cognitive Load
Declarative
Knowledge
Procedural
Knowledge
Universal stories incline you to create things that are
"easier" to process, use and learn.

92. Unique stories incline you to refine and tailor
things to your users.

93. Using Stories To Design Interfaces

94. Use Stories To Design Better Interfaces

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.

97. Sam Lorraine Chan
samlorrainechan@gmail.com
twitter: @samlorrainechan