React skeleton states save the day (and look good doing it)

287abe4d8c0bf8eae92dd59b753f6323?s=47 Theo Pak
September 23, 2017

React skeleton states save the day (and look good doing it)

287abe4d8c0bf8eae92dd59b753f6323?s=128

Theo Pak

September 23, 2017
Tweet

Transcript

  1. Skeleton states save the day (and look good doing it)

    Theo Pak theopak@gmail.com
  2. HubSpot CRM

  3. Umm, so the results are in. ! Support Tickets L90

    Spreadsheet from Google Drive Over the past 90 days, a single topic generated 726 customer support cases: One day at work a Product Manager notices a problem… several people are typing…
  4. None
  5. None
  6. None
  7. Support Tickets L90 Spreadsheet from Google Drive One day at

    work a Product Manager notices a problem… If any one of the APIs fail then our whole page gets stuck! Umm, so the results are in. ! Over the past 90 days, a single topic generated 726 customer support cases:
  8. Introducing skeleton states A skeleton state is a design strategy

    where the layout and functions of a React component can populate the screen before they have any data about content. Native apps have a rich history of using launch screens and interface previews to do this. Theo Pak Software Engineer Theo Pak Software Engineer
  9. Native apps lead the way on this strategy…

  10. …and js apps can get some of the same benefits

  11. Throwback: 2004

  12. Skeleton states can hint at what’s loading…

  13. …and what will soon be loading…

  14. …and funnel user attention on what matters

  15. Settings Page v1

  16. Settings Page v2

  17. Settings Page v3

  18. Settings Page v3

  19. Settings Page v3

  20. Settings Page v3

  21. And why should PMs care? Skeleton states save the day

    " Design a UI that puts the right data in the right locations. # Have a programmatic way to tell when data is done loading. $ Have a plan in case loading fails. Skeleton states can improve reliability!
  22. Thanks React Boston 2017 Theo Pak // @theopak // tpak@hubspot.com

    Send me your favorite example 
 of react skeleton states!