Balanced Scorecard on Mobile

Recently I rebuilt my Balanced Scorecard in the mobile version of SAP Dashboards (Xcelsius). While I learned a great deal from this exercise, the true lesson is that you should be designing for mobile first! While you can export to both desktop and mobile with the same file, most ‘desktop’ dashboards are over-complicated and overcrowded. Trying to convert those files to mobile will impact both usability and performance.

bsc_mobile_screen1

The following screenshots walk you through each screen of the dashboard and you can test out the mobile version here.

The second screen was by far the hardest to reproduce. This screen has numerous layered elements, and ultimately I’m thankful that you can still layer components in mobile Dashboards because many tools (like Google Visualization API and Tableau) don’t have transparent chart backgrounds. Plus with the ability to put invisible push buttons over the rows, I can make just about anything look cohesive. Ultimately to recreate the formatting I had done previously with the spreadsheet component, I had to use an obscene number of components. In the future, I would try to simplify the design to leverage the scorecard component, but the visual display will suffer.

Additionally, deploying to both mobile and desktop with the same file doesn’t always seem to work that well. I find that the positioning of objects between the two does not line up exactly, so I often have to shift components by a few pixels for it to look right in mobile. Text boxes for example align to top vs. bottom respectively on the desktop vs. mobile versions. Finally, if you want to completely cover the background with an image (as done in my Project Management Dashboard example), you will need to cover the entire background… and that will force scroll bars on the desktop version.

bsc_mobile_screen2

The strategy map was a straight conversion, demonstrating that the combination of push buttons, dynamic text and images still has a lot of untapped potential in SAP Dashboards.

bsc_mobile_screen3

Finally the detail page was fairly easy to clean-up. Again I had to replace a spreadsheet table, but it wasn’t that hard. My challenge on this screen however, was that I had problems pre-populating the combo box that selected the measures. In test files, I found that changing the combo box selection using push buttons worked fine, but because I’m having the push button change both the tab selection and then the combo box, it didn’t seem to consistently work. I didn’t like the fact that you could break the functionality, so I ultimately replaced the combo box with a push button that sends you back to the measures screen to make a different selection. In a production dashboard, I would implement something a bit more elegant, like a pop-up list view.

bsc_mobile_screen4