Let Me Guide Series: creating stunning layouts and navigations in SAP lumira
In this “let me guide you series”, we focus on how to compose your story-board using the best layout and navigation practices in case your user wants a KPI Metrics storyboard. These KPI Metrics storyboards are meant to display key metrics and their trends.
The series assumes your data preparation and majority of visualizations is ready; we now learn how to all add this in a stunning lay-out and using proper navigations paths. The accompanying instruction video clearly shows where to focus on. It also provides some simple tips and tricks that make life easy for you. Below is a step-by-step guide in composing your storyboards. In the example I use SAP Lumira to create my boards.
Step by Step
Prepare, enrich and modify your data set.Prepare your data, enrich it and create calculations where needed. Especially if you plot a lot of key metrics in tiles, you might want to create some calculated dimensions and measures that you can use as “numeric points” visualizations to plot in your tiles
Draft your lay-out and navigation flow on a piece of paper.Important step: draft the lay-out of your story-board on a piece of paper and discuss with your end users. Is this the “experience” the want to have in their board? Is this the way they prefer to navigate? Are the different domains of information to be plotted on different pages? How much interactivity needs to be in? All these questions need to be answered before starting to develop your board.
Create your visualizations in SAP Lumira. I’ll skip this section since we have been discussing it in other articles. Important to mention is that the ”numeric point” graph together with the conditional highlighting bar-charts are very useful when creating a KP driven dashboard
Use a drawing tool like Ms. PowerPoint to create your layouts. Now use something like PowerPoint to draw the core you’re your lay-out. Define the tiles and their colors. Embed pictures or background. Also take into account the navigation by creating indicators that show “where you are” as a user. Try to limit your base colors to 3 maximum. Do not use bold font types. Save all your slides as jpg
Import your layout as background in your story-board. Go to the compose-room and create your story board. Use the “add background image” per page to include the core lay-out your created in step 4. I personally feel that the 16:9 page lay-out in Lumira looks best.
Add visualizations to story-board. Drag and drop the prepared visualizations on the story-board pages. Try to use equal scaling as much as possible. Make sure each visualization respects the 3 colors you defined upfront. If you have a lot of visualizations, you better add more pages instead of making them smaller and put them all on 1 page.
Finalize your navigation. Make sure your uses can easily navigate through the different pages, or jump up and back to sections with detailed information.
Tips and Tricks
Use a drawing tool like Ms.PowerPoint to create your core lay-out of tiles
Embed pictures in your tiles to make them look more attractive
Use numeric point graphs to plot your metrics
Use “invisible” shapes to set-up your navigation
Limit the core to max. 3 colors? Use Adobe Color if you need help finding the best colors.
Ensure the user can allows navigate up and back though your pages
Below is an instruction video showing you how to create a stunning KPI Metric story-board in SAP Lumira.