Assignment 8: Visual Design

Readings

• Chapter 4: Organization and Visual Structure from Mullet and Sano’s Designing Visual Interfaces

• Chapter 6: Arranging Elements from Duarte’s slide:ology

• An excerpt about human visual perception from Colin Ware’s book Information Visualization: Perception for Design. Chapter 5: Preattentive Visual Processing

Assignment

For each of the readings, point out at least 1 thing that you learned or that surprised you. Be specific, don’t just parrot something from the text. What did you learn here that would be relevant to your work in this class?

1. Designing Visual Interfaces

Since we are building a live dashboard for our project, alignment of data will be very important for us. We are targeting multiple audiences with our public display, and it will be important to group data by user need. For example, we will be presenting data to fisherman including CF/s levels, water temperature, and gauge data. We will need to keep all this information in close proximity on our display so the fisherman can have a positive usability experience. We don’t want the fisherman to have to look at 3 different places to find each of these pieces of data. We want a quick, percise experience.

Another element we will be building is a live algorithm (or equation) to understand how algea is built up. We will have two variables which the users can input, and based on their values, we will get different outputs. We will be using temperature as one value, and are still trying to understand the rest of the equation. Regardless, we want to build a system that is correctly vertically and horizontally aligned. Since we are having multiple inputs which can effect each other, we might want to align them horizontially so the user can easily see how the inputs affect eachother.

I think another important thing to remember from this document is the use of negative space. I can only imagine our dashboard will have lots of information on it. The last thing we want to do is overcrowd the display with facts. We want to incorporate negative space to break up data points, and make it more appealing to the human eye.

2. Slide:ology

When I was working on our Formative Research Plan, I highlighted titles throughout the Word document by using different sized fonts. I used size 12 font for the title, and size 11 font for the description. I realized how silly this was after we talked about this in class and afer reading the chapter. When working on contrast, it is important to commit to it. Otherwise, the contrast is barely visible, and therefore not effective.

I think this applies to much more than slides. It applies to word documents, emails, and markdown files. I use an extension called Markdown Lint for my markdown files. It doesn’t allow me to create bullet points with larger fonts than the headlines. It prevents me from disrupting the flow of the markdown automatically. It would be cool to see this type of extesion in PowerPoint. That way, I wouldn’t have to bookmark this chapter in a book. Instead, PowerPoint would do all the thinking for me.

I will definitely document this chapter, and reference it for when I create our PowerPoint for our end of the year project presentation.

3. Information Visualation: Perception for Design

The paper shows a figure with one piece of data which sticks out from the rest. It uses different techniques to emphasize the unique data point. These include orientation, shape, color, size, or curvature. I think this can be benefical for our project since we are looking at water quality data. I can image we will have a single variable which will stick out from the rest, such as a pesticide in group of water molecules. We can use this technique to bring the users attention to this data point.