UX is UI - When Worlds Collide

@MIKEATHERTON

U X i s U I W h e n w o r l d s c o l l i d e

M I K E AT H E R T O N

@MIKEATHERTON

D I A G R A M B Y M I K E M A R K

D I A G R A M B Y D U D L E Y S T O R E Y

D I A G R A M B Y V I N N I E Q U I N N

S L A S H A F F L I C T I O N

D I A G R A M B Y U X M O V E M E N T

T O D AY ’ S TA L K

W H AT C A N U X B E B E Y O N D U I ?

O P E N S U R V E Y T O T H E U X C O M M U N I T Y

S U R V E Y: D E F I N I N G U X

S U R V E Y: D E F I N I N G U X / U I

– S U R V E Y R E S P O N D E N T

“A term used by people who don’t know what either really is.”

– S U R V E Y R E S P O N D E N T

“A Visual Designer working in the field for a long time. It means that he/she is able

to design but not to innovate.”

– S U R V E Y R E S P O N D E N T

“A person in their mid-20s who has been using Sketch and hanging out on dribbble or designernews and found they can get a

much better day rate by adding UX/ to their job title.”

– S U R V E Y R E S P O N D E N T

“Someone lost in a sea of opportunity who can’t define themselves in any

meaningful way.”

– N O T S H E R L O C K H O L M E S

“Once you eliminate the UI whatever remains, however improbable, must be UX.”

U X A S L O V E , E N C H A N T M E N T, A N D M A G I C

UI DESIGN IS: Navigation, sub-navigation, menus, drop-downs, buttons, links, windows, rounded corners, shadowing, error messages, alerts, updates, checkboxes, password fields, search fields, text inputs, radio selections, text areas, hover states, selection states, pressed states, tooltips, banner ads, embedded videos, swipe animations, scrolling, clicking, iconography, colors, lists, slideshows, alt text, badges, notifications, gradients, pop-ups, carousels, OK/Cancel, etc. etc. etc.

UX DESIGN IS: People, happiness, solving problems, understanding needs, love, efficiency, entertainment, pleasure, delight, smiles, soul, warmth, personality, joy, satisfaction, gratification, elation, exhilaration, bliss, euphoria, convenience, enchantment, magic, productivity, effectiveness, etc. etc. etc.

https://econsultancy.com/blog/66565-q-a-golden-krishna-explains-why-the-best-interface-is-no-interface

S U R V E Y: D E F I N I N G T H E D I F F E R E N C E

@MIKEATHERTON

T H E U S E R I N T E R FA C EPA R T 2

T H E G U I M A D E C O M P U T E R S A M A I N S T R E A M A P P L I A N C E

S O P H I S T I C AT E D C O M P U T I N G I N O U R P O C K E T …

… W H E R E T E C H N O L O G Y B E C O M E S I N V I S I B L E

W E C O N N E C T P E O P L E T O P E O P L Ehttps://www.facebook.com/FacebookStoriesEnglish/

– A R T H U R C . C L A R K E

“Any sufficiently advanced technology is indistinguishable

from magic.”

T H E I N V I S I B L E I N T E R FA C E

W H E N E X P E R I E N C E I S D R I V E N B Y A L G O R I T H M

T H E ‘ U S E R I N T E R FA C E ’ T O D AY

T H E I N T E R FA C E B E T W E E N T H E C U S T O M E R A N D T H E E

B U S I N E S S .

T H E S E R V I C E E C O L O G Y O R C H E S T R AT E S T H E T O U C H P O I N T S

F U L F I L M E N T

C R M

I N V E N T O RY

D ATA

O R D E R H I S T O RY

FRONT STAGE

BACK STAGE

E X P E R I E N C E B E Y O N D T H E D E V I C E

P E O P L E C O N N E C T I N G P E O P L E T O P E O P L E

R E L AT I O N S H I P E N G I N E E R S

@MIKEATHERTON

B U S I N E S SPA R T 3

– P E T E R D R U C K E R

“The purpose of any business is to create

and keep a customer.”

S & P 5 0 0 B Y M A R K E T C A P

2006

1. Exxon Mobil

2. General Electric

3. Microsoft

4. Citi Group

5. Bank of America

2016

1. Apple

2. Alphabet

3. Microsoft

4. Amazon

5. Facebook

P R O P S T O M A RT I N E R I K S S O N

I T O TA L LY S T O L E T H I S F R O M H I M

R O L E S M U S T B E S E T U P F O R S U C C E S S

Y O U R J O B I S N O T T O F I G H T F O R T H E R I G H T T O

D O Y O U R J O B .

I F T H I S I S U S E R E X P E R I E N C E D E S I G N …

… I S T H I S ‘ U X ’ ?

W E L O V E T O TA L K A B O U T H O W T H E S A U S A G E G E T S M A D E

J O L LY H O C K E Y S T I C K S

H E L P T H E B U S I N E S S F I N D T H E VA L U E O F D I G I TA L

U X I S A C C O U N TA B L E

INCREASED OVERALL REVENUE

FROM DIGITAL CHANNELS

INCREASED ARPU FROM DIGITAL

CHANNELSSHORTER PURCHASE

CYCLESINCREASED PRESS

COVERAGE

REDUCED CALL CENTRE VOLUME

BETTER QUALITY CANDIDATES

APPLYING FOR VACANCIES

IMPROVED BRAND PERCEPTION

W H AT P E O P L E A S K M E AT C O N F E R E N C E S

H O W C A N I C O N V I N C E T H E B U S I N E S S O F T H E

VA L U E O F U X ?

R E F R A M E T H E Q U E S T I O N

H O W C A N I M A K E U X VA L U A B L E T O T H E

B U S I N E S S ?

T H E J O B S O F P R O D U C T M A N A G E M E N T

D I A G R A M B Y M A R T I N E R I K S S O N

S U R V E Y: W H E N T O I N V O LV E U X

S U R V E Y: U X A N D P M

NOT JUST MAKING STUFF RIGHT. MAKING THE RIGHT STUFF.

@MIKEATHERTON

VA L U E M U S T B E G R E AT E R T H A N PA I N

A L M O S T D O N E

W H AT W E ’ R E H E R E T O D O

U X C R E AT E S P E R S O N A L A N D

B U S I N E S S VA L U E

T H E PAT H O F E X P E R I E N C E D E S I G N

Ecology

AvatarStrategic influence

D I A G R A M B Y J E S S E J A M E S G A R R E T T

T H E S H I T- F L AV O U R E D L O L L I P O P P R O B L E M

W H Y A N D W H AT B E F O R E H O W

E X P E R I E N C E S TA RT S W I T H A VA L U E P R O P O S I T I O N

B E A U X C O N D U C T O R , C H E E R L E A D E R , A N D C O P

L E T ’ S B E T T E R C O M M U N I C AT E T H E VA L U E O F W H AT W E D O

S I M P L I C I T Y I S N ’ T E V E R Y T H I N G

M A K E T H E C O M P L E X C L E A R

BEYOND THE SCREEN BEYOND PROCESS

BEYOND THE UX TEAM

DESIGN THE RELATIONSHIP.

Thanks! Find me on Twitter: @MikeAtherton Original article: Search ‘UX is UI’

More shiz: slideshare.net/reduxd