good examples of bad design

WITH DAVE FLETCHER :: JUNE 10, 2002


BOOK IBOOK IWHERE BAD D3SIGN

COMES FROM

1. LEGAL RED TAPE. • When corporate lawyers get involved with

contracts, problems arise.


1. LEGAL RED TAPE.

11. FOCUS GROUPS • Testing proves how the audience feels at

that moment.


1. LEGAL RED TAPE.

11. FOCUS GROUPS


111. TOO MANY COOKS IN THE KITCHEN • How many design team members does it

take to screw in a lightbulb?

1. LEGAL RED TAPE.

11. FOCUS GROUPS


111. TOO MANY COOKS IN THE KITCHEN

1v. LACK OF INFORMATION • Get as much from a client as possible

before starting a project.

1. LEGAL RED TAPE.

11. FOCUS GROUPS



1v. LACK OF INFORMATION

v. TOO MUCH INFORMATION • Loading up an advertisement with words

will not make a client read it.

1. LEGAL RED TAPE.

11. FOCUS GROUPS




v. TOO MUCH INFORMATION

v1. BAD CHOICES • Fonts, Colors and Legibility must be

consistent with a targeted audience.

1. LEGAL RED TAPE.

11. FOCUS GROUPS




v. TOO MUCH INFORMATION

v1. BAD CHOICES

v11. FEAR OF FAILURE• Never be afraid to fail. It happens to

everyone, and you'll learn from it.


BOOK IIBOOK IIIN THE BEGINNINGTHERE WAS A PAST

1.THE CODE OF HAMMURABI

“If a builder builds a houseand does not make

its Construction firm, �

and the house which he has built collapseand cause the death of the owner of that house, that builder shall be put to death.”




2.FAILED DESIGN



3.WHAT IS BAD WAS GOOD


THE DEVIL'S IN THE DETAILS

Here's how to smoke all you want- If you really enjoy smoking, yet feel you smoke too much, you don't have to cut down and deprive yourself of smoking pleasure!

Follow the lead of thousands of others - switch to new Julep Cigarettes. Smoke all you want without unpleasant symptoms of oversmoking! A smoking miracle? Yes, it's the triple miracle of mint.

(1) Your mouth doesn't get smoke-weary!

(2) Your throat doesn't get that harsh, hacking feeling!

(3) Your breath avoids tobacco-taint!

Get Juleps today - get more joy out of smoking!

“That Design is for the Birds.”

PAUL RAND(1914–1996)



BOOK IIIBOOK IIIFAST FORWARD TO THE PRESENT

1.WEBSLIGHTS


where did it all go wrong?

iDNAintelligent dynamic network aesthetic

iDNA ARTIFACT IS ©2k METHODFIVE, ALL RIGHTS RESERVED

European Business ForumiDNA prototype v1.0

DesiGn in the DigItal Agefrom

-by anthony shafto, art director:methodfive UK

The increasing level of competition in virtually every industry has forced company decision-makers to pinpoint new methods of gaining a market advantage. As a result, more businesses understand the value of integrating strategic design decisions with their products, marketing efforts and identities. Communication design is becoming as important a competitive business edge as manufacturing, product selection, quality, pricing or distribution channels.

Effectively designed communication establishes vital links between a company and its target audience. As technology progresses and becomes more infused in the everyday world, businesses are presented with a growing number of options for developing these links. Because of all the media available, and the surplus of messages aimed at every audience, it is crucial that communication be effectively designed.

As a leading design agency, methodfive determines a client’s message and chooses the most effective way to transmit that message. Whether spoken, felt, heard or read, it is a matter of transforming intangible ideas into tangible objects. Interactive media, the Internet in particular, is exciting because it allows for the creation of lush environments, which encourage and reward participation. The objects of these environments are more than just a lexicon of sounds, colours, forms and spatial arrangements that define the circumstances surrounding the individual - they are the vehicles for encounters and confrontations. Understanding this is crucial to the success of designing in the digital age.

The media thinker and author, Marshall McLuhan explains in his seminal book, The Medium is the Message, that: “the vested interests of acquired knowledge and conventional wisdom have always been by-passed and engulfed by new media.” This observation strikes to the heart of the designer’s contemporary dilemma. One who is trained in the correct methods of professional photography, illustration, graphic and typographic design but who lacks the experience of applying design principles to an interactive environment is continually ambushed as technological innovations and new creative directions challenge conventional wisdom.

All too often, switched-on designers focus too heavily on exploring design as it relates to an interactive environment such as the Internet. It is imperative that new media designers understand that man is the actual medium of expression, not the tool he elects to use as a means. Results alone should be appraised; the way in which these are achieved is of importance only to the designer. To the extent that the completed design realizes depth of understanding, uniqueness of viewpoint and vitality of presentation, will the user respond and participate in the experience.



organized

Page layoutEstablish Visual Hierarchy

Internet users seek clarity, order, and trustworthiness in a websites diverse information sources. The spatial organization of graphics and text on an a Web page can engage the user with graphic impact, direct the user's attention, prioritise information, and make the user's interactions with the website more enjoyable and more efficient.

The primary task of graphic design is to create a strong, consistent visual hierarchy, where important elements are emphasized, and content is organized logically and predictably. Graphic design is visual information management using the tools of layout, typography, and illustration to lead the eye through the page. Visitors see pages first as large masses of shape and colour with foreground elements contrasted against the background field. Only secondarily do they begin to pick out specific information, first from graphics if they are present, and only afterward do they start parsing the "harder" medium of text and begin to read individual words and phrases.

Thus the overall graphic balance and organization of the page is crucial to drawing the visitor into your content. A dull page of solid text will repel the eye as a mass of undifferentiated grey, but a page dominated by poorly designed or overly bold graphics or type will also repel sophisticated users looking for substantive content. website design demands an appropriate balance that attracts the eye with visual contrast.



organized

balance

Page layoutCreate Visual Balance

Graphic design creates visual logic, an optimal balance between visual sensation and graphic or text information. Without the visual impact of shape, colour, and contrast, pages are often graphically boring and will not motivate the viewer to investigate their contents. Dense text documents without the contrast and visual relief offered by graphics and careful page layout and typography are also more difficult to read, particularly on the relatively low-resolution screens of current personal computers. However, without the depth and complexity of text, highly graphic pages risk disappointing the user by offering a poor balance between visual sensation, text information, and hyperlinks.

In seeking this ideal balance, the primary graphic design constraints in Web pages are the vertical, list-oriented structure of HTML as seen in current Web browsers, and the practical bandwidth limitations on user access rates which runs the gamut from 14.4 to T1 (a connection speed of 28.8 has been identified as the standard against which all design and build will be measured). Visual and functional continuity in EBF's site organization, graphic design, and typography is essential to convince users that the site offers them timely, accurate, and useful information.

A careful, systematic approach to page design will simplify navigation, reduce errors, and make it much easier for users to take full advantage of the information and features of the EBF site and will also make it much easier for the maintenance team to manage and update the site.



direction

organized

balance

Page layoutDirect the Eye

In the West readers of English read from left to right, and from the top of the page to the bottom. This fundamental visual axis dominates most design decisions, and is the basis for most conventional graphic design of print publications. In page layout the top of the page is always the most dominant location, but on Web pages the upper page is especially important, because the top four inches of the page is all that is visible on the typical 14 to 16 inch monitor.

Avoid Graphic Distractions

The EBF design must avoid complex graphic embellishments. Horizontal rules, graphic bullets, icons, and other visual markers have appropriate uses, but should be applied sparingly to avoid a patchy and confusing layout. The tools of graphic emphasis are powerful, and should be used only in small doses for maximum effect.



rhythm

direction

organized

balance

Page layoutBe Consistent

EBF's design should establish a layout grid and a style for handling text and graphics and then stick with it to build a consistent rhythm and unity across all pages of the site. Repetition with purposeful intent is not boring; it will give the website a consistent graphic identity that reinforces a distinct sense of "place," which makes the visitors’ experience more memorable. A consistent approach to layout and navigation will allow visitors to quickly adapt to the design, and to confidently predict the location of information and navigation controls across the pages of the site.

There is no single design grid system that is appropriate for the EBF site. The first consideration in the project is to establish the basic layout grid for the site’s pages. With this graphic "backbone" design establishes how the major blocks of type and illustrations will regularly occur in the pages, and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons. It isn't possible to predict how every particular combination of text and graphics will interact on the screen, but it is important to examine layout "sketches" against both the most complex and least complex pages.

The goal is to quickly establish a consistent, logical screen layout, and one that allows the site’s editorial staff to quickly "plug in" text and graphics for each page. Without a firm underlying design grid, page layout will be driven by the problems of the moment, and the overall design of the site will look patchy and visually confusing.



eBf"The European Business Forum is an influential, Euro-centric source of debate, knowledge and information, which enable senior and aspiring (business) decision takers worldwide to gain competitive edge in the emerging global marketplace."

...and it is more >>



authority

intelligence

State oF the enVIronMent

The publishing vertical is perhaps the most difficult and dangerous online venture. Nicholas Negroponte, head of the MIT Media Lab, has reasoned that the internet is causing a shift from atoms to bits. As digital information separates itself from various media and begins to disseminate across networks in its purest form, we find that the economic model for the entire publishing industry no longer applies. Information was once valued in part because of the media to which it was bound. The digitization of information has liberated it, and consequently left us in the disoriented state of questioning how to value information alone.

The challenge of publishing online revolves around providing information that is more relevant and concise. Inevitably, the question of interface arises. No other element of an application can more powerfully assist or impede a user’s attempt to not merely receive, but absorb information. Finding an equilibrium between minimizing a user’s attention and time, and maximizing the precision and quantity of the information is the key to successful online publishing.



"competitors are never enemies. They are unknowing educators.”


iDNA DOCUMENT IS ©2K METHODFIVE, ALL RIGHTS RESERVED

"competitors are never enemies. They are unknowing educators.”

methodfive believes the key to any online initiative is a detailed analysis of our client’s competition. It is the valuable data gathered from this research, including detailed color palettes, common navigational elements, and industry trends, that steer our methodology in the creation of something that exceeds our clients' expectations.

D@ve Fletcher, Creative Director:methodfive

FORRESTER

palette [primary]

• Forrester is a leading independent research firm that analyzes the future of technology change and its impact on businesses, consumers, and society.The website uses a standard left-side navigational structure with an emphasis on both client and guest logins.• The homepage features a very compartmentalized content area area which is graphically and structurally powerful. Important links are easily identified and persuasive in their subtlety. Adding to the persuasiveness of the homepage is the calm color palette. The user enters the site and is immediately not overcome by the amount of information that is available.• Essentially, Forrester is a site which requires subscriptions for most of the available content. A guest login account will remain active for 90 days to allow the visitor to discover the relevance of the content before subscribing. ( see gravity well )The large, organic circle frames links to research polls and visitor input. The circular image breaks up the strict division of space with an organic touch.

The primary color palette for the Forrester site combines natural, casual pastels with a touch of vibrant orange highlight. The mood created is very calming and skillfully creates a balance between tasteful and inviting.

primary secondary



FORRESTER

palette [secondary]

• The elements of the secondary pages remain relatively consistent. All navigational elements remain, with the addition of secondary navigation which appears directly under the chosen section.• Content is spaced out appropriately, and the white empty space to the right creates a more direct focus to the secondary navigational elements.• The headline from the homepage is replaced with a section header, simply giving another point of focus of location to the visitor.• A most interesting point is that the number of navigational elements and repetition of links is understated by the simple spacious nature of the site. The site never feels crowded to the eye, yet features plenty of worthwhile content.

The secondary palette follows the homepage colors with a minor shift. White is introduced as a main background color to first, support printing of information, and second, to allow the eye to focus on the appearance of secondary navigation at the left. The overall feel of the site remains consistent.

primary secondary



LOGO

login

headline date

information

interaction

join

join

news

advert

timely info mission

join

employment search

copyright

statement

navig

atio

n

LOGO

login

page title

join

content advert

upcoming events

inquiries

contact

navig

atio

n

secondarynav

TheStreet.com

palette [main]

• TheStreet.com: Sly, irreverent, to the point. TheStreet is a site which features plenty of content which is valuable to the Wall Street Banker, CEO or casual day trader.• Immediate focus is given to the number of images used to represent regular columns. And available links to content are rendered in a high contrast color for secondary focus.• The navigation forces the audience to scroll, yet the content is incredibly dense and without focus. There are too many hyperlinks, making it difficult to pinpoint pertinent information.

The same palette is used throughout the site, whether the visitor is at the homepage or within interior pages. Simple colour shifts would have given the visitor a clearer picture the different areas. Perhaps even a subtle colour shift between paid and free areas would have been appropriate.

The palette is made of neutral, non-offensive tones. The main highlight is the green colour within the navigation playing off of the logo. Dull, tans/yellows fill the background and subsequent content navigation areas. They give the site a simple, implied dignity. The green alludes to money and the red is a nice complement to highlight the subscription area.

secondaryprimary


iDNA DOCUMENT IS ©2k METHODFIVE, ALL RIGHTS RESERVED

TheStreet.com

palette [main]

The same palette is used throughout the site, whether the visitor is at the homepage or within interior pages. Simple color shifts would of given the visitor a clearer picture the different areas. Perhaps even a subtle color shift between paid and free areas would have been appropriate.

The palette is made of neutral, non-offensive tones. The main highlight is the green color within the navigation playing off of the logo. Dull, tans/yellows fill the background and subsequent content navigation areas. They give the site a simple, implied dignity. The green alludes to money and the red is a nice complement to highlight the subscription area.

secondaryprimary



logodate phone

advert

self-advert

self-advert

advert

advert

community

toolbox/quotes

freenavigation

paidnavigation

search

sponsoredarea

subscribe

legal/info/policies

advert

advert

advert

main stocks in frameset

subscriptioninquiry

mainstory

markets[free content]

breaking news[free content]

news & analysis[paid content]

finance[free content]

featuredcommentary[paid content]

featuredcommentary list

[paid content]

featuredcommentator[paid content]

logodate phone

self-advert

self-advert

advert

advert

FAQ

toolbox/quotes

freenavigation

paidnavigation

search

sponsoredarea

subscribe

legal/info/policies

communitychat

advert

main stocks in frameset

subscriptioninquiry

community contentto

p-l

evel n

avig

atio

n

to

p-l

evel n

avig

atio

n

• Advertising is kept to a minimum and is mostly restricted to the right column. Both self and outside advertising co-exist, creating color harmony between the advertising and the content.• The use of a columnar layout, in combination with the density of information creates a cascade, assisting the user's attention in moving down the page. Noting immediately what content is free and what is premium is also extraordinarily useful to the user and a good use of information to pull the user into a relationship.• The frameset at the bottom of the page, which contains a stock ticker, visible throughout the experience at TheStreet.com is an appropriate use of frames to give the user a consistency of needed content.

FASTCOMPANY

palette [primary]

• FastCompany is an online companion to the printed publication. The magazine writes about the new economy and workplace for people who believe in fusing tough-minded performance with human values.• Confusion of interface values is apparent with a sloppy, double navigation structure which follows neither a decided order or reasonable repetition. Some elements are carried into the left and right navigation are also available at the top. The inconsistency of available navigational elements causes a level of confusion. Additionally, as graphical elements, the navigation suffers from inconsistent implementation as well.• The absence of a banner on the homepage is refreshing, with both internal and external advertising placed on the left and right side in small, unobtrusive boxes.• Content is organized in a compartmentalized newspaper format; the main story leads at the top with features and community cascading into links and quotes. The links help to differentiate the online product from the printed publication. The separation of orange to white columns creates focus on the content.

FastCompany online follows the color palettes defined by the printed publication. The serious, deep red creates a dynamic to the lighthearted combination orange and whites. The orange and red stick to the warm side of the tonal scales. The colors of the navigational elements (see top navigation) are so severely in competition with the color palette, they create distraction. Sticking with variances of the initial palette would be more appropriate.

primary secondary



FASTCOMPANY

palette [secondary]

• The secondary pages of fastcompany lose the left and right navigation of the homepage and divide into a two column format. The left section is reserved for placeholding more advertising and confusing imagery. • Colors change to match the colors associated with the top navigation in every instance with the exception of << THEMES >>. Consistency is overlooked and sets the tone of "amateur" throughout the experience.• The use of white within content areas in secondary pages continues the "white signifies content" theme throughout the site.• Stylized artwork mixed with photographic elements looks unprofessional in the secondary pages.• Frequently Asked Questions are buried within the legal footer hyperlinks, and feel like an afterthought.

The variance of color from page to page at the secondary level is worth noting, because when implemented properly, can be successful in branding pages unto themselves. When the user returns, they become familiar with a particular color combination of a navigational element. No matter how large the site becomes in the future with addition of other navigational elements, the user can intuitively define where they want to go with minimum effort.

primary secondary



LOGO

INTERNALADVERT

INTERNALADVERT

NAVIGATIONNAVIGATION

NAVIGATION

NAVIGATION

NAVIGATION

NAVIGATION

LOGO NAVIGATION

LEGAL

NAVIGATION

NAVIGATION

NAVIGATION

ADVERT ADVERT

INTERNALADVERT

CO

MM

UN

ITY

ON

LIN

ED

ISC

US

SIO

N

INTERNALADVERT

INTERNALADVERT

EMAILCAPTURE

FEATURES

ARCHIVEFEATURE

LINKS

QUOTES

MAINFEATURE

LOGO

PRINTINFO

SECTION CONTENT

NAVIGATION

LOGO NAVIGATION

LEGAL

PRINT OPTION

BANNER AD

thestandard.com

palette [primary]

• TheStandard is the online version of the Industry Standard publication, and functions as an up-to-date news resource for the internet business community.• Curved boxes serve as a departure point from the strict-edged column structure of the printed publication. However, this "organic" approach fights with the angular online logo (upper left of page), leaving the logo feeling like a secondary thought. This becomes a barrier to the realization of a well branded site.• The use of a subdued yellow (a color choice from the actual publication) within the logo creates an accent that should be reiterated as an accent to important articles or sections. Again, this is a lack of branding consistency, and a failure to relate the site to the print magazine. • Content may or may not be organized by immediate relevance due to the lack of date or time of posting for individual articles. • Advertising is carefully separated with self-advertising located below the main navigation and industry relevant advertising located to the right.

TheStandard's color palette is a reflection of the magazine. Casual, classic colors with a cerebral gray background denotes intelligence mixed with a laid-back comfortable atmosphere. The soft yellow, used as an occasional accent to articles within the printed publication is present only in the online version of the logo. The which displays compartmentalization without a focus on its relevance to the internet economy.

primary secondary



thestandard.com

palette [secondary]

• The navigation, expanded at the homepage level, becomes condensed at the secondary levels showing only select elements of the subsection menu. It would seem that a color coding of individual sections would have allowed the secondary levels to be present at all interior levels. DHTML may have been utilized to shorten the main navigation with pull-out subsections if space was an issue.• The color choices at interior levels is inconsistent. Some subsections feature the same colors, while others feature radical shifts in secondary colors.• The intelligent Industry Standard charts are missed at the homepage level. While too many charts become an unecessary distraction, TheStandard online missed an opportunity to highlight the Metrics which are a major point of interest in the printed publication.• The Personalized navigation takes the visitor to an inconsistent series of pages. They lack the main navigation areas of the content pages located within the left column

TheStandard's secondary palettes become inconsistent as the visitor explores the sections. Some sections feature a radical color shift (see events section). Others feature the same palettes as the homepage while others have a slight variance in color (purple to blue). The most alarming inconsistency within the palettes is the varied colors within single sections. In companies, for example, green is the highlight for one subsection, while blue is the highlight for another subsection.It is this lack of coordination between sections which, ultimately, will confuse the visitor to TheStandard.

primary secondary



self-advert

[subscribe]

self-advert

mainnavigation

topnews

advert

opinion

directory

events

jobrecruitment

specialreports

specialreports

advert

advert

footer

logo advertising

search

date

personalized navigation

self-advert

[subscribe]

self-advert

mainnavigation

[condensed] topnews/

articlesadvert

opinions/Related Links

posts

daily metric

advert

advert

footer

logo advertising

search

date

personalized navigation


Marketing Misfires

Coors translated its slogan, �

"Turn it loose," into Spanish,

where it was read as

"Suffer from diarrhea."

Step 1. : enter the site.


irritating information architecture.

Step 2. : navigate.



Step 3. : re-verify your age?



1. Don't assume that an underaged drinkerwill not figure out a date that will give themaccess to your site.

2. What “secret” drinking information could beprovided on coors.com that an underaged kidcould find out?

Step 4. : Read an ad about

the dangers of underage drinking.



http://www.johnsonandjohnson.com

“It is our job as designers to create effective representations of information for human consumption.”

JEF RASKIN (INVENTOR OF THE MACINTOSH)



Top Half of Site.


Bottom of Site.(navigation)


Et Tu, Dio?


BOOK IIIBOOK IIIFAST FORWARD TO THE PRESENT

2.TOO MUCH INFORMATION


36 Cars.


117.801 mph

1 3 #12 Jeremy Mayfield Ford Mobil 1 185/10 200 Running $111,580

2 1 #24 Jeff Gordon Chevrolet DuPont 175/5 200 Running $79,500

3 9 #88 Dale Jarrett Ford Quality Care/ Ford Credit 170/5 200 Running

$62,220

4 28 #99 Jeff Burton Ford Exide Batteries 165/5 200 Running $49,080

5 6 #6 Mark Martin Ford Valvoline 160/5 200 Running $40,645

6 18 #1 Darrell Waltrip Chevrolet Pennzoil 155/5 200 Running $28,725

7 14 #50 Wally Dallenbach Chevrolet Budweiser 151/5 200 Running $34,575

8 11 #3 Dale Earnhardt Chevrolet GM Goodwrench Service Plus 147/5 200

Running $34,625

9 15 #40 Sterling Marlin Chevrolet Coors Light 138/0 200 Running $23,825

10 34 #23 Jimmy Spencer Ford Winston 134/0 200 Running $41,975

11 36 #28 Kenny Irwin * Ford Texaco/ Havoline 130/0 200 Running $33,175

12 12 #5 Terry Labonte Chevrolet Kellogg's Corn Flakes 127/0 200 Running

$32,025

13 19 #43 John Andretti Pontiac STP 124/0 200 Running $31,425

14 29 #21 Michael Waltrip Chevrolet Citgo 121/0 200 Running $27,575

15 23 #18 Bobby Labonte Pontiac Interstate Batteries 123/5 200 Running

$31,675

16 32 #77 Robert Pressley Ford Jasper Engine's/Federal-Mogul 120/5 200

Running $20,275

17 8 #16 Ted Musgrave Ford PRIMESTAR 112/0 200 Running $25,825

18 35 #11 Brett Bodine Ford Paychex 114/5 200 Running $25,525


Cheap Beer.


Cheap Beer.(sorry Anheuser-Busch...)


Too much information.



Coast Guard



Coast Guard 3M



Coast Guard 3M Penzoil



Coast Guard 3M Penzoil Prestone



Coast Guard 3M Penzoil Prestone GoodYear




76




76 Moog




76 Moog Quaker State




76 Moog Quaker State True Value




76 Moog Quaker State True Value GMAC





Blah





Blah Blah





Blah Blah Blah





Blah Blah Blah Blah





Blah Blah Blah Blah Blah






Blah






Blah Blah


Designed for confusion.


The Land of Confusion.

good examples of bad design

Documents

dave fletcher

fletcher dave withand

legal red tape

communication design

focus groups111

lack of information

typographic design

design principles