notes12-representationwithaudio · of spotting where the number 7 appears in a sea of numbers...

Hello class. This week’s topic is an exploration of useful approaches to thinking about ways to represent and visualize information.

This topic and deck was intended to have a number of “read at home” slides, but since this is all “at home” I’ll record some discussion of those slides as well, making it a little longer as a video set.

To make this easier to consume, it will be divided into four videos. Due to thematic clustering, the four will not be of the same lengths. Please pause to consider the slide details as needed.

The next slide will hopefully show a snippet from a video on information visualization.

The snippet talks about some fairly simple visual changes that can make the task of spotting where the number 7 appears in a sea of numbers easier.

The URL for the full video is given if you are interested in their full discussion.

In our exploration of graphical/visual screen design, we looked at a variety of issues and good fundamentals for screen design.

In this topic, we go beyond that to think about techniques and approaches to represent information in good ways at various levels. As screens got larger and higher resolutions, and as users have become more accustomed to seeing representations, the challenges have shifted, but not gone away.

Making good use of understandable and contextually appropriate metaphors will be important. If we can support user inquiry and discovery through allowing them to manipulate what they see and how, that can be useful. In many scenarios, providing tools that allow direct manipulation can be very powerful.

Some modern research is exploring how to allow a user to manipulate and query databases with billions of points of information and see graphical results in real time.

Through various technologies we and others have access to enormous amounts of data, both public and private, from users posts to access logs to health data and beyond.

This data might be processed and filtered and sculpted into simple statements or simple charts or fun infographics that try to convey a story built from the data.

Of course, people can either intentionally or unintentionally “lie” with data. In this week’s 6Round discussion, I will attempt to have you collaboratively create an infographic or ad campaign that is based on data and yet is misleading.

There are ongoing examples of uses and abuses of data. With the current pandemic, some people want to share truths and some want to share lies. How does the consumer build trust in a visualization? Please pause and visit the URL here and try out this interface to data. You can filter, zoom, and more. Also in this week’s discussion, I will ask you to discuss what controls or features you wish this interface provided, and why.

Please pause to read this list of properies that good information visualizations should aim towards.

Welcome back. If done well, visualizations make it easier for people to identify trends and outliers, as well as find clusters or gaps.

Information visualizations can be useful for understanding a wide range of things, from battles to medical outbreaks to wildlife behavior to so many others.

Even something we might think of as simple – representing a small quantity –can have many options.

Which of the shown approaches is best to quantify buffalo? Are there any that you can’t understand?

The hash stroke of different heights mixed together might be visually unclear. The values written in Chinese require knowledge of that language or another that utilizes the same or a similar numeric form to read.

The most realistic was the photo, but please pause and see whether the other representations give the same quantities as the photo?

Welcome back. It does. A total of 12 buffalo.

Only counted 10 or 11? Did you see the baby?

Still only at 11? Did you notice these are two different buffalo?

The way in which you present your data can have a big impact on how it is consumed, understood, and used.

Do you use text, simple drawings, or something more complex for your data?

Even with just text, there can be many options.

Even with simple information, it could be life and death at stake.

If you care about the current value, you might want something like the first.

If you also care about the highest value over time, you might like the second.

If you care about patterns over time, perhaps the third.

What’s your favorite video game UI? This is a very old one yet probably shares many big-picture concepts with current ones, even if the graphics are far more realistic now.

What would you like in a VR display? AR? Car dashboard navigation?

Consider how you look at files and directories on a drive on your PC?

What about cloud drives?

Are there users who just have one giant directory with everything or think files are “in” the application itself?

How do you support the huge spectrum across which users are spread in terms of expectations and skills, from the “I know this!” reaction of a character to the Silicon Graphics 3D File System Navigator in Jurassic Park to the person who thinks their documents are “in” Microsoft Word so doesn’t know how to e-mail it to you.

Navigation challenges are in many places. Overviews where you can easily navigate a linear path of exploration and then click on something for the details exists in this example as well as many others.

Growing up in New York City, zip codes were weird to young me because they seemed random as I could walk in different directions and none of the neighboring zip codes were sequentially “next” to mine.

Perhaps that’s why I like this visualization from Ben Fry so much. Please pause to visit it and type in some prefixes to explore how zip codes are assigned as well as perhaps observe how the population of our country is distributed.

Welcome back. Was there anything unexpected or novel to you?

Some systems will provide multiple views to support multiple needs, goals, desires, and/or levels of comfort.

A colleague here at UMD wanted a better tool specifically for things like folders of photos.

This wasn’t just for high-level questions like which folders had the most files, but also for ways to explore them more easily.

Tools will sometimes integrate multiple related goals in their design.

There are some desires that only arise when resources are scarce. I never cared much about finding large folders until I started to run out of hard drive space.

Windows UI designers might have just never thought about sorting by folder size back in the 90s, but is Google’s business model at all based on pushing users towards renting more space rather than cleaning up their drive, and if so did that influence their design choices?

On Windows, it’s fairly easy to to use software from others to fill a usability gap but what about within the Google ecosystem?

Take some time this week to reflect on the different ways you are shown “where you are” or “what you have” when using different software or websites, and if you have anything on your personal wish list in these types of contexts.

Hello class. In this video of the set we will explore different, more specialized and perhaps “fancy” visualization approaches.

Some of these can be easily applied to many contexts and data sets, others would take more significant time to apply to different ones.

The first that I will present is one that originated here at UMD out of the mind of the founder of the Human-Computer Interaction Lab here, Ben Shneiderman, called the treemap.

The core idea is to use the segmentation of the two-dimensional plane along with colors to represent multiple data points connected with each item in a set.

There will be examples of uses of the approach on the coming slides, and on this slide I have placed URLs to two different tool implementations that can be used to plug your own data into the visualization technique.

This is one of the “classic” proof of uses examples from when Shneiderman was developing this.

It shows information about the CS department's main file system at the time, showing size of files and types of files.

A popular use of the treemap has been with the stock market. The image on the slide is from the first site that I know of that used it, but many have.

At a glance, if you know that red means a stock is dropping and green means it’s increasing, that brightness means greater absolute value, and are told that the size of the box represents volume of trades that day, can you find the big winners and loser so far this day? Please pause to look.

Welcome back. Hopefully, you spotted the bright red one and the brightest green ones. They also clutser the individual stock rectangles based on the type of stock.

The link on the page is to one of several that currently use this visualization, even though SmartMoney no longer does. If curious, please visit it and interact with it to see how they use mouse-over for details.

27

Here’s an example of a different way to get an overview of news stories than the news.google view of them.

28

You can easily change to different regions of the world too.

The treemap approach can be easily applied to a wide variety of data, as hopefully exemplified by the stocks and news examples.

You can search online for other usage examples if you are interested.

29

The next set of examples require more custom effort but will hopefully demonstrate how the same data can be represented in many ways. In this case, 2008 presidential elections results, in part because the electoral college results were more than 2/3rds going to the victor, at 365 to 173.

First, a county by county map, with what’s generally considered a heatmapapproach of circles where color and size have meaning, in this case the party of the winning candidate and the margin by which they won are represented by each circle.

Here’s the same data and structure where a 3D approach is used for the margin of victory instead of circle radius.

Any preference between the two?

Now we’re going to get very different on some traditional results approaches.

The image on the left is a traditional red/blue state-by-state visualization and really does not appear to be a 2/3rds blue victory, but on the right is a warped map where state size is skewed to represent population which is probably more meaningful to most for identifying the winner, though much harder to figure out most states.

Again the image on the left is a traditional red/blue visualization but this time county by count and does not appear to be a 2/3rds blue victory, but rather a landslide red victory, which it wasn’t.

Also again, on the right is a warped map where state size is skewed to represent county populations which is probably harder to read as a clear blue victory, let alone a 2/3rds victory.

Things get even more interesting as we move from “red state” and “blue state” thinking to purple.

Here we see county by county with red/blue mixes based on margin of victory.

We no longer have many so-called “blue states” or “red states” but rather a purple nation.

Consider each of these accurate visualizations and what story you could tell with each. The stories are probably not the same.

Moving away from election data, this example is a heatmap that I found online showing where the last 100 shootings in Baltimore had been as of late March in 2009.

What does it seem to convey? Do you see any problems with this type of visualization rather than something like putting virtual pins in each of the 100 spots?

How do you think this sort of map might be used, and what are your feelings on those uses?

Please pause and consider which of these bullets apply to each of the visualizations you just saw, and then continue to do so for the ones coming up.

Welcome back.

This is one of several classic visualization examples. No patterns could be figured out until Snow drew this and considered the idea that the “X” with the most dots near it could be a contaminated water well.

Another classic visualization tells the story of Napoleon's Russian campaign using the width of the lines to represent the army size, the color to represent the direction they were going, the position to represent the position, and on the graph below it both the time they reached certain positions and the temperature at those times.

Some interesting and perhaps subtle things to note if you pause are where part of the army splits off and later rejoined during the retreat, and the losing of like half the troops as they marched through freezing cold water during the retreat.

This is a classic pair that I have some concerns with as a classic example.

On the left is a visual of how O-Ring damage had been visualized leading up to the Challenger accident. On the right is how someone has suggested it should have been visualized and it would have predicted the extreme danger.

I see a few issue with this. First is that the curve they drew seems highly driven by hindsight. Second, is that engineers had expressed the dangers and many other factors came into play on pushing for the launch.

I give this not only as an example of visualizations but also of how having a story to tell can influence how you visualize the same data.

To wrap up this video, a note that you can’t just focus on making graphics that look pretty or fancy, but that you need to make sure you don’t make things harder to read by adding flourish.

Just as an example here, 3D bar graphs or unusual approaches like an exploded donut can make it harder to tell what values they represent. Some people seem to use these due to lack of thought but others in an attempt to obscure facts.

That leads us into the next of our videos in this set, with a focus on honesty in visualizations.

Hello class. In this shorter video of the set, I will present some thoughts and examples related to honesty and trust when dealing with visualizations.

The example on this slide is a rough recreation of a graph shown at an education conference to support the author’s claim that their technique, #2, was far superior to the previous technique due to the increase in the class exam average.

I was looking hard to see the Y-Axis values and actually raised my hand to interrupt to ask what the bar values were and was told they were 90.6 and 91.2, and the speaker then just kept going with their claims. Several other audience members interrupted at this point to clarify that the claimed amazing improvements were from a low A to a slightly higher A. The talk did not go well from there.

This is a common way that some people use graphs that, either intentionally or unintentionally, mislead. The unintentional can come when Excel does this type of zooming in automatically when converting tables to charts.

Another easy way to make data hard to read and potentially mislead your audience Is with 3D charts.

Please pause and look at this pie and guestimate the ratio of the blue value to the green value.

Welcome back. Now let’s look at a different pie.

OK, please pause and look at this pie and guestimate the ratio of the blue value to the green value here.

Welcome back. Would you say the green wedge is twice as big as the blue?

It is, but it is also half the size as the blue in the 3D version.

Feel free to pause again to look at them side-by-side here.

Another thing to avoid is using a visualization technique that doesn’t match the data and the message.

For example, a pie chart for values that don’t add up to 100%.

Yes, I’ve seen people actually do something like the bad example on this slide.

Here’s an interesting one from an actual news broadcast. Please pause and see if you can spot the problems.

Welcome back. Aside from the raw fact that the values within the chart don’t line up with the values on the axis, how is 8.6% higher than 8.8% in this visualization? Pause to take another look.

Welcome back again. One has to wonder what tool they even used to make this that it could be so wrong in visualizing the values.

I’ll stop this sub-topic here, but if you search on lying with graphs you’ll see more. Also, one of the two discussions for the week will be on how to misrepresent some survey results I give you through words and pictures.

Hello class. In this final, longer, video of the set the focus will be user interactions with information on the screen and then some topic wrapping-up thoughts.

There’s an old saying that a picture is worth a thousand words.

Along the same lines, could we consider an interactive visualization to be worth a thousand pictures?

Even if it is, we need to be thoughtful in how we design it.

As we go through this last part of the topic please keep in mind the value we place on the users and their tasks and how we want to support the user without overwhelming them as well as some concepts from earlier in terms of information representation.

Metaphors to the physical world have long been used when designing software interfaces.

The spreadsheet is informed by pencil and paper worksheets. Card games by physical decks of cards.

Do people even play solitaire with physical cards anymore? If you implemented a card game in CMSC131 did the look and feel of the UI seem natural to you or unusual?

52

If you take some time to look at the apps you use, metaphors pervade them.

Why do we have the option to use virtual clock hands? I ask this non-rhetorically. Does that form of representation of the time help in any circumstances?

Can we set the time by clicking and dragging on the clock hands to spin them? Should we be able to?

53

The use of metaphors can be useful but can also be confusing or limiting if not updated carefully.

Does it annoy me when someone says they taped a show on their DVR, yes, though not as much as when the revival of a show or a movie series that is a continuation is called a reboot. Terminology is sometimes used in an attempt to use phrases that people generally understand to express a new thought.

A risk with using metaphors in the design of software is that it might be limiting, and those limits will degrade the experience. As an example, modern presentation software is heavily influenced by the slide projector, to the point of referring to the things that you see during the presentation as slides. This has in some ways limited the ways in which people create presentations.

Of course, breaking away from a metaphor can leave users with less guidance on how to use a tool. Consider the Prezi presentation software platform. When I’ve seen them used, excessive motion and zooming often makes them very difficult and distracting to follow during a talk.

When generating metaphors to use, please consider not only the issue of limitations such as not letting a digital camera change the ISO level until a virtual roll of film was used up, but also how well the metaphor will connect to the user’s tasks and context and state of mind.

Imagine if you had a black hole on your desktop for discarding files and folders. Would it make you uncomfortable? Would you worry the files would appear in another universe? What behavior would you expect if the icon was a paper shredder?

What if it were a fire pit garbage disposal animated icon inspired by the one in Edna Mode’s kitchen in The Incredibles? If you’ve never seen that movie, is that metaphor example of any use to you?

As you work on constructing and implementing a metaphor, take time to think about these possible restrictions and also how the metaphor might need to evolve or adapt over time.

Is it a good thing that kids know the icon of a floppy disk means to save even though they have no idea what a floppy disk is?

Does Cc for carbon copy make sense with e-mail considering there is no carbon paper being used?

This slide tries to summarize some common metaphor pitfalls, including those that I’ve mentioned already.

A pair of interaction techniques commonly linked to the use of metaphors are direct engagement and direct manipulation.

These help the user gain a sense of working directly on their tasks rather than working through an abstraction, and also support this by making the artificial interaction seem like a more natural one in the physical world.

If you build an interface utilizing these techniques, you will often end up making it easier for the user to find the things they care about, will support many of the “comfort” principles we’ve discussed, as well as those of feedback.

Even though direct engagement in computing was pioneered as part of a personal computer project Xerox started out of a fear that they’d be left behind by the paperless office, that then folded, the ideas were used by Apple for MacOS and Microsoft in Windows 3 and pretty much everyone else since then.

In fact, the terms desktop and file reveal the metaphor on which so much was based. In one case, an office-like suite for the Commodore 64 had the file system represented by a file cabinet and you had to open the draw and flip through what looked like manila folder tabs to then open a file that was in that drawer, and a sprite of a manual typewriter was what you selected to start the word processor.

Basic actions such as move or copy come out of these types of metaphors.

The observations on this slide that were made by the Star project team at Xerox should resonate strongly with you.

Please pause to read them.

Now, I’d like you to think about how and where the two interaction models of Object-Action and Action-Object appear in software that you use.

Under the Object-Action model you first indicate the object that will be used, and then the action that will be performed on that object.

This is usually far closer to how we would do things in the physical world and also doesn’t require us or the system to keep track of the notion of a current mode.

On the other hand, under the Action-Object model you first indicate the desired action and then the object or objects upon which it will be performed.

This can make certain activities easier or more efficient for the user, but can also require them to remember what the current mode is.

With today’s ubiquity of touch and stylus based screens, as well as various sensors, direct manipulation is very prevalent. Try to consider what computing-friendly metaphors exist now that would not have 20 years ago.

Why did Apple alter how the scrolling metaphor works by default in OS X?

Have any of our metaphors moved towards magic rather than science in the minds of our users? Consider how Google search auto-completes what you’re about to type.

Even with all the advantages connected to good use of direct manipulation, there are times when it is not the right approach.

We have to consider operations that are abstract in themselves. Would we drag words one by one to a dictionary to spell-check things?

We don’t want to sacrifice abilities and flexibility on the altar of metaphors.

Of course, we also want to avoid throwing the baby out with the bathwater, so we should be open to combining metaphors with abstractions in an interface.

A combination of metaphors and abstractions is what you will often find.

As an exercise, go to your e-mail client and start a list of metaphors that are used (like Cc) and of abstractions that are used (like search).

Please pause to read this non-exhaustive recap.

Welcome back and welcome to the end of this video lesson set. It contains a spectrum of topics related to how we represent things on computer screens.

notes12-representationwithaudio · of spotting where the number 7 appears in a sea of numbers...

Documents