UX Design for the Responsive Web - UX London 2014 Workshop

4,847 views

Published on

Whether they realise it or not, every company is in the user experience business. The best products and services have design at their very core. This workshop will delve into how we as designers, developers and product owners can challenge assumptions and influence business strategy to deliver better, more delightful experiences for our users regardless of screen size. Through a series of hands-on activities we will share techniques for exploring and identifying requirements, painting a picture of our users and quickly creating responsive prototypes that we can test and validate.

Published in: Design, Technology
1 Comment
23 Likes
Statistics
Notes
No Downloads
Views
Total views
4,847
On SlideShare
0
From Embeds
0
Number of Embeds
1,680
Actions
Shares
0
Downloads
277
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

UX Design for the Responsive Web - UX London 2014 Workshop

  1. 1. UX DESIGN FOR THE RESPONSIVE WEB
  2. 2. HELLO I’m Matt @duckymatt ! ! ! ! ! !
  3. 3. HELLO I’m Danny @danny_bluestone ! ! !
  4. 4. @cyberduck_uk cyber-duck.co.uk
  5. 5. THE PLAN 3 HOUR WORKSHOP DELVING INTO USER-CENTRIC APPROACHES TO RESPONSIVE DESIGN Image Copyright: Lucasfilm & Twentieth Century Fox
  6. 6. FIRST, HOW DO WE DEFINE RESPONSIVE?
  7. 7. To react quickly and positively.
  8. 8. Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
  9. 9. PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET Image Copyright: Walt Disney Pictures & Tim Burton Pictures
  10. 10. UX? SO, HOW DOES THAT RELATE TO
  11. 11. User experience encompasses all aspects of the end user’s interaction with the company, its services and its products JAKOB NIELSEN & DON NORMAN Photo credit: http://www.nngroup.com/people-jakob-nielsen-photos/ Source: http://www.nngroup.com/articles/definition-user-experience/
  12. 12. Businesses cannot treat their customers as passive “consumers” any longer; every company is in the user experience business. KAREN MCGRANE Source: http://alistapart.com/column/explaining-water-to-fish Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
  13. 13. WHAT SHOULD GOOD UX ACCOMPLISH?
  14. 14. People will forget what you said. People will forget what you did. But people will never forget how you made them feel. MAYA ANGELOU Photo credit: York College ISLGP http://commons.wikimedia.org/wiki/File:Maya_Angelou_visits_YCP!_2413.jpg
  15. 15. POOR UX LEADS TO CONFUSION, FRUSTRATION OR EVEN ANGER Photo credit: Mat Walker https://www.flickr.com/photos/matski_98/8259750205/ More examples: http://shitliftux.tumblr.com/
  16. 16. Credit: http://wtfmobileweb.com/
  17. 17. A B C ANALYSING UX
  18. 18. AS A MECHANIC… Image Copyright: Paramount Pictures & Robert Stigwood & Allan Carr Productions
  19. 19. AS A CAMPER… Image Copyright: Peter Rodgers Productions & The Rank Organisation
  20. 20. GOOD UX DEPENDS ON CONTEXT THE USER, THE ENVIRONMENT, THE TASK AND OTHER FACTORS Image Copyright: Warner Bros. & Esperanto Filmoj & Heyday Films
  21. 21. USER CENTRED DESIGN Image Copyright: HBO
  22. 22. Credit: http://xkcd.com/773/
  23. 23. Credit: http://www.projectcartoon.com/cartoon/1
  24. 24. RESEARCH DESIGN ADAPT MEASURE 13 2 4
  25. 25. USER CENTRED DESIGN
 ON A RESPONSIVE WEB?
  26. 26. 4 TENETS OF GOOD RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
  27. 27. CONTENT PARITY Credit: http://wtfmobileweb.com/ THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS 1
  28. 28. SPEED MATTERS BECAUSE PERFORMANCE AFFECTS EVERYONE 2 Image Copyright: Universal Pictures
  29. 29. FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
  30. 30. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS 4 Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
  31. 31. CONTENT PARITY 1
  32. 32. ASSUMPTIONS 1 Image Copyright: BBC
  33. 33. You don't get to decide which device people use to access your website. KAREN MCGRANE http://alistapart.com/article/your-content-now-mobile Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
  34. 34. Credit: http://xkcd.com/773/ 1
  35. 35. 1
  36. 36. RESEARCHING CONTENT STRATEGY EXISTING CUSTOMERS DATA ANALYSIS MARKET RESEARCH ETHNOGRAPHY 1 Image Copyright: Warner Bros. STAKEHOLDER INTERVIEWS
  37. 37. OUR CONTENT DEFINES THE LAYOUTS WE NEED! NOT THE OTHER WAY AROUND 1
  38. 38. SPEED MATTERS 2
  39. 39. 2 moto.oakley.com
  40. 40. If you were data roaming on an iPhone, at $9 per Mb data roaming, that web page would cost me $785 to look at on my iPhone! ANDREW CLARKE http://alistapart.com/article/dao/ Photo credit: Jeffrey Zeldman: http://www.flickr.com/photos/zeldman/12621077243 http://dandelion-burdock.com/articles/view/the-weight-of-the-web
  41. 41. DOES RESPONSIVE = POOR PERFORMANCE? Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ 2
  42. 42. IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE 2 Image Copyright: Metro-Goldwyn-Mayer (MGM)
  43. 43. GOOD RESPONSIVE DESIGN HAS PERFORMANCE AT ITS HEART ! 2 timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
  44. 44. FUTURE FRIENDLINESS 3
  45. 45. THE WEB DOESN’T HAVE A FIXED WIDTH 3
  46. 46. We should embrace the fact that the web doesn’t have the same constraints [as the printed page] and design for this flexibility. JOHN ALLSOPP http://alistapart.com/article/dao/ Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/ 3
  47. 47. LAYOUT AND FLOW 3
  48. 48. LAYOUTS BASED ON CONTENT RATHER THAN DEVICE 3
  49. 49. ENHANCE FOR CONTEXT 3
  50. 50. ANIMATION AS AN ENHANCEMENT? 3 Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
  51. 51. LOCATION AS AN ENHANCEMENT? 3 Copyright: Metro-Goldwyn-Mayer (MGM)
  52. 52. ACCESSIBILITY 4
  53. 53. DESIGN FOR TOUCH BY DEFAULT 4 DOES YOUR DESIGN PASS THE ‘RULE OF THUMB’ TEST? ! ARE YOU RELYING ON HOVER?
  54. 54. MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND DESCRIPTIVE AS POSSIBLE IF YOUR LINKS SAY “CLICK HERE” YOU’RE DOING IT WRONG 4
  55. 55. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE 4 CAN PEOPLE TELL WHERE THEY ARE ON YOUR WEBSITE FROM THE URL ALONE?
  56. 56. DON’T USE PLACEHOLDERS AS A SUBSTITUTE FOR LABELS ON FORMS 4 http://www.webaxe.org/placeholder-attribute-is-not-a-label/Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/
  57. 57. PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST 4 ALSO USE COLOUR BLINDNESS SIMULATORS AND COLOUR CONTRAST CHECK TOOLS Related: http://24ways.org/2012/colour-accessibility/
  58. 58. APPLYING OUR PRINCIPLES OF
 RESPONSIVE DESIGN THROUGH UCD
  59. 59. THE BRIEF
  60. 60. RESEARCH DESIGN ADAPT MEASURE 13 2 4
  61. 61. RESEARCH1 Image Copyright: Warner Bros.
  62. 62. STAKEHOLDER INTERVIEWS http://goodkickoffmeetings.com/2010/04/stakeholder-frontloading/ 1
  63. 63. STAKEHOLDER INTERVIEW TECHNIQUES http://goodkickoffmeetings.com/2010/04/stakeholder-frontloading/ 1 KEEP IT RELAXED AND INFORMAL ! STAY FLEXIBLE ! KEEP IT ONE-ON-ONE ! ALLOW THEM TO SPEAK OFF-THE-RECORD
  64. 64. The turning point in many interviews is when the interviewee gets up and closes the office door and lowers their voice. PAUL BOAG Photo credit: Andreas Øverland: http://www.flickr.com/photos/andreasoverland/4954194732/ http://boagworld.com/business-strategy/how-to-improve-your-site-using-stakeholder-interviews/
  65. 65. IDENTIFYING OUR USERS? 1 EXERCISE Image Copyright: Paramount Pictures
  66. 66. PERSONAS1 Image Copyright: Astralwerks, & Gramercy Pictures & Propaganda Films & Single Cell Pictures
  67. 67. TIPS FOR CREATING PERSONAS1 RESEARCH EXISTING USERS ! RESEARCH COMPETITORS ! ETHNOGRAPHIC STUDIES ! SOCIAL MEDIA ! DOMAIN EXPERT INSIGHT ! DATA!
  68. 68. FINDING OUR USERS1 ETHNIO ! SOCIAL MEDIA ! PHYSICAL LOCATIONS ! USE PROFESSIONAL RECRUITERS ! THE CLIENT…
  69. 69. PERSONAS1 EXERCISE BACKGROUND AGE RANGE, NATIVE LANGUAGE, WORLD OUTLOOK ! EXPERIENCE FAMILIARITY WITH SIMILAR SERVICES OR PRODUCTS AND WILL THEY NEED TO LEARN ! NEEDS WHAT MOTIVATES THEM? DO THEY SHARE BEHAVIOURAL TRAITS? ! CONCERNS WHAT CONCERNS DO THEY HAVE? ! GIVE THEM NAMES AND DRAW THEIR FACE!
  70. 70. DESIGN2 Image Copyright: Be Gentlemen Limited Partnership & Lawrence Bender & Miramax Films
  71. 71. TASK PROFILING2 WHAT ACTIVITIES DO OUR USERS NEED TO PERFORM?
  72. 72. FREQUENCY2 WHAT WILL THE PEOPLE NEED TO DO MOST OFTEN?
  73. 73. CRITICAL2 CAN BE INFREQUENT, BUT IT’S CRITICAL TO SUPPORT THEM
  74. 74. DEFINING TASKS1 EXERCISE USER / ENVIRONMENT WHO NEEDS TO COMPLETE THIS TASK? WHAT IS THEIR ENVIRONMENT? ! OUTCOME WHY IS THE ACTIVITY PERFORMED? WHAT DOES THE USER ACHIEVE? ! DIFFICULTY WHAT PROBLEMS MIGHT THE USER ENCOUNTER? ! FREQUENCY HOW OFTEN IS THE TASK COMPLETED? ARE THERE TIME RESTRICTIONS ON IT? ! INPUT / OUTPUT WHAT WILL THE USER NEED TO PROVIDE? WHAT WILL THEY EXPECT BACK?
  75. 75. INFORMATION ARCHITECTURE2 EXERCISE BASED ON THOSE TASKS IDENTIFY THE KEY INTERFACES OR TOUCH POINTS THAT WILL BE REQUIRED IN THE TASK FLOW. ! WHAT CONTENT WILL NEED TO EXIST ON EACH? ! DESIGN URLS FOR EACH PAGE. Image Copyright: Columbia Pictures & Hawk Films
  76. 76. ADAPT3 Image credit: http://en.wikipedia.org/wiki/Apollo_13
  77. 77. SKETCHING3 Image Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
  78. 78. TIPS FOR PARTICIPATORY SKETCHING 1 ENCOURAGE LOW FIDELITY ! CRITIQUE AS A GROUP ! FRAME CRITIQUE USING PERSONAS
  79. 79. UI SKETCHING3 EXERCISE SKETCH OUT THE INTERFACES INVOLVED FOR ONE OF THE TASKS IDENTIFIED. ! START WITH MOBILE FIRST AND NUMBER EACH INTERFACE ELEMENT. ! REMEMBER WHAT IS IMPORTANT FOR YOUR KEY PERSONAS.
  80. 80. PROTOTYPE 3 Copyright: Paramount Pictures & Marvel Enterprises
  81. 81. USE STYLE TILES http://styletil.es/ 3 Copyright: Sandollar Productions & Touchstone Pictures
  82. 82. PROTOTYPECREATE PATTERN LIBRARIES http://boagworld.com/design/pattern-library/ 3 Copyright: Universal Pictures & Alphaville Films
  83. 83. MEASURE4 Image Copyright: DreamWorks SKG & Universal Pictures
  84. 84. Your ego is a bad designer CHRISTOPHER BUTLER http://www.newfangled.com/your_ego_is_a_bad_designer 4
  85. 85. CORRIDOR TEST4 EXERCISE Image Copyright: Warner Bros. & Legendary Pictures & Syncopy
  86. 86. NEARLY THERE Image Copyright: Paramount Pictures & Lucasfilm
  87. 87. WHY AND WHERE A USER-CENTRED APPROACH IS NECESSARY
  88. 88. THE 4 TENETS OF EFFECTIVE RESPONSIVE DESIGN
  89. 89. TECHNIQUES WITHIN THE USER-CENTRED DESIGN PROCESS
  90. 90. THANK YOU @duckymatt @danny_bluestone @cyberduck_uk Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm

×