Don’t Stop the Show: Designing the Mobile Offline Experience

David Enarson | April 23, 2015 | Mobile App Development

When it comes to our mobile devices, we often take ubiquitous connectivity for granted. At home we can easily connect to WIFI, and on the road our devices seamlessly switch over to a Cellular connection. And with data speeds as fast as they are, users typically don’t notice any issues when using apps.

But what people don’t realize is there is a lot of complexity involved with making a great mobile offline experience and ensuring a seamless transition between offline and online states. Ever go into a subway tunnel and try to refresh your Instagram feed? You’ll get a “No Internet Connection” message. You’ll also receive a “Failed” message when trying to upload a new picture.

So how to ensure that your enterprise apps are handling offline situations in the best way possible? The four considerations for offline success are awareness, business process evaluation, app architecture and user experience.

Awareness
If you take connectivity for granted in your app design you will be setting yourself up to frustrate anyone who uses the app. Consider the employee who ‘drills-down’ through a critical path in the app (e.g. they need to inventory a product in a customer’s warehouse where connectivity isn’t available) but are unable to begin the process because the app’s logic is tied to a web call. Without a connection, the app blocks progress and the employee is stuck. Productivity comes to a screeching halt. So it’s critical to evaluate your business processes and determine how to best integrate your mobile apps to work without a hitch to best accommodate each employee’s day-to-day journey.

Business Process Evaluation
When evaluating a specific business process review a day-in-the-life of the employee. For example, employees may split their time between working in their home office and inventorying product out in the field. Think through each step of this process and diagram it out. Think about where the employee will be during each step and what information he or she will need. The combination of location and information-need will help you design the best application logic and user experience. Naturally, this is a simplified example. But imagine mapping several concurrent interdependent processes, all of which occur at different locations and you’ll get a better picture of your employees’ data-needs.

App Architecture
With the business processes mapped out and the user stories outlined we can begin architecting the app to elegantly support offline use. This involves designing a REST API with a series of calls structured to provide the right data at the right time. Think of it from a sequence perspective. You have to get the data slightly before or synchronously with the user launching a screen in the app. If you want to load a list of products to inventory at a warehouse you need to display that list. Also, if you tap into that list to a specific product, the app needs to display the product details. One option is to load all product names and attributes while the user is viewing the product list screen. If the user is offline you can still load the product attributes on the subsequent screen. A second option is to just load the product list. If the user is offline, the next screen would only display the product name. The benefit of the first approach is the user sees more info when offline, but the downside is the app has to store all attributes for all products loaded locally into your list. Depending on how many products you display this could turn out to be an overwhelming amount of data. But perhaps—like the Mail app—you sort the list such that the most important products are at the top. So for those, the app loads attributes while for the others it only loads their names. An alternative is to display only the product name on the next screen which may be enough information for the employee to inventory that product (he may only need the additional associated data when at the office). But it is imperative to think through the tradeoffs: data storage, loading time and access-need. Further, local data caching, storing, and syncing issues also need to be considered.

With iOS 7 Apple introduced background-fetch capabilities for frequently updating non-critical content. Critical content that changes infrequently may also be updated by triggering your app with a silent push-notification. It’s also important to consider your app’s most common navigation patterns to ensure the right calls occur in the right sequence so the info is there when the employee reaches a particular screen.

Mobile Offline User Experience
From a user experience perspective consider an employee’s common paths through the app. Do this in concert with your API design so the two are complimentary. A big part of great UX is elegantly anticipating and handling exceptions. You’ll know from the business requirements what information is essential at what point in the app and can design the UX and UI to elegantly adjust the UI to only display info that is viewable offline. Typically, it’s a better practice to adapt a view by reducing the amount of information displayed on a screen instead of blocking a navigation path.

Also, be considerate when notifying employees they are offline. If they are performing a “pull-to-refresh,” display a message on pull that reads, “Please connect to the internet to refresh.” Or if an empty list must be displayed while other actions may be completed, design an offline state as a simple background image that reads, “Connectivity is required to view this info.” This is a far more elegant way to notify the user than simply popping-up an alert. Facebook does a great job displaying a “No Internet Connection” slide-down message on pull-to-refresh, followed by “You can still post while offline.” They even enable posting while offline and sync the post up when the user regains connectivity. This encourages continuous interaction with the app.

Returning to the first example, with this overview of app design for offline use in mind, you can now design a seamless app for employees that enables them to download the product list at the office and continue to inventory the products in the warehouse when offline. All the info is stored and then seamlessly synced the next time the employee is back online.

How’s the offline experience for your company’s mobile apps? Are dropped connections causing interrupted tasks for your employees? Click here for a free consultation with a Propelics Mobile Strategist and we’ll let you know the best way to fix all these problems and more!

David Enarson

David Enarson is a Mobile Strategist at Propelics. He has experience leading mobile application initiatives in the Enterprise, specifically with sales force audiences. He has worked with well known brands in the Pharmaceutical, Consumer Packaged Goods and Services verticals. David combines his ability to chart out a big picture strategy with his technical aptitude and understanding of the complexities of the Enterprise to drive value for clients. He has a true passion for startups and mobility and was a past participant and coach at Startup Weekend Chicago. David’s interest in mobility began early on when he founded a company to develop and market applications for the Palm OS.

More Posts

Follow Me:
LinkedIn