Five years ago, embedding basic data visualizations in an application was enough to make your product stand out. But today, dashboards and reports are the status quo—nearly every product offers them. To gain an edge in today’s competitive market, you need to think outside the box. Read on to learn about three simple hacks you can use to level up your application.
Hack #1: Create Custom KPIs
A KPI (Key Performance Indicator) is a critical indicator of progress toward an intended result. In a dashboard, a KPI displays data in a simple, easy-to-read format that can be interpreted at a glance. Types of KPIs include text, icon or color; chart based; progress indicators; trend; and combinations such as text and trend or trend and progress.
Hack #2: Replace Pop-Ups with Less Obtrusive Solutions
A pop-up is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something. Pop-ups are fine for certain aspects of web design, but in dashboards, they can break the flow and frustrate users. That’s why we designed the SlideIn Panel as a more elegant, less obtrusive alternative to pop-ups.
It utilizes simple HTML elements combined with CSS for styling and animation and can contain any type of content: text, drill-down data from charts, additional visualizations, navigation menus, filters, and more. Like the KPI Trend hack, we have created the SlideIn Panel as a Shared Element within Logi, which allows it to behave similar to native Logi elements. You can configure it using parameters to control styling, slide-in direction, margins, width, and more.
Hack #3: Turn Image Maps into Custom Visualizations
An image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a typical image that behaves as one single link). An image map provides an easy way to link various parts of an image without using separate image files.
There are several online tools you can use to build image maps, for our purposes we used the online tool at image-map.net. To extend the functionality of the image-map we utilized a simple jQuery plugin called MapHilight. By adding color overlays, MapHilight can turn any basic image map into a custom color-coded visualization. You can use it to visually indicate items which require attention, as a heat map to indicate status levels, and in many other ways.