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.


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


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

to use a digital product.


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


The Shopping Cart


U N I V E R S A L U X

The Curb


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


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


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

http://edmonds.com

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


“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


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


Why place the logo in the top left?


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?


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.


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


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.


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)



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.


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.


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.


So this is a good thing?Yup.


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


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.


Then the iPhone blew it up.


We had a hard time at first.


It got a little better over time.


Then we hit our stride.


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.


Allowing a more valuable product experience.


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.


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


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


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.
