Sunday, October 17, 2010

Chapter 9

Supra-Level Elements: Designing for Usability

Supra-Level design is the largest scale visual language of documents, print or electronic. These elements are those that coordinate, overarch and unify all of the other levels to create the whole document.
  • major headings
  • tabs/dividers
  • size
  • shape
  • color of page or screen
Supra-level elements are critical in determining a document's usability.

Example: By adopting the conventional paper size and stock for a business card two supra-level design choices are made that help its usability.

It is also important to consider how the document will be distributed to readers (mailed, computer screen?), the context in which readers use it (home, work?) and the amount of time readers have to look at it when choosing supra-level design elements

In many cases readers are looking to use a text, rather than read it. So supra-level elements such as headers, tabs, field size and texture, color patterns and field borders help to make information easily accessible.
  • The consistent cover page, section headings, and page color of an organization over several years make readers comfortable because of this supra-level cohesion. Catalogs and brochures tend to use similar layouts so readers are used to the design.
The web is very focused on supra-level design because it allows linking unlimited fields of information across space and time.
The supra-level design as makes the first impression.

Process Example
Elaine needs to re-design her agency's annual report so that readers will want to explore and use it. Her goal is to design a more attractive and usable document.

First Elaine analyzes the rhetorical situation.
  • Audience: a wide range of educational levels and interests, public and private including donors, board members, state officials, interested public, city planners, engineers and farmers
  • Purpose: to inform readers about data and findings, and persuade them to continue to donate
  • Context: most readers will get this document in the mail, but occasionally it will be used at small group meetings
In order to re-design the document Elaine must invent, revise and edit.
Invention: place headings in margins, use facing 11x17 pages for a more professional look and better spacial cohesion, use recycled paper
Revision: emphasizes boundaries between sections, introduces sections with bold titles and a box, adds lines and pages numbers in footer, adds internal tab on edge of page, adds key words to tabs, uses agency's logo, centers title of document
Editing: adds blue spot color throughout, mats behind pictures, changes color of title page to light blue

Vocabulary of Supra-Level Elements

Textual Elements: they initiate new sections of text and provide cohesion among text fields. They also set the theme and create a certain tone.
  • Titles on cover sheets
  • section headings
  • initial letters
  • tabs
  • navigation bars
  • headers/footers
  • background text
Conventions include headers and footers, or a standard cover page for a particular corporation. These allow for cohesion between documents as a series.

Spatial Elements: on the supra-level have a major impact on the size, scope and structure of a communication. This includes how a paper document is physically contained (in a folder, laminated?). Supra-level spacial elements provide the basic framework onto which a designer arranges textual and graphic elements.
  • size of paper/screen
  • orientation of paper/screen
  • folded, trimmed or attached
  • inserts
  • shape (can help to attract attention)
  • thickness of surfaces (paper or cardstock, etc.)
  • on the web: single screen or is scrolling necessary?
  • web links
Conventions include the typical size of paper used (8.5x11) or the small size of a business card. On the web usually pages conform to the width of the screen.

Graphic Elements: can create boundaries between text sections, give the document cohesion, and express a theme or mood. They give the communication shape and structure.
  • lines
  • shading
  • borders
  • frame data displays/pictures
  • background color, texture, glossiness
Conventions include the ornate borders often used on awards, or the common use of semi-gloss paper for an annual report.

*Textual, spatial and graphic coding modes all work together to produce a successful document.

Applying the Cognate Strategies
Supra-level design is a process of rhetorical adaptation, striving for the best fit with readers, purpose, and context.
  • Arrangement: routes readers to points of interest by giving a quick map identifying the key units and subunits, creating cohesion among them. Dividers and shaded pages can help to arrange your page.
  • Emphasis: points readers to selected places in the communication through things like bolding and section headings.
  • Clarity: can greatly enhance by making the purpose clear through giving users easy access to information.
  • Conciseness: designers have to be careful not to overindulge and create too many variations that end up misdirecting readers.
  • Tone: immediately give the document a voice (serious, playful, trivial, calm, objective)
  • Ethos: is influenced by supra-level design because it decides if readers believe a document is honest and if the author is reliable.



Wednesday, October 13, 2010

Chapter 8 Questions

1.
a.) The drawing serves the purpose to show how to attach new windshield wipers when replacing old ones.
b.) The drawings do use conventions. The spatial conventions include blowup and exploded view, and the graphic convention included is boundaries in order to separate the parts. Readers are likely to understand these conventions because they serve a purpose and readers will be able to differentiate the parts being used.
c.) I think the cognate strategies could be used better because this drawing looks more complicated than it really is. I think without following the text, the drawing is somewhat confusing.
  • Arrangement is okay because the directions show several pictures in order of how to put the wipers on. There is a lot of emphasis on the location where the wiper is actually attached which is also good because that is the area the person is going to be working with.
  • The clarity could be improved probably by enlarging the pictures or leaving out some of the detail of the surrounding parts. Conciseness is okay because the conventions are used like blow up and exploded view to emphasize the areas that are being worked with.
  • The tone seems relatively user friendly, although also intimidating without the text. Ethos could be improved by making the picture look more professional in order for readers to have more confidence that these directions will work.
3. The lines pointing to the brackets need to be clearer, the spatial orientation, the size.

Tuesday, October 12, 2010

Ch. 7 Questions

1.
This graph shows the number of hours vs. the number of cups of coffee a person gets. The x-axis label should be the number of cups of coffee and the y axis is the number of people out of 48 that got the number of hours of sleep that the colorful shapes show.
This is not a very good graph, but does show that the fewer cups of coffee a day lead to more sleep.

2. I found an interactive map for electoral votes at http://www.270towin.com/.
a. The color of the different states can be changed as well as if you are displaying data from 2008 or projected 2012 data.
b. I find this map confusing I think mostly because I don't understand the point of the website. Allowing the viewer to change the color (thus, democrat or republican) doesn't seem to serve a purpose, except for viewers to be allowed to predict which way they believe a state will vote. I think the arrangement of the site is okay because the map is the main focus and is therefore appropriately set in the middle of the page. It is also emphasized by its color and size. However the clarity of the site is not good because it does not specifically state its point.
c. I think the main drawback is that I don't understand the purpose of the site.

Monday, October 11, 2010

Chapter 8

It's my birthday!!!!

Pictures

  • Pictures can instruct, persuade, motivate, announce a topic, or set the mood.
  • Pictures shape information for particular purposes and audiences.
  • Pictures have the functional goal of responding to the rhetorical situation.
  • In order for readers to get the intended purpose of a picture, more information is often needed.

Vocabulary of Pictures
Textual Elements: define, clarify, and modify information contained in pictures

Visual Elements: organize space so readers can access, understand, and use the picture successfully
  • Scope: how broad of an area to illustrate? what's important to readers? Should all or part of the picture be shown? How wide should the lens be opened?
  • Focus: how closely we focus readers on the information in the picture? close up? far away? zoom?
  • Viewing Angle: top, side, bottom, front, back, left right? what information do you want to reveal about the object?
  • Spatial Conventions: increase the clarity and the efficiency of pictures
  1. cross section
  2. blowup
  3. motion
  4. exploded view
Graphic Elements: gives pictures substance; its the stuff that makes them visible (lines, texture, shading, etc.)
  • Level of Detail/Abstraction: concrete or realistic? abstract?
  • Shades and Shadows: show the effect of light on an object and its surroundings
  • Conventional Coding
  1. boundaries
  2. materials
  3. specialized signs
**All of the Cognate Strategies come into play with pictures including arrangement, emphasis, clarity, conciseness, tone and ethos.

Tuesday, October 5, 2010

Chapter 7

Data Displays

Data displays show quantitative information by transforming textual elements, usually numbers, into images.

-Data displays are extra-level and rely on non-textual signs like lines, bars, circles, shading, dots, and color

-Text plays a secondary role in data displays

Why are data displays useful?

1.) They are a visual representation of numerical data

2.) They show complex sets of data in a easier to read format

3.) They give readers a top-down view of the trends and relationships of the data

Data displays greatly enhance our ability to compare numbers.

Depending on the rhetorical situation, there are different types of data displays that are most effective.

-Different things about the data can be discovered by shaping them in a visually effective way

Process Example

In this example Ed is asked to make a data display for the membership of an organization over the last ten years.

This example emphasizes the importance of:

· Analyzing the rhetorical situation

· Invention

· Revision

· Visual editing

Vocabulary of Data Displays

Textual Elements only play a small role in data displays since they primarily focus on sign systems. Textual elements include labels, titles and legends. They add descriptive information that can both help and hinder the data display.

Spatial Elements include the size, shape and orientation of the display.

Conventional forms:

· Pie Charts: show parts of the whole

· Bar Charts: create a grid for plotting data based on two variables (one is usually time). Simple bar charts show data belonging to a single group, while complex bar charts show data for more than one group of data

· Line Graphs: show the same type of data as a bar chart, but the display consists of lines connecting the data points and can help easily show change over time

· Scatter Plots: show relationships between variables that are often unrelated to time

· Data Maps: reveal information about a given location, and are arranged depending on the space they represent and the relative location of the data in that space

· Gantt Charts: display time in carrying quantities according to the amount needed for a given task or project

· Graphical Matrix: enables readers to see patterns across the whole data set as well as to access individual pieces of data

Certain conventions will be more suitable than others for a given set of data depending on the rhetorical situation.

Graphic Elements control the texture, weight, and color of the lines, bars, plot frames, tick marks and a variety of other forms. Graphic elements alone represent the data of a data display, although often rely on textual elements to help define them.

-Gridlines, plot frames, tick marks, background shading, and color are elements that help define the data

Applying the Cognate Strategies

Arrangement involves choosing an effective conventional data display and the order and placement of the data within this framework.

Emphasis can be created by stretching the plot frame in one direction, the thickness of lines, color, etc.

Clarity is key to an effective data display. If the display does not make the data from a table more clear, than it is not effective.

Conciseness requires that the data display be direct and easy to understand, and not include extra embellishments that serve no purpose.

Tone shows the voice or attitude the display reveals. Is the data display formal, technical, authoritarian, friendly, accessible or humorous? Picking the right tone depends on the rhetorical situation.

Ethos requires that the display is honest, and displays the information so readers have an accurate story about the data.

Chapter 6 Exercises

1.) a. lines, shading, boldness, title size
b. version 2 is arranged so that it implies the first 3 labels are related and the last 4 are related because of the dividing line between them. In some ways version 1 is easier to read because of the lines and table format. The spacing makes up for this in version 2, though.
c. version 1 better coheres to the visual conventions for scientific tables. Version 2, while less conventional allows the reader to see the relationship between the groups, and the numbers stand out more.

2.) To revise this price list I would add spacing, bold the titles, and add lines to make it more clear.