Odds On Flex

Stephen Few Data Visualisation Workshop

June 28th, 2010

Last week I attended a series of information visualisation workshops run by Stephen Few. The classes were based around his three books to date: Show Me The Numbers, Information Dashboard Design and Now You See It. Here follows an overview of the material covered and my thoughts on the event.

Show Me The Numbers

Day one of the workshops was titled “Designing Tables and Graphs to Enlighten” and focused on how to effectively communicate a single story in a data set using a table or graph. The starting point was to highlight that the Gricean Maxims apply equally well to the communication of quantitative data as they do conversational communication, i.e. information visualisation should:

  • be as informative as necessary but not more informative than necessary (maxim of quantity)
  • not convey any message that is believed to be false or for which there is a lack of evidence (maxim of quality)
  • be relevant (maxim of relation)
  • be brief and orderly, avoiding ambiguity and obscurity of expression

Fundamentally, to achieve this, Stephen Few proposes 2 major steps. First, you should determine the medium that tells the story best. (Should you use a table or a graph? If a graph, then which kind of graph?) Then you must design the chosen component so that the story is told clearly.

For the first step, the relative strengths and weaknesses of tables and graphs and different graph types were presented. Regarding graphs, Stephen presented what he considers to be the 7 relationships commonly displayed in graphs – time-series, ranking, part-to-whole, deviation, distribution, correlation and nominal comparison – and which graph types most concisely convey these relationships. Unsurprisingly, pie charts were a graph type singled out for their general ineffectiveness (see Save The Pies For Dessert for details). In addition to graph types, the concept of small multiples was highlighted as a simple technique for improving the affordance of graphs that endeavour to compare across data that differs only along a single variable.

Oh, and 3D charts, where to begin… The almost guaranteed occlusion (where something is hidden behind something else) meaning it is impossible to see the entire picture at once? The inability to directly compare values, sizes and/or positions due to depth? The colour variation due to “lovely” lighting effects?

With determining the appropriate medium covered, a range of techniques and areas for consideration were introduced with the aim of maximising the effectiveness of the chosen component(s). Edward Tufte’s argument that the “data-ink ratio” should be maximised by removing, de-emphasising and/or regularising the unnecessary and emphasising the most important was introduced as the foundation of good table and graph design. Additionally, the fundementals of visual perception were considered and how they can be harnessed to improve the clarity of the story being portrayed. In particular, attributes such as size, shape, orientation and colour are processed pre-attentively. That is, we perceive and process them instantaneously, in a highly parallelised fashion and without conscious thought, thereby laying down an immediate interpretation before conscious thought is required. Further to this, the pre-attentive attributes of length, 2-dimensional position, width, size and colour intensity are perceived quantitatively, i.e. some values are greater than others, and are therefore powerful building blocks for data visualisation.

As well as covering areas such as where best to locate the scale, how to arrange the visualisation to avoid label rotation and how to minimise problems associated with legends, there was an emphasis on the importance of colour, from when and where it is (not) required to palette choice. A fair amount of Stephen’s thoughts on colour are covered in his article Rules for Using Color. A couple of useful links that came up were Cynthia Brewer’s Color Brewer, a tool for colour palette choice, and VisCheck, a tool for simulating colour blindness.

Information Dashboard Design

The 2nd day of the workshops, “Dashboard Design for at-a-glance monitoring”, built heavily on the first day’s lessons and focused on techniques and constructs that are of use when designing dashboards. First up was the problem that the term “dashboard” is used for all manner of products. Stephen defines a dashboard as “a visual display of the most important information needed to achieve one or more objectives that has been consolidated on a single computer screen so it can be monitored and understood at a glance” and states that “dashboards are not comprehensive tools for analysis, decision making or management“. The monitoring requirement suggests that to some extent there must be a “live” element to the screen, while their not being comprehensive tools suggests that there should not be an abundance of controls to facilitate filtering, etc. In my opinion Stephen is potentially limiting his audience with this, as most of what he presents under the context of dashboard design is just as valuable to report design and data presentation and/or analysis applications in general.

We started by focussing on the common mistakes made in dashboard design, such as introducing meaningless variety, arranging data poorly, misusing or overusing colour and introducing useless decoration. Unfortunately, many of these problems appear to stem from vendors. They are (understandably) assumed to be experts, yet their examples are usually little more than marketing fluff, so their designs are usually more concerned with graphical glitz than the actual intended purpose of a dashboard: communication.

Moving on to considering the techniques and practices that will improve dashboard design, the core idea was once again Tufte’s “data-ink ratio” argument: “reduce the non-data ink; enhance the data ink“. A number of objectives specifically for the visual design of dashboards were also prescribed: eliminate clutter and distraction, group data into logical sections, highlight what’s most important, support meaningful comparisons and discourage meaningless comparisons. Each of 6 categories of dashboard display mechanisms (graphs, icons, text, images, drawings and organisers) was considered with the aim of achieving these goals. The most time was spent addressing graphs; re-iterating some of the previous day’s content and introducing a couple of graph types more specifically designed for the dashboard context: bullet graphs (see image below) and sparklines. Bullet graphs are Stephen Few’s own development to address the requirement (unfortunately) usually fulfilled using gauges, i.e. the display of a single quantitative value against one or more comparative measures within the context of some qualitative ranges, e.g. poor, satisfactory, good. The benefits that bullet graphs have over gauges are numerous, but in particular they take up significantly less space and are more conducive to the aforementioned objectives. Sparklines, on the other hand, were introduced by Tufte in his book The Visual Display of Quantitative Information, and are designed to present trends or variations in a simple, space-saving way.

After touching on the importance of the aesthetics of the design (it should look appealing without impeding the aforementioned visual design objectives), we moved to critiqueing dashboard examples submitted by attendees. This proved to be a good exercise of the day’s lessons both for the submitters and class as a whole.

Now You See It

The final day, titled “Simple Visualisation Techniques for Quantitative Analysis”, was quite different to the preceeding days as it was focused on how to gain an understanding of and insights into data sets, rather than the communication of existing understanding. As a basis for the rest of the day’s material, the power of sight compared to our other senses was introduced and used as the argument for why data visualisation is a vital tool for exploring and understanding data sets. This was followed by a brief history of data visualisation, from the first evidence of tabular arrangement of data in the 2nd Century, through William Playfair’s invention of line charts, bar charts and pie charts, to the spread of home computers in the 1980s and beyond.

The traits of a skilled data analyst and characteristics of good data were considered before emphasising the necessity for a solid understanding of visual perception and cognition to be able to take advantage of those traits and characteristics through visual analysis. Consequently, some time was then spent introducing a number of core aspects of visual perception and cognition. As during the previous classes, it was highlighted that visual perception is selective, meaning that we must encode data in such a way that what is potentially interesting or meaningful pops out by contrasting with the norm. Pre-attentive visual attributes were again introduced as the means by which this can be achieved, with length, 2-dimensional position, width, size and colour intensity able to encode quantitative values and shape and colour hue ideal for indicating categorisation. The limitations of perception were highlighted, with particular emphasis on the issue of inattentional blindness (the fun examples caught most of us out). Finally, some attention was given to the meaningful characteristics of data: trends, patterns and outliers; how to highlight those characteristics; and, which patterns and comparisons in data are meaningful, e.g. steep vs gradual and random vs repeating.

The final stretch of the class focused on techniques for performing meaningful data analysis by attempting to bring the characteristics and patterns introduced in the preceeding material to the fore. First we considered the various types of useful analytical interactions, such as comparing, filtering, aggregating, drilling and zooming/panning. Specific analysis techniques were then introduced for each of 7 categories of data analysis: time series, ranking and part-to-whole, deviation, distribution, correlation, multivariate and geospatial. Stephen used a number of different analytical tools – Spotfire, Tableau and Panopticon – to demonstrate not only some of these techniques, but also the state of what he considers to be the best of the current crop of data analysis tools. This crossed over into discussion of what the ultimate data analysis tool would provide: a tool that provides the appropriate set of visualisations and aforementioned analytical interactions that has no distracting lag between seeing something, thinking about it and manipulating it.

Closing Thoughts

My overall reaction to the workshops is definitely positive. Stephen Few is an engaging presenter who is able to eloquently convey many practical techniques and principles for information visualisation. The workshops appropriately complement the corresponding books by presenting similar material in a different way, with the group exercises and interactivity of the classes more actively re-inforcing the concepts.

The minor negative I would highlight about both his books and the workshops is that they appear to overly target the business intelligence domain. This in itself is not a problem, but I think it potentially sells short some of the ideas and information in the material, as I believe they are potentially much further reaching. Many of the fundemental concepts he teaches are too frequently ignored or simply not appreciated by those producing even the most basic of data visualisations. Moreover, visualisation and visual perception are key to other areas such as user experience and human-computer interaction, so it is unsurprising that most of his lessons cross over to such areas.

For those who like the sound of this course, it is being run again later in the year in London, as well as in the States and Australasia.

Contextual cues in user interface design

May 19th, 2010

Contextual cues are frequently used in user interface design to communicate functionality and behaviour to the user, removing the need for the user to guess. For example, on the web, the underlining of text is commonly used to indicate a hyperlink. In addition to underlining, one or more of a different text colour, colour change on mouse-over and cursor change on mouse-over is usually also seen. This stems from the convention that all interactive elements of a modern user interface will display some state change on mouse-over, as it clearly indicates to the user that they are “active”. Conversely, disabled functionality is commonly greyed out and do not react to the mouse to indicate that they are “inactive”. Neither the state-changes nor the greying-out are essential to the functionality of the interface. However, they are key to informing the user of the interface’s behaviour and to guiding their interaction with the interface. Without these subtle contextual cues, the user will forever be guessing at what they can do and will inevitably be left frustrated and lost.

Many modern development technologies come pre-packaged with an abundance of features, such as drop shadows, translucency and transitional animations, for creating “shiny” user interfaces. Unfortunately, it seems that they are frequently misused and/or overused, usually due to their being used solely in an attempt to make an interface more visually appealing, rather than to enhance usability. However, they should be considered additions to our arsenal of contextual cues, with the bonus of an aesthetic side-effect, rather than mere prettifying graphic design flourishes. When used appropriately, as with the now “standard” cues such as those mentioned above, they can be invaluable in effectively communicating the functionality and behaviour of our increasingly complex user interfaces.

Drop Shadows

Drop shadows imply an element of depth in user interfaces due to our natural interpretation of shadows in the real world. In accordance with this intrinsic understanding, they should be used when a user interface element is “over” another element, as it clarifies the layering that is occuring. A simple, common example is a pop-up dialog, as shown here:
Pop-up dialog

Furthermore, they can be used subtly, yet effectively, to provide a more real-world understanding of a user interface’s behaviour, as in this example:

Adobe Reader - Drop Shadow
This is a screen capture of a PDF displayed in Adobe Reader. Notice how the drop shadow under the control bar at the top result in our instinctively understanding that the pages will go “under” the control bar. The interface’s behaviour would be acceptably clear without the drop shadow, due to the positioning of the scrollbar indicating the pages will scroll but not the control bar, however, the natural interpretation would be that the pages magically disappear off at the top. Although users are probably accustomed to this idea through general computer use, the “goes under” concept is understood more instinctively as it is more natural.

The main concern regarding drop shadows is that they can horribly mislead when misused or overused. Misuse is usually a case of a shadow suggesting an above-below relationship between elements of the user interface when there isn’t one, i.e. behaviour has been implied that is not the case. In contrast, overuse simply results in difficulty interpreting the behaviour due to drop shadows only creating a pseudo-3D effect that does not scale beyond a relatively small number of layers. Related to this is the issue that drop shadows only provid a layering cue in their immediate vicinity. Therefore, a design should never rely on the user naturally interpreting the relationship of user interface elements with drop shadows in different areas of the the interface.

Transitional Animations

Transitional animations are short animations of user interface elements when changing from a particular state to another. Their aim is to infuse the interface with a more organic feel by providing a context for the appearing, disappearing and changing of elements, rather than having the “magically” flick between appearances, whilst not impeding the user by forcing them to wait for animations to complete. When used appropriately, the context provided by the animation reassures the user of what is happening and ensures that they do need to guess what has changed. For example, in the following tree explorer control, the animated expanding and collapsing of nodes complements the indentation in conveying the parent-child relationships by suggesting the child nodes are “coming out of” or “going into” the parent node as we navigate through the tree.

Explorer Tree Example

Transitional animations can be taken even further than such subtle enhancements and become a quite pronounced aspect of a tool. For example, a common feature of data visualisation is the concept of drilling down (or up) on datasets. Frequently, an understanding of the context in which lower-level details reside is as useful as the details themselves. The example below shows a bar chart of some abstract data that allows the user to drill down on individual bars. Without the transitional animation the user can still work out the context into or out of which it is drilling, but the transitional animation allows the user to passively consume this information instead, resulting in a more powerful experience for the user.

Chart Drill-down Example
Note: the code for this example is based on Ely Greenfield’s chart drill-down article.

Another example is on display in the Market Map tool we have developed. Once again the transitional animation when drilling down or up assists the user’s understanding of the data by clearly portraying relationships and context.

As mentioned, the key to using transitional animations as contextual cues is that they do not impede the user whilst communicating their additional information. Therefore, the duration of a transitional animation is vital to getting the “feel” right. Unfortunately, my experience has shown that working out the ideal duration is not an exact science and requires a largely trial and error approach. However, as a general rule of thumb, the more contextual information there is for the user to absorb, the longer the animation can take.

Translucency

A translucent user interface element is one which is neither wholly invisible nor fully solid, i.e. it is semi-transparent, resulting in the user being able to see the user interface detail “underneath” the translucent element to some extent. It inherently loses an element’s contrast and makes it appear somewhat insubstantial, or ghost-like. This can be leveraged for two purposes: to enable user interface elements to be layered whilst not fully obscuring underlying details and/or to draw the focus away from an element. For example, in the pop-up dialog image used above to illustrate drop shadow use, there is visually no suggestion that the user cannot continue to interact with the underlying text. Here is a screenshot of the same application, but this time there is a (slightly blurred) translucent layer over the underlying text. It is now clear that the user can only interact with the pop-up dialog, whilst also satisfying the user that the text has not been lost, as they are still able to see it. At the same time, the translucent overlay pushes attention away from the text, i.e. towards the pop-up dialog to which the user must respond.

Translucent overlay pop-up.

Notice how the border of the pop-up dialog is also translucent. Once again this allows the user to see a rough outline of the underlying detail whilst softening the border’s visual strength so that the user is pushed toward the only “solid” part of the interface, the area with which they must interact.

All together now…

To better understand how these contextual cues can improve an interface, here is an example based on an interface component devised for our Hindsight application which has subsequently been used in a variety of applications for our clients. This example shows the same functional component, but with different contextual cues enabled and disabled.

The Flash plugin is required to view this object.

The contextual cues vastly improve the understanding of the component’s behaviour, since they help communicate the concept of a pullout tab (like in a pop-up picture book): the drop shadow indicates that the tab is “on top”; the transitional animation clarifies that the tab is pulled out and pushed back; and, the subtle translucency ensures the underlying content is not completely obscured whilst still providing sufficient contrast for the tab’s contents to be usable.

Closing Thoughts

Contextual cues are an important aspect of user interface design. They communicate information to the user about an interface’s behaviour without the need for explicit instructions. As users increasingly expect entirely intuitive applications, this form of communication is vital to modern user interfaces. Basic contextual cues are already commonplace in all applications, usually in the form of cues such as mouse-over state changes that guide the user but, arguably, do not necessarily add a great deal to the aesthetics of user interfaces.

More modern contextual cues such as drop shadows, transitional animations and translucency are able to both act as contextual cues and prettifying additions in user interfaces when used appropriately. As the importance of the visual appeal of devices and applications is increasingly recognised and encouraged it becomes vital that, as developers and designers, we fully understand the tools at our disposal so that we can strike the appropriate balance between aesthetics and functionality in a user interface.