Most of us are not superhackers or computer science graduate students. We don’t enjoy redlining our Linux operating systems so that we can crack into government databases in record time. The majority of computer users and digital media consumers are plugging along at a level of functional literacy, not unlike the average newspaper reader. The creators, artisans and programmers, behind digital production and dissemination need to be aware of this in designing their user interfaces. Unlike a book or a magazine, where pages are necessarily sequential, digital design allows for wildly divergent solutions to the problem of organization. To create workable, intuitive, and enjoyable interfaces, a prospective designer can glean tips from the archives of digital media.

For this analysis of visual design, two artifacts will be examined. The first, a commercial applet designed to sell sports equipment, is a fine example of “bells and whistles” graphics design. In short, it is a high budget production that looks super cool. The second example, an on-line academic journal, is sparsely designed and readily accessible to any computer user. First, I will discuss the function behind the form of the Tiger Woods applet.
Let’s have a look at this interface. The purpose of the text is immediately clear; during the text and classical music introduction, you can opt out by link to product websites. Clean cut, cross platform design is expensive. As such, it is appropriate to fire all cylinders on a commercial project such as this. Celebrity endorsement, clean design, and the choice of a Java environment all denote high production costs. This artifice is the equivalent of those really nice car manufacturer commercials; sleek and shiny, just as the product promises to make you. Now that the applet choice has been addresses, let’s talk about the function.

sc13

So, if you look here, you can see a screenshot of the applet in action. On screen, Tiger Woods swings in style and sophistication with his Nike product line. Hovering your mouse over highlighted products, the viewer can see specs and connect to links titled “learn more” to buy the products. All these features enhance the saleability of the products being advertised. By showing the viewer a big name athlete wearing gear that they too can purchase at the click of a button from their computer chair creates a hard-to-beat advertisement. Throw in the high speed camera gimmick, and the artefact suddenly gains entertainment value. This program amounts to an online catalogue, coded over to resemble high-tech PGA coverage. The combination of entertaining and aesthetically pleasing facets to what is at heart an advertisement create a superior commercial display.

sc21

Some parting notes about the Tiger Woods advertisement; the position and appearance of navigation tools are exceptionally rendered. Just looking at it, you can tell it is corporately designed. The highly polished appearance belies professional design; this attracts potential buyers, who would buy Mr. Woods’ shoes in the hopes that they too can look sleek and professional. Inside of the navigation of the applet, the viewer is never removed from links to products; even focused on Tiger Woods’ face, there is a film strip of each of the product being advertised moving at the bottom of the screen. The link bank at the extreme bottom of the screen mixes social networking-style links with raw commercial content. This amalgation encourages viewers to treat the artefact as entertainment (which you would send to a friend) and again as an advertisement (which would lead you to nikegolf.com to purchase).

sc31

The Electronic Antiquity journal is a totally different experience; simple, even garish visuals,  mix with traditional navigation links to provide an accessible and low maintenance website. This text isn’t aimed at selling the reader anything; it eschews the flashy applet format for the easily and cheaply modified HTML format. The only graphic on the website is basic word art which looks amatuer compared to the Tiger Woods’ graphics.

sc41

Organized in a traditional archive, the Electronic Antiquity archive seems to take its cues directly from analogue library science. Issues are listed alphabetically, with interior menus allowing viewers to download PDF scans of the printed journal. This sort of highly simplistic navigation is fitting for an academic journal. The average viewer is probably older, has little interest or bandwidth to appreciate high end visuals, and really just wants their antiquities reviews as a PDF file. It follows logically, then, that within two clicks they can have it. Where golf products can gain an edge with sleek visuals, this academic journal is purchased by libraries regardless of style. The issue of projected viewer age is also important; younger audiences like flashy applets and celebrity endorsements. Older academics don’t need that sort of incentive.

sc62

The ultra simple layout has no discernible stylistic input; an artist was probably not consulted in the making of this project. In fact, it was probably a graduate student with a decent handle on basic HTML programming and an assistanceship in the classics department of Virginia Tech. That said, it gives a few cues on what to avoid in the graphical realm of website design. Since some nebulous date in the late 1990’s, it has become socially unacceptable to create digital text without images. The staff at Virginia Tech missed this memo, as the viewer can select hyperlinks on a page without any image but the Adobe Acrobat logo. This is a disservice to paying subscribers; most digital journals do have a more impressive visual layout, one which reduces eyestrain and boredom.

sc52

A few closing notes about the Electronic Antiquity journal: this is an example of an extremely utilitarian site. It does what users pay it to do- in fact, most users have already paid their subscription before ever having visited the site. In crude economic terms, there is no incentive for EA to spruce up the place; if anything, the funds earned by EA would be siphoned off and reinvested in the analogue efforts of the Classics department. Visual design is put on the back burner; for an academic discipline so heavily entrenched in textual recitation, there is no pressure to make the product cute, shiny, or absorbing. Journals in other disciplines are certainly more advanced, but this example sets a baseline minimum for graphic user interface functionality and design.

2 Responses to “The GUI and You: A study in usability”


  1. [...] The GUI and You: A study in usability [...]

  2. cheryl Says:

    McKenzie,

    This is an interesting comparison between the advertising/entertainment site and the educational/scholarly one. I appreciate your fluidity with language, although the overall reliance on lots of unsupported superlatives (i.e., “superior commercial display”) prompts me to ask: according to whom? The piece reads well, and you’ve left lots of space to dig further, which is a good thing for your pitch proposal assignment.

    Akin to the superlative issue is the generational and economic issues you address in the journal design portion of the analysis. My first question in that regard is: How old does one have to be before one doesn’t appreciate good design? Ahem. ;)

    Second question: You’ve raised some interesting (if not wholly accurate) points about the economics of design. What larger research questions could you address using these issues as a framework? For instance (and this is my schtick, so don’t feel like you have to pursue this line of inquiry), what would a cross-comparison of the designs of electronic-only journals say about the values placed on digital scholarship in particular fields? If the value of the Nike site is infotainment, as they say, then what is the value of an e-journal that uses Java applets and Flash-y animation, etc., for more educational purposes?

    So, you’ve raised some good questions and there are lots of possibilities to pursue here.

    –cb

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.