how universal ux is redefining branding online

H O W U N I V E R S A L U X I S R E D E F I N I N G B R A N D I N G O N L I N E

U N I V E R S A L U X

@danieltulloh Asurion Design Group

* DISCLAIMER

This is an observation of where we are in time. Technology will force us to evolve again.

Let’s welcome it.

@danieltulloh Asurion Design Group

W h a t i s U n i v e r s a l U X ?

@danieltulloh Asurion Design Group

Universal UX is a ubiquitous framework that allows the most users possible

to use a digital product.

@danieltulloh Asurion Design Group

U N I V E R S A L D E S I G N “Universal design describes a set of considerations made to ensure that a product, service, and/or environment is usable by everyone, to the greatest extent possible, without the need for adaptation or specialized design.” !

– Andrew Maier, UX Booth

U N I V E R S A L U X , I N O T H E R W O R D S

@danieltulloh Asurion Design Group

The Shopping Cart

@danieltulloh Asurion Design Group

The Shopping Cart

@danieltulloh Asurion Design Group

U N I V E R S A L U X

The Curb

@danieltulloh Asurion Design Group

U N I V E R S A L U X

The Curb

@danieltulloh Asurion Design Group

T H E A U T O M O B I L EU N I V E R S A L U X : P A R A L L E L S

@danieltulloh Asurion Design Group

U N I V E R S A L U X : P A R A L L E L S T H E A U T O M O B I L E

@danieltulloh Asurion Design Group

S H I F T

S P E E D

L O G O

B R E A K I N G T H E E X P E R I E N C E

? ? ?

B R E A K I N G T H E E X P E R I E N C E

? ? ?

“Try jamming the transmission from gear to gear when you're making a quick three-point

turn, it's not the same.” !

– Ed Hellwig, edmonds.com@danieltulloh

Asurion Design Group

T H E U N D E R LY I N G R U L E S O F W E B D E S I G N “Users have come to expect websites to work in a certain way and if you choose to ignore those conventions you do so at your own peril.” !

– Paul Boag, Headscape

U N I V E R S A L U X : T H E W E B

@danieltulloh Asurion Design Group

“80% or more of websites use the same design approach. Users strongly expect

standard elements to work a certain way when they visit a new site because

that’s how things always work.” !

– Jakob Nielsen, Nielsen Norman Group

@danieltulloh Asurion Design Group

T H E C O N V E N T I O N SU N I V E R S A L U X : T H E W E B

Position of Branding …

Position of Navigation …

Clearly Communicated Purpose …

Copy Conventions …

Section Conventions …

Tools Conventions@danieltulloh

Asurion Design Group

BRAND

ACTIONABLE ITEM

DIRECTION CUE

NAV

LOCATE

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

BRAND MESSAGE

@danieltulloh Asurion Design Group

Why place the logo in the top left?

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

Before we engage with any product, be it a site, an app, or a can of soda we want to

know who made it. This builds trust & confidence before we engage with it.

!

Because westerners read from left to right & top to bottom the top left is the

first place our eye goes. This makes it the ideal place to logos.

Why the burger, ellipse or “Menu” navigation?

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

These icons (or variations to them) are among some of the most widely adopted across web & among giants like Facebook & Spotify. In instances where you have multiple pages you need to account for, the hamburger trims the fat, giving us the ability to bring major calls to action to the front & center.

@danieltulloh Asurion Design Group

Elipse

U N I V E R S A L U X B U I L D I N G B L O C K S N A V I G A T I O N

Hamburger “Menu” Text

MENU

Hybrid Hamburger

@danieltulloh Asurion Design Group

The hamburger controversy

The hamburger is not a catch all. Throwing all of our pages & actions behind it is not a good idea. A good rule of thumb is that to make the most important action items available outside of the drawer in while keeping secondary and tertiary actions behind the menu icon.

@danieltulloh Asurion Design Group

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

HIGH PRIORITY ACTIONABLE ITEMS

HAMBURGERS (FOR OVERFLOW)

@danieltulloh Asurion Design Group

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

It should go without saying, but still needs to be said. Calls to actions should be clear,

concise & few in number. If you can’t figure it out in 5 seconds, we’ve failed. The rise of

mobile & the decrease of the average user’s time on site have killed the effectiveness of

the slider. We have one chance to get a user engaged. Let’s use it wisely.

Clear call to action. Death of the sliders.

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

Mobile technology has destroyed the notion that “everything must be above the

fold”. While the fold must be taken into account to give users easy access to

important actions, we’ve been liberated from the days of cramming everything into

a 980 x 640 pixel rectangle. It also frees us to create clear, elegant experiences for

our users.

Scrolling is the norm, so make it easy.

65%+ visit business sites to locate. Make it easy.

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

For industries like retail, banking, travel & automotive, the majority of mobile users are visiting to get directions/locations. This should be front & center so what better icon to use than the icon we’ve all come to know & love from Google Maps.

@danieltulloh Asurion Design Group

So this is a good thing?Yup.

@danieltulloh Asurion Design Group

U N I V E R S A L U X B U I L D I N G B L O C K S T H E T Y P I C A L E X P E R I E N C E : I N P R A C T I C E

BRAND NAV

Universal UX & brand in practice

U N I V E R S A L U X : W H A T T H I S M E A N S F O R B R A N D I N G

@danieltulloh Asurion Design Group

U X B R A N D I N G H I S T O R Y : I M M E R S I V E V S . C O N T E X T U A L “Our brand will only ever be the memory of the experience our people had when interacting with us.” !

– Steve Sammartino, Startup Blog

In the late 2000’s UX was often an immersive experience.

Brands were expressed through rich, multi-layered experiences that drove brand awareness & voice. Users were

forced to re-learn navigation every time they visited, placing the product second.

@danieltulloh Asurion Design Group

Then the iPhone blew it up.

@danieltulloh Asurion Design Group

We had a hard time at first.

@danieltulloh Asurion Design Group

It got a little better over time.

@danieltulloh Asurion Design Group

Then we hit our stride.

@danieltulloh Asurion Design Group

Mobile technology gave brands the ability to create contextual experiences for their products, while universal ux eliminated the learning curve for users & their quick micro-experiences.

@danieltulloh Asurion Design Group

Allowing a more valuable product experience.

@danieltulloh Asurion Design Group

The goal of most brands is for people to use their products & services. Universal

UX allows them to do just that, rather than waste time decoding pretty design.

@danieltulloh Asurion Design Group

Stopped being selfish. You’re UX designer after all.

@danieltulloh Asurion Design Group

A N I M A T I O N , I N T E R A C T I V I T Y & B R A N D V O I C E “…the right animations…for the right reasons, can increase usability, help define your brand’s personality, & create delight.” !

– Sara Sundqvist, UX Magazine

U N I V E R S A L U X : W H A T T H I S M E A N S F O R B R A N D I N G

@danieltulloh Asurion Design Group

Emerging universal onboarding patterns.

Clarifying use with visual + audio cues.

Letting users create emotional connection to product

!EPILOGUE !

Universal UX isn’t future-proof, but then again nothing is.

@danieltulloh Asurion Design Group