8 Effective Design Tips for Offline Applications

Celý článek

With the seeming massive adoption of web applications, design systems to support this adoption get better. While the internet is abound in certain areas, connectivity could be limited or non-existent in other areas or cases, this notion has influenced the design of applications on both web and mobile platforms. Poor connectivity influenced the development and speedy adoption of progressive web applications.

Progressive web apps are applications which look and function like mobile applications. Caching techniques, service workers, manifest files and design are certain elements considered when designing for offline applications.

In this post, we shall be discussing 8 tips for effective design of applications required to function offline.

Application States

All digital products (for the most of today) function in two main states, the offline state and the online state.

In the online state, an application is basically connected to the internet and have access to resources available on the internet including real-time information and remote communication. Also, third party services and APIs also have access to the internet. This is the state in which most applications function.

An alternate state is the offline state. In this state, the application is isolated from the internet and functions with resources stored locally or cached during prior connection to the internet. Another similar state considered during design is the state where there is poor or unstable connection.

Offline doesn’t mean ‘no content’

As we try to build for the next billion users, diversity is a factor and we’re beginning to understand and accept that not all users can be online all the time as being online is subject to a lot of factors beyond our control. Offline doesn’t mean ‘no content’. Offline simply means no or poor connection to an internet network.

We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past. — OfflineFirst

Why do we design offline first?

When it comes to creating digital products, accessibility to users at all times is a major driving factor. Accessibility enabled the adoption of mobile-first design style and with smartphones abound, products have to be built to suit the infrastructure provided by smartphones.

Accessibility drove the development of progressive web applications which function and look like mobile applications. Several web technologies exist which enable the development of cross-platform applications that function on the web, and mobile. An example is the Ionic framework for JavaScript.

As a product or business owner in recent times, you don’t want to lose a potential customer, partner or client because your application works on only a single platform. The same way you don’t want to ruin the experience for users that have poor internet or are in transit and the internet is poor or totally absent. Poor internet connectivity doesn’t necessarily translate to missed notifications on Twitter.

Adopting the offline-first and mobile-first approach when building products go a long way to make sure your product is readily available for most users regardless of device type and internet connectivity.

Offline applications save data. As basic as it sounds, online applications require constant server interaction which directly translates to hosting charges. Reducing the bandwidth usage of an application reduces the hosting charges. This is achieved by efficient UX design and implementation of several offline strategies.

Best Practices & How to adapt to Offline first

Several techniques and best practices are employed while designing offline applications, we shall discuss these below.

Create Awareness

It helps a great deal if you can communicate to the users that they are currently in an offline state. This helps them understand why the product is taking time to display data and clears any thoughts of a faulty product.

Good examples of products that do a good job of showing your Offline status is the YouTube & ProductHunt iOS App as seen in the image below;

Use universal icons

When designing for offline it is great to use universal icons. Icons are a visual representation of an object or action.

Universal icons are icons that are easily recognizable because they have become the industrial standard over time for example the home icon, search icon & location icon. Universal icons go a long way to make sure users have a great experience using your app.

Also, try to label the icons as it goes the extra step to strip away any ambiguity that might arise. Remember the user is offline which means you can’t offer them support at that particular time. Best equip them as much as you can.

Hold the User’s attention

Sometimes, internet may be temporarily down. You want your users to wait more than they are used to while your product fetches the required data. How you handle this phase is very important.

Google Chrome uses the popular T-Rex dinosaur to keep you on the browser while hoping your internet is restored. You jump over cacti and other hurdles that come along using only Spacebar — very simple and convenient for even non-gamers.

Slack, LinkedIn & YouTube use a skeleton layout loading animation as this usually gives a more optimistic feel than the regular circular & boring loading animation.

Create the ‘Save for offline’ option

In a situation whereby your app uses a bunch of data that doesn’t necessarily change, giving users the option to download this data to the local storage on their device is a great way to improve their experience with today’s technology.

Both Netflix and Google Maps allow you download for offline consumption. Now imagine you’re in transit and in an internet-dead zone — You can still watch movies in the bus & Google Map your way back home!

Create the ‘Save for later’ option

Scenarios occur whereby your product users absolutely need an internet connection. Maybe it’s to complete a doctor’s appointment or checkout after shopping on your e-commerce store. A good way to handle this is to allow the user perform all the tasks that do not need an internet connection while the rest occurs once connection has been established.

Instagram & WhatsApp typically allow you upload images & send messages respectively while offline and they auto send once the device is connected to the internet again.

Enable Background Refresh or Cache

For Apps that have data that are time-sensitive; a news app or your social media app for instance, the background refresh idea is usually a good option in a situation whereby the internet connection is poor. This allows the App auto-update latest information before you need it & it saves that extra time and frustration of a spotty internet.

Caching is also a good idea especially when your app doesn’t require much data. Browser caching allows assets on your website to be downloaded to the viewer’s local storage temporarily which allows subsequent page loads to be faster as these assets don’t rely on the internet connection anymore.

Customize content

Another way to help your users offline is to customize their content for them. In a situation whereby the user’s internet is poor, you can serve them a lite version of your product & even go as far as disabling images (especially if they are not optimized).

Google Mail does this exceptionally well as it recognizes when your internet is poor and offers you a stripped-down basic version of Gmail to get your stuff done.

Optimize assets

Optimizing images & icons for poor connections is a good practice. Images can disrupt accessibility to your website if they are not properly optimized. Don’t use a larger image or higher resolution size than needed.

Bigger files mean it takes longer for the server to generate that page, and longer for the user to render the page. Avoid TIFF and BMP image files, as they aren’t optimized for web pages. Formats such as Webp, JPEG or PNG files are advised.

Conclusion

And that brings us to the end of the 8 Effective Design Tips for Offline Applications. I hope you learnt a couple of new things and enjoyed yourself in the process. Did I miss anything or you have a couple of questions to ask? Let me know in the comments section right below. Cheers!