#Overview
A skeleton is used for loading a full page or parts of a page with a predictable layout.
A predictable layout means we know which elements will load, where they will sit on the page, and how they will appear.
This gives users a sense of what the page will look like while it is being loaded. It helps to create the illusion of a shorter wait time, reduces cognitive load, and minimises big jumps in the page layout.
See Loaders for further information about the types of loading states we use and general best practices.
#When to use
- Search results
- Images
- Filters
- Product tiles
- Accordions
- Tables and lists
#Don’t use for
- Processing or loading content that is unpredictable (use a Spinner)
- If you know the exact wait time (this is called determinate loading – accurately representing progress with a clear start and end)
#Anatomy
The graphic below is an example only. The design of a skeleton must be made on a case-by-case basis, as it should have the same shape, size and spacing as the elements they represent. It is also important to keep it as simple as possible.
- Image
- Text
- Button
#Color
Digitec and Galaxus use different colors. All elements in a skeleton use the same color.
- Galaxus
- Digitec
#Text
Text of unknown length should be represented with 2 rectangles of different width. Headlines are an exception as they are usually 1 line and should be represented with a single rectangle.
Text should always be represented with a rectangle that has the height of the font’s x-height. If a higher height is used the item looks feel too heavy.
#Best practices
#Represent content accurately
Do
Display elements using the right shape, size and spacing.
Don't
Use a different shape than the element it represents. It is hard for the user to perceive what content will load if there is no hint of the shape.
#Keep it simple
Do
Use as few items as possible to convey the content that is being loaded.
Don't
Overcomplicate the skeleton by including every little detail, even when we know exactly what is being loaded.
#Design for the most common dataset or use case
For example, the usual number of products in an order is 2. The skeleton for the order overview page should therefore represent 2 products.
#Placement
#Search results
#Images
#Filters
#Product tiles
The skeleton for the product tiles has a unique treatment.
There are many rows of products to load, however it is not necessary to display all in the skeleton. Only 2 rows are displayed which gives enough of a visual preview above and below the fold.
The first row uses the standard animation. The second row has an additional fade from left to right, hinting at the notion that more rows of tiles are loading.
#Accordions
#Tables and lists
