Currently Being Moderated

Photo Lava 1.png

 

What’s wrong with this picture? Or better yet, can you find anything right about it? Let’s answer the first question about this design, presumably used to communicate relevant quantitative information to interested users.

 

  1. Yes, car dashboards communicate critical status information to drivers about the car, and yes, software information displays convey critical status information about their respective operational processes. But the necessary physical forms and associated limitations of the former do not need to be carried over to digital applications where the same constraints are not present. Such metaphors can be useful to introduce new ideas to people using similar, familiar forms, but they quickly become a burden. Such techniques are known as “skeuomorphism”.
  2. Related to this is the preponderance of round information displays, like pie charts and rotary dials. These less-efficient and -effective holdovers from mechanical displays don’t illustrate one-dimensional quantitative expressions well, due to 1: Our mind’s difficulty in accurately perceiving spatial relationships of round areas, and 2: The difficulty of inserting text titles in the resulting irregular shapes.
  3. Traffic lights are a universal standard for saying “stop, go, caution” but are an awkward, forced translation into “bad, good, and so-so”.
  4. A lack of clear visual display hierarchy, clear relationships between charts, and any means to extend, customize, annotate, or collaborate around the display result in an isolated and inert communication vehicle (pun not intended).

 

The good part of the example is the use of horizontal bar charts with labels placed above the bars. This practice provides ample space for full labels, a wider bar area for more precise quantitative plots, and a clear comparison between the grouped bars. This technique, along with a host of others, is being built into SAP’s visual analytic tools thanks to LAVA, the new visual analytics design language.

 

Design Languages provide a basic set of guidelines, forms, and techniques to be used across products to ensure best practices, consistency, and reliability. They are the means by which products from lines such as Apple hardware & software and BMW automobiles can have unique purposes while still looking and working in similar and familiar ways.

 

 

LAVA design is composed of 6 main factors:

 

  1. Lean Appearance: Similar to the design trend of “flat design”, Lean is a clean, minimal display style that focuses on the data itself versus on irrelevant faux decorations like gradations, drop shadows, or reflective surfaces.

                    THIS                                          NOT THIS

Lava 2.pnglava 3.png

 

 

2. Points: SAP's proprietary library of "mini charts". Points are a specialized, small-size chart format with pre-determined constraints to ensure clear and efficient depiction of simple quantitative facts. Think of them as “chart tweets”.

Lava 4.png

3. Channels: Channels are simple containers for displaying and navigating to multiple Points and Charts. Channels represent a familiar and cross-device way to collect and deploy analytic components in a display space. Clicking or tapping the left/right arrows, or swiping on a touch screen, cycle among peer charts collected within the Channel. Channels of different chart type or topic can be stacked within a Board for hassle-free layouts

 

lava 5.PNG

4. Boards: A Board is a simple dashboard-like space, but renamed to create distance from the previous generation of “dashboards” and their legacy constraints. Initially these will be simple containers for Channels and free-standing charts, and will be expanded to provide templates suited to known analytic consumption purposes.

 

lava 6.png

 

 

5. Lattices: The Lattice is a new visualization component in the emerging category of Metacharts. Metacharts are bigger and more sophisticated than a typical chart, but smaller and less specific than a custom analytic application. They fill a niche to provide pre-configured and embeddable display, manipulation, personalization, and light analysis experiences to a wider body of less-technical and less-analytic users.

 

The Lattice is essentially a multi-layer, manipulable bar chart, enabling user-driven drill-down filtering and other operations. Its manipulation controls are embedded in the content display itself, doing away with the separate palettes, toolbars, and control panels located in the frames of traditional applications. The Lattice provides a consistent, accessible window into any conventional multi-dimensional data set.

 

Due to their self-contained manipulation controls, they are particularly useful for embedding within other operational applications. Their small screen footprint
is also a benefit for space-constrained mobile displays where direct touch manipulation with content displays is the convention.

 

 

lava 7.pnglava 8.png

 

 

6. Sn@p navigation: The Sn@p Navigation model enables the fluid creation and curation of visual analytic environments and collections. This includes user-driven re-use of Points, such as collecting them into Highlights pages and having them serve as small-footprint representations of their parent Boards while embedded within other applications. It also includes fluid navigation among Boards within a user’s collection.

 

Initially the model will rely on the Point as the basic unit of analytic expression and content exchange, and it has the potential to render large, deep collections of formal or informal nested environments of analytic content in a rational and consistent structure.

 

Hopefully this provides a good first overview of the LAVA design language and what it means for the future of SAP’s analytic product offerings. LAVA’s Lean
Appearance is now the default for SAP visual analytics. In future posts we will elaborate on how & when LAVA will be made available in Lumira and
elsewhere.

 

Credit goes to SAP Product Designers John Armitage, Julian Gosper, and Nick Weed for providing their LAVA-based design examples.

Comments

Actions

Filter Blog

By author:
By date:
By tag: