Thus I present HavenWorks.com, perhaps the ugliest news site to ever hit the Internet. Most people would agree that "HavenWorks" is poorly designed and difficult to use. Universal Principles of Design can help to reveal why that is, and suggest potential improvements.
There's Just Too Much There - Law of Pragnänz and Ockham's Razor
When Kenneth Burke discusses language as a system of symbols striving to represent reality, he notes that any terminology is not a complete reflection, but "a selection of reality" (Burke 161). Although any body of language can communicate and emphasize but a small subset of reality and lived experience, the "terministic screens" of language construct our impressions and beliefs - they become our reality (Burke 161). Language systems can never reflect nature in its entirety, but the limitations of human perception, sensation and cognition render them necessary - " '[r]eality' could not exist for us, were it not for our profound and inveterate involvement in symbol systems" (Burke 162). Burke focuses on language, but any human-constructed system emerges from the same principle of necessity. We need systems to simplify, emphasize, and generalize the complexities of existence.
It follows then, that where no pre-existing system exists to mediate complexity, people will create their own to facilitate understanding. "The tendency to perceive and recall images as simply as possible indicates that cognitive resources are being applied to translate or encode images into simpler forms" (Lidwell et al 120). The Law of Prägnanz tells us that people will pause to translate images in terms of the perceptual code that simplifies comprehension and supports information retention to the greatest degree. Including fewer elements in a design reduces the sheer bulk of information to be recoded, and fosters speed and ease of understanding. "HavenWorks" completely ignores the implications of the Law of Prägnanz - the page is cluttered with text, symbols, and graphics; inconsistent colour choices abound, and the designer does not even bother using symmetry to temper his inclusion of so many page elements. The left side of the page (1) does not even come close to matching the right (2):
The clutter of "HavenWorks" also limits design efficiency. Too many visual elements (icons and graphics) combine with too many cognitive elements (a number of long, full-text articles featured on the first page; unnecessary repetition of links that lead to the same information). "HavenWorks" ignores the principle of Ockham's razor, which values simplicity over complexity. The repetition of links especially is an instance of "[e]ntities [being] multiplied without necessity" (Lidwell et al 142). The purpose of an additional A-Z link above the "Weblog" section of the site seems unrelated to the content below, and has no discernible purpose when one notices that an "A-Z" link is already featured at the top of the page:
Universal Principles of Design recommends that when two designs are "functionally equivalent", the one incorporating the fewest visual elements should be chosen (Lidwell et al 142). "HavenWorks" is so chaotic that the site is hardly functional at all. The site provides no discernible organizational methodology and presents information randomly, leaving users the considerable mental strain of developing their own system to organize what they see presented. Practical use of Ockham's razor is pointless, considering the serious limitations of the current "HavenWorks" design. The site needs to be rethought to take its purpose into consideration. In the context of the redesign process, Ockham's razor could be used to choose the simplest, most streamlined system that works to help page viewers find and access the site content they need.
Emphasizing and Relating Everything; Discerning and Communicating Nothing
Systems of information design help to ease understanding by creating and showing difference, and by using symbolism to substitute and condense information. For Burke, the processes of " 'condensation' and 'displacement' are not confined merely to the symbolism of dreams and neuroses, but are also an aspect of normal symbol systems" (Burke 106). Good systems use symbols to represent concepts, and translate information into coherent, organizational categories. They create dichotomies and communicate difference. The problem with "HavenWorks" is that principles used to differentiate, draw connections, and categorize are misused, so that instead of communicating relationship and distinction, they merely serve to obscure and confuse.
Horrid Highlighting
Highlighting is one method of creating difference. It draws attention to compositional elements, and defines highlighted elements as somehow more important than unhighlighted ones. Universal Principles of Design recommends that "no more than 10 percent of the visible design" should be emphasized via the highlighting method, since "highlighting effects are diluted as the percentage increases" (Lidwell et al 108). In other words, highlighting too many elements defines too many things as important, and fails to create any sense of meaningful difference. "HavenWorks" makes exactly this information design error.
Besides highlighting too much information, "HavenWorks" uses the worst possible highlighting methods in abundance. While conventional wisdom recommends sparse use of desaturated colours for highlighting purposes, "HavenWorks" implements liberal use of many bright colours. Not only are different fonts used as a highlighting technique against aesthetic recommendation, but many different fonts are used, counteracting the intended highlighting effects and disrupting visual consistency. Finally, inversing abounds on "HavenWorks", although Lidwell et al recommend limited use of the technique to avoid adding "considerable noise" to visual designs (Lidwell et al 108).
Black circles point out some examples of inversing, black boxes show the different fonts used, and red circles indicate some notable examples of colour use - besides using a number of different font colours, sometimes, font colour even changes within the same word.
Irksome Iconic Representation
Iconic representation helps "to make actions, objects, and concepts in a display easier to find, recognize, learn and remember" (Lidwell et al 110). Icons do this by lumping a number of actions, objects, or concepts together under single visual representation, making certain key characteristics requisite for membership to the group. For example, the airports in Toronto and Buffalo are clearly different things, but the same visual icon is used to represent them on highway signs. Certain characteristics link the Toronto and Buffalo airports (the presence of many airplanes; regular transportation of people to new destinations), so that both can be subsumed under a single iconic representation. Icons generalize, and communicate important information about how entities are the same. Having too many icons limits effectiveness, because the generalizing function of iconic representation is counteracted when people need to remember lots of unfamiliar symbols. Labeling of symbols, and consistency of style and colour can help to mediate some of complexity and make iconic representation more effective (Lidwell et al 110). Labels on "HavenWorks" are sometimes used next to icons, but oftentimes are not. Colour and style are far from consistent. Symbols use almost every colour of the rainbow; some have borders and others do not; some have coloured backgrounds while others do not.
Many of the icons do not make sense, because they are either:
Many of the icons do not make sense, because they are either:
1. example icons, but not "commonly associated" with the concept they are intended to represent;
2. symbolic icons, used ineffectively because the concept represented does not "involve well-established and easily recognizable objects" ;
3. or arbitrary icons, which fail to communicate clearly, because images used are not linked to any conventional "cross-cultural or industry standards" (Lidwell et al 110).
The "SE" icon circled at the bottom of the above image represents the third type of problem. "SE" bears very little relationship to the concept of "search engines" which it is supposed to represent, other than that "s" and "e" are the first letters of the two English words signifying the concept. The arbitrary "SE" symbol is reflective of no particular standard that people might recognize, and users must hover the mouse over the icon to be sure of what this symbol actually means.
Problems with Proximity
Proximity is used to show that things are related and bear some sort of similarity to one another. "HavenWorks" uses columns and boxes to separate different compositional elements. Within those boxes, certain items are touching each other; they are organized to imply "one or more common attributes" (Lidwell et al 160). Other boxed objects are not touching, and are thus "related but independent" (Lidwell et al 160). Here, the pictures in row "1" are touching, and are presumably more related to each other than to other objects within the "Weblog" column. The same assumption holds for the icons in row "2." Other pictures and information contained within the "Weblog" column are related, but at the same time separate, since elements do not touch each other.
Although perceptual codes communicate that connected items should be closely related, poor use of icons leaves the reader to puzzle out the relationship. Who are the people in the first row? How are they related to one another? Even if the faces were well-known, the size of the icons make recognition difficult. Most people would need to click on a few of the faces before figuring out their similarities. It turns out that all are radio talk show hosts, and political American ones at that.
Although perceptual codes communicate that connected items should be closely related, poor use of icons leaves the reader to puzzle out the relationship. Who are the people in the first row? How are they related to one another? Even if the faces were well-known, the size of the icons make recognition difficult. Most people would need to click on a few of the faces before figuring out their similarities. It turns out that all are radio talk show hosts, and political American ones at that.
The same goes for the row of symbols below the faces. They are small, and in many cases, not well-known enough to render them immediately meaningful. The user needs to click and peruse a few external websites to comprehend the relationship. Finally, how are the items in the "Weblog" column that aren't touching related to each other? How is the row of radio hosts linked to the headline "Amity Shlaes strikes again?" Is there any relationship at all? After looking at this "Weblog" box for awhile, I still couldn't figure out how all contained information was linked. The principle of proximity in this design is not an aid to understanding, because it indicates that items are connected without any clear explanation as to why or how.
Improving the Design - What Could be Done?
So far, I have discussed the overzealous use of highlighting, overabundance of colour and font choices, incomprehensible icons, and poor implementation of the principle of proximity. Of course, fixing these issues could improve the page's design dramatically.
Another issue touched on, but not discussed directly, is the tendency of "HavenWorks" to induce sheer information overload. The introductory page goes on for miles, containing a frustrating amount of textual content sure to make heads spin. The designer could consider a layout incorporating progressive disclosure to clean up the page and reduce confusion (Lidwell et al 154). Some articles of particular interest could be featured on the main page, with "more" hyperlinks included to transport viewers to additional, related content. Long feature articles would be truncated, with the option to read "more" if the user so desired. The Onion offers a good illustration of what I mean:
However, even after my harsh treatment of "HavenWorks," I do have to admit that its poor design does work to get the site a lot of hits. Perhaps "HavenWorks" never wanted to be a resource, but more of a joke to get as much viral popularity as possible. Certainly, its designer seems proud of the site's "ugly status," and I doubt he really wants or cares about any of my criticisms.
Six More Design Principles Not Discussed in This Entry
1. Garbage In–Garbage Out – "HavenWorks" certainly looks like garbage, so if you don't understand the meaning of this design principle, it is easy to think that garbage in–garbage out has considerable applications here. However, garbage in–garbage out is more relevant to information systems that require user input of information. For example, fields in an online shipping form that require manual entry instead of drop-down selection increase the risk of entering the wrong information in the wrong format. Wikipedia, the information system discussed in my last entry, would have a higher number of poor-quality articles if it weren't for the sandbox, a tool that allows people to experiment and understand article editing without affecting the main system itself. Since "HavenWorks" communicates information and does not elicit user contribution or input, garbage in–garbage out offers little substance for discussion.
2. Hick's Law – Hick's Law states that "[t]he time it takes to make a decision increases as the number of alternatives increases" (Lidwell et al 102). Certainly one of the problems with "HavenWorks" is too many visible options. The site is absolutely stifling, to the point where choosing the next navigational move is nearly impossible. However, Hick's law is more applicable to less complex tasks that do not involve research and reading. "HavenWorks" is a news site; choosing the next option on any news site usually involves consideration of content, and not a simple split-second decision. I considered writing about Hick's Law, but felt that the complexity caveat limited its applicability to my analysis.
3. Hierarchy – "HavenWorks" offers no clear examples of hierarchical organization, but I considered suggesting hierarchy as a way to improve the site's appearance and usability. For example, information could be organized within a collapsable stair hierarchy, with articles nested beneath a main topic title. Editorials and opinion pieces, in turn, could be nested under relevant mainstream news items to help establish context. However, after reading that stair structures "are not easily browsed" (Lidwell et al 104), I decided that organization by hierarchy was not the best suggestion. Many users of newspapers and news sites enjoy leisurely perusal of content, so a redesigned "HavenWorks" should afford browsing to meet audience expectations.
4. Hierarchy of Needs – I could have made an interesting argument in terms of the hierarchy of needs principle. Some people might insist that "HavenWorks" is functional and reliable, but halts at the level of usability - you can read about news items, and the site's links and features function correctly and consistently (there are no missing or broken links; symbols, as poorly designed as they are, always refer to the same thing). Poor design just impairs usability and makes the information system extremely frustrating to work with. I would disagree with this assessment and declare instead that "HavenWorks" barely meets functionality criteria, since fast access to news has become a minimum expectation for people who regularly read internet news sources. Although interesting, this principle did not flow as well with some of the other principles that I considered to be most significant. The Law of Prägnanz and Ockham's razor link nicely together through their shared emphasis of minimalism. The other principles analyzed make concrete observations and suggestions about visual design elements. The hierarchy of needs did not fit well in either of these categories, and was consequently left out.
5. Inverted Pyramid – The inverted pyramid style of writing is especially important for presenting news. Newspapers and news websites often discuss the five w's first to appease busy people wanting to know the bare "facts" without much commentary. Since "HavenWorks" is a sort of news source, I could have analyzed article writing style to see whether or not the inverted pyramid applied to any of the site's lengthy compositions and stories. My focus on visual aspects of the design, however, left me little room to discuss decisions about writing.
6. Legibility – Not surprisingly, "HavenWorks" breaks some of the legibility guidelines suggested in Universal Principles of Design. There are instances of poor contrast between text and its background; text line lengths do not always follow the guideline of three to five inches, and are so short that reading a long article becomes indescribably tedious. Despite these important observations, I had more to say about some of the other design principles, and chose to leave legibility out of my main analysis.
Lidwell, William, Jill Butler, and Kritina Holden. Universal Principles of Design.
Burke, Kenneth. "Definition of
No comments:
Post a Comment