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

conf video: https://youtu.be/iFgSvLUzQSU?t=4828

https://reactboston.com/2017/

Transcript

1. Skeleton states save the day
   (and look good doing it)
   Theo Pak
   theopak@gmail.com
   

   View Slide

2. HubSpot CRM
   

   View Slide

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…
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

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:
   

   View Slide

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
   

   View Slide

9. Native apps lead the way on this strategy…
   

   View Slide

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

    View Slide

11. Throwback: 2004
    

    View Slide

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

    View Slide

13. …and what will soon be loading…
    

    View Slide

14. …and funnel user attention on what matters
    

    View Slide

15. Settings Page v1
    

    View Slide

16. Settings Page v2
    

    View Slide

17. Settings Page v3
    

    View Slide

18. Settings Page v3
    

    View Slide

19. Settings Page v3
    

    View Slide

20. Settings Page v3
    

    View Slide

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!
    

    View Slide

22. Thanks React Boston 2017
    Theo Pak // @theopak // tpak@hubspot.com
    Send me your favorite example 

    of react skeleton states!
    

    View Slide