Wednesday, November 18, 2009

CI 5475 Week 12: More on Elements of Visual Rhetoric & Design

READABILITY ANALYSIS

Although I'm certainly biased as a long-time employee at the UMN's Center for Writing, I perceive the C4W website to embody a HIGH degree of readability. Before I begin analyzing the site in more detail, check it out for yourself at:

http://writing.umn.edu/

In chapter 8 of their text Teaching Writing Using Blogs, Wikis, and other Digital Tools, Beach, Anson, Breuch, and Swiss (2009) argue that one major difference between how readers process digital vs. print texts involves an active, non-linear search for relevant information that fulfills unique purposes or needs:

"One of the differences in how audiences process online versus print texts has to do with their purposes of reading online texts. When audiences go online, they are often looking for certain information -- the latest news reports about a political campaign, movie ratings, sports scores, book purchases, medical advice, and so on. In contrast to reading print texts, in which reader's eyes move from left to right and process information in a linear manner, when reading online texts, readers' eyes focus initially on whatever information is most relevant to their purpose or needs" (166).

UMN Students, faculty, and staff visiting the C4W website will most likely have the following purposes / needs in mind when dropping by including: scheduling a visit with a student-peer writing consultant, scheduling a visit with a faculty-peer writing consultant, obtaining information on the Minnesota Writing Project, obtaining information on upcoming writing-related workshops and events, obtaining C4W staff contact information to pose further questions, and so on.

Pictured left, the MAIN page for the UMN's C4w absolutely nails this concept of relevancy as information relevant to UMN visitors' anticipated purposes / needs is clearly displayed in a series of vertical columns on the left and right sides of the page. For example, in the case of a UMN student visiting the site with the purpose / need of making a student-peer writing consultation, the "Student Writing Support" link and short description quickly provides the relevant information they are looking for. Similarly, in the case of a UMN faculty member visiting the site with the purpose / need of learning WHAT we do at the center for writing, HOW we do it, and HOW LONG we've been doing it, the "Mission and History" link quickly provides the relevant information they are looking for.

Beach, Anson, Breuch, and Swiss (2009) continue their discussion on readability as they offer another key variable to comprehending online texts - a logical organizational schema for understanding the relationships among different sections of a text:

"It is... important that the titles or subheads be retained in the same place on different pages so that audiences know where to look to determine a page's content. On our wiki resource site, the side bar with chapter titles is constant on all pages" (167).

In other words, if there is not a logical and consistent structure ACROSS pages, readers will quickly become lost as they navigate links.




Notice how the C4W's "Student Writing Support" link reproduces the structure and overall organizational schema as established on the MAIN page: page header to inform the reader what specific page they are on, series of columns on the left tailored to anticipating and quickly fulfilling the readers' purposes / needs, similar minimalist color scheme, similar use of white space, similar font scheme, and so on and so forth. In other words, if a UMN student visits the C4w site to schedule a student-peer writing consultation, they most likely will NOT get lost in the mix. Instead, they will click on the "Student Writing Support Link" on the MAIN page, and then proceed to click on the "Make an Appointment" link located in a similar position on the NEXT page.







In contrast to the UMN's C4W website, I don't perceive the Dave Matthews Band's official website to be quite as readable given the above standards. Before I begin analyzing the site in more detail, check it out for yourself at:

http://www.davematthewsband.com/

When I visit the Dave Matthews Band's website, I have purposes / needs in mind including: purchasing music and merchandise, learning about upcoming tour dates, learning about upcoming DMB television and media appearances, learning about the latest DMB news, and so on and so forth.

Although all of this detailed information is present on the website's MAIN page, I have a much, much harder time quickly finding information relevant to my search than I do on the C4W website. Despite the page header bar clearly displaying each of these pieces of information in all capitalized, bold-faced type (e.g., HOME, NEWS, HISTORY, SIGHTS, SOUNDS, STORE, and so on), my eye gets absolutely lost among the tiles of pictures, banners, and subsections comprising the main page. In the hopes of creating a colorful and visually complex website, I feel as though the designers sacrificed some usability here. After all, especially in web design, simpler is often better!



Aside from sub-pages reproducing the header bar as established on the MAIN page, subsequent pages vary organization schemas, often drastically. In this case, look at how this completely horizontal strip of images contrasts with the tile-shaped images as displayed on the MAIN page.

And again, the amount of color and art design on this subsequent page is absurdly complex and distracting. Beach, Anson, Breuch, and Swiss (2009) speak to this absolute saturation of information and color as they state, "Too much text information, information located in too many different font sizes, a confusing use of background color or font color, or a misuse of banners or columns can limit easily locating relevant information... They [students] are then using white space itself to help readers focus their attention on significant information" (166-168). Where the C4W's website effectively utilizes minimalist colors and large amounts of white space to guide viewers' focus across the page, the DMB's website contains virtually no white space at all! As a result, I feel as though I'm forced to focus more on the bizarre mushroom-filled field than on the band-related content!

----------------------------------------

ACTIVITIES

The first sort of activity that came to mind is a sort of design element "scavenger hunt." Either before, during, or after various elements of design are covered in class, students could be given the task of finding X number of sites per specific design elements. For example, students could be given the task of finding 2 sites that use WHITE SPACE effectively and 2 that do not. As a final step, students could quickly (and I'm thinking in a few sentences here), analyze and describe HOW and WHY each site is either effective or not given its use of each element in the scavenger hunt. NOTE: This type of activity could afford an interesting application of DIIGO. For example, instead of students recording the name of and / or printing of examples of each site they find during their scavenger hunt, they could simply favorite the site, annotate it, and share it with you as the instructor and the remainder of the class! This would also afford students ability to place annotations and discussion DIRECTLY ON certain design elements.

Another activity that came to mind is having a contest of who can design the "best" and "worst" websites given elements of design as discussed in class. In teams or individually, students could either story board the website if they do not have access at home, or actually create the site using Google sites if they do. Students could then write a similar short analysis (again via hard copy or Diigo) exploring the HOWS and WHYS behind their site's effectiveness, or lack there of, given specific elements of design.

Of course, teaching and modeling responsible online use will be absolutely key to the success and acceptance of these sorts of assignments.

----------------------------------------

POWER POINT PRESENTATION

Fellow nerds (you'll see what I mean in a second)... my trial run with the wildly non-linear (and non-intuitive!) Prezi presentation tool.

No comments: