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 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.
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.