Developing the "Sexy", Appealing and Intuitive “BSM Dashboard” - BSM Solution Development Series and Demo Development
dmcclure 0600011K8N Visits (4217)
In the next post of this blog series I will share some of the BSM Solution best practices I've used over the past six years with our global BSM clients for building intuitive and appealing "BSM Dashboards". For many of your target end users, the viability of the BSM Solution you're offering them often comes down to what they see on the glass and not what's happening behind the scenes. You've got to be very aware of this and be prepared to go to extreme efforts building a presentation layer that resembles "a picture that's worth 1000 words" or in the case of IT Operations something that's representing thousands of unique technology elements, events, metrics, etc. for a given business service or application. Oh yeah, and be consumable in less than 10 seconds and completely accurate, reliable and trustworthy all the time!
As you should have learned through careful study of the BSM Solution Methodology we're focused on building very specific, value oriented dashboards targeted at very specific end users or groups. It's very difficult to build a generic, one-sized fits all dashboard. The key to success is in the identification of the most important content for the dashboard and resisting the urge to put too much on a single dashboard. I've spoken at length about this in the BSM Solution Methodology and in my personal blog. There are dozens of resources listed here that can guide you down the path to additional best practices for designing powerful dashboards. There's an entire career field in the area of human computer interaction (HCI) and user experience (UX) that you should research for excellent sources of knowledge.
Via the BSM Solution Methodology workshop we identified that the LoB Application Owner is responsible for key business outcomes from a global online sales application. The following were identified as the key use cases to be enabled via the top level dashboard.
With an understanding of the online application, the global nature of its customers, architecture and the critical success factors and KPIs important for the application owner, we have enough information to begin iterating on an actual dashboard design and template layout. The secret to success in this area is to use an appropriate tool for these design tasks. There are a number of really good tools such as Visio, PowerPoint, Photoshop and Illustrator that are the most appropriate tools to use for your dashboard template design work. The actual built in capabilities of TBSM, TIP or similar products are nowhere close to what you can do in these tools. I always do my prototyping in Visio so I can rapidly iterate and get concepts in front of the end user. I'll create a new worksheet tab for each version of the dashboard design and simply copy and paste from one version to the next and then make the changes needed for customer review.
These tools allow me to focus on quickly getting the look and feel aspects right without ever having to work within the core TBSM or TIP product. I will get all of the static text components, font types, size and positioning right on my dashboard template and then organize key sections of the dashboard around a specific theme or context by using borders, grouping or containment boxes. I have collected hundreds of icons, shapes and other graphic elements over the years of work in this area so it's very easy to tell a story via the dashboard template when we tie the static text, organizational borders and graphics together with the actual content needed.
I've highlighted the “BSM Dashboard” design below and shared some basic commentary for each section.
A - Dashboard Header: I always start with the goal of branding the dashboard to the customer's business. I'll try to include an important company or group logo and make use of the company color schemes and font style wherever possible. I believe in lots of white space for dashboards targeting executive or management type audiences. Always have a title that captures the purpose of the dashboard. The outside border sets the overall dashboard boundary.
B - Critical Content Area - Online Sales Performance: This critical dashboard section communicates online order status, average (15m) order completion time and current active sessions at a highly aggregated, global level. Using maps forces you to think about aggregation and encourages drill down into lower level detail for a specific geographic area. It helps the end user gain a broad view of the global application and to assess performance in more bite sized chunks. When problems arise, it's very easy to assess whether this is a global problem or one localized to a certain geographic area.
As you think about the layout of your dashboard, you'll always want to place the most important content in an area where the end user is immediately drawn to it. (This is an area for all of that science around HCI and UX design.) I generally use the top section of the dashboard or the upper left area. You can also use borders or containment boxes to set apart the important content from the less important content. Font size, color and placement all come into play here as well. In our design, the global map allows for placing highly aggregated status and performance information in an easy to consume layout.
C - Supporting Content Area - Technology: This area plays a supporting role to the critical content area and serves the purpose of allowing high level visibility into the health of the application's enabling technology. It's organized by key deployment locations and functional technology areas related to the online application. It communicates where a technology health issue exists across these two dimensions enabling the application owner to either drill down for more details or call up his technology supplier for more information in context to a likely problem area.
D - Supporting Content Area - Order Processing KPI: This area plays a supporting role to the critical content area and serves the purpose of showing the critical KPIs associated with order processing. When displaying KPIs on a dashboard it's important to provide enough information that the skilled end user can use to interpret that KPI. In this section I've used a visual layout within a circular grouping shape to show the actual real time KPI value and the expected value or range. This allows the skilled end user to quickly interpret and gain additional context such as how slow or fast an order is being processed. When showing a single metric or KPI such as this it's important to show a time context. I should have included additional context to help interpret this KPI (does this KPI represent a 15min period, one hour period, one day period?). This can be done like I did in the top section by adding additional text. A trend line or directional arrow indicator is also useful to show performance over time (are we getting better or worse?).
E - Quick Launch Points: This area offers one click access to additional content drill downs or "on-demand scenarios" for the application area. This could be a drill down page within the BSM Solution or a launch out to another product all together. The goal is to get the end user to the best place to make the next decision or take the next action based upon the decisions made from the initial dashboard display.
After you've got your dashboard design "in the ballpark" with the end user you can begin to remove the placeholders (the dynamic components on the dashboard such as state/status, metrics, KPIs, etc.) from the dashboard design and turn it into the dashboard design template. You'll then save the dashboard design template as a PNG or JPG file. Keep in mind the size of the dashboard template image (resolution) will need to be optimized to the target end user's environment. If you design large dashboard template appropriate for a wide screen, 24" monitor and your end user only has a 15" monitor you may end up with scroll bars making the dashboard unusable.
This is a very high level view of design best practices but with some research and review you should be able to gather many of these and more on your own. I've provided the Visio file that contains the actual dashboard design template as well as a number of useful shapes, icons and grouping elements that you can use for your own demo development.
I look forward to hearing from you!