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