Note: The Designing App-Like Patterns series is intended for interaction designers. This series will show you how to use the Mobify Platform to design performant shopping experiences, with app-like user experience best practices.
- Mobify placeholders research
- Designing for the Appearance of Speed
Placeholders are an important tool for achieving instant page transitions. Typically, placeholders are monotone basic shapes that act as a skeleton, taking up the place of the actual content before it gets rendered. The most common use case for placeholders is anytime that content is loaded over the network via a parser. In these cases, the page will render faster than the actual content can display, and it's important to tell the user that content is on its way.
Skeleton component placeholders are used in place of progress loaders (linear, determinate or otherwise) in order to divert the user’s attention away from the fact that they need to wait for content to load. They are also designed to communicate the basic structure of the loaded page.
Instead of a progress loader, the placeholders inform the user about the quality and quantity of the content before it appears. Placeholders should not be used in cases where the content they are mimicking will be ready on page render or in a very short time period afterwards (less than a second). Only content that can take an indeterminate amount of time should leverage a placeholder implementation.
Not only do placeholders give an expectation of the type of content that will be rendered, but they also increase the user's perceived performance or the measure of how fast something feels to a user.
The key to achieving a good skeleton state is to make the skeleton look similar enough to the fully-loaded page, to the point that the user does not notice any change between the two states. When in doubt, choose a skeleton layout that depicts less UI and information than the actual content.
SkeletonBlock is used as a placeholder for larger chunks of information, such as images. The component can have custom height and width, allowing you to mimic the height and width of the actual content.
SkeletonInline can be used as a placeholder for inline pieces of content, such as Breadcrumbs or List components. In this component, only the width can be customized.
SkeletonText can be used as a placeholder for multiple lines of text, such as paragraphs. For the best effect, make sure that SkeletonText reflects a limited amount of information before the full content loads. There’s no need to size SkeletonText exactly for the actual content, since the multiple lines of text are likely to vary for each page.
Placeholders can be flexible lengths on longer pages
On longer pages, placeholders don't have to be sized to match the actual length of the content. As an example, take a look at the partially-loaded product description page above, which shows a user scrolling partway down the page. In this case, the SkeletonText placeholder is considerably shorter than the product details content to be loaded, depicted to the right. For placeholders partway down the page, you can design a placeholder that’s shorter than the actual content, because the content will typically load almost immediately.
In fact, it’s likely that the content will load so quickly that these placeholders may not even be seen. In general, you only need to size a placeholder exactly if it’s replacing initial page load content. For initial page load placeholders, matching the sizing of the actual content will prevent the feeling of the content jumping on initial load.