Why responsive design isn’t a good fit for business intelligence

responsive design dashboardsMany business intelligence (BI) and analytics vendors champion the responsive design capabilities of their software when it comes to delivering mobile BI. Design-once, run anywhere is their mantra. And, it sounds seductive. What’s not to like about a technique that makes designers more productive and allows them to create one dashboard or report and know that it will look attractive on both desktop and mobile devices?

But,  a word of caution.

Responsive design and BI do not make happy bed fellows.

So, let’s consider why you should think long and hard before delivering responsive content to your mobile decision makers.

What is responsive design?

Responsive design is a way to optimize the layout of web pages for both the landscape orientation of a traditional desktop browser and the portrait orientation of a Smartphone.

Web designers create cascading style sheets (CSS) to define the look and feel of their web pages. Within the CSS they can define rules which control the way content is laid out for different sized screens and different screen orientations.

responsive design bi

This works great for websites, where you can create a template, apply it to a number of pages and then each page behaves consistently across the site. For example, you may have a 3 column layout on your website for people viewing on larger screens, but for smaller screens, the CSS rules will re-flow the original 3 columns into a single column layout, where each column is now displayed one beneath the other. So, on a Smartphone, a viewer can keep scrolling down the web page to see all the details.

Responsive design and scrolling works well for us when we use our mobile devices in our home lives. For example, if you are scanning through a newsfeed on Facebook, looking for products on Amazon, or searching through a list of articles on your favorite blog – scrolling is fine. You are in browsing mode. You probably are not pressed for time. In these situations, scrolling offers you a good user experience. It provides a simple way for you to skim through large chunks of data.

Scrolling is a pain in the neck for Mobile BI

But, I would argue that, in a business intelligence context, responsive design results in a lousy user experience. That’s because responsive design almost always leads to scrolling. And for any business user trying to get to the numbers they need to make a decision, scrolling is a pain in the neck. When you are on the go and need to get to a piece of information as quickly as possible … scrolling slows you down and causes frustration.

responsive layouts bi

For example, consider the example dashboard above with visualizations laid out  in a 3×3 grid. It displays nicely in landscape orientation on a desktop browser or tablet device. All of the key information is immediately visible on the screen. On a narrower, portrait device, like a Smartphone, the responsive design template reflows the components into a single column layout. This ensures each visualization is still readable on the smaller screen. However, it also means the viewer needs to scroll to see much of the information.

This is not an optimal way for a Smartphone user to get answers to their questions.

Many real-world BI interfaces are too complex for responsive design

And, we should also consider that in the real-world the interactive dashboards and dashboard apps modern users need, may not be laid out in a nice geometric structure. Real-world dashboards implement custom workflows with pop-up views that provide extra levels of detail. These none standard, more complex layouts don’t lend themselves to responsive design.

In the real-world, as a decision maker, you want to access your information right away. Then, based on the initial numbers you see, this will guide you deeper into your data to get at the information you need to take action. This exploration may involve filtering your data, drilling into lower levels of detail, or popping up a new view which may slice your data in a different way or may show you a list of underlying transactions.

This all needs to be simple, fast and intuitive. And, responsive design, which inevitably leads to scrolling when you switch from a large screen landscape view (desktop browser) to a small screen portrait view (Smartphone), does not meet these needs. It is not optimal for BI consumption. And, it does not offer the best experience to decision makers.

Different devices, different requirements

To get around this, at Antivia,  we’ve started delivering different versions of dashboard apps for desktop and mobile users with workflows optimized for each device type.

In each case, we start by thinking of the needs of the user when they are using a particular device, to influence the design of the app.

For example:

  • When they are using a desktop browser, they are often in a more analytical thinking-mode, so need more information supported by custom workflows to answer follow-up questions
  • When they using a Smartphone, they are more likely looking for very specific numbers and they want that information fast

Mobile BI best practices

Taking these requirements we then apply some of the best practices we’ve learnt for delivering mobile BI. These include:

  • Focus on key metrics – start by presenting the decision maker with a list of the 4-6 key metrics they need to see. For each metric, allow them to navigate to a secondary view which provides further detail. This provides fast access to key information within 1-2 taps
  • Eliminate clutter – remove any unnecessary text and graphics. Stick to, 1-2 clear, simple visualizations per view. Consider restricting the number of values plotted on charts (e.g. show top 10 / bottom 10 items) for clarity
  • Reduce the number of filters – removing rarely used filters frees up valuable screen space and helps avoid confusion. You can also include lesser used filters in a supplementary view, again saving screen space, but leaving them accessible when they are required

An example of desktop and mobile optimized BI

To put this in practice, take a look at these 2 example dashboard apps.

They are landscape (desktop) and portrait (Smartphone) versions of our Salesforce® sales person’s app. These pre-built apps are provided as part of the DecisionPoint™ solution for Salesforce customers.

landscape layout tablet

Landscape layout for desktop browser and tablet devices

Portrait layout for Smartphones

Portrait layout for Smartphones

Notice how in the portrait version of the app, optimized for smaller screen sizes,  the entry point is a menu, listing 6 key metrics. Tapping on any of these metrics pulls up a supplementary view which provides more detail. In this case, we can see:

  • A Peer Analysis view, showing how the sales person ranks compared to the rest of his or her team. We can see both a high level summary of their ranking, and a little more detail in a table
  • A Win Rate Analysis view which uses a simple chart to show trend information. Note the use of just 2 visualizations in this view so the information is easy to digest

Compare this to the landscape version of the app, which is optimized for larger desktop screens. The entry point here is a summary view, showing a mixture of tables, charts and summary metrics. The desktop view includes much more information, to take advantage of the extra screen space and to reflect the fact the decision-maker is more likely to be in an analytical thinking mode. It also includes multiple pop-up views, supporting custom workflows, and providing access to additional information to help answer follow-up questions. In this case we can see a pop-up view for Peer Analysis, which shows several additional columns of information compared to the portrait version.

Steer clear of Responsive Design for your BI projects!

Looking at the landscape version, you can see that the design and workflows don’t lend themselves to working with a responsive design.  And, even if they did, the resulting experience on mobile, wouldn’t be great. Inevitably, the decision maker would find themselves wasting time having to scroll to access the information they need.

Taking the time to understand the needs of the mobile decision maker, results in a superior user experience, in the portrait version, that is optimized for their needs. They can access all the information they need within 1-2 taps. It’s quick. It’s convenient. It’s helpful. And, there’s no scrolling!

Finally, remember that when mobile workers need information, they typically need it now. But, when they are on the road, they may not be online. So, being able to view and navigate their information when they are offline is a critical mobile workflow, too.

Learn how DecisionPoint™ supports the needs of your mobile decision-makers.

Discover more recipes for business intelligence success