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

  • 1,712 views
Uploaded 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 …

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!

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,712
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
69
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. USABILITY & DESIGNWHEN DOES ONE TRUMP THE OTHER?PRESENTED BYJosh Levine & Jordan Lustig April 5, 2012
  • 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. 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. 2 YEARS AGO TODAY
  • 5. UsabilitySo what is it?
  • 6. WHAT IS IT?THE EASE OF USEOF A HUMAN-MADEOBJECT.
  • 7. WHY SHOULD YOU CARE?ON THE WEB,IT IS NECESSARYFOR SURVIVAL. Copyright: Jakob Nielsen’s Alertbox
  • 8. IF YOUR SITE HASPOOR USABILITY,PEOPLE LEAVE.
  • 9. HOW DO WECREATEUSABILITY?
  • 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. EFFICIENT.2 Customers achieve maximum productivity in minimum amount of time. Performing tasks can be accomplished easily and quickly.
  • 12. FINDABLE.3 Locate what you are looking for, providing multiple ways of finding things.
  • 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. FORGIVING.5 It is easy to recover. Errors don’t lead to a cascade of additional problems and wasted time.
  • 15. Analytics WHAT User Testing MultivariateARE THE Prototyping TOOLS? Wireframes Surveys
  • 16. DesignSo what is it?
  • 17. WHAT IS IT?A SET OF PRINCIPLESCONCERNED WITHTHE NATURE ANDAPPRECIATION OFBEAUTY, ART, TASTE.
  • 18. WHY SHOULD YOU CARE?CREATES ANEMOTIONALCONNECTION
  • 19. WHY SHOULD YOU CARE?AND TELLS ACOMPELLINGSTORY.
  • 20. HOW DO WECREATE GREATDESIGN?
  • 21. Color TheELEMENTS Type Texture Imagery
  • 22. Balance The UnityPRINCIPLES Contrast White Space Repetition
  • 23. ULTIMATELY, GREAT DESIGN ESTABLISHESEmotional ConnectionBrand StoryVisual OrganizationCredibilityDelight
  • 24. ARE USABILITYAND DESIGNREALLY AT ODDS?
  • 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. U While a high-quality site is “ important, the majority of people today value usability more than good looks or fanciness.
  • 27. D Look after the design and “ usability will look out for itself.
  • 28. D Attractive things “ work better.
  • 29. DIRECT FROM FLORIDA WEDNESDAY RINGSIDE AT ORLANDO 1:30 PMDESIGN USABILITY
  • 30. HarmonyDesign and Usability are not separateentities. Truly compelling experiencesconsist of harmonious balance.
  • 31. AESTHETICS USABILITY FORM FUNCTION BEAUTY UTILITYHOW IT LOOKS HOW IT WORKS JOY OF USE EASE OF USE
  • 32. BIG GUYS ARE CATCHING ONCOMPANIES NOTNORMALLY ASSOCIATEDWITH AESTHETICS,NO LONGER SACRIFICEFUNCTION FOR FORM.
  • 33. SaksHow we found harmony.
  • 34. CASE 1NAVIGATIONREDESIGN
  • 35. BEFORE AFTER** Note: Need to replace this footer with final, live version **
  • 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. 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. ** Note: Need to replace this footer with final, live version **
  • 39. ** Note: Need to replace this footer with final, live version **
  • 40. DISPUTE IS INEVITABLE. AND HEALTHY.Stubborn IT folksSubjective executivesThe significant othersArrogant designersGrumpy product owners
  • 41. CASE 2CATEGORYLANDING PAGES
  • 42. BUSINESS GOALS & REQUIREMENTSMore flexibility for creative.Maximize real estate.Leverage opportunities with vendors.More editorialized content.Bring more emotion (too flat).
  • 43. CASE 3MOBILECHECKOUT
  • 44. MOBILE – CHECKOUT / OLD (jordan, do you have a screenshot of Step 1?)
  • 45. MOBILE – CHECKOUT / NEW (Jordan, send me any updated screenshots)
  • 46. So Who’sDoing ItRight?
  • 47. BUT MOST OF ALL, DIFFERENTIATE
  • 48. BEAUTIFUL ON THE INSIDE TOOCREATE A PLATFORMTO SHOWCASEYOUR PRODUCTS
  • 49. KeyTakeaways
  • 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. PRACTICE ITEverything must have a purpose.Don’t let design decisionsinterfere with key UX principles.KPI’sClarify roles & responsibilities.
  • 52. PROTECT ITEmpathize – treat your co-workers as partners.Debate. Move on. Test.
  • 53. PREACH ITEveryone needs to be a brandchampion.Integrate into your culture.Style guides are crucial andconstantly evolve.
  • 54. HarmonyJosh Levine jl@alexanderinteractive.comJordan Lustig jordan_lustig@s5a.com