3. A Design Language for Visual Analytics

Download PDF
The test of the machine is the satisfaction it gives you. There isn’t any other test. If the machine produces tranquility it’s right. If it disturbs you it’s wrong until either the machine or your mind is changed.

- Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance: An Inquiry into Values

In 2010, SAP’s BI product offerings – I use “product” to refer to product/service offerings of any type – were a mishmash of multiple overlapping products, technologies, chart libraries, visual styles, and interaction behaviors. Such situations are common after corporate acquisition sprees, and BOBJ was already a conglomeration of multiple recent acquisitions of its own. Xcelsius, originally from the acquired Infommersion, was a handy desktop-based product for building information dashboards – screens of summary analytic operational data – from data in Microsoft Excel files. This was SAP’s most complete and visible product for visual analytics. However, its interaction model was from a previous computing generation, its styling was a cheap knockoff of Apple’s OSX, its workflows were complex and cumbersome, and its performance with large data sets was poor. Other offerings included WebIntelligence, Crystal Reports, BusinessObjects Explorer, and a fragmented collection of other performance management applications and component libraries that enabled the publishing of quantitative information through files, websites, mobile devices, and embedding within business applications.

While SAP had no shortage of application demonstrations to show customers online and at conferences, and a rudimentary guideline for how to lay out dashboards, the company had no product user experience design strategy for how to leverage the sea change of new technological opportunities being brought to the industry.

LAVA was created to address this challenge, and is an example of a design language, as defined by Wikipedia:

A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings. Designers wishing to give their suite of products a unique but consistent look and feel define a design language for it, which can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts. They then follow the scheme in the design of each object in the suite.

Usually, design languages are not rigorously defined; the designer basically makes one thing in a similar manner as another. In other cases, they are followed strictly, so that the products gain a strong thematic quality. For example, although there is a great variety of unusual chess set designs, the pieces within a set are usually thematically consistent.

Sometimes, designers encourage others to follow their design languages when decorating or accessorizing. In the context of graphical user interfaces, for example, human interface guidelines can be thought of as design languages for applications.

In automobiles, the design language is often in the grille design. For instance, many BMW vehicles share a design language, including front-end styling consisting of a split kidney and four circular headlights. Some manufacturers have appropriated design language cues from rival firms.

Design languages are different from design vocabularies, in the same way as these terms are related in spoken/written languages. A design vocabulary is a set of distinct elements that, like words, can be combined into synthesized designs, as with written prose. Languages contain and govern vocabularies. Classical architecture is a design language, with a vocabulary of columns, column capitals and bases, pediments, architraves, cornices, triglyphs, metopes, volutes, pilasters, and other specialized filigree, along with a system for combining them into structures for different purposes. Vocabulary and language rules heavily influence the possible resulting forms of expression. While different languages can be adequately applied to all purposes, their natures can encourage or constrain the results of their use in systematic ways. English, for example, has great variety – or possibility for unique expression – due to its relatively large vocabulary and the layered influences of its Latin/ French and Old English/Germanic heritage. This makes it highly expressive, but also contradictory, inconsistent, and ambiguous, and thus its nuances are difficult to learn and master. German, in contrast, is very systematic and pure, well suited for precise, explicit, rational communication. While all languages are multi-purpose, some just lend themselves to certain means of expression, and even have distinct appearances in printed text form. Some Western typefaces are actually optimized – consciously or not – for the ideal rendering of certain languages. Some think that the typeface Bodoni looks best in Italian.

While many design languages are only appearance-based, LAVA includes fundamentally new interaction design components and behaviors. In fact, its appearance is intended to be as generic and minimal as possible in order to focus attention on the content itself versus its container and its styling. It is in effect a systematic, functional language for defining an entire experience – to the point where it can be described as a generic, comprehensive method for consuming quantitative content. Designing at the language level, delivered through concept designs along with standards and guidelines, is a different challenge than that of designing for freestanding, singular products. Instead of having full control of a specific, contained instance as with the latter, the former is about design influence that is spread in varying amounts across a suite or portfolio of products. Figuratively speaking, if designing for one product can make it 100% better, the same effort at the language level can make ten products 10% better, ten more products 10% better, etc. In the later chapters I will discuss the unique process considerations of working at this level.

LAVA is made up of five interdependent systems. Not all of the pieces of these systems are new or original – many are derived from current conventions in analytics and general digital design practice. I look at them and how they interrelate much in the way that Robert M. Pirsig did when describing the interrelated systems of a motorcycle in his 1974 book Zen and the Art of Motorcycle Maintenance: An Inquiry into Values. I first encountered Pirsig’s cult classic in a textbook containing examples of good writing style, and the passage I quote is taken from that chapter. I’ve read the book many times and believe it is the best account available of the relationship between beauty, technology, and purpose – and thus about the nature of design itself. American graphic design legend Paul Rand was said to have struggled throughout his career trying to answer the question “am I an artist or a businessman?” The essence of being a designer, and one’s personal identification with the profession, is about the balance between these two competing masters. While this dichotomy can be maddening, it’s a big part of what makes design interesting.

The book reappeared as the first reading assignment in professor Sharon Poggenpohl’s graduate graphic design seminar at Rhode Island School of Design – or RISD –, although not as a design manual per se but as an account of perseverance and how a person dedicated himself, to the point of exhaustion and mental breakdown, to reconciling seemingly conflicting personal and cultural viewpoints on work and life. It was also interesting to later hear a friend mention that not only was the book assigned in his Harvard Business School curriculum, but in particular the same chapter I had found in the writing textbook. Though I encourage all designers and anyone else to read it, few if any have ever finished it. Looking back, it appears that I’ve been on a much milder quest to understand the intersection of numbers with work and life.

The passage is below. Paraphrased, it says that a motorcycle consists of a number of interrelated systems. To understand how the motorcycle works you need to isolate and describe each system on its own, and then identify where and how each interacts with the others to enable the desired effect of cruising across the country on two wheels.

A motorcycle may be divided for purposes of classical rational analysis by means of its component assemblies and by means of its functions.

If divided by means of its component assemblies, its most basic division is into a power assembly and a running assembly.

The power assembly may be divided into the engine and the power-delivery system. The engine will be taken up first.

The engine consists of a housing containing a power train, a fuel-air system, an ignition system, a feedback system and a lubrication system.

The power train consists of cylinders, pistons, connecting rods, a crankshaft and a flywheel.

The fuel-air system components, which are part of the engine, consist of a gas tank and filter, an air cleaner, a carburetor, valves and exhaust pipes.

The ignition system consists of an alternator, a rectifier, a battery, a high-voltage coil and spark plugs.

The feedback system consists of a cam chain, a camshaft, tappets and a distributor.

The lubrication system consists of an oil pump and channels throughout the housing for distribution of the oil.

The power-delivery system accompanying the engine consists of a clutch, a transmission and a chain.

The supporting assembly accompanying the power assembly consists of a frame, including foot pegs, seat and fenders; a steering assembly; front and rear shock absorbers; wheels; control levers and cables; lights and horn; and speed and mileage indicators.

That’s a motorcycle divided according to its components. To know what the components are for, a division according to functions is necessary:

A motorcycle may be divided into normal running functions and special, operator-controlled functions.

Normal running functions may be divided into functions during the intake cycle, functions during the compression cycle, functions during the power cycle and functions during the exhaust cycle.

And so on. I could go on about which functions occur in their proper sequence during each of the four cycles, then go on to the operator-controlled functions and that would be a very summary description of the underlying form of a motorcycle. It would be extremely short and rudimentary, as descriptions of this sort go. Almost any one of the components mentioned can be expanded on indefinitely. I’ve read an entire engineering volume on Contact points alone, which are just a small but vital part of the distributor. There are other types of engines than the single-cylinder Otto engine described here: two-cycle engines, multiple-cylinder engines, diesel engines, Wankel engines – but this example is enough.

This description would cover the “what” of the motorcycle in terms of components, and the “how” of the engine in terms of functions. It would badly need a “where” analysis in the form of an illustration, and also a “why” analysis in the form of engineering principles that led to this particular conformation of parts. But the purpose here isn’t exhaustively to analyze the motorcycle. It’s to provide a starting point, an example of a mode of understanding of things which will itself become an object of analysis.

There’s certainly nothing strange about this description at first hearing. It sounds like something from a beginning textbook on the subject, or perhaps a first lesson in a vocational course. What is unusual about it is seen when it ceases to be a mode of discourse and becomes an object of discourse. Then certain things can be pointed to.

The first thing to be observed about this description is so obvious you have to hold it down or it will drown out every other observation. This is: It is just duller than ditchwater. Yah—da, yah—da, yah—da, yah—da, yah, carburetor, gear ratio, compression, yah—da-yah, piston, plugs, intake, yah—da-yah, on and on and on. That is the romantic face of the classic mode. Dull, awkward and ugly. Few romantics get beyond that point.

But if you can hold down that most obvious observation, some other things can be noticed that do not at first appear.

The first is that the motorcycle, so described, is almost impossible to understand unless you already know how one works. The immediate surface impressions that are essential for primary understanding are gone. Only the underlying form is left.

The second is that the observer is missing. The description doesn’t say that to see the piston you must remove the cylinder head. “You” aren’t anywhere in the picture. Even the “operator” is a kind of personalityless robot whose performance of a function on the machine is completely mechanical. There are no real subjects in this description. Only objects exist that are independent of any observer.

The third is that the words “good” and “bad” and all their synonyms are completely absent. No value judgments have been expressed anywhere, only facts.

The fourth is that there is a knife moving here. A very deadly one; an intellectual scalpel so swift and so sharp you sometimes don’t see it moving. You get the illusion that all those parts are just there and are being named as they exist. But they can be named quite differently and organized quite differently depending on how the knife moves.

For example, the feedback mechanism which includes the camshaft and cam chain and tappets and distributor exists only because of an unusual cut of this analytic knife. If you were to go to a motorcycle-parts department and ask them for a feedback assembly they wouldn’t know what the hell you were talking about. They don’t split it up that way. No two manufacturers ever split it up quite the same way and every mechanic is familiar with the problem of the part you can’t buy because you can’t find it because the manufacturer considers it a part of something else.

It is important to see this knife for what it is and not to be fooled into thinking that motorcycles or anything else are the way they are just because the knife happened to cut it up that way.

Robert M Pirsig, Zen and the Art of Motorcycle Maintenance: An Inquiry into Values

I was given the opportunity at SAP to re-construct the motorcycle of visual analytic consumption. The effort to understand and explain the essence of how LAVA can bring together logic, technology, and people eventually grew into the writing of this book. It’s important to keep in mind that this work effort was very empirical in nature, starting out with very specific consulting efforts, with teams throughout the company from multiple business units needing advice on the design of dashboards and analytic applications. In carrying out these design consulting engagements, I discovered patterns in the underlying data structures being used and the ways that customers wanted to view and use the data. Leveraging the foundational approach of Edward Tufte and the more applied recommendations of Stephen Few, I found myself successfully re-using and refining the same set of basic designs with minor alterations to suit each project. Because SAP’s overall strategy was about simplification, consolidation, consistency, and also about reaching more non-technical users at a massive scale, we evolved these early designs into an overall design language and gave it a name.

With the guidance and effort of colleagues from engineering, user experience, product management, demo creation, product marketing, and custom co-innovation development efforts with customers, pieces of LAVA were gradually developed over time, and are now making their way into products across the company. This was not a moon-shot corporate initiative, but rather a grass-roots networked collaboration that developed under the radar, through the volunteer help and passion of dozens of people.

What kept me going was continuing affirmation from customers and their users, and the enthusiasm of those in SAP that worked closely with these customers and intimately understood their needs and frustrations. Every answer in this effort required that the motorcycle be sliced apart and described in different ways, from the design approach to the technologies used to the product and marketing approach to organizational and political arrangements. Needless to say, in a big company like SAP this is not easy. As you will see, and as Christensen elaborates, a major reason that innovation is so rare is that it can newly mint winners and losers, often undercutting the prestige and influence of incumbent powers, who instinctively resist out of self-interest.

What I believe is new with LAVA is how existing BI elements, when combined with several newly-invented components and framed according to today’s technical landscape and mass consumption trends, can create a synergistic whole that enables a fundamentally new experience. The BI product and technical landscape often ends up sounding a lot like Pirsig’s catalog of what, where, and why with an element of exaggerated salesmanship thrown in. The catalytic element we provided was a product design prototype – a model of the motorcycle – as a vehicle to demonstrate how to engage individual users intimidated by BI – the observer – in the effort to understand the quantitative foundations of their work. The effort was none other than to do the hard work of bridging numbers and people, and building that work into products that entice, even seduce, skeptical users to invest in an unfamiliar activity.

The five systems I will describe I refer to as the Metric System (no, not that Metric System), the Visual System, the Organization System, the Interaction System, and the Value System. Later I’ll explain and demonstrate them, along with the LAVA design language and several product design examples that use it. First, however, I’ll provide some of the cultural, technical, and business context behind what is happening in the visual analytics field and how it led to the proposed solutions.

3.0.1 References

3.1 | Zen and the Art of Motorcycle Maintenance: An Inquiry into Values (book) | Robert M. Pirsig | HarperCollins

Chapter TOC
Download PDF

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this book chapter.

Armitage, J. (2016, November 3). A Design Language for Visual Analytics. Interaction Design Foundation - IxDF.

New to UX Design? We’re giving you a free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,672 designers enjoy our newsletter—sure you don’t want to receive it?

Download Premium UX Design Literature

Enjoy unlimited downloads of our literature. Our online textbooks are written by 100+ leading designers, bestselling authors and Ivy League professors.

Bringing Numbers to Life
The Encyclopedia of Human-Computer Interaction
Gamification at Work: Designing Engaging Business Software
The Social Design of Technical Systems: Building Technologies for Communities

New to UX Design? We’re Giving You a Free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,672 designers enjoy our newsletter—sure you don’t want to receive it?