consistency in ux

CONSISTENCY IN UX: BEYOND THE BUZZWORD

@NirishShakya, UX Lead (NOW TV) & UX Coach and Trainer

@NIRISHSHAKYACONSISTENCY

▸ UX Lead @ NOWTV

▸ UX Coach & Trainer

▸ Nepalese Australian

ABOUT ME

Why consistency?

CONSISTENCY = PREDICTABILITY = LEARNABILITY = USABILITY = GOAL ATTAINMENT

What needs to be consistent?

CONSISTENCY IS MORE THAN

SCREEN DEEP

UX HAS LAYERS

3 LAYERS OF UX CONSISTENCY

CONSISTENCY IN UX @NIRISHSHAKYA

THE ELEMENTS OF USER EXPERIENCE

Jesse James Garrett, the Elements of User Experience http://www.jjg.net/elements/

http://www.jjg.net/elements/


THE ELEMENTS OF USER EXPERIENCE (SIMPLIFIED)

Interface

Interactions

Goals


CONSISTENCY IN…

Interface

Interactions

Goals

COLLABORATIVE EARLY & OFTEN


HOW COLLABORATION USUALLY HAPPENS

PO UX UI Dev

Requirements Wireframes Visuals


HOW IT USED TO HAPPEN WHEN I WAS A DEVELOPER

PO UX UI Dev

Requirements


Requirements Wireframes Visuals Build

SILOED PROCESS

DeveloperUI designerUX designerProduct owner

Involvement


Wireframes Visuals Build

A MORE COLLABORATIVE PROCESS

DeveloperUI designerUX designerProduct owner

Involvement

Collaborative ideation

Review Review ReviewReview

DESIGN STUDIO WORKSHOP VIMEO.COM/37861987Todd Zaki Warfel

http://www.disneyclips.com/imagesnewb4/images/snowwhite-dwarfs.png

http://vimeo.com/37861987

Always start on paper.

90% of everything is crap.

Sturgeon’s Law

90% of meetings are crap.

According to Sturgeon’s Law


BAD MEETINGS

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


DESIGN STUDIO WORKSHOP

Create 5 mins Pitch

2 mins

Critique 2 mins


THE DESIGN FUNNEL

IdeaIdea

IdeaIdea Idea

IdeaIdea Idea

IdeaIdea

Idea

Easier and cheaper to fix

More difficult and expensive to fix

Paper sketches

Visual designs and UI

Wireframes

Code


CONSISTENCY IN…

Interface

Interactions

Goals


WE USE WIREFRAMES AS A YARD STICK FOR OUR WORK

IT DOESN’T TAKE A GENIUS TO DESIGN A WIREFRAME


YOUR REALITY (WIREFRAME) IS SHAPED BY YOUR PERSPECTIVE

BUSINESS

DESIGN

TECH

BRANDING


WE NEED CONSISTENCY IN PERSPECTIVE

BUSINESS

DESIGN

TECH

BRANDING


Context of Mobile Interactionhttp://www.giantant.com/publications/mobile_context_model.pdf

USER CONTEXT

http://www.giantant.com/publications/mobile_context_model.pdf

MOBILE FIRSTBEFORE SCREENS

SCENARIOS


WHAT SCENARIOS ARE NOT

Use cases User stories


▸ 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

http://amzn.to/28M7weJ


▸ 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

http://amzn.to/28M7weJ

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


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.


AN EXAMPLE SCENARIO & REQUIREMENTSScenario RequirementsHarry 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


SCENARIOS GIVE US THE CONSISTENCY IN PERSPECTIVE

BUSINESS

DESIGN

TECH

BRANDINGScenarios


BUY AND READ THIS BOOK!


CONSISTENCY IN…

Interface

Interactions

Goals

ESTABLISH A COMMON VOCABULARY


ELEMENTS OF THE VOCABULARY

BRANDING & COLOURS TYPOGRAPHY GRIDS LAYOUT

ICONOGRAPHY TONE OF VOICE INTERACTIONS NAVIGATION

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


GOOGLE’S MATERIAL DESIGN

https://material.google.com

https://material.google.com


APPLE DESIGN GUIDELINES

https://developer.apple.com/design

https://developer.apple.com/design


BRAD FROST’S ATOMIC DESIGN

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

http://atomicdesign.bradfrost.com/

The periodic table of HTML elements, Josh Duck

MODULARISE & RE-USE

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

http://www.ford.co.uk/experience-ford/Heritage/EvolutionOfMassProduction


OBJECT-ORIENTED PROGRAMMING

Animal

Properties: brain legs nose

Actions: Walk Run

HumanProperties: 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


Actions: Walk Run

Wag tail

Boxer


Actions: Walk Run

Wag tail


ATOMS




MOLECULES




ORGANISMS




TEMPLATES




PAGES




PATTERNS TOOLKIT

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


CONSISTENCY IS ABOUT CREATING A SHARED UNDERSTANDING OF…

Interface Establish a common vocabulary

Interactions Scenarios first before screens

Goals Collaborate early and often

QUESTIONS?

@NirishShakya UX Lead (NOWTV), & UX Coach / Trainer