Links & More

Print version Print version

Related Links
link interaction-design.org
link HCI encyclopedia
document

Review of Processing (Reas & Fry)

Background Links
document Books & People

UI Design Blinks (2012)

By Gerd Waloszek, SAP AG, SAP User Experience – Updated: February 21, 2012

Gerd Waloszek Welcome to a new column of brief, blog-like articles about various UI design topics – inspired by my daily work, conference visits, books, or just everyday life experiences.

As in a blog roll, the articles will be listed in reverse chronological order – and if the roll becomes too long, I will start a new one.

Please note that I will not be able to maintain the initial publishing speed! The articles will appear at irregular intervals as time permits and inspiration comes...

GoSee also an overview of 2010 Blinks • overview of 2011 Blinks

 

February 21, 2012: Skyline Graphs – New Insights at the Horizon...

Sorry for the blatant title of this UI Design Blink, which was inspired by a paper presentation that I missed, entitled "Telling the Data Comparison Story Using A Skyline Graph (Instead of Two Pies)". Bill Caemmerer gave it at the Interaction 2012 conference in Dublin in early February this year and introduced it with: "Just like every picture, every graph tells a story, or it should. Frequently the story we want to tell is a comparison to the past or to our plans, a 'what happened' story. Do we have the best tools to tell this story visually, in graphs?" He believes that traditional graphs do no tell the whole story and offers a new graph type that does – the skyline graph. While I had missed Caemmerer's message, a former colleague told me at the conference that he had attended the presentation and made me curious about skyline graphs. I searched for Caemmerer's slides and found them on the Internet. In the following I will briefly disclose what I have learned from them and from searching the Web. I will also present some results of my own programming exercises in skyline graphs using once again Processing, a programming language for designers.

The Starting Point

Let's assume that you have two sets of data and want to make a "Before-After" (or an "After-Before") comparison:

Data
1
2
3
4
5
6
Before
10
20
30
15
15
10
After
15
15
20
20
23
17

Table 1: Two data sets for comparison

The data in Table 1 might represent categorical item values, for example, the yearly spending for different budget items (for two different years). In this particular example, each data row totals to 100 so that the data might be treated as percentages, but this is not relevant here. This data can be presented visually, as the title of Caemmerer's presentation suggests, as two pie charts:

Chart 1 (before)
Figure 1: "Before" pie chart (created with Excel) Figure 2: "After" pie chart (created with Excel)

It can also be presented using a horizontal bar graph with two columns for each item and each column representing one data row:

Dual horizontal bar chart

Figure 3: Bar graph with "Before" and "After" bars (created with Excel)

According to Caemmerer, and I agree completely, the following questions are hard to answer from these charts: Questions for...

  • Relative changes (“left shoe sales are up 15%”)
  • The biggest most important changes (“you spent $500 on what?!”)
  • Absolute changes ("right shoe sales rose from 80% to 120%"; added by me)

A Proposal

Because these graph types do not "tell the story behind the data", we need a better graph that makes relative as well as absolute changes visible. Caemmerer regards a skyline as a good approach to this, and the following slide from his presentation illustrates the basic idea behind the skyline chart:

Skyline

Figure 4: Deriving the idea of skyline graphs (from Caemmerer's slides)

The horizon provides a reference and standard of comparison (it can be the 0% or 100% percent line, depending on how you scale your data). Relative changes are made visible through the height of the buildings/bars relative to the horizon, while absolute changes are made visible through the areas of the buildings/bars. 

I searched the Internet for further references to the skyline graph, and encountered the RENOIR Website from 2003 (University of Augsburg, Germany; it seems to have had only a short "active" life). There, I found some useful explanations (slightly modified by me):

  • In skyline graphs the x-value represents the size of the item (so that the widths of the columns are no longer equal) and the relative change of each item is plotted on the y-axis. That is, relative changes are represented by the heights of the columns and absolute changes by their areas (= relative change * size).
  • It is not the exact size of the absolute change that is interesting (areas cannot be compared as easily as heights), but the area should give you a rough idea of the importance of each change. The relative change is a good criterion for identifying successful items, but in order to get the most important change you have to take the absolute change into account. Both variables are important!

Explorations with Processing

Inspired by the RENOIR Website, I will now derive the skyline graph in three steps using my "old friend" Processing for programming the charts. My first chart (Figure 5) allows to compare relative changes using height only – all the columns have the same width. The colors indicate positive (green) and negative (red) changes with regard to the "before" data (= 0%; I might have chosen the other way round, as well).

Skyline Graph

Figure 5: Graph indicating relative changes (relative to "before") (created with Processing)

In the second step (Figure 6), I take also care of absolute changes employing area (height * width) as an indicator. The red and green areas depict absolute changes, and the color and direction whether the change was positive or negative with regard to the "Before" data. Again, the heights of the columns depict relative changes.

Skyline graph (RENOIR)

Figure 6: Skyline graph indicating relative (height) and absolute (areas) changes (relative to "before") (created with Processing)

In step three (Figure 7) I finally move from the RENOIR version of the skyline graph to Caemmerer's version by changing the standard of comparison from 0% to 100% and extending the columns down to 0% so that not only absolute changes but also absolute values are shown. The areas between 0% and 100% represent the absolute values of the "Before" data set. Like in the version above, red and green areas depict absolute changes, while the heights of the red and green columns depict relative changes.

Skyline graph
Figure 7: Skyline graph indicating also absolute values (areas between 0% and 100%, "Before" = 100%) (created with Processing)

The chart in Figure 7 looks similar to one that Caemmerer presents in his slides ("Spending vs. Budget"). It may be a little bit confusing, though, that the "Before" data is represented either as yellow or as yellow+red columns, while the "After" data is represented either as yellow+green or yellow columns. Caemmerer uses different visualizations to solve this dilemma (see his slides). Although humans have more difficulties with comparing areas than with comparing heights, you can clearly see in the chart that large relative changes alone may not tell the whole story, because they can be connected with comparably small absolute and thus not so important changes.

There are many variations in the look of skyline graphs (see, for example, Caemmerer's slides) and many possible uses for them. This UI Design Blink was just meant as an appetizer for the readers. For more information, see the references below and search the Web.

Note: Above, I present charts that use the "Before" data as standard of comparison (100%). Click here to see charts for both "Before-After" and "After-Before" comparisons.

References

February 15, 2012: Sneak Preview Number Five into interaction-design.org

It's only February, yet Mads Soegaard, editor of the HCI encyclopedia, has already announced the second sneak preview into interaction-design.org for this year (and the fifth altogether). Mads writes: "We've hit a major milestone with our free educational materials: Our newest chapter is written by NY Times bestseller and Harvard professor Clayton Christensen." While he forgot to mention that the new chapter is entitled "Disruptive Innovation", he did not forget to send us the link to the sneak preview. Here it is: http://www.interaction-design.org/encyclopedia/disruptive_innovation.html?p=b248.

Interestingly, I just returned from the "Interaction 2012" conference at Dublin, where Luke Williams held the opening keynote on disruptive design, entitled, "The Disruptive Age: Thriving in an Era of Constant Change". I assume that his keynote was more or less the essence of his new book "Disrupt: Think the Unthinkable to Spark Transformation in Your Business". The same is true for the new chapter by Christensen: It is based on his book "The Innovator's Solution", which was published in 2003 as the successor to his original book "The Innovator's Dilemma" from 1997. Therefore, and as Don Norman points out, many of the examples are already dated (Table 2 of the Appendix in particular). He leaves "the analysis of today's relevance of the companies to the points of the article as an exercise for the reader." This might indeed be an interesting and insightful exercise for the readers.

The new chapter is accompanied by commentaries from Don Norman, Mark Steen, and Paul Hekkert. For a change, I will not introduce the new chapter with Mads' ideas; instead, I will cite some of the commentaries (some of the emphasis is mine). Steen provides a very useful summary of the new chapter in his introduction:

  • "Christensen discusses the concept of disruptive innovation in detail and with eloquence. He convincingly argues that most firms tend to focus on sustaining innovations-incrementally improving their products and services, aiming to serve the attractive higher end of their current customer base-and that they thus unintentionally, create opportunities for new entrants or new ventures of other firms. These new entrants or new ventures can introduce new products or services at the lower end of the market-offering a 'good enough' product for lower costs and for lower prices, serving people that are currently over-served (low-end disruptions), or offering 'good enough' products or services for new customers or new situations for consumption or usage (new-market disruptions). These new entrants or new ventures start at the lower end of a market and progressively move up through this market, and gradually conquer the established firms' businesses. Not by attacking them head-on, but by first taking a piece of the cake that nobody is really interested in, and then a next piece, and a next piece..."
  • "In this chapter ..., Christensen adopts a business perspective and focuses on economics and market dynamics. But for those who feel less comfortable with such economic and commercial vocabulary, you may rest assured that disruptive innovation is also about empowerment and promoting development, freedom and well-being, and about promoting processes of design thinking, cooperation and creativity."

Thus, Steen found a niche that designers might be able to fill. Hekkert builds on this and points to the fact that the words "design" and "designer" do not appear in the new chapter (I found a few occurrences but these are not specifically related to the topic of "design"):

  • "Designers talk a lot about innovation and every designer wants to be an innovator. Well, most... Christensen sketches a few trajectories along which a company can innovate and this is a great analysis for business people, managers, and decision makers, because he meticulously explains the conditions under which a disruptive innovation might fail and succeed. Since most companies (luckily) rely more and more on designers to drive this innovation process, he also shows designers where and how they can make a difference – if you read carefully."
  • "Designers who just have a superficial knowledge of the innovation literature may be a bit puzzled. They may be familiar with the distinction between incremental – making existing stuff a little better ... – and radical or breakthrough – coming up with a completely new product type or category – innovation. Christensen proposes a completely different distinction between sustaining and disruptive innovations. Both can be incremental and both can be radical, it all depends on their effect on the established businesses and mainstream markets. And Christensen talks about companies, technology and the absorption capacity of customers. Design, or the designer, is non-existent in his scheme of things."

In the remainder of Hekkert's commentary, he investigates if he can fit designers in somewhere.

And then, there is the commentary by Norman, which is actually the first of the three. Since I already cited Norman above, I will close with just a remark from the end of his commentary:

  • "Christensen's analyses are important and influential. I, myself, find them very compelling. But they are very difficult to apply. After reading Christensen's chapter I thought about each of the nine companies I am currently advising, attempting to see how the information in the chapter would be relevant. Some are small startups, but others are larger, including at least one of the largest companies in the world. In every single case I concluded that the company was different and didn't fit the mold. This was true even for the several companies that believe they are about to cause a major upheaval in product space. Yes, they might be disruptive, I concluded, but not in the sense described in these books for they were entering new territories where comparative products do not exist. Is my analysis correct? Only time will tell."

I hope that I have whetted the appetite of the readers, and that they will rush to read the sneak preview of the new chapter "Disruptive Innovation" and the three commentaries.

References

January 11, 2012: Sneak Preview Number Four into interaction-design.org

It looks as if the new year 2012 will start the same way as 2011 ended – with new additions to the HCI encyclopedia at interaction-design.org. Having returned from the holiday season, I found already a fresh e-mail in my inbox, in which Mads Soegaard, editor of the HCI encyclopedia, announced that they are preparing the publication of a new chapter, entitled "Affective Computing". And once again, they offer SAP Design Guild readers a sneak preview into the new chapter, which took Kristina (or Kia for short) Höök from Stockholm University, Sweden, 18 months to write. It includes four HD videos and four commentaries by notable designers, such as Rosalind Picard from MIT, whose presentation I attended at the CHI 2003 conference (read my report). I came across Kia Höök more often, particularly at Interact 2009 in Uppsala, Sweden (read my report), and at DIS 2010 in Aarhus, Denmark (read my report). At both conferences, she was a highly visible participant.

Thus, for the fourth time, SAP Design Guild readers are a few days ahead of the crowd and can already take a look at the HCI encyclopedia's new content (http://www.interaction-design.org/encyclopedia/affective_computing.html?p=b248).

And, as with previous sneak previews, Mads has provided us with some backstage photos (which you will find in the sneak preview as well):

Interviewing Kias Höök - Setting up the equipment

Interviewing Kia Höök – Setting up the equipment

  

Interviewing Kias Höök - Setting up the equipment

Interviewing Kia Höök – Setting up the equipment

Interviewing Kia Höök

Interviewing Kia Höök

    

 

 

And, just like for the previous previews, Mads has sent us his thoughts about the new chapter (to which I have added a few words):

  • Leisure-oriented applications, such as games, social computing, artistic tools, and tools for creativity seem to dominate the marketplace over traditional work-oriented software. As a consequence, we have to consider what constitutes an experience, how to deal with users' emotions, and understand aesthetic practices and experiences. I have to admit that this trend has only just begun in business software, SAP's home turf. But here, too, people are already talking about "gamification".
  • According to popular prejudice, women embody "emotion" and "irrationality" whereas men embody "rationality" and "objectivity". As such, designing for emotions/affect stir up gender issues. Are women better designers of technology that uses emotion and affect? Of course, I do not have an answer to Mads' question, but at CHI 2003 I noted that most of the researchers in the "emotional design/affective computing" field were female. The only notable exception that I know of (which does not mean a lot...) is Don Norman who wrote the book Emotional Design.
  • The pioneers of affective computing continually try to design products that can "sense" what the users feel when interacting and then adjust the actions of the product accordingly. The success of such products relies on how well the products can recognize people's emotional responses/states from people ’s behavior, physiological responses, and facial expressions. And that's actually what makes me shudder a little bit. I, for one, do not want my refrigerator to sense my emotions and then make respective recommendations regarding its content (for example: "Drink a beer to cool down.")...

Höök presents three approaches to research on emotions: "affective computing", "affective interaction" (which is the approach that she pursues), and "technology as experience". As the commentaries show, her view of the approaches may not be universally shared by other researchers. Therefore, I would like to encourage you to also read the commentaries on the chapter by Rosalind Picard, Paul Hekkert, Egon van den Broek, and Joyce Westerink. In particular, Picard, a pioneer and proponent of the "affective computing" approach, objects to Höök's view that "affective computing" is "cognitivistic".

References

 

To top top