usability vs design – when does one trump the other? ai (alexander interactive) and saks fifth...

Hi James

April 5, 2012

PRESENTED BYJosh Levine & Jordan Lustig

UXUSABILITY WHEN DOES ONE TRUMP THE OTHER?

& DESIGN

Hi James

END-TO-END ECOMMERCEDESIGN & DEVELOPMENT

Founded 2002, Independent•

Manhattan•

50 Hands-On Employees•

Transactional Expertise•

IMA Top 10 Agency

DESIGN

JOSH LEVINECXO

UX

JORDAN LUSTIGDIRECTOR OF PRODUCT MANAGEMENT

Omni-Channel Luxury Retailer•

Launched Saks.com in 2000•

New York Based•

46 Stores in 22 States•

Dedicated to our Customers

2 YEARS AGO TODAY

Hi James

UsabilitySo what is it?

THE EASE OF USE OF A HUMAN-MADE OBJECT.

WHAT IS IT?

ON THE WEB,IT IS NECESSARY FOR SURVIVAL.

WHY SHOULD YOU CARE?

Copyright: Jakob Nielsen’s Alertbox

IF YOUR SITE HAS POOR USABILITY,PEOPLE LEAVE.

HOW DO WE CREATE USABILITY?

1 On first encounter with an interface, it must be easy to accomplish basic tasks without needing to acquire new skill sets.

LEARNABLE.

2 Customers achieve maximum productivity in minimum amount of time. Performing tasks can be accomplished easily and quickly.

EFFICIENT.

3 Locate what you are looking for, providing multiple ways of finding things.

FINDABLE.

4 What is learned on the first encounter is easily applied to other areas/tasks within the site and easily retained for subsequent visits.

MEMORABLE.

5 It is easy to recover. Errors don’t lead to a cascade of additional problems and wasted time.

FORGIVING.

Analytics

User Testing

Multivariate

Prototyping

Wireframes

Surveys

WHAT ARE THE TOOLS?

Hi James

DesignSo what is it?

A SET OF PRINCIPLES CONCERNED WITH THE NATURE AND APPRECIATION OF BEAUTY, ART, TASTE.

WHAT IS IT?

CREATES AN EMOTIONAL CONNECTION

WHY SHOULD YOU CARE?

AND TELLS A COMPELLING STORY.

WHY SHOULD YOU CARE?

HOW DO WE CREATE GREAT DESIGN?

ColorTypeTextureImagery

The

ELEMENTS

BalanceUnityContrastWhite SpaceRepetition

The

PRINCIPLES

ULTIMATELY, GREAT DESIGN ESTABLISHES

Emotional ConnectionBrand StoryVisual OrganizationCredibility Delight

ARE USABILITY AND DESIGN REALLY AT ODDS?

The beauty of the Web lies in its function, not its form, and I would rather that my sites attract attention because they are widely useful and usable than because they are pretty.

“

U

UWhile a high-quality site is important, the majority of people today value usability more than good looks or fanciness.

“

DLook after the design and usability will look out for itself.

“

DAttractive things work better.“

USABILITYDESIGN

DIRECT FROM FLORIDA

RINGSIDE AT ORLANDO 1:30 PMWEDNESDAY

Hi James

HarmonyDesign and Usability are not separate entities. Truly compelling experiences consist of harmonious balance.

USABILITY

FUNCTION

UTILITY

HOW IT WORKS

EASE OF USE

PLEASURE USABILITY

AESTHETICS USABILITY

AESTHETICS

FORM

BEAUTY

HOW IT LOOKS

JOY OF USE

COMPANIES NOT NORMALLY ASSOCIATED WITH AESTHETICS, NO LONGER SACRIFICE FUNCTION FOR FORM.

BIG GUYS ARE CATCHING ON

Hi James

SaksSaksHow we found harmony.

NAVIGATION REDESIGN

CASE 1

** Note: Need to replace this footer with final, live version **

BEFORE

AFTER

HOW WEDID IT

BEFORE DESIGN

Define roles & ownership.Business requirements.Dig in to data and brand.Create KPI’s and testing strategy.

DURING DESIGN

Sketch before wires.Multiple iterations.Get management buy-in.

AFTER DESIGN

Test.Share findings.Measure and refine.

** Note: Need to replace this footer with final, live version **

Modernize design.Be more on brand.Maximize real estate.More flexibility.Fulfill long term strategies.Must integrate within existing site.

BUSINESS GOALS & REQUIREMENTS

** Note: Need to replace this footer with final, live version **

** Note: Need to replace this footer with final, live version **

Stubborn IT folksSubjective executives

The significant othersArrogant designers

Grumpy product owners

DISPUTE IS INEVITABLE. AND HEALTHY.

CATEGORYLANDING PAGES

CASE 2

More flexibility for creative.Maximize real estate.Leverage opportunities with vendors.More editorialized content.Bring more emotion (too flat).

BUSINESS GOALS & REQUIREMENTS

MOBILECHECKOUT

CASE 3

MOBILE – CHECKOUT / OLD (jordan, do you have a screenshot of Step 1?)

MOBILE – CHECKOUT / NEW (Jordan, send me any updated screenshots)

Hi James

Doing It Right?

So Who’s

BUT MOST OF ALL, DIFFERENTIATE

CREATE A PLATFORM TO SHOWCASE YOUR PRODUCTS

BEAUTIFUL ON THE INSIDE TOO

Hi James

Use the page to eliminate effort.

Hi James

Hi James

Hi James

Hi James

TakeawaysKey

Usability is Design.

Design is having an effect on your customers whether you are consciously in control or not.

Easy-to-use isn’t good enough. Design is what differentiates it.

FACE IT

Everything must have a purpose.

Don’t let design decisionsinterfere with key UX principles.

KPI’s

Clarify roles & responsibilities.

PRACTICE IT

Empathize – treat your co-workers as partners.

Debate. Move on. Test.

PROTECT IT

Everyone needs to be a brand champion.

Integrate into your culture.

Style guides are crucial and constantly evolve.

PREACH IT

Hi James

Harmony

Josh Levine

Jordan Lustig

jl@alexanderinteractive.com

jordan_lustig@s5a.com