This document discusses consistency in user experience (UX) design. It argues that consistency provides predictability, learnability and usability which help users achieve their goals. Consistency is needed not just at the interface level, but across interactions and goals. The document recommends establishing a common design vocabulary, creating scenarios before designing screens, collaborating early in the design process, and modularizing and reusing design patterns and components to promote consistency. It provides examples from Google's Material Design and Apple's design guidelines to illustrate best practices for achieving consistency in UX.

1. CONSISTENCY IN UX:
BEYOND THE BUZZWORD
@NirishShakya, UX Lead (NOW TV) & UX Coach and Trainer

2. @NIRISHSHAKYACONSISTENCY
▸ UX Lead @ NOWTV
▸ UX Coach & Trainer
▸ Nepalese Australian
ABOUT ME

4. Why consistency?

5. CONSISTENCY
= PREDICTABILITY
= LEARNABILITY
= USABILITY
= GOAL ATTAINMENT

6. What needs to be
consistent?

8. CONSISTENCY IS
MORE THAN
SCREEN DEEP

9. UX HAS LAYERS

10. 3 LAYERS OF UX
CONSISTENCY

11. CONSISTENCY IN UX @NIRISHSHAKYA
THE ELEMENTS OF USER EXPERIENCE
Jesse James Garrett, the Elements of User Experience http://www.jjg.net/elements/

12. CONSISTENCY IN UX @NIRISHSHAKYA
THE ELEMENTS OF USER EXPERIENCE (SIMPLIFIED)
Interface
Interactions
Goals

13. CONSISTENCY IN UX @NIRISHSHAKYA
CONSISTENCY IN…
Interface
Interactions
Goals

14. COLLABORATIVE
EARLY & OFTEN

15. CONSISTENCY IN UX @NIRISHSHAKYA
HOW COLLABORATION USUALLY HAPPENS
PO UX UI Dev
Requirements Wireframes Visuals

16. CONSISTENCY IN UX @NIRISHSHAKYA
HOW IT USED TO HAPPEN WHEN I WAS A DEVELOPER
PO UX UI Dev
Requirements

17. CONSISTENCY IN UX @NIRISHSHAKYA
Requirements Wireframes Visuals Build
SILOED PROCESS
DeveloperUI designerUX designerProduct owner
Involvement

18. CONSISTENCY IN UX @NIRISHSHAKYA
Wireframes Visuals Build
A MORE COLLABORATIVE PROCESS
DeveloperUI designerUX designerProduct owner
Involvement
Collaborative
ideation
Review Review ReviewReview

19. DESIGN STUDIO
WORKSHOP
VIMEO.COM/37861987
Todd Zaki Warfel
http://www.disneyclips.com/imagesnewb4/images/snowwhite-dwarfs.png

20. Always start on paper.

21. 90% of everything is crap.
Sturgeon’s Law

22. 90% of meetings are crap.
According to Sturgeon’s Law

23. CONSISTENCY IN UX @NIRISHSHAKYA
BAD MEETINGS

24. User Story Mapping, by Jeff Patton (O’Reilly, 2014)

25. CONSISTENCY IN UX @NIRISHSHAKYA
DESIGN STUDIO WORKSHOP
Create
5 mins Pitch
2 mins
Critique
2 mins

26. CONSISTENCY IN UX @NIRISHSHAKYA
THE DESIGN FUNNEL
Idea
Idea
Idea
Idea Idea
Idea
Idea Idea
Idea
Idea
Idea
Easier and
cheaper to fix
More difficult and
expensive to fix
Paper
sketches
Visual designs and UI
Wireframes
Code

27. CONSISTENCY IN UX @NIRISHSHAKYA
CONSISTENCY IN…
Interface
Interactions
Goals

28. CONSISTENCY IN UX @NIRISHSHAKYA
CONSISTENCY IN…
Interface
Interactions
Goals

29. @NIRISHSHAKYACONSISTENCY
WE USE WIREFRAMES AS A YARD STICK FOR OUR WORK

30. IT DOESN’T TAKE A GENIUS TO DESIGN A WIREFRAME

31. @NIRISHSHAKYACONSISTENCY
YOUR REALITY (WIREFRAME) IS SHAPED BY YOUR PERSPECTIVE
BUSINESS
DESIGN
TECH
BRANDING

32. @NIRISHSHAKYACONSISTENCY
WE NEED CONSISTENCY IN PERSPECTIVE
BUSINESS
DESIGN
TECH
BRANDING

33. @NIRISHSHAKYACONSISTENCY
Context of Mobile Interaction
http://www.giantant.com/publications/mobile_context_model.pdf
USER CONTEXT

34. MOBILE FIRST
BEFORE SCREENS
SCENARIOS

35. CONSISTENCY IN UX @NIRISHSHAKYA
WHAT SCENARIOS ARE NOT
Use cases User stories

36. @NIRISHSHAKYACONSISTENCY
▸ Ideal (but plausible) description of the future
interaction of the user with the product
▸ Begins with a trigger
▸ Consists of the user’s goal and the things
the user does to get to the goal
▸ Created using user research data +
storytelling skills
▸ Agnostic to specific solutions or
technologies
WHAT’S A SCENARIO?
Kim Goodwin, Designing in the Digital Age, http://amzn.to/28M7weJ
TRIGGER JOURNEY
GOAL
PERSONA

37. @NIRISHSHAKYACONSISTENCY
▸ They help imagine the future product.
▸ They are based on persona behaviour and
needs.
▸ They capture a sequence of events rather
than a set of screens.
▸ They guide design decisions from a user’s
perspective and not just opinions and
abstract concepts.
WHY SCENARIOS?
TRIGGER JOURNEY
GOAL
PERSONA
Kim Goodwin, Designing in the Digital Age, http://amzn.to/28M7weJ

38. EVERYONE IN THE TEAM SHOULD BE
ABLE TO TELL THE SAME
CONSISTENT STORY ABOUT THE USER
INTERACTING WITH THE PRODUCT.

39. CONSISTENCY IN UX @NIRISHSHAKYA
WE NEED A ‘BUY NOW’
BUTTON RIGHT THERE!
THIS PAGE NEEDS SOME
CROSS-SELL STUFF.
HOW ABOUT A FORM TO GET
THEIR CONTACT DETAILS?
THAT BUTTON NEEDS TO BE
BIGGER AND RED!
MAKE SURE IT’S A
HAMBURGER MENU! HAMBURGER
MENUS ARE COOL.

41. @NIRISHSHAKYACONSISTENCY
AN EXAMPLE SCENARIO & REQUIREMENTS
Scenario Requirements
Harry is logged into his machine on
a Friday. He needs to check the
resourcing across the region to see
how busy each court is. He looks at
the information from each court. He
looks at what trials are in progress
in each court and which trials are
due to start in each court.
Harry notices that one of the courts
has been overbooked. He looks to
find why that has happened. He
sees which individual trials have
been happening in that court.
Harry looks for other courts which
are underbooked to see if he can
move some of the trials from the
overbooked court across. He finds
a court that is not fully booked and
finds the contact details of the
listings officer for that court.
He contacts the listing officer
A list of courts and their schedules
List of trials in progress and due to start for each court
Booking status for each court
Reason for overbooking
List of courts and their schedules
Ability to move trials between courts or to a holding pen
Contact details of the listings officer of a court

42. @NIRISHSHAKYACONSISTENCY
SCENARIOS GIVE US THE CONSISTENCY IN PERSPECTIVE
BUSINESS
DESIGN
TECH
BRANDING
Scenarios

43. @NIRISHSHAKYACONSISTENCY
BUY AND READ THIS BOOK!

44. CONSISTENCY IN UX @NIRISHSHAKYA
CONSISTENCY IN…
Interface
Interactions
Goals

45. CONSISTENCY IN UX @NIRISHSHAKYA
CONSISTENCY IN…
Interface
Interactions
Goals

46. ESTABLISH A COMMON
VOCABULARY

47. CONSISTENCY IN UX @NIRISHSHAKYA
ELEMENTS OF THE VOCABULARY
BRANDING &
COLOURS
TYPOGRAPHY GRIDS LAYOUT
ICONOGRAPHY TONE OF VOICE INTERACTIONS NAVIGATION

48. STAND
ON THE
SHOULDERS
OF GIANTS http://pre01.deviantart.net/bbac/th/pre/f/2014/095/4/7/
the_subway__follow_the_white_rabbit___by_catalinprecup-
d7cc71o.jpg

49. CONSISTENCY IN UX @NIRISHSHAKYA
GOOGLE’S MATERIAL DESIGN
https://material.google.com

50. CONSISTENCY IN UX @NIRISHSHAKYA
APPLE DESIGN GUIDELINES
https://developer.apple.com/design

51. CONSISTENCY IN UX @NIRISHSHAKYA
BRAD FROST’S ATOMIC DESIGN
Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/

52. Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/

53. The periodic table of HTML elements, Josh Duck

54. MODULARISE & RE-USE

55. The evolution of mass production, Ford, http://www.ford.co.uk/experience-ford/Heritage/EvolutionOfMassProduction

56. CONSISTENCY IN UX @NIRISHSHAKYA
OBJECT-ORIENTED PROGRAMMING
Animal
Properties:
brain
legs
nose
Actions:
Walk
Run
Human
Properties:
brain = 1
legs = 2
nose = 1
Actions:
Walk
Run
Laugh
Dog
Properties:
brain = 1
legs = 4
nose = 1
tail = 1
Actions:
Walk
Run
Wag tail
Poodle
Properties:
brain = 1
legs = 4
nose = 1
tail = 1
Actions:
Walk
Run
Wag tail
Boxer
Properties:
brain = 1
legs = 4
nose = 1
tail = 1
Actions:
Walk
Run
Wag tail

57. CONSISTENCY IN UX @NIRISHSHAKYA
ATOMS
Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/

58. CONSISTENCY IN UX @NIRISHSHAKYA
MOLECULES
Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/

59. CONSISTENCY IN UX @NIRISHSHAKYA
ORGANISMS
Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/

60. CONSISTENCY IN UX @NIRISHSHAKYA
TEMPLATES
Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/

61. CONSISTENCY IN UX @NIRISHSHAKYA
PAGES
Atomic Design, Brad Frost, http://atomicdesign.bradfrost.com/

62. CONSISTENCY IN UX @NIRISHSHAKYA
PATTERNS TOOLKIT

63. UX CONSISTENCY IS ABOUT CREATING
A SHARED UNDERSTANDING OF GOALS,
INTERACTIONS AND INTERFACE.

64. CONSISTENCY IN UX @NIRISHSHAKYA
CONSISTENCY IS ABOUT CREATING A SHARED UNDERSTANDING OF…
Interface Establish a common vocabulary
Interactions Scenarios first before screens
Goals Collaborate early and often

65. QUESTIONS?
@NirishShakya
UX Lead (NOWTV), & UX Coach / Trainer