Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web

1.585 visualizaciones

Publicado el

People expect to access and use the products that they love everywhere that they go. With an ever-increasing number of different smartphones, tablets, computers, wearables, and televisions that allow us to view websites, this makes our jobs as interactive designers even more challenging. Are you helping them focus on what they really need to get done, on the devices where they need that functionality the most?

In this workshop from HOW Design Live 2016, which was led by David Sherwin and Drew Bridewell with about 250 people, we shared techniques to help teams:

● Prioritize what product features will have the most value for your users across smartphone, tablet, desktop, TV, wearables, and other devices—so you’re investing your time and energy into the right features in the right places

● Validate your product assumptions and hypotheses through paper and digital prototypes, so you can start building those features intelligently

● Plan the implementation of your product features for development in a modular, componentized manner that makes them easier to test and scale

Along with workshop activities rooted in the above techniques, we shared how we used similar approaches in a redesign of the learning experience of Lynda.com as a responsive web product.

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web

  1. 1. You’ve Only Got Two Eyeballs: Designing Products 
 for the Responsive Web @abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation Part one of a workshop by Drew Bridewell + David Sherwin
  2. 2. Hello. We work on Lynda.com at LinkedIn. @abridewell + @changeorder • #rwpd • HOW Design Live Our product helps people learn business, technology and creative skills to achieve their personal, academic and professional goals.
  3. 3. Mobile + tablet apps iOS Android Windows 8 OSX Windows Apple TV Roku TV appsDesktop apps Anytime, anywhere learning via our apps @abridewell + @changeorder • #rwpd • HOW Design Live
  4. 4. Mobile + tablet web Anytime, anywhere learning in the browser @abridewell + @changeorder • #rwpd • HOW Design Live Desktop web Large display + 
 multi-screen use
  5. 5. 11:30 AM–12:15 PM Modular Design Approaches 
 for Responsive Web Products 10:15 AM–11:00 AM Prioritizing Features for Responsive Web Products @abridewell + @changeorder • #rwpd • HOW Design Live This workshop is about planning the creation of responsive web products
  6. 6. Part 1 Prioritizing Features for
 Responsive Web Products @abridewell + @changeorder • #rwpd • HOW Design Live
  7. 7. Responsive web design is… when you resize your browser window and the website does this cool thing where it changes the layout @abridewell + @changeorder • #rwpd • HOW Design Live
  8. 8. @abridewell + @changeorder • #rwpd • HOW Design Live Responsive web design is… when you resize your browser window and the website does this cool thing where it changes the layout
  9. 9. Responsive web design is… @abridewell + @changeorder • #rwpd • HOW Design Live Fluid grid, flexibile images, media queries (a la Ethan Marcotte)
  10. 10. Responsive web design is… @abridewell + @changeorder • #rwpd • HOW Design Live But it’s more than technical considerations Fluid grid, flexibile images, media queries (a la Ethan Marcotte)
  11. 11. Responsive Design Fundamentals • Responsive Web Design in the Browser • Creating a Responsive Web Design • Advanced Techniques in Responsive Web Design • Responsive SVG Images • Responsive Web Design with Bootstrap and Dreamweaver • Creating a Responsive Design with Edge Reflow • Responsive Images • Building Responsive Forms • Design Aesthetics for Web Design • Building a Responsive Single-Page Design • Creating a Responsive Web Experience • And many more… Sure, we have 35+ courses on responsive web design @abridewell + @changeorder • #rwpd • HOW Design Live
  12. 12. @abridewell + @changeorder • #rwpd • HOW Design Live But our courses don’t always talk about 
 the hard tradeoffs that happen when you 
 plan and design web applications on 
 select Internet-connected devices.
  13. 13. Course page
 from 2014
  14. 14. Our design process Content Strategy Project Goals Feature Prioritization Information Architecture Iterative Prototyping & Testing Engineering & QA A/B @abridewell + @changeorder • #rwpd • HOW Design Live
  15. 15. Content Strategy Project Goals Feature Prioritization Information Architecture Iterative Prototyping & Testing Engineering & QA A/B @abridewell + @changeorder • #rwpd • HOW Design Live
  16. 16. Project goals @abridewell + @changeorder • #rwpd • HOW Design Live 1. Increased access via mobile, tablet, and large-screen devices 2. Improved usability and accessibility for members 3. Easier updates for new features and experimentation Overall, preserve engagement and learning efficacy.
  17. 17. Designing for scale Millions of learners and thousands of organizations around the world 7,000+ courses and 100,000’s of videos in five languages New interactive learning features like quizzes and code practice @abridewell + @changeorder • #rwpd • HOW Design Live
  18. 18. Content Strategy Project Goals Feature Prioritization Information Architecture Iterative Prototyping & Testing Engineering & QA A/B @abridewell + @changeorder • #rwpd • HOW Design Live
  19. 19. Lynda.com Course @abridewell + @changeorder • #rwpd • HOW Design Live
  20. 20. Lynda.com Course Understand Apply @abridewell + @changeorder • #rwpd • HOW Design Live Plan
  21. 21. Lynda.com Course Navigate course Read course overview Add to playlist See related courses Watch video Read transcript Write notes Download exercise files Participate in quizzes Practice in coding window @abridewell + @changeorder • #rwpd • HOW Design Live Understand Apply Plan
  22. 22. Navigate course Read course overview Add to playlist See related courses Watch video Read transcript Write notes Download exercise files Participate in quizzes Practice in coding window Prioritizing responsive web features across devices @abridewell + @changeorder • #rwpd • HOW Design Live Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes XL Desktop Desktop Tablet Smartphone Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No No No No Yes No No No Understand Apply Plan
  23. 23. Where will people expect to access content? How frequently? With what session duration? What information will people require? Is most relevant in that context? In what chunks? What functionality should people use? Will be hard to use on smaller screens? Require an app? @abridewell + @changeorder • #rwpd • HOW Design Live Features Content Context Questions to ask your team
  24. 24. Activity 1 Feature Prioritization Bingo @abridewell + @changeorder • #rwpd • HOW Design Live
  25. 25. Find a partner Take 2 minutes to get to know each other. You’re a team. @abridewell + @changeorder • #rwpd • HOW Design Live
  26. 26. 10-Second Film Festival A client has approached you with an idea perfect for people with short attention spans: An online competition for the best 10-second videos created by independent filmmakers. @abridewell + @changeorder • #rwpd • HOW Design Live Your challenge:
  27. 27. Each feature costs a certain amount to implement for each breakpoint. And your team only has $100. In the next 15 minutes, work with your partner to 
 debate and decide what features you want to build, 
 and on what devices. @abridewell + @changeorder • #rwpd • HOW Design Live
  28. 28. Designing Products for the Responsive Web: Feature Prioritization Bingo Your team has $100 to spend on design and development for your 10-Second Film Festival website. With your partner, figure out how you want to spend your money. What features do you want to support, and on what devices? Why did you make those choices? ©2016 Drew Bridewell & David Sherwin / LinkedIn / @abridewell + @changeorder Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later XL Desktop Desktop Tablet Smartphone $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 Total Cost Per Feature Total Cost for App $ $ $ $ $ $ $ $ $ Debate which features
 have the most value
 for your users. @abridewell + @changeorder • #rwpd • HOW Design Live
  29. 29. Designing Products for the Responsive Web: Feature Prioritization Bingo Your team has $100 to spend on design and development for your 10-Second Film Festival website. With your partner, figure out how you want to spend your money. What features do you want to support, and on what devices? Why did you make those choices? ©2016 Drew Bridewell & David Sherwin / LinkedIn / @abridewell + @changeorder Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later XL Desktop Desktop Tablet Smartphone $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 Total Cost Per Feature Total Cost for App $ $ $ $ $ $ $ $ $ Debate which features
 have the most value
 for your users. @abridewell + @changeorder • #rwpd • HOW Design Live
  30. 30. Designing Products for the Responsive Web: Feature Prioritization Bingo Your team has $100 to spend on design and development for your 10-Second Film Festival website. With your partner, figure out how you want to spend your money. What features do you want to support, and on what devices? Why did you make those choices? ©2016 Drew Bridewell & David Sherwin / LinkedIn / @abridewell + @changeorder Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later XL Desktop Desktop Tablet Smartphone $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 Total Cost Per Feature Total Cost for App $ $ $ $ $ $ $ $ $ Debate which features
 have the most value
 for your users. @abridewell + @changeorder • #rwpd • HOW Design Live CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include must support the XL Desktop breakpoint.
  31. 31. Designing Products for the Responsive Web: Feature Prioritization Bingo Your team has $100 to spend on design and development for your 10-Second Film Festival website. With your partner, figure out how you want to spend your money. What features do you want to support, and on what devices? Why did you make those choices? ©2016 Drew Bridewell & David Sherwin / LinkedIn / @abridewell + @changeorder Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later XL Desktop Desktop Tablet Smartphone $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 Total Cost Per Feature Total Cost for App $ $ $ $ $ $ $ $ $ 18 @abridewell + @changeorder • #rwpd • HOW Design Live Debate which features
 have the most value
 for your users. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include must support the XL Desktop breakpoint.
  32. 32. Designing Products for the Responsive Web: Feature Prioritization Bingo Your team has $100 to spend on design and development for your 10-Second Film Festival website. With your partner, figure out how you want to spend your money. What features do you want to support, and on what devices? Why did you make those choices? ©2016 Drew Bridewell & David Sherwin / LinkedIn / @abridewell + @changeorder Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later XL Desktop Desktop Tablet Smartphone $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 3 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 5 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 7 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 $ 10 Total Cost Per Feature Total Cost for App $ $ $ $ $ $ $ $ $ 18 8 Identify the tradeoffs. @abridewell + @changeorder • #rwpd • HOW Design Live Debate which features
 have the most value
 for your users. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include for the app must support the XL Desktop breakpoint. CONSTRAINT Every feature you decide to include must support the XL Desktop breakpoint.
  33. 33. Share with another team @abridewell + @changeorder • #rwpd • HOW Design Live Show them your worksheet and the prioritization decisions you made. Take only 2 minutes per team.
  34. 34. Great job, everyone! @abridewell + @changeorder • #rwpd • HOW Design Live
  35. 35. You’ve Only Got Two Eyeballs: Designing Products 
 for the Responsive Web @abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation See you back here at 11:30 sharp for Part 2!
  36. 36. You’ve Only Got Two Eyeballs: Designing Products 
 for the Responsive Web @abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation Part two of a workshop by Drew Bridewell + David Sherwin
  37. 37. @abridewell + @changeorder • #rwpd • HOW Design Live 10:15 AM–11:00 AM [second phase - 11:30-12:15] 11:30 AM–12:15 PM Prioritizing Features for Responsive Web Products Modular Design Approaches 
 for Responsive Web Products This workshop is about planning the creation of responsive web products
  38. 38. Part 2 Modular Design Approaches
 for Responsive Web Products @abridewell + @changeorder • #rwpd • HOW Design Live
  39. 39. Content Strategy Project Goals Feature Prioritization Information Architecture Iterative Prototyping & Testing Engineering & QA A/B @abridewell + @changeorder • #rwpd • HOW Design Live Now that you’ve prioritized your features, it’s time to define your grid…
  40. 40. @abridewell + @changeorder • #rwpd • HOW Design Live
  41. 41. @abridewell + @changeorder • #rwpd • HOW Design Live 2:02 / 5:16 Contents Notebook 2:02 / 5:16 Contents Notebook
  42. 42. Contents Notebook Create prototypes on the grid @abridewell + @changeorder • #rwpd • HOW Design Live 2:02 / 5:16
  43. 43. Certain features will not live on all screens @abridewell + @changeorder • #rwpd • HOW Design Live 2:02 / 5:16 Notes Code Practice Transcript Exercise Files
  44. 44. t Y X X X Y Y Test horizontal and vertical breakpoints for your content @abridewell + @changeorder • #rwpd • HOW Design Live
  45. 45. Course page modules and patterns on Lynda.com @abridewell + @changeorder • #rwpd • HOW Design Live
  46. 46. Activity 2 “All at Once” Design @abridewell + @changeorder • #rwpd • HOW Design Live
  47. 47. Get back with your team. Snag your Feature Prioritization worksheet from Part 1. If you just joined us, find a team to work with. @abridewell + @changeorder • #rwpd • HOW Design Live
  48. 48. 10-Second Film Festival A client has approached you with an idea perfect for people with short attention spans: An online competition for the best 10-second videos created by independent filmmakers. @abridewell + @changeorder • #rwpd • HOW Design Live
  49. 49. Using your feature prioritization from Activity 1, 
 create a design for the home page of your 
 10-Second Film Festival web site. You have 20 minutes to create this design for 
 browsers on desktop, tablet, and smartphone. @abridewell + @changeorder • #rwpd • HOW Design Live
  50. 50. Check off what features you’ll be including 
 on your home page for each device. Designing Products for the Responsive Web Based on the features you “bought” in the previous activity, sketch how those features should appear on the home page for your 10-Second Film Festival website. Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later My paper prototype for Desktop will include: @abridewell + @changeorder • #rwpd • HOW Design Live
  51. 51. Block off where you think features will go on 
 ALL the devices before you start sketching. (The video player aspect ratio is the primary constraint.) @abridewell + @changeorder • #rwpd • HOW Design Live
  52. 52. @abridewell + @changeorder • #rwpd • HOW Design Live Designing Products for the Responsive Web Based on the features you “bought” in the previous activity, sketch how those features should appear on the home page for your 10-Second Film Festival website. Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later My paper prototype for Desktop will include: browse watch browse vote upload comment
  53. 53. Designing Products for the Responsive Web Based on the features you “bought” in the previous activity, sketch how those features should appear on the home page for your 10-Second Film Festival website. Upload videos to enter festival Watch video entries on website Search video entries on website Vote on video entries on website Share videos from website Comment on video entries Browse video entries by category Save favorite video entries to view later My paper prototype for Desktop will include: browse watch browse vote upload comment
  54. 54. Giveyourteamafistbump! @abridewell + @changeorder • #rwpd • HOW Design Live
  55. 55. Course page
 from 2014
  56. 56. New design
  57. 57. @abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation You’ve only got two eyeballs.
  58. 58. @abridewell + @changeorder • #rwpd • HOW Design Live • ©2016 LinkedIn Corporation Keep people focused.

  59. 59. Thanks for joining us! ©2016 LinkedIn Corporation Drew Bridewell dbridewell@linkedin.com @abridewell David Sherwin david@changeorderblog.com @changeorder

×