Display Empty State of a page in iOS

What do we aim generally in an app?

We show some screens to users, collect data from users and, if necessary, communicate with a backend to save and reuse data right? This is all we developers mostly do.

To visualize the topic let me continue by giving an example.

I bet you all have made at least a network service call and hoped it was success and you do show the data you fetched, we call this a success case.

As you might guess, this is sort of an optimistic perspective, I mean you can’t always expect that it is alright, so you also need to handle with an error state.

Then what is an ‘empty state’?

Before we move on let me tell you how we might define an ‘empty state’,

We have earlier the mentioned success/error state, in this case we don’t have any errors, service request succeeded, but actually it is not the kind of the success we hoped for, the reason is we don’t have any data to show to the user.

So how to proceed then? Is it better to show a toast message or present an alert and afterward leave the user with a blank screen?

It is possible of course to show an alert to the user to inform that we don’t have any data to show you, but this may be considered as laziness in some cases.

I think this is enough, what do you advice to do?

Here are a couple screenshots that show how some famous app’s chose to apply.

Medium — Slack — Spark

Files — Books — Podcasts

As you see in the images above most famous app’s chose this approach to let their users clearly understand why related page is empty. Better user experience (UX) isn’t it.

Now let’s continue thinking as a developer, most of us may also facing ‘empty state’ cases in projects.

So I want to point out something that you may realize while surfing between images. I stared commonly used UI elements;

• Image
• Title Label
• Message Label (a bit detailed information)
• Button

Almost in an every sample app, I faced, was using one of these elements, or combination of them.

Then asked myself, why not creating a useful lightweight library?

Here is the answer, enjoy it using the link below.

EnesKaraosman/SwiftEmptyState