Cameron Jenkinson

Empty states, what about No Network states

December 01, 2016

No Network States should be considered with equal importance alongside Empty UI States for network critical mobile apps.

Feedly & Grabble no network states

I’m often using apps the most when travelling and it always irritates me when I lose signal causing apps to throw the “no network” alert and sometimes preventing me from completing the task I was carrying out.

This occurs the most when I’m on the train, underground, in the country side or just dealing with intermittent downtime from my network provider.

This led me to start thinking about how designers are handling this situation and whether this is an area of product design that deserves more attention and care. Any method of retaining and improving user engagement is important and this state often interrupts that preventing him or her from continuing the task at hand or leading the user to exit out of the app.

To date I’ve not seen much around the area of designing for network loss or No Network States.

Delight users through engaging and action orientated Empty states” — empty UI state purpose

What about ways of delighting users through engaging and action orientated No Network States which occurs much more frequently than designers may realise.

I refer to No Network States as the UI state in which the users network connection is** lost** or interrupted causing the normal and desired user experience to be impacted or unusable.

Currently there is a mix of apps that handle this situation in different ways, some apps allow for continued use and interaction with a visible notification of a network loss whilst other apps I’ve used stop any further use of the app until connection is regained. I believe there should be more conscious decisions and care around ways to handle this state to maximise user engagement and continue the experience.

Firstly, I appreciate that from a technical point of view a lack of network connection for some apps can be difficult to handle and I also respect that there are currently methods used for these situations such as offline caching. However, from a designers point of view it’s our responsibility to be mindful of how this state is handled and work on ideas to maximise engagement.

Below are a few methods I’ve been investigating to extend the no network state beyond the required alert “no internet connection” which I hope will enable further research and contribution from other designers on it.

Three categories:

Collection — capturing data from the user

Engaging — continuing to engage the user within context

Informing — letting the user know of any important information


Collection Approaches

Basic collection example

Collection is all about collecting data from users for whatever purpose is relevant and valuable to your business. The example above includes a super basic variation of the common alert message shown to users when the network is lost. This slight variation extends the message to ask the user to answer a question which could be a short survey about their experience or the exact feature they were using when the network connection was lost.

The goal of collection approaches is to collect valuable data from users within the moment they are interrupted (with the best intentions for the user) whilst the connection has chance to regain.

Other collection approaches include: surveys, questionnaires, ratings, sending feedback or localising the data for the feature the user was using when he or she was interrupted.


Engagement Approaches

Engagement example: play a game with your trendy AI bot

This example includes a simple game that can be played whilst the user waits to regain connection. Although the example above may not come accross as formal this method can help sustain the user within the app whilst they are waiting to regain connection. This method is purely focused on letting the user continue to engage with your brand or perhaps your new AI bot before being dropped back into the task they were trying to complete.

The goal of engagement approaches is to sustain users within the app for as long as possible whilst the connection has chance to regain.

Other engagement methods include: games, visual loading states **(think iTunes visualiser), video and **permitting local functionality** (Letting users scroll through a feed for instance e.g instagram).**


Informing Approaches

The inform example above is all around providing information to users with respect to the context of your product. Above shows a few company announcements where they would be triggered to present the user with information upon network loss.

The goal of informing approaches is to simply inform the user of information they have not yet be made aware of, read or engaged with. This can also be extended with an outbound and return approach such as to send a push notification to the user about the unfinished task they left when their connection was lost.

Other informing examples include:** company messages, feature updates, announcements, unread user messages and push notifications **(“hey, your connection is back please resume the task you just left”)


I believe there is much more to this than what I’ve suggest above but these may be the first steps in further research.

Thank you for reading and please do respond back with any contributions.


Cameron Jenkinson

Written by Cameron Jenkinson