Embed Size (px)
Citation preview
Using Stories To Design Interfaces
! ! ! ! !
! ! ! ! !
! ! ! ! !
!
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
! ! ! ! ! !
! ! ! ! !
! ! ! ! !
! ! !
Image from http://keystonemarketing.ca/10-things-to-increase-business-value/
Recognize this?
Images from http://www.idownloadblog.com/2014/10/16/instagram-iphone-6-update/
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.
Recognize this?
Image from Getty Images / Apolega AB
Recognize this?
Image from Getty Images / Apolega AB
This is what an Instagram user experience looks like. See the difference?
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.
= Interface
= Experience
= Interface
Interface User Context
= Interface
=
= Narrative
= Interface
The user experience is a narrative of how a person interacts with your product/service.
The user experience is a collection of stories of how a person interacts with your product/service.
The interfaces you create can make or break the narrative.
Image from https://dribbble.com/shots/2466019-Dispatch-Health-App-Screens
This is their improved version, after the recent update.
Analyse the narrative and make decisions accordingly.
Image from Sketching User Experiences (The Workbook). Morgan Kauffman, 2012.
Image (right) © Elena Andreeva / Shutterstock
Universal Unique
TWO KINDS OF STORIES
Universal Stories are applicable to all users.
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/
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
User’s Motivation
Cognitive Load
User’s Motivation
Cognitive Load
Excess Load
User’s Motivation
Cognitive LoadFriction
Excess Load
Excess Cognitive Load• Too many choices • Too much thought required • Lack of clarity
CAUSED BY:
User’s Motivation
Cognitive LoadFriction
Excess Load
Some Ways to Reduce Cognitive Load
• Organize information meaningfully.
• Remove unnecessary elements, tasks or info.
• Guide users as needed.
Organize information meaningfully.Distinguish sets of information from each other.
Organize information meaningfully.Group related information together.
Organize information meaningfully.Establish order and hierarchy.
Remove unnecessary elements, tasks & info.Only ask for what you really need.
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/
Remove unnecessary elements, tasks & info.Automate tasks that require extra effort.
Remove unnecessary elements, tasks & info.Automate tasks that require extra effort.
Images from https://waytogo.cebupacificair.com/3-awesome-weather-apps-for-your-smartphone/
X
Don’t sacrifice clarity for simplicity’s sake.Guide users as needed.
Don’t sacrifice clarity for simplicity’s sake.Guide users as needed.
Guide users as needed.Draw their attention to where they should look.
Image from https://instapage.com/blog/landing-page-mistakes/page/2
Guide users as needed.Walk them through complex tasks.
Images from http://blog.jasonshah.org/post/42648846774/mailbox-ux-delivering-subtle-beauty
Guide users as needed.Walk them through complex tasks.
Image from http://blog.usabilla.com/6-design-principles-for-effective-elearning/
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
What are the colors of the mail app icon on your phone?
Question & Answer # 1
Describe the steps you take when you check your mail on your phone.
Question & Answer # 2
How do you check your mail on your phone?
Question & Answer # 3
People are better at doing things than describing them.
Story # 2
Image from leisuregrouptravel.com/tips-for-coping-with-information-overload/
People are better at doing things than describing how to do them.
Also…
Image from leisuregrouptravel.com/tips-for-coping-with-information-overload/
Procedural Knowledge
Declarative Knowledge
• Facts • Methods
“Describing”• Motor Skills • Mental Skills
“Doing”
Source: Nickols, Fred. The Knowledge in Knowledge Management
Declarative or Procedural?
Image from http://www.aplikante.info/bir-tin-id-tin-number-application/
Declarative or Procedural?
Image from http://voyapon.com/asking-directions-japan-take-look-map/
Declarative or Procedural?
Declarative or Procedural?
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
Declarative or Procedural?
(except for this guy.)
Cognitive Load
Declarative Knowledge
Procedural Knowledge
Declarative knowledge requires more load than Procedural knowledge.
Declarative or Procedural?
A. B.
Procedural Knowledge
Declarative Knowledge
• Facts • Methods
“Describing”• Motor Skills • Mental Skills
“Doing”
Source: Nickols, Fred. The Knowledge in Knowledge Management
Procedural Knowledge
Declarative Knowledge
• Facts • Methods
“Describing”• Motor Skills • Mental Skills
“Doing”
Source: Nickols, Fred. The Knowledge in Knowledge Management
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/
Don’t break expectations. Be consistent.
Image from http://www.logicearth.com/blog/ux-design-for-elearning-10-tips
Provide aids in recall & learning.
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.
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.
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.
Cognitive Load
Declarative Knowledge
Procedural Knowledge
Universal Stories are just a starting point.
Unique Stories
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/
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
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.
Different users have different learning curves.Also…
Which means that you have to adapt to these different curves, or focus on one.
External factors can affect how people perceive, process and respond to information.
Story # 5
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.
A person’s internal state affects how they perceive and process information.
Story # 6
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
Unique Stories require user research to discover the nuances in the stories.
If you must start anywhere, start with user testing.
Image © Samantha Lorraine Chan, 2016
UX is not just about making things easier. It’s about making things better.
This can be a good thing.
Cognitive Load
Excess Load
Some things are deliberately difficult to use - and ought to be.
- Don Norman, Design of Everyday Things
Image posted by tohster on UX Stack Exchange, http://ux.stackexchange.com/questions/83295/should-you-always-minimize-cognitive-load
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.
Analyse the narrative and make decisions accordingly.
Universal Unique
TWO KINDS OF STORIES
Cognitive Load
Declarative Knowledge
Procedural Knowledge
Universal stories incline you to create things that are "easier" to process, use and learn.
Unique stories incline you to refine and tailor things to your users.
Using Stories To Design Interfaces
Use Stories To Design Better Interfaces
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.
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.
