JSFoo 2017

JSFoo is a conference about JavaScript and everything related.

How to Speed Up Your UX with Skeleton Screens

Submitted by Chris Lienert (@cliener) on Monday, 22 May 2017

videocam_off

Technical level

Intermediate

Section

Full Talk

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +3

Abstract

However well designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load. Skeleton screens are an effective alternative to progress bars and wait indicators to improve perceived performance.
This talk covers every aspect of skeleton screens from psychology to design to putting them in action with JavaScript.

Outline

This talk is an extension of the article How to Speed Up Your UX with Skeleton Screens https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/. The article has proven very popular on SitePoint with over 15,000 views and comes in first on Google when searching the phrase “skeleton screens”.

Beyond the scope of the article, the talk demonstrates how to implement skeleton screens with provided source code. Skeleton screens are an important tool for improve perceived page load.

Abstract:
- Psychology of Waiting - Skeleton Screens in the Wild - Making it Happen: * Design * Code

Speaker bio

Chris started out as a web developer when Netscape ruled the world and is currently an engineering manager at CXA in Singapore. He has written for Net Magazine and SitePoint, and founded community group Singapore CSS because someone had to.
Aside from musical distractions and accumulating frequent flyer points, Chris and his wife Sarah can be found in the company of their small human.

Links

Comments

  • 1
    Ankur Sethi (@s3thi) Reviewer a year ago

    Hey Chris, can you share links to your slides? Also, will you use a framework for demonstrating the concept or will this be vanilla JS?

  • 1
    Chris Lienert (@cliener) Proposer a year ago

    Draft slides: https://www.slideshare.net/cliener/skeleton-screens-early-draft-for-jsfoo-2017
    What is “framework”? :o)
    Working on the code now but I’ll release it on GitHub. Framework agnostic but I’ll work on a React demo since that’s what I’m using at present

  • 1
    Chris Lienert (@cliener) Proposer a year ago

    Short video explaining what I’ll be talking about https://www.youtube.com/watch?v=-MHCpvae6sw

Login with Twitter or Google to leave a comment