Presenting the Worst of Web Design: HavenWorks.com

My last two journal entries have focused on websites that appear to take careful consideration of design principles, making good choices that align with an overall purpose. Of course, not every human design is replete with laudable characteristics. 

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:

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. 

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. New York: Rockport, 2003.

Burke, Kenneth. "Definition of Man." Language as Symbolic Action. University of California P, 1966. 3-24. As found in ENGL 251A Course Pack Book 1. Comp. Sara Humphreys. Univsersity of Waterloo, 2006. 104-14.

Burke, Kenneth. "Terministic Screens." The Rhetorical Tradition. Comp. Michael MacDonald. Bedford Books, 2001. 1340-347. As found in ENGL 309C Course Readings. Comp. Michael MacDonald. University of Waterloo, 2008. 161-64.

Wikipedia - A Carefully Designed Infomation System

Everybody knows and loves Wikipedia - the collaborative online encyclopedia containing free, and mostly accurate information, on both notable topics and ones you have never even imagined. Considering that Wikipedia is an ever-expanding body of work boasting over 2.5 million articles in English alone, one begins to wonder how the Wikipedia system works to sustain itself and help users navigate through such a vast digital resource, an ever-expanding world of information held together by human design principles.

Wikipedia – A Site with Two Entry Points

Strangely enough, Wikipedia has two entry point pages for any given user, assuming a single language preference for each person. The first shows all the languages in which Wikipedia is available:

The second entry point comes up when a specific language option is clicked:

Understanding the Design Choice - Isn't Having Two Points of Entry Annoying?

One could argue that the first Wikipedia entry page results in more unnecessary user clicks, and entry point design could be rethought to omit it altogether. Why not just display one of the language-specific Wikipedia pages first, offering other language options along the top of the page or along the sidebar? Surely, such a design move would remove Wikipedia even further from the example of poor design described by Lidwell et al: “[E]ntering many Internet sites entails going through a slow-loading splash screen, followed by a slow-loading main page, followed by several pop-up windows with advertisements” (Lidwell et al 64).

Second Things First: The Language-Specific Entry Pages

Beginning with the language-specific entry point pages, Wikipedia offers users a number of different options for interacting with the information system as a whole. There are three basic user functions within the Wikipedia system – searching and browsing for information, information editing, and reading expository texts that explain Wikipedia’s function and purpose. Although there are three basic functions, each of these can be performed or accessed in a number of ways according to user preference, need, and level of comfort. It's especially important, then, that Wikipedia's introductory page function as a point of prospect that offers enough navigation options to satiate advanced an inexperieced users alike (Lidwell et al 64).

Although the sidebar features a number links intelligible to old and new Wikipedia users alike, the sidebar also includes links to tools and resources that might seem obscure to novice users. Consider, for example, the "upload file" option included in the toolbox, or the "community portal" link; both have the potential to confuse Wikipedia newbies, but are vital productivity links for Wikipedia contributors.

Offering more advanced navigation options on the sidebar is an entry point compromise. Not including them at all would reduce expediency of entry for Wikipedia editors looking to proceed immediately to frequently-visited pages. Featuring them on the main body of the page, however, would introduce "distraction or disruption" for new users and non-editors, creating that clutter that can render a point of prospect ineffective (Lidwell et al 64). 

Inclusion of more obscure options on the page's periphery reflects good understanding of the principle of control. While experienced users might seek specific, functional pages and view their absence on the introductory page as “encumber[ing] [of] entry points”, people unfamiliar with Wikipedia need links to explanatory pages, avoiding as much incomprehensible clutter as possible (Lidwell 64). Wikipedia must consider the breadth of audience experience from the beginning; thus, entry point design takes control into consideration, providing “expert shortcuts” for those who use the system often (Lidwell 52), and more prominently featured overview pages that can eventually lead  to the same options, but with more explanation and guidance along the way. The set of expository links below are featured at the top of the page within the main page body - positioned strategically so a new user will notice them first.


More on the Language-Specific Entry Pages: Considering the Five Hat Racks and Progressive Lures

The problem with any referential information source is categorizing information to suit different browsing styles. Undoubtedly, many Wikipedia users find information by going straight to the search box and typing in an item of interest. Although the five hat racks principles suggests use of different organizational methods based on different requirements or design goals, Wikipedia cannot rely on just one of the five racks because of diverse user needs and expectations. Some browsers might want to look for information based on broad categories of interest; students might want to browse through information arranged categorically by academic discipline; others might want to view the sheer magnitude of Wikipedia articles, alphabetically arranged; and because Wikipedia is an informal community project, still others might want to view articles that are the "best" of Wikipedia, praised for their solid content and formal voice. Wikipedia provides all of these options from the introductory page, offering category arrangement, alphabetical arrangement, and a sort of continuum arrangement of information. Whether "featured content" counts as continuum arrangement is debatable, since only the "best" and "highest" in the continuum are included.

The other hat rack options - place and time - are justifiably left out as ways of organizing all available articles, because they are somewhat problematic. It would be almost impossible to categorize all articles by date. Would cities and people be organized by founding and birth dates, or some other date-related criteria? How would you categorize a generic item term, like "mobile phone" in terms of place?

Finally, other page content, including "On this day..." and "Did you know..." features, provide short, fun, and interesting facts that encourage people to start reading and delve deeper into Wikipedia by clicking related links. These regularly updated  info boxes act as progressive lures, which serve to "attract and pull people through" the Wikipedia system (Lidwell et al 64).

Returning to the First Entry Page - So What's the Point of it, Anyway?

After looking at the language-specific entry page, the first entry page seems even more irrelevant than before. The language-specific page minimizes barriers for all user types, provides a good point of prospect, and uses progressive lures. There can't be much left for a preceding page to do, can there?

The first Wikipedia entry page actually serves an important rhetorical function, offering a visual statement about the purpose and importance of the Wikipedia system. Consider the circular arrangement of the different languages around the Wikipedia puzzle-globe featured at the centre of the page - not an arbitrary organization of page elements, but rather, a significant semiotic design decision.

Arrangement of the language categories around the puzzle-globe communicates that the thousands of different articles written in several different languages are gathered around a common “centre that [] connect[s] and hold[s] them together” (Van Leeuwen 206). The puzzle-globe is a visual representation of what Derrida might call a discourse of collective cooperation, around which all system elements are organized and to which all system elements refer (Derrida 61). Put more precisely, the puzzle-globe communicates the importance of individual, piece-by-piece contribution in constructing a formidable body of global knowledge.

Wikipedia operates around the discourse of Web 2.0, which emphasizes “harnessing collective intelligence” and glorifies the power of the individual within the context of community. Having the first Wikipedia page encourages visitors to stop for an instant and consider this visual message, and perhaps introduces an expectation effect that discourages detrimental article vandalism (Lidwell et al 69). This introductory page visually communicates that users can expect to be part of a wider global project of great importance, which hopefully, should encourage productive use of Wikipedia information and tools in keeping with system principles.

Maintaining the Information System: The Importance of Wikipedia Feedback Loops and Development Cycles

Wikipedia encourages extensive positive feedback, allowing any user to edit and create information content. While free-reign contribution certainly contributes to system expansion, negative consequences can result when inexperienced or maleficent users make inappropriate page edits. Without some sort of negative feedback, Wikipedia information would become increasingly unreliable, and the system would become useless and collapse. Recent changes pages and watchlists make it easier for editors to spot poorly written or incorrect content; elected administrators with the power to lock editing and ban persistently uncooperative users help to control vandalism.

Such features result in some top-down, bureaucratic-style control of the Wikipedia system by a few privileged users – a seeming inconsistency with the site’s cooperative mandate, but some high-level control is necessary to temper the negative consequences of an open-community approach to information management.

Wikipedia also controls quality by encouraging users to follow a process for article creation and management. Wikipedia clearly explains article design requirements, such as citation, and encourages “reduce[d] variability in the materials” – the materials being the words making up articles – by striving for consistent academic style across all information entries (Lidwell et al 62).

Testing on Wikipedia takes the form of article discussion forums, where users collaborate to suggest article changes that might improve informational accuracy or clarity. Article development progresses through an iterative cycle, where basic requirements are first understood through Wikipedia information pages, design and development strive to adhere to prescribed conventions, and user forums reveal the results of testing, outlining new requirements.

Four More Principles Not Addressed in This Entry

1. Exposure Effect – The puzzle-globe Wikipedia logo is repeated throughout the site, located on the side-bar of the page. Repeated placement of the logo acts as a visual reminder of the aim of Wikipedia, and is a smart implementation of the exposure effect to encourage acceptance of Wikipedia’s central aim and purpose. Nevertheless, I chose not to include this design principle in my main analysis because despite its relevance, other design principles offered more interesting observations suitable for discussion.

2. Face-ism Ratio – My focus on the Wikipedia system in its entirety made this principle somewhat irrelevant. Face-ism would have been applicable to my analysis if the Wikipedia logo included a person, or if I had chosen to analyze a specific Wikipedia article featuring a person’s photograph. Then, on the basis of the face-ism ratio, I could have considered whether the image emphasized intellect (featuring a close-up shot of the face), or sensual themes (through portrayal of more of the body).

3. Fibonacci Sequence – As a natural phenomenon, the Fibonacci pattern theoretically carries a special, inherent aesthetic appeal which renders it especially compelling to the human eye. This design principle is notable for its presence, but does not result in terrible consequences if left out of a design; designers should not "contrive designs to incorporate Fibonacci sequences" (Lidwell et al 78). Because this design principle lends itself more to deep analysis of graphic design, and because it is not notably present in Wikipedia's introductory pages, (the only place where I discuss visuals), I left the Fibonacci sequence out of my analysis.

4. Framing – Discussion of framing could have lent an interesting dimension to my analysis; I could have done a close reading of Wikipedia instructional pages to reveal how language constructed certain actions within the discourse of Web 2.0. For example, non-academic, "funny" edits are framed negatively as "vandalism" in the language of Wikipedia, not positively as "jokes". Such negative framing encourages users to take editing of article content seriously, and engage carefully in the important project of collective knowledge construction. As much as I would have liked to address framing further, I felt that other design principles offered more substance for lengthy discussion, and something had to be sacrificied to limit my word count.

Derrida, Jacques. "Structure, Sign, and Play." Modern Literary Theory. Oxford UP, 2001. 195-99. As found in ENGL 251B. By Shelley Hulan. University of Waterloo, 2007. 60-62. 

Lidwell, William, Jill Butler, and Kritina Holden. Universal Principles of Design. New York: Rockport, 2003.

O'Reilly, Tim. "What is Web 2.0? Design Patterns and Business Models for the Next Generation of Software." O'Reilly. 30 Sept. 2005. O'Reilly Media Inc. 19 Nov. 2008 . 

Van Leeuwen, Theo. Introducing Social Semiotics : An Introductory Textbook. New York: Routledge, 2004.