We build powerful, beautiful, functional visualization applications every day. We love the puzzle of fitting the application use case and the necessary metrics together, especially because it’s not enough for our applications to be functional, accurate, and visually appealing. Our applications need to be eminently useable, because our audience lives in the healthcare world. The data they access need to be easy to understand and act upon to improve patient care.
As a result, we take our approach to creating applications with reporting software such as QlikView, Qlik Sense, and Tableau seriously. Today, we’re focusing on the 10 principles we employ to bring the information in our applications to the forefront through our user interface (UI) design, so it doesn’t just become a sea of data.Principle 1: Performance
Healthcare datasets can be large and complex, so it’s critical to check performance at every turn. No one wants a fancy chart if it crashes the application; response time needs to ensure usability. Our rule of thumb:
- .1 seconds: Perceived as instantaneous
- 1 second: Lag perceived, but attention remains
- 10 seconds: User gets distracted/application responsiveness is unacceptable
Principle 2: Familiarity
Tools are the means, not the end. Our applications are big, powerful tools, and our audience doesn’t gain much by building familiarity with *another* way to see and digest data. We strive to foster familiarity, both within this toolset (e.g., multiple applications in Tableau) and across similar tools (e.g., employing universal software design principles, like making something that looks like a button act like a button).
A familiar navigation section and buttons that act as expected
|Principle 3: Structure
There’s a lot of information
out there about the relationship between visual input and cognitive function. We take this to heart in our interfaces, by ensuring we’re building and organizing them in a consistent, thoughtful, and meaningful way. This includes features such as:
- Grouping similar content and applying a related look and feel
- Distancing unrelated elements
- Labeling and designating headers in intuitive ways
Consistency across different charts in the same application make it easier to understand
Lines, spaces, and sizing are aligned
Principle 4: Alignment
Related to consistency in structural elements, we also take great care to align elements in our applications to reduce visual “clutter”. We space related objects evenly, line objects up in straight lines, and make objects the same height or width, when appropriate.
Principle 5: Visual Hierarchy
Our audience knows how to read a book or a magazine: start on page 1 and read left to right until you’re at the bottom of page 2; then turn the page. When presented with a complex user interface, we want our audience to interpret it efficiently, too. We strategically employ visual hierarchy, using size, color, and element placement, to control users’ focus and make it easier for them to understand the application in front of them.Principle 6: Color
Color can have
a measurable, often subconscious impact on our interpretation of something. We strategically align our use of color to reinforce messages being conveyed in the data, to highlight areas of focus. We also use care to use color as a redundant delivery mechanism, ensuring that color is not a sole differentiator in representing meaning (e.g., we might use a downward-facing arrow that is also colored red to indicate a performance trend).
Color is a meaningful complement to the chart design
Principle 7: Inline Help
While we can’t predict all the questions a user might have when working with one of our applications, we can predict that they will have questions. We ensure that helpful explanatory text is part of each application, and we strive to locate it as closely as possible to the user interface element in question.
Definitions are embedded in the application to improve use
Principle 8: Minimize clicks
One of the benefits of using visualization software tools is the ability to see a high-level view of data and then drill down to see what composes that view. One of the drawbacks is that, without thoughtful design,
A chart should show the answer to the most common question by default
you can force your users through a lot of clicks to get to the middle level of information they might be seeking at that moment.
We focus on ways to eliminate unnecessary clicking for common tasks, like filtering and clearing filters. We also include shortcuts when we can, and set defaults or custom filters based on what we know our users care about.
Principle 9: Feedback
It’s human to want your input to be heard. We apply that notion in our 9th principle, ensuring that our application acknowledges the requests made by the consumer. For example, we design our applications to clearly display to the user the result of any action they take (highlighting, text changes, etc.). We also consider our corrective feedback. We expect that error messages in our applications should be prescriptive and indicate what specific action(s) a user can take to resolve the error.Principle 10: Maintenance
We work with healthcare organizations in various stages of their analytics journey. Sometimes we team up with a seasoned analytics team to tackle additional projects or new priorities. Other times, our clients are just stretching into development of visualization applications. Regardless of the scope of our work, we strive to simplify maintenance so our customers can address the maturing needs of their users. Our goal is to create an application that requires as few steps as possible to add, remove, or change UI features, and to ensure that the work we hand off is well-documented to facilitate a transition to the long-term owner.Interested in learning more? Contact us at email@example.com
Constantine, Larry L., and Lucy A.D. Lockwood. “Usage-centered Engineering for Web Applications.” IEEE Software 19.2 (2002): 42-50. Web. 9 Jan. 2017. <http://www.dtic.upf.edu/~jblat/material/diss_interf/notes/nidia/webapplications.pdf>.
Knaflic, Cole N. Storytelling with Data: A Data Visualization Guide for Business Professionals. Hoboken: Wiley, 2015. Print.
Nielsen, Jacob. “Powers of 10: Time Scales in User Experience.” Powers of 10: Time Scales in User Experience. Nielsen Norman Group, 5 Oct. 2009. Web. 9 Jan. 2017. <https://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/>.