Your SlideShare is downloading. ×
0
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UX Design for the Responsive Web - UX London 2014 Workshop

3,084

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, …

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
3,084
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
264
Comments
1
Likes
23
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. UX DESIGN FOR THE RESPONSIVE WEB
  • 2. HELLO I’m Matt @duckymatt ! ! ! ! ! !
  • 3. HELLO I’m Danny @danny_bluestone ! ! !
  • 4. @cyberduck_uk cyber-duck.co.uk
  • 5. THE PLAN 3 HOUR WORKSHOP DELVING INTO USER-CENTRIC APPROACHES TO RESPONSIVE DESIGN Image Copyright: Lucasfilm & Twentieth Century Fox
  • 6. FIRST, HOW DO WE DEFINE RESPONSIVE?
  • 7. To react quickly and positively.
  • 8. Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
  • 9. PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET Image Copyright: Walt Disney Pictures & Tim Burton Pictures
  • 10. UX? SO, HOW DOES THAT RELATE TO
  • 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. 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. WHAT SHOULD GOOD UX ACCOMPLISH?
  • 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. 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. Credit: http://wtfmobileweb.com/
  • 17. A B C ANALYSING UX
  • 18. AS A MECHANIC… Image Copyright: Paramount Pictures & Robert Stigwood & Allan Carr Productions
  • 19. AS A CAMPER… Image Copyright: Peter Rodgers Productions & The Rank Organisation
  • 20. GOOD UX DEPENDS ON CONTEXT THE USER, THE ENVIRONMENT, THE TASK AND OTHER FACTORS Image Copyright: Warner Bros. & Esperanto Filmoj & Heyday Films
  • 21. USER CENTRED DESIGN Image Copyright: HBO
  • 22. Credit: http://xkcd.com/773/
  • 23. Credit: http://www.projectcartoon.com/cartoon/1
  • 24. RESEARCH DESIGN ADAPT MEASURE 13 2 4
  • 25. USER CENTRED DESIGN
 ON A RESPONSIVE WEB?
  • 26. 4 TENETS OF GOOD RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
  • 27. CONTENT PARITY Credit: http://wtfmobileweb.com/ THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS 1
  • 28. SPEED MATTERS BECAUSE PERFORMANCE AFFECTS EVERYONE 2 Image Copyright: Universal Pictures
  • 29. FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
  • 30. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS 4 Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
  • 31. CONTENT PARITY 1
  • 32. ASSUMPTIONS 1 Image Copyright: BBC
  • 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. Credit: http://xkcd.com/773/ 1
  • 35. 1
  • 36. RESEARCHING CONTENT STRATEGY EXISTING CUSTOMERS DATA ANALYSIS MARKET RESEARCH ETHNOGRAPHY 1 Image Copyright: Warner Bros. STAKEHOLDER INTERVIEWS
  • 37. OUR CONTENT DEFINES THE LAYOUTS WE NEED! NOT THE OTHER WAY AROUND 1
  • 38. SPEED MATTERS 2
  • 39. 2 moto.oakley.com
  • 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. DOES RESPONSIVE = POOR PERFORMANCE? Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ 2
  • 42. IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE 2 Image Copyright: Metro-Goldwyn-Mayer (MGM)
  • 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. FUTURE FRIENDLINESS 3
  • 45. THE WEB DOESN’T HAVE A FIXED WIDTH 3
  • 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. LAYOUT AND FLOW 3
  • 48. LAYOUTS BASED ON CONTENT RATHER THAN DEVICE 3
  • 49. ENHANCE FOR CONTEXT 3
  • 50. ANIMATION AS AN ENHANCEMENT? 3 Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
  • 51. LOCATION AS AN ENHANCEMENT? 3 Copyright: Metro-Goldwyn-Mayer (MGM)
  • 52. ACCESSIBILITY 4
  • 53. DESIGN FOR TOUCH BY DEFAULT 4 DOES YOUR DESIGN PASS THE ‘RULE OF THUMB’ TEST? ! ARE YOU RELYING ON HOVER?
  • 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. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE 4 CAN PEOPLE TELL WHERE THEY ARE ON YOUR WEBSITE FROM THE URL ALONE?
  • 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. 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. APPLYING OUR PRINCIPLES OF
 RESPONSIVE DESIGN THROUGH UCD
  • 59. THE BRIEF
  • 60. RESEARCH DESIGN ADAPT MEASURE 13 2 4
  • 61. RESEARCH1 Image Copyright: Warner Bros.
  • 62. STAKEHOLDER INTERVIEWS http://goodkickoffmeetings.com/2010/04/stakeholder-frontloading/ 1
  • 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. 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. IDENTIFYING OUR USERS? 1 EXERCISE Image Copyright: Paramount Pictures
  • 66. PERSONAS1 Image Copyright: Astralwerks, & Gramercy Pictures & Propaganda Films & Single Cell Pictures
  • 67. TIPS FOR CREATING PERSONAS1 RESEARCH EXISTING USERS ! RESEARCH COMPETITORS ! ETHNOGRAPHIC STUDIES ! SOCIAL MEDIA ! DOMAIN EXPERT INSIGHT ! DATA!
  • 68. FINDING OUR USERS1 ETHNIO ! SOCIAL MEDIA ! PHYSICAL LOCATIONS ! USE PROFESSIONAL RECRUITERS ! THE CLIENT…
  • 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. DESIGN2 Image Copyright: Be Gentlemen Limited Partnership & Lawrence Bender & Miramax Films
  • 71. TASK PROFILING2 WHAT ACTIVITIES DO OUR USERS NEED TO PERFORM?
  • 72. FREQUENCY2 WHAT WILL THE PEOPLE NEED TO DO MOST OFTEN?
  • 73. CRITICAL2 CAN BE INFREQUENT, BUT IT’S CRITICAL TO SUPPORT THEM
  • 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. 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. ADAPT3 Image credit: http://en.wikipedia.org/wiki/Apollo_13
  • 77. SKETCHING3 Image Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
  • 78. TIPS FOR PARTICIPATORY SKETCHING 1 ENCOURAGE LOW FIDELITY ! CRITIQUE AS A GROUP ! FRAME CRITIQUE USING PERSONAS
  • 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. PROTOTYPE 3 Copyright: Paramount Pictures & Marvel Enterprises
  • 81. USE STYLE TILES http://styletil.es/ 3 Copyright: Sandollar Productions & Touchstone Pictures
  • 82. PROTOTYPECREATE PATTERN LIBRARIES http://boagworld.com/design/pattern-library/ 3 Copyright: Universal Pictures & Alphaville Films
  • 83. MEASURE4 Image Copyright: DreamWorks SKG & Universal Pictures
  • 84. Your ego is a bad designer CHRISTOPHER BUTLER http://www.newfangled.com/your_ego_is_a_bad_designer 4
  • 85. CORRIDOR TEST4 EXERCISE Image Copyright: Warner Bros. & Legendary Pictures & Syncopy
  • 86. NEARLY THERE Image Copyright: Paramount Pictures & Lucasfilm
  • 87. WHY AND WHERE A USER-CENTRED APPROACH IS NECESSARY
  • 88. THE 4 TENETS OF EFFECTIVE RESPONSIVE DESIGN
  • 89. TECHNIQUES WITHIN THE USER-CENTRED DESIGN PROCESS
  • 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

×