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 full-size slide

  2. 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 full-size slide

  3. 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 full-size slide

  4. 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 full-size slide

  5. Native apps lead the way on this strategy…

    View full-size slide

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

    View full-size slide

  7. Throwback: 2004

    View full-size slide

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

    View full-size slide

  9. …and what will soon be loading…

    View full-size slide

  10. …and funnel user attention on what matters

    View full-size slide

  11. Settings Page v1

    View full-size slide

  12. Settings Page v2

    View full-size slide

  13. Settings Page v3

    View full-size slide

  14. Settings Page v3

    View full-size slide

  15. Settings Page v3

    View full-size slide

  16. Settings Page v3

    View full-size slide

  17. 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 full-size slide

  18. Thanks React Boston 2017
    Theo Pak // @theopak // [email protected]
    Send me your favorite example 

    of react skeleton states!

    View full-size slide