As mobile app development becomes more dominant in the tech world, we can observe several design patterns emerging across the entire mobile app design ecosystem. One of these design subsystems is the skeleton views.

skeleton-views-mobile-design-patterns-spinner

 

Skeleton Views are being used primarily to create an effect of speed and reliability, whenever the app encounters performance barriers, such as slow networking or heavy computation. They improve the user’s perception of the app, by providing a high-quality user interface experience.

Historically, the same effect was being created via activity indicators (a.k.a. spinners). While spinners represent a good way to indicate to the users the fact that something is loading in the background (such as a network request, for example), they could be distractive and annoying. Users are generally time-sensitive and the presence of spinners has a negative impact on engagement.

Skeleton views serve the same purpose as activity indicators, but they provide a better user experience overall, due to their beautiful design. They also provide more information to the users, such as the screen’s general layout, and where the data will be presented (and in which views). They make the app feel much faster.


facebook-app-skeleton-views slack-app-skeleton-views
We recommend using skeletons only on the screens that are generally slower. These are usually the screens where a lot of computation is needed or where there’s plenty of network requests. For example, Facebook is using skeleton views when the app is opened since the initial cold start is slower than regular screens.

Some general guidelines around skeleton views:

  • Use a very subtle grey for placeholders
  • Create skeleton views only for the most important views, which shape the interface significantly.
  • Do not create skeleton views for static views, for which the content already exists in the app
  • Prioritize the creation of skeletons for the most important and computation-heavy screens

If you’d looking to use skeleton views into your iOS app, you could use this open-source project, written in Swift 4.

Categories: Design

Leave a Reply

Your email address will not be published. Required fields are marked *