User experience is everything
If you want to retain customers; if you want to see viral growth of your product; if you want to make sure customers use your product for years to come; providing an exceptional customer experience is key. Responsiveness of the UI is one factor, but seemingly minor visual tweaks can also make a major difference to the user experience. At Instana, we obsess over these details and in this article we share our recent improvements in usability.
Grouping related data using cards
Instana is an application performance monitoring (APM) solution that consists of different capabilities like application monitoring, End-User monitoring, cloud monitoring, infrastructure monitoring, etc. One thing they all have in common, is that they present a lot of data on various dashboards. To be impactful and actionable, Instana collects all relevant data around the technology and further information as connected entities, health state and so on. In the past, we did our best to structure all the data in logical chunks so that they are consumable as a logical piece of related data. These chunks have been organised within cards.
Cards are a simple but effective way to visually cluster information so that users can easily spot groups of information. The cards are included on almost every dashboard within the Instana product user interface.
Challenges with charts
Other important, and heavily utilized visual elements are charts. Charts are used to make a vast set of data points easily processed by the human eye. Putting multiple data series on the same chart allows the user to compare these different data series in relation to each other. A big challenge when using charts is the need to present the range of metric values.
Let’s say there is a spike in a latency chart. It is important to know if this spike is in the range of milliseconds, seconds, or even minutes. Until now, we have used an approach to calculate sensible steps for each axis on the chart so that users consume them without too much cognitive load. The issue with this approach though, is that we need to reserve a lot of unused space for the axis labels, especially when used in a card. This is because labels can grow to a large size like “24.546GiB”. Also, we have this white space on both sides of the chart because there can be two axes present. To keep the visual elements aligned for each view, charts without a second axis have this white space present.
With Instana release 179, we have made improvements to Instana’s user interface regarding these two elements.
Making cards more recognizable
The first change we applied is that we want to have cards more recognizable as such. The first step in this direction has already been taken with the customizable landing page and custom dashboarding, where the background has turned into a light grey and the actual content is placed in light/white cards. The rest of the product now follows this approach. For a direct comparison, you can see here an application dashboard as it was presented before and the new, more visible cards. This may seem like a minor change but it makes a significant difference to the human eye when identifying the content of each individual card.
Original design with low contrast cards that were harder to identify
New design with cards that are easier to identify
Gaining 120 pixels – making charts easier to read
As you may have also noticed, there is a second change visible which tackles the issues with the charts described above. We removed the white space (formerly reserved for axis labels) for each chart on the left and right and moved the upper domain value above the actual metric series. This allows us to have a total of 120 more pixels per chart for rendering what is most important, the data. Also we round up the upper domain value so it is nicely consumable and the intermediate steps are easy to recognize. Also, the time axis got an overhaul and will not repeat the same day over and over again. These changes applied to the chart play well together with the new card design, so both give our product a clean look and feel.
Old charts with old card color scheme, pretty good but not ideal
New charts with new card color scheme, much easier to identify and read overall
New charts showing mouse-over with data points, synchronized across all charts
See it for yourself – take the guided tour and play with Instana right now.