USABILITY & DESIGNWHEN DOES ONE TRUMP THE OTHER?PRESENTED BYJosh Levine & Jordan Lustig               April 5, 2012
DESIGN  JOSH LEVINE           CXO END-TO-END ECOMMERCE  DESIGN & DEVELOPMENTFounded 2002, Independent             •       ...
UX  JORDAN LUSTIGDIRECTOR OF PRODUCT MANAGEMENTOmni-Channel Luxury Retailer               • Launched Saks.com in 2000     ...
2 YEARS AGO TODAY
UsabilitySo what is it?
WHAT IS IT?THE EASE OF USEOF A HUMAN-MADEOBJECT.
WHY SHOULD YOU CARE?ON THE WEB,IT IS NECESSARYFOR SURVIVAL.                       Copyright: Jakob Nielsen’s Alertbox
IF YOUR SITE HASPOOR USABILITY,PEOPLE LEAVE.
HOW DO WECREATEUSABILITY?
LEARNABLE.1   On first encounter with an interface, it must    be easy to accomplish basic tasks without    needing to acqu...
EFFICIENT.2   Customers achieve maximum productivity    in minimum amount of time. Performing    tasks can be accomplished...
FINDABLE.3   Locate what you are looking for,    providing multiple ways of finding    things.
MEMORABLE.4   What is learned on the first encounter is    easily applied to other areas/tasks within    the site and easil...
FORGIVING.5   It is easy to recover. Errors don’t lead to    a cascade of additional problems and    wasted time.
Analytics  WHAT    User Testing          MultivariateARE THE   Prototyping TOOLS?   Wireframes          Surveys
DesignSo what is it?
WHAT IS IT?A SET OF PRINCIPLESCONCERNED WITHTHE NATURE ANDAPPRECIATION OFBEAUTY, ART, TASTE.
WHY SHOULD YOU CARE?CREATES ANEMOTIONALCONNECTION
WHY SHOULD YOU CARE?AND TELLS ACOMPELLINGSTORY.
HOW DO WECREATE GREATDESIGN?
Color   TheELEMENTS           Type           Texture           Imagery
Balance    The             UnityPRINCIPLES   Contrast             White Space             Repetition
ULTIMATELY, GREAT DESIGN ESTABLISHESEmotional ConnectionBrand StoryVisual OrganizationCredibilityDelight
ARE USABILITYAND DESIGNREALLY AT ODDS?
U        The beauty of the Web lies in    “   its function, not its form, and        I would rather that my sites        a...
U        While a high-quality site is    “   important, the majority of        people today value usability        more th...
D        Look after the design and    “   usability will look out for        itself.
D        Attractive things    “   work better.
DIRECT FROM FLORIDA   WEDNESDAY    RINGSIDE AT ORLANDO   1:30 PMDESIGN                    USABILITY
HarmonyDesign and Usability are not separateentities. Truly compelling experiencesconsist of harmonious balance.
AESTHETICS    USABILITY       FORM    FUNCTION     BEAUTY    UTILITYHOW IT LOOKS   HOW IT WORKS  JOY OF USE   EASE OF USE
BIG GUYS ARE CATCHING ONCOMPANIES NOTNORMALLY ASSOCIATEDWITH AESTHETICS,NO LONGER SACRIFICEFUNCTION FOR FORM.
SaksHow we found harmony.
CASE 1NAVIGATIONREDESIGN
BEFORE                          AFTER** Note: Need to replace this footer with final, live version **
BEFORE DESIGN           Define roles & ownership.           Business requirements.           Dig in to data and brand.     ...
BUSINESS GOALS & REQUIREMENTSModernize design.Be more on brand.Maximize real estate.More flexibility.Fulfill long term strat...
** Note: Need to replace this footer with final, live version **
** Note: Need to replace this footer with final, live version **
DISPUTE IS INEVITABLE. AND HEALTHY.Stubborn IT folksSubjective executivesThe significant othersArrogant designersGrumpy pro...
CASE 2CATEGORYLANDING PAGES
BUSINESS GOALS & REQUIREMENTSMore flexibility for creative.Maximize real estate.Leverage opportunities with vendors.More ed...
CASE 3MOBILECHECKOUT
MOBILE – CHECKOUT / OLD (jordan, do you have a screenshot of Step 1?)
MOBILE – CHECKOUT / NEW (Jordan, send me any updated screenshots)
So Who’sDoing ItRight?
BUT MOST OF ALL, DIFFERENTIATE
BEAUTIFUL ON THE INSIDE TOOCREATE A PLATFORMTO SHOWCASEYOUR PRODUCTS
KeyTakeaways
FACE ITUsability is Design.Design is having an effect onyour customers whether you areconsciously in control or not.Easy-to...
PRACTICE ITEverything must have a purpose.Don’t let design decisionsinterfere with key UX principles.KPI’sClarify roles & ...
PROTECT ITEmpathize – treat your co-workers as partners.Debate. Move on. Test.
PREACH ITEveryone needs to be a brandchampion.Integrate into your culture.Style guides are crucial andconstantly evolve.
HarmonyJosh Levine   jl@alexanderinteractive.comJordan Lustig jordan_lustig@s5a.com
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue
Upcoming SlideShare
Loading in...5
×

Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue

2,328

Published on

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!

Published in: Design

Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue

  1. 1. USABILITY & DESIGNWHEN DOES ONE TRUMP THE OTHER?PRESENTED BYJosh Levine & Jordan Lustig April 5, 2012
  2. 2. DESIGN JOSH LEVINE CXO END-TO-END ECOMMERCE DESIGN & DEVELOPMENTFounded 2002, Independent • Manhattan • 50 Hands-On Employees • Transactional Expertise • IMA Top 10 Agency
  3. 3. UX JORDAN LUSTIGDIRECTOR OF PRODUCT MANAGEMENTOmni-Channel Luxury Retailer • Launched Saks.com in 2000 • New York Based • 46 Stores in 22 States • Dedicated to our Customers
  4. 4. 2 YEARS AGO TODAY
  5. 5. UsabilitySo what is it?
  6. 6. WHAT IS IT?THE EASE OF USEOF A HUMAN-MADEOBJECT.
  7. 7. WHY SHOULD YOU CARE?ON THE WEB,IT IS NECESSARYFOR SURVIVAL. Copyright: Jakob Nielsen’s Alertbox
  8. 8. IF YOUR SITE HASPOOR USABILITY,PEOPLE LEAVE.
  9. 9. HOW DO WECREATEUSABILITY?
  10. 10. LEARNABLE.1 On first encounter with an interface, it must be easy to accomplish basic tasks without needing to acquire new skill sets.
  11. 11. EFFICIENT.2 Customers achieve maximum productivity in minimum amount of time. Performing tasks can be accomplished easily and quickly.
  12. 12. FINDABLE.3 Locate what you are looking for, providing multiple ways of finding things.
  13. 13. MEMORABLE.4 What is learned on the first encounter is easily applied to other areas/tasks within the site and easily retained for subsequent visits.
  14. 14. FORGIVING.5 It is easy to recover. Errors don’t lead to a cascade of additional problems and wasted time.
  15. 15. Analytics WHAT User Testing MultivariateARE THE Prototyping TOOLS? Wireframes Surveys
  16. 16. DesignSo what is it?
  17. 17. WHAT IS IT?A SET OF PRINCIPLESCONCERNED WITHTHE NATURE ANDAPPRECIATION OFBEAUTY, ART, TASTE.
  18. 18. WHY SHOULD YOU CARE?CREATES ANEMOTIONALCONNECTION
  19. 19. WHY SHOULD YOU CARE?AND TELLS ACOMPELLINGSTORY.
  20. 20. HOW DO WECREATE GREATDESIGN?
  21. 21. Color TheELEMENTS Type Texture Imagery
  22. 22. Balance The UnityPRINCIPLES Contrast White Space Repetition
  23. 23. ULTIMATELY, GREAT DESIGN ESTABLISHESEmotional ConnectionBrand StoryVisual OrganizationCredibilityDelight
  24. 24. ARE USABILITYAND DESIGNREALLY AT ODDS?
  25. 25. U 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.
  26. 26. U While a high-quality site is “ important, the majority of people today value usability more than good looks or fanciness.
  27. 27. D Look after the design and “ usability will look out for itself.
  28. 28. D Attractive things “ work better.
  29. 29. DIRECT FROM FLORIDA WEDNESDAY RINGSIDE AT ORLANDO 1:30 PMDESIGN USABILITY
  30. 30. HarmonyDesign and Usability are not separateentities. Truly compelling experiencesconsist of harmonious balance.
  31. 31. AESTHETICS USABILITY FORM FUNCTION BEAUTY UTILITYHOW IT LOOKS HOW IT WORKS JOY OF USE EASE OF USE
  32. 32. BIG GUYS ARE CATCHING ONCOMPANIES NOTNORMALLY ASSOCIATEDWITH AESTHETICS,NO LONGER SACRIFICEFUNCTION FOR FORM.
  33. 33. SaksHow we found harmony.
  34. 34. CASE 1NAVIGATIONREDESIGN
  35. 35. BEFORE AFTER** Note: Need to replace this footer with final, live version **
  36. 36. BEFORE DESIGN Define roles & ownership. Business requirements. Dig in to data and brand. Create KPI’s and testing strategy.HOW WE DURING DESIGN Sketch before wires. DID IT Multiple iterations. Get management buy-in. AFTER DESIGN Test. Share findings. Measure and refine.
  37. 37. BUSINESS GOALS & REQUIREMENTSModernize design.Be more on brand.Maximize real estate.More flexibility.Fulfill long term strategies.Must integrate within existing site. ** Note: Need to replace this footer with final, live version **
  38. 38. ** Note: Need to replace this footer with final, live version **
  39. 39. ** Note: Need to replace this footer with final, live version **
  40. 40. DISPUTE IS INEVITABLE. AND HEALTHY.Stubborn IT folksSubjective executivesThe significant othersArrogant designersGrumpy product owners
  41. 41. CASE 2CATEGORYLANDING PAGES
  42. 42. BUSINESS GOALS & REQUIREMENTSMore flexibility for creative.Maximize real estate.Leverage opportunities with vendors.More editorialized content.Bring more emotion (too flat).
  43. 43. CASE 3MOBILECHECKOUT
  44. 44. MOBILE – CHECKOUT / OLD (jordan, do you have a screenshot of Step 1?)
  45. 45. MOBILE – CHECKOUT / NEW (Jordan, send me any updated screenshots)
  46. 46. So Who’sDoing ItRight?
  47. 47. BUT MOST OF ALL, DIFFERENTIATE
  48. 48. BEAUTIFUL ON THE INSIDE TOOCREATE A PLATFORMTO SHOWCASEYOUR PRODUCTS
  49. 49. KeyTakeaways
  50. 50. FACE ITUsability is Design.Design is having an effect onyour customers whether you areconsciously in control or not.Easy-to-use isn’t good enough.Design is what differentiates it.
  51. 51. PRACTICE ITEverything must have a purpose.Don’t let design decisionsinterfere with key UX principles.KPI’sClarify roles & responsibilities.
  52. 52. PROTECT ITEmpathize – treat your co-workers as partners.Debate. Move on. Test.
  53. 53. PREACH ITEveryone needs to be a brandchampion.Integrate into your culture.Style guides are crucial andconstantly evolve.
  54. 54. HarmonyJosh Levine jl@alexanderinteractive.comJordan Lustig jordan_lustig@s5a.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×