Empty states help communicate that an app has no content to show but also what kind of content a user should expect to see on the page.
An excellent empty state or page uses this opportunity to build trust or provide suggestions that help users fix or continue their task.
Empty states are crucial when designing apps that use authentication or fetch because some authenticated users may not have any content or data associated with their accounts.
Layout examples
Create app header
Designing an app header is a great way to keep your app and its branding top-of-mind for users. It’s a familiar pattern across the web so users will know what to expect, commonly containing:
- App logo and name
- Account-related items, like settings and notifications
- Other tertiary or high-level functions
Create a footer
A footer is an area that is affixed to the bottom of your app. You can use a footer to ensure the most important actions are always visible, like the primary CTA button, even when your app overflows the viewport and requires vertical scroll.
Apps often have display navigation to help users understand where they are in a multi-step workflow, folder, or organizational hierarchy. This helps users navigate through data, files, or backwards/forwards in a step-by-step process.
If you’re using a header, we recommend displaying this navigational subheader at the top of the iframe.
Display components vertically, but use a grid layout for images.
Because the width of the app panel can be narrow, we recommend stacking your components in a row layout, instead of a column format which can cause a narrow space to feel even more narrow. Don’t be afraid to use vertical scrolling if there’s overflow.
One exception to the rule is when your app shows a gallery of images or videos, like in the example above. In these cases, it’s best to show a grid or inline layout.
Use full-width buttons and components
Using full-width helps with the visual balance of your app and can help your app feel simpler, cleaner, and easier to scan or read.
