8 TIPS How to Design Empty Placeholder Page UI

Empty placeholder is often an overlooked yet essential page to design.

Designers often worked with organizing many objects, but with very empty and nothing on the page, designing an empty placeholder can be quite a challenge to some.

Luckily, it is no longer something hard to do, because I will tell you exactly how to design a great empty placeholder based on my research and practice.

I have been working on several web app projects for years, so these tips might be skewed towards making a placeholder page for web apps.

1. Although it's empty, try not to make it look empty

I know that an empty placeholder can be tricky because it IS empty. The user doesn't have anything, so we add a placeholder to it. That's why an empty placeholder page should not make users feel empty. Few great ways to achieve this is to incorporate fancy colorful images, just like what Marvel & Facebook did!

Facebook uses cute illustration and even some images of other people that used Messenger to make this empty page not looking empty

Marvel uses really nice colourful illustration

2. Disable or hide action button that won't work without any content

As a designer and product maker, you have to think about every single scenario that will happen and come up with a strategy to overcome that. One if it is when you have an action button but no item to be actioned with. Since you are designing an empty placeholder, that means you do not have any content at all. And if you don't have any content, the action buttons that are related to the content might not be usable at all. For example, in Gmail, they removed the pagination because there is no page to navigate to. In the Marvel prototype, they disabled the buttons to search and sort the projects.

gmail normally has pagination on the top right corner. Since this page is empty, the pagination is gone.
You can't see it in this image, but the search button, "Show: All"n and "Last Updated" buttons are not clickable

The only thing that should remain in the action button that can interact without any content at all, such as the "create new content" type of button! Whether to disable or hide is your call. It depends on how is your development and how your whole system is designed. For example, if clicking on a button to add content will add content right away, it might be best to keep those action buttons but disable their state so the UI doesn't "jump". But if it requires some steps to add content, you are probably free to choose either to hide or disable the action button! As a UI Designer, it is your call to manage objects to they look good!

3. Also, try not to make it empty

When I say "try not to make it empty", that doesn't mean force content to the user and do not allow them to delete it! I mean, if there is any chance not to make it empty, then take it!

For example, when you just created a new email in Gmail or Yahoo, they will automatically give you a few emails saying "welcome to yahoo!" or some introductory email to your newly created inbox. So the first thing user see after they signed up on using the email service is those introductory emails and not the empty state. These are some ways to try to make the user not see the empty page but they are non-forcing. Some other examples may include creating an example content, add some onboarding tutorials. If there is literally nothing you can add to avoid this empty state, do not worry! An empty state is not bad at all! It's not like some plague we have to avoid at all cost 😂

Gmail automatically send welcome email when you signed up so empty page is not the first thing you see

4. Tell users ways not to make it empty

In some platforms, we see applications and websites will let the user know that they don't have any content but also let them know how they can make one! As we see in Gmail, Spotify, and Blogger, they let the user know how to add content.

Usually, a fresh empty page is a good opportunity to let the user know how they can use the product. So grab this opportunity!

Spotify lets user know how to discover podcast
Gmail tells user how to star a message in its empty placeholder page
On some analytical product, the only way is to check again later

5. Explain to the user why there is no content

Sometimes, the empty page comes not because of what the user did or did not do. For example, some apps are not available in your country, so when you clicked to download the app, you get an empty page. Apple App Store did a great job by telling the user why the app user is looking for is not there.

App Store tells user why the page is empty

6. Consider the action and situation that triggers it.

All these tips are not to be taken literally and be applied to all projects. You have to also consider what kind of emotion the placeholder supposed to deliver based on what type of action triggers the empty page. For example, when a to-do list page has been fully ticked and all tasks are completed, the empty placeholder page should deliver a congratulatory message instead!

7. Tell User what this page is about

When you have a slightly more complex product, an empty placeholder page can be a really good way to educate users on the pages in your product! Some of them might be new and wondering what this page is for. Take a look at how Gmail introduces their pages with their empty placeholder!

Although most of us know what is Draft, some people might not know. So this message is useful to them!

8. Sometimes, you can also distract the user!

Do you know that you can also promote something in your empty placeholder? Well, now you know! Sometimes, when the empty placeholder is not caused by something the user did or did not do, you can distract them with something else! For example, in Yahoo! inbox, users might not get any new emails at all, and to distract them from the fact that no one sent them any email, you can encourage them to watch videos or read the news. In some scenarios and contexts, this might be fitting for your product.

Yahoo encourage us to watch the video instead of waiting for emails

There you have it! That's all the tips on how to make an empty placeholder!

These tips are really depending on the context and you can pick whichever you can apply to your design!

Do you have special tricks on designing your empty page placeholder? Comment down below!


25 tampilan0 komentar

Mau website kayak gini GRATIS ?

Klik disini