Transitioning to Mobile Dashboards with Responsive Design

by Dashboard Insight, Dashboard InsightTuesday, July 16, 2013

As mobile BI and mobile dashboards become more popular we need to ensure that data visualization design principles are kept in mind. Business 2 Community offers some design suggestions when looking to implement mobile dashboards below.

The ability to access Business Intelligence (BI) on a mobile device is now an expectation for executives, front line workers and even traditional “office workers” who need to check in to their business’ performance outside of office hours. In order to make the transition from desktop computers to mobile devices seamless, application developers must ensure that the mobile app is intuitive for the end user. The concept of responsive design is the key that unlocks the door to seamless mobility, and factors such as size, design layout and orientation, and user experience must be considered.

Size does matter

The screen size of a typical desktop computer ranges from 13”- 17”. With such a large real estate, it is easy to create a layout with 6 design elements, such as graphs, charts or tables (using 2 horizontal rows), to create an easy-to-use dashboard. In contrast, there is significantly less real estate on a mobile device, with screen sizes as small as 3”- 4”, and slightly larger screen sizes for mini tablets or tablets. By using responsive design, the app will understand that there will be a different feng shui for these design elements. For example, there will be fewer elements horizontally depending on the available screen size, as well as a scrollbar to see other elements further down on the page.

Layout and orientation

The screen size will dictate how design elements are displayed on the screen. Responsive design capabilities cater to various form factors and changes in orientation so that design elements can be reused and resized to create an optimized view for the user. Mobile dashboards being viewed on smaller interfaces will be rendered in a portrait view and design elements will have a more vertical layout. With a landscape orientation on smaller devices, or when using larger mobile devices such as a tablet or mini tablet, dashboard design elements will be resized and rearranged yet again to maximize the available space and to deliver a visually appealing dashboard.

Optimized user experience

The responsive design approach also provides an optimized user experience regardless of the device being used. A mouse and keyboard are used to navigate a PC-based dashboard. This experience differs significantly from that on a mobile or tablet device, where finger gestures, such as pinching, swiping or tapping, and sometimes a stylus, are used to navigate the dashboard. The user base for mobile devices, including my 6 year old who is just learning to tie his shoe, has expectations of how to navigate various mobile devices. A responsive design approach makes it possible for users to navigate their dashboards intuitively using device specific controls, without taking a class or reading a manual on how to navigate the interface.