Create, deploy, and maintain analytic applications that engage users and drive revenue. See a Logi demo

Tips + Tricks

Best Practices for Designing for Mobile BI

By Matt Gallagher | May 4, 2015
Share on LinkedIn Tweet about this on Twitter Share on Facebook

First off – What is mobile BI? It’s business intelligence that leverages traditional BI assets, like dashboards and reports, to deliver information in a mobile-friendly way to large audiences through smartphones, tablets, etc. It’s often used to enable the remote workforce, so employees are always connected, wherever they are and at any time, and they can derive insights and take immediate action as needed. But designing for mobile isn’t just about being responsive – there’s more to it. The following are some best practices to keep in mind when designing for the user on the go:

Use Colors Wisely

1. Less is More – The more colors you have in a report or dashboard, the harder it gets to discern the key findings. Keep it simple! Often times, it’s easier to pick out important values from a simple data than on a “sexy” chart with too many colors and data points. Ideally, you want to include fewer and distinct colors that can tell your story effectively without distracting the user.

2mobile dash. Contrast is King – You don’t need to have a PhD in astrophysics to know that mobile devices are smaller than desktops. There is limited real estate to create the most aesthetically pleasing mobile applications. One tip is to contrast the background and foreground colors. You may notice that mobile devices tend to have darker backgrounds and lighter colors to represent the objects in the foreground. I live by this design with my BI applications. KPI’s and outliers tend to stand out much easier and allow users to get the answers they need at a quick glance.

3. Stay Consistent – You have created a dashboard and followed steps A and B above to perfection. Now it’s time to drill down to a detailed report. Problem is the report has a completely different layout and styling. It’s vital to be consistent throughout the entire mobile asset. Providing an intuitive workflow for users will eliminate confusion and accelerate the learning curve. Keeping the same colors across all reports will help tell your story effectively.

Parameterization

 mobile design1. Keep It Simple – Filters allow users to get different views of data very quickly. While there may be many different filter options for the desktop, filters on mobile should be kept to a minimum. Add a search option on a drop down list, for example, to allow users to find the values they need. Providing the right set of filters will help your users make better use of their mobile reports and Dashboards.

2. Drill DownDashboards are truly meant to provide a top-level view of key performance areas of your business. Adding a 10 panel dashboard for an audience using iPhones probably isn’t the best approach. Allow users to focus on KPI’s and key outliers and let them decide the direction they want to go from there. Not only does this lead to getting the answers they need, they are also able to be more productive in the business by honing in on the troubled or successful areas.

3. Leverage Charts – You have probably heard the expression, when life hands you lemons, make lemonade. This principal can be used when designing your mobile BI applications as well. Since you only have a few charts and data tables on your main dashboard view, use them to their full extent. Charts such as pie charts and bar charts are great visuals to use for linking to other visuals on the same page or to other reports. Additionally, features like tooltips or popup panels can be very effective to get the details you need especially if users want to stay on the same page.

Layout

mobile responsive1. Responsive DesignIt’s estimated that by 2020, there will be an average of 4.3 Internet-connected devices per person in the world – and they are all bound to have different size screens. With that in mind, make your life simple. Create applications that are responsive to any devices that users will be working with. It’s the idea that you can deliver the same HTML code regardless of screen size, but use CSS to rearrange those elements based on the screen width. This allows you, the application developer, to build one main application that will automatically be resized and responsive based on the device each user has.

2. Left, Left, Left, Right, Left – In today’s day and age, users have many options when it comes to reading books, newspapers, magazines, etc. From Kindles and iPads to newspapers and hard cover books, there is one thing in common, most people read left to right and top to bottom. When it comes to dashboard design, use the same aspects. Place the most important details from top left to bottom right. This is where user’s eyes will naturally start so get them off on the right track.

3. Fat Fingers – We have all been on our mobile device and attempt to click or select one area on a page but accidentally select another. This can be frustrating and time consuming. Users that are analyzing their dashboard don’t want to have these pain-points. Include spacing between filters, links, and visuals. Mobile devices are smaller and can be challenging for users to make selections of objects are too close to each other. Providing enough space between each objects will make the user experience quick and more importantly, enjoyable!

 

About the Author

Matt Gallagher has over 10 years of engineering and software experience.

Subscribe to the latest articles, videos, and webinars from Logi.