usability vs design – when does one trump the other? ai (alexander interactive) and saks fifth...
DESCRIPTION
I recently presented at the Internet Retailer Web Design Conference (IRWD) down in Orlando (Feb 13). The topic was "How to achieve harmony between usability and design". Special thanks to Jordan Lustig, from Saks Fifth Avenue, for joining me up on stage. We had a great time. Thank you all for joining us!TRANSCRIPT
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