How To Design Empty State Pages for Websites & Mobile Apps

DigitalOcean Floating IPs

Bitbucket

GitHub Wiki Pages

The Value of Empty States

The most important element on an empty state page is context. This may come in the form of graphics, text, or both. You want to inform users why the page is empty and what sort of data could be there (emails, tweets, friend profiles, etc).

Empty states also give a sense of “freshness” with new accounts that have no existing data.

Dropbox has a great design with two CTA buttons. Whenever a Dropbox user has no folders they can either create a new folder or add a sample folder onto the page.

Chrome Bookmarks Manager

This empty state by ModSpot is a brilliant example of quality design and encourageable content.

tookapic homepage

The goal is to help users take action and clear up their empty state. Whether this requires adding data or taking action on the site, CTAs guide users onto the next step necessary to clear up the empty state.

Perhaps the best way to learn about empty state design is to study some examples. The brilliant web gallery emptystat.es curates empty state pages from various websites to mobile applications.

metrics dashboard empty state

Apps that thrive on a userbase should design empty states that encourage user activity. This activity could be publishing content, adding friends, uploading photos, or whatever the app was made for. The screen below from Tookapic is a great example.

Vital Page Elements

The best way to encourage activity is to write great copy on your empty state page. Guide users through a content flow that encourages user activity over the entire application.

DigitalOcean has a brilliant dashboard with empty state graphics that illustrate their point clearly. Their company uses creative branding and clean typography so it’s no surprise their empty state pages are so illustrative.

digital ocean empty state

Call to action buttons are the active elements but remember that page copy explains what the user is doing. Nobody just clicks buttons without knowing why.

No Pinned Groups

And while text is the primary communication medium on the web, you can’t overlook the value of graphics and icons.

dropbox folder empty state

Flipboard

Encouraging User Activity

Mac Infinit App

Empty Facebook Feed

no posts in modspos

Mobile apps may have similar problems but the screens are much smaller. This makes it a lot easier to draw users right into the action.

This can include mobile applications, social networks, or even empty blog categories. The purpose is to deliver an empty page that looks like a non-empty page. Visitors should recognize the lack of content as a means of impending content.

Websites on larger screens have more room for extra buttons. Web pages can also have larger navigation elements which can draw people elsewhere onto the site.

gumroad empty state page

Static information is just as valuable and it’s not inherently bad to have an empty state. For example this page design shows no current metrics from a tracking app dashboard. The user may want to add some metrics, but it’s not bad to leave the dash empty.

Web vs. Mobile Apps

I find it’s best to keep mobile apps simpler with fewer options. Use visuals as eye candy to encourage action and point towards a very specific user flow.

Similarly the Gumroad empty state offers two options targeting different potential actions. Users can add a digital product or a physical product to get started selling.

nusii app empty state

This can be solved in a similar style as Nusii does on their proposals page. Where there are no proposals the user is guided to the “add proposals” button in the top navigation bar.

Buffer Empty

BBC My News

Empty State Design Examples

But empty state pages still have value even when no action is needed. These designs are primarily made to provide information.

Invision

Webflow Beta

digitalocean dashboard list

Workout Challenges

webflow websites beta dashboard

I’d like to cover how empty state pages work and why they’re so important. Interface designers should consider these points and try to apply them to empty states whenever appropriate. But to get started let’s examine how an empty state functions and how it provides value to the interface.

invision app dashboard

Facebook Messages

bitbucket no downloads

LayerVault

no pinned groups homepage

Audible Audio Books

empty state facebook messages

This test done by Redditor Bambo_Ocha checked 20 different apps for empty state designs. Various design styles occurred with CTA buttons, sample data, and even brief tutorial walkthroughs.

layervault version control app

Icons are used to demonstrate what the user should add to the site. An arrow points to the button users should click along with some text encouraging behavior. This is a brilliant empty state design with all the elements you’d expect.

boxing challenges workout

Similar static designs may work great for empty blog archives or empty messages folders. It’s perfectly acceptable to have no messages to display. But the page shouldn’t be completely empty with no context either.

buffer empty app

Another crucial aspect of empty state design is the call to action button. This is typically designed like a button although hyperlinks work fine too.

microsoft word app documents

Blank pages are boring, dull, and even confusing. Empty states provide guidance to help users understand what they’re looking at. Even though it’s a blank page the extra context helps.

evernote chats android

Evernote Chats

beamly app android

The beauty of a great empty state design is in the simplicity. Empty pages explain what should be on the page once there’s some content. It may be passive like an empty inbox, or it may be actively waiting for the user like an empty Twitter feed.

audio books list

Beamly For Android

pocket list ui design

I’ve hand-picked some examples deserving of your attention that best illustrate empty state design. If you have any other suggestions feel free to let us know.

bbc mobile app my news

Pocket App

empty wiki on github state

Empty state pages are lesser-known design elements with a significant role in user experience. In its simplest form, empty states are page layouts seen when a user first visits a page where no content is available.

flipboard not following anyone

Empty state pages for all mediums should follow similar design trends. But there are some minor differences with user experience on a desktop compared to a smartphone.

chrome empty bookmarks manager

Other links on the page lead to help guides and contact details. Everything is incredibly streamlined and ties together nicely.

mac app infinit screen

Word App Documents

facebook web feed empty state


Leave a Reply