In the reading today the authors discussed many rhetorical devices used to help a reader understand an example of visual rhetoric better. In the first reading, the author discusses the use of dashed lines in visual rhetoric. Dashed lines are less strong and are usually used to show future things or to de-emphasize the importance of the outlined object. They also wrote that dashed lines are easiest to understand when the dashes are close to each other and of similar spacing. In another reading, the author attempts to explain why it is important to not distract the audience with more than one set of information at a time. The author gives an example of a diagram for oil pollution where the detailed information needs to be read separate from the picture in order to understand the point of the the diagram. In the third reading, the author tries to tell the reader that the use of animations should only be used when it is helpful in guiding the reader and that the animation should not become unbearable or annoying. An example is given where a website would play an animation when using the menu that took a long time to finish and easily annoyed the reader.

One example of visual rhetoric that is famous and relates to the readings for today is the Indian Jones series. In the movies when Indiana is traveling across the world his movements are depicted as a dashed line on a map staring from where he begins and where he ends. This visual is very effective because it shows the progression in an easy to understand fashion and with the use of dashed lines it shows that the route he travels is not permanent but a temporary one that doesn’t always follow the roads and designated paths.

Here is a clip from the comic Family Circus. The use of dashed lines here shows the path that the child followed on his way to the bus. How does the use of dashed lines give a more clear understanding than if the author used a solid line? Where would it be appropriate in motion to use a solid line instead of a dashed line?


3 readings

  1. This article talk about dash line. Compare to a solid line, dash line can be seen as line because its similarity, good continuity and pre attentive. However it cannot be seen as a solid line since it is not. Author provided some psychological reasons to explain why. A dash line has meaning of a temporary state like something not finished building. Also means something vague like weaker relationship. And also means hidden from view like when you draw a 3D graph of a cube.
  2. This article starts with two example. First one is viewer must split attention between several graphics and text. And the second example is viewer must watch to animation simultaneously. Both of the design split viewer attention. Then author provided 3 antidote to avoid splitting attention. Physically position related information together, use an additional modality and use color coding.
  3. Author points out animations and interactivity on web page usually can draw attention to explain changes, fun and whimsy, and modern and up to date. However designer need to think about where would the user’s attention otherwise be focused at the time when the animation occurs? And the goal of animation, frequency of the animation and the mechanism of it.

Example today is a flash from NASA as very bad example of animation.

Question today is if we make our own certain animation, from our perspective, it seems fit the requirement from the third article, like not too fast nor too slow, would it be also not too fast nor too slow for others?

3 reading for 9/30

All 3 of the readings for class today were similar in the sense that they were talking about different conventions that can be used when it comes to design and animation. The first article was interesting because it talked about dashed lines. I had never really thought about dashed lines in the way that the author presented them before. The author explained that we see dashes as a line because of continuity. Although dashes can be perceived as a line, they are seen as “lesser”. The dashed lines often represent something that is not solid. Dashed lines can be see as vague, or used as a soft boundary. The author made a good point about the alignment between visual perception and verbal language when it comes to dashed lines. The second article talks about split attention when it comes to images. The author explains that making a reader split their attention makes it more difficult to integrate and remember knowledge. In the article it said that there are 3 ways that can be used in order to make integrating information easier. 1. Physically position related information together 2. Use and additional modality 3. Use color coding. In conclusion, the author explains that there should be more of a move toward integration, and less attention splitting.  The third article explains that using animation to grab attention can be a useful tool. However, overdoing it with animation can also be detrimental because it can actually cause users shift their attention if too much is going on. Basically, when using animation, make sure the purpose of your animation is clearly shown.

An example of seeing dashed lines in real life is this picture of dashed lines on a highway. Although, I know that a dashed line on the highway means that it is okay to pass, I very much look at it as a soft boundary. It doesn’t mean that you can just drive wherever you want on the road, but should you need to pass a car in front of you the dashed line gives the go ahead. When I see a solid line, I see it as a hard boundary meaning stay in my lane no matter what. I’m not going anywhere.

picture for english 419

Question for the class: Where have you seen an example of dashed lines that weren’t used as a soft boundary?

3 Readings For 9/30

The three readings we had for today were all fairly short and I am going to talk about all three of them and summarize some of the concepts in the readings. All three of these readings do deal with similar topics however, they are all dealing with different conventions that are used in graphic design and video animations and the articles talk about the most effect ways to use these conventions. Some of the articles also talks about some of the common mistakes people make when using these conventions and how to avoid falling into those traps.

The first article deals with dashed lines and a few of the concepts covered are topics like why do we perceive dashes as a line and why do we see dashes as a form of diminished line. The author of the dashed line article says that there are three main reasons for us seeing dashes as lines are: proximity and similarity, good continuity, and it’s preattentive. The article also says that the reason we see dashes as a diminished object is because of the fact that the outline is dotted and that makes the boundary strength of the object seem weaker.

The second article covers how to design something so that it doesn’t split the attention of the audience. The article offers three different ways to help you avoid creating a split-attention design. One, you should group related info together within your design. This helps to not create a “search and match” behavior in the audience where the audience is search for information to match with the things they are looking at. Two, you should consider using an additional modality, meaning you should think about using alternate ways to get your point across. The third way to avoid the split-attention effect is to use color coding in the design. This isn’t a perfect way but it helps greatly with the search and match effort of the audience.

The third article is about animation and making sure that the goal and purpose of your animation are well defined. The article mentions four questions that you should answer when creating an animation. One, where would the user’s attention otherwise be focused at the time when the animation occurs? Second, what is the goal of this animation. Three, how frequently will this play? Four, what are the mechanics of the animation?

For my example is have chosen an infographic that I believe uses a few of the methods of avoiding split-attention in their infographic design. This design, pictured below, uses two of the three methods really well it has information that is linked placed near each other to make it easier for the audience to read through it and it also color codes the information to provide another level of separation for the information.


My question is this: can you think of any other methods that can help avoid the split-attention effect in designs?

3 Readings for 9/30

  1. The first article is about dash lines. The article first gives a brief introduction about dash line, then jump into why we need it. First is proximity and similarity, it states that when elements are placed together and individuals are market in dashed line, we see them as a group. The second will be good continuity. When we look at a dashed line or dot line in creates a guide for us to know where the information is at based on the direction. The third will be preattentive. It states that dashed line gives us a clue on what’s important and what should be aware. The article then continues by mentioning the factors that affect dashed lines and where dashed line is used.
  2. The second article is about avoiding designs that split attention. The article first gives a brief introduction about split-attention effect, which basically means that multiple information that can’t be delivered individually have to rely on split attention which helps reader creates a connection between each source. However, our attention is temporary, this means that split attention isn’t a good technique to deliver information. The article then gives three ways to avoid readers having their attention split, which is physically position related info together, use of modality and use of color coding.
  3. The third article is about Animation for attention and comprehension. The article first mentioned the user experience that animations and interactive webpage usually have. It then talks about the questions you will have to ask yourself before adding animation to a webpage or application, which is user attention, goal, frequency and mechanics. The article then goes deeper into explaining what those questions are and gives examples that supports the statement.

Picture 1 below is an image that relates to article one. The dot line in the image shows what will happen after you apply for this job. Appliers will be connect to the company, people, product and connect. Although the “connect” doesn’t really makes sense. But the dot lines truly helps make a connection between applying the job and happens after it. Another example for article one will be the dashed line on a bottle. The dashed line gives a guide for people to know where to open the cap. The third example will be related to article two and what we see in class about the animation of CPR and Speaker. CPR animation is related to the use of modality. The text associated with the animation is running too fast which makes the reader hard to clearly read through the content in it. And for the speaker animation, it’s kind of a way of positioning related information together. But it would have done better since the text should only be a simple instruction or explanation, the text beside the animation is too wordy which decreases the readers interest on understanding how the speaker works.


Questions: Dot or dashed line creates connection between graphics, but is it really going to help readers understand what the relationships between those two connected graphics are?

9/30 Readings

The first article we read was on the visual language of dotted lines. It emphasized that we interpret dotted or dashed lines as being connected in some way due to their proximity to each other, their good continuity, and the fact that they are preattentive. The article also states that we perceive dashed lines as diminished or something that is not whole, something that is temporary, vague or unsubstantial, hidden from view, or a soft boundary. The second article discussed how to avoid splitting a users attention when designing. By placing related information together spatially, the user is not constantly looking in different places at once for the information. The article also says that we can opt for visual or auditory modality (picking one over the other) to avoid splitting the users attention. The article concludes with stating that color coding the to associate different elements that are connected will also prevent an attention split. The last article talked about using animations effectively. It opens with explaining that animation and interactivity on web pages usually falls into one of three objectives: drawing attention to and explaining changes, adding fun and whimsy, or appearing modern and up to date. Before adding animations, we need to think about what the user will be focusing on when the animation starts, the overall goal of the animation, how often a user will encounter the animation, and how the animation will be triggered. The article also explained that animations in our periphery are distracting and detract from the task at hand. The article concludes by stating that adding animated ui elements can waste a users time and attention, so use them with caution.

The option to set up multiple user accounts and choose who is watching on netflix is a great example of useful animation. After signing into netflix, a screen appears that prompts the user to select who is watching and gives the option to add a new user. After selecting an option, the screen fades away and the viewer is free to select something to watch. This fading occurs quickly enough that the viewer feels as if their choice and action is what caused the change. This pop-up screen is also not a distraction, because the user has only logged on and has yet to start viewing content.

Question: Can useful and distracting animations appear on a website at the same time? Just because an animation is distracting, does that make it inherently useless?

A Response to the Three Articles

In these articles, they all circulate around a common theme – the psychology and success of various graphic design tools and how they have evolved within our society. Though, I will be focusing mostly on “Animation for Attention and Comprehension”. Bedford describes the most common purposes of an animation: to make the website look more modern or up-to-date, to simply add a more interesting twist to the information and keep the reader’s attention, or to explain and draw attention to some portion of the page. She then goes in to detail about what makes these uses successful and when the designer could have skipped the animation. She outlines this deduction with several questions, assessing the usefulness of the animation and its purpose, but ultimately, the main assessment is if the animation obstructs the user in any way. This could be by overusing an animation and aggravating the user from its repetition, the time span of the animation or if the animation simply does not contribute enough to the site and only keeps the user from progressing to a point that they are already familiar with. Overall, users have grown accustomed to this new style of graphics and it is increasingly particular on what makes a successful animation and what does not.

Overall, I found this article to be rather intriguing, as I have an interest in graphic design and can also relate to these points from a user’s perspective. I feel that most of society has had such long exposure to this kind of experience that we have developed more particular expectations and created an extremely specific niche for successful animation use. Everything has its imperfections, animation or otherwise, but I find it interesting that these expectations and trends are developing so rapidly that we can begin studying its effect on such a scientific level.

This app represents an animation style that is extremely subtle and stylistically effective (download Two Dots… by far my favorite phone game).

My question is, would there ever be a point in which society becomes so particular about graphic design, or animation specifically, that its use is decided to be ineffective? Why or why not?