Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Theo Pak
September 23, 2017

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

Theo Pak

September 23, 2017
Tweet

More Decks by Theo Pak

Other Decks in Technology

Transcript

  1. Skeleton states save the day
    (and look good doing it)
    Theo Pak
    [email protected]

    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 // [email protected]
    Send me your favorite example 

    of react skeleton states!

    View Slide