Web Pages That Suck -- Examples of Bad Web Design

These are the Daily Suckers -- Examples of Bad Web Design -- from WebPagesThatSuck.com. I couldn't predict every new sucky design technique that would come along when I wrote the book because there's always a new way to do something bad. This page will keep you up-to-date. Live examples.

My definition of "daily" is "whenever I'm in the mood."


Links That Don't Suck for Thursday, November 13, 2003

America's Web Site brings you some links that don't suck.

I use FeedDemon to read RSS feeds and when I find and read a news item I like, I add the link and description to a Microsoft Word document. These links come from all sorts of web sites.

The Ten Most Violated Homepage Design Guidelines. "There are ten usability mistakes that about two-thirds of corporate websites make. The prevalence of these errors alone warrants attention, especially since they appear on sites with significant investment in usable design."

It's hard to argue with Jakob on this. Seems like somewhere I have a list of a couple of hundred (?? Could me more or less) of home page violations. Jakob has 113 in his latest book.
http://useit.com/alertbox/20031110.html

How to make web pages. "An excellent resource for everything HTML/CSS with the emphasis on web standards," which you may or may not care about.
http://www.htmldog.com/

How to run a design critique. "In the early and middle phases of a project, teams need a way to understand and explore the current direction of the design. The challenge is to create the openness needed for good ideas to surface, while simultaneously cultivating the feedback and criticism necessary to resolve open issues."
http://www.uiweb.com/issues/issue23.htm

Help the Googlebot understand your web site. "Google is the best search engine on the 'net right now. The Googlebot is Google's indexing software. The Googlebot visits billions of web sites over time and records their contents, which makes them available to search. The Googlebot is very smart and works really well. But, like everyone, it could use a little help from its friends."
http://www.scribbling.net/help_the_googlebot_understand_your_web_site

AIFIA Tools Below you will find document templates, process map posters and other tools to help you in your practice. The documents, which have been donated by various people in the organization, have been found to be useful at one time or another. Items can be used in combination or alone as needed." Included are Design Review Checksheets, Design Review Process, Design Scope, Project Overview, Creative Brief, Project Definition and Scope, and Process Maps.
http://aifia.org/tools/

AccessibleNet.org "is an independent, online directory of links and resources about Web accessibility."
http://www.accessiblenet.org/

(a) Annual Color Forecast (. "Color communicates and it sells everything from products and services to ideas and environments. This helps explain why color forecasting has become such a vital process for so many organizations and industries. In normal times, color trends are evolutionary, changing gradually and subtly in step with cultural, social, economic and technological developments. But these are not normal times and, according to the color experts, the stresses that beset our society are having a rather direct influence on the direction of the color palette."
http://www.gdusa.com/feature/0307_index.php

(b) 2004 Color Forecast
http://www.gdusa.com/feature/forecast.php

(c) 2004 Consumer Palette
http://www.gdusa.com/feature/consumer.php

(d) Pantone at Home: Looking for Solace
http://www.gdusa.com/feature/solace.php

Firdamatic "Firdamatic is an online tableless layout generator that allows you to create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze."
http://www.wannabegirl.org/firdamatic/

Flowing and Positioning: Two Page Models - "A detailed discussion of flowing and positioning in CSS."
http://www.positioniseverything.net/articles/flow-pos.html

Float: The Theory - "The basics of standard floating in CSS."
http://www.positioniseverything.net/articles/float-theory.html

CSS Creator: "The generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer."
http://www.csscreator.com/version2/pagelayout.php

Keep CSS Simple. "When I wrote my first Keep it Simple column I assumed the old, overly-complex way of looking at Web site creation was on the way out. Web developers were consciously moving towards a simpler way of making sites, or so I fondly imagined. Not so. The complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn't manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack."
http://www.digital-web.com/columns/keepitsimple/keepitsimple_2003-11.shtml

ColorMatch Remix: "This colorpicker is based heavily upon the code from ColorMatch 5k. I've made it more compatible - it now works in Mozilla, and should also work in Opera, since I'm using a much better slider control. I've also added 3 more colors, bringing the total auto-generated colors to 9, and the ability to export your colors to a Photoshop color table."
http://color.twysted.net/

Web Design Practices. "Web Design Practices is a site devoted to helping designers understand what design practices are currently in use on the Web -- and aims to gather research about the usability of commonly-employed design practices."
http://www.webdesignpractices.com/

The ten reasons ease of use doesn't happen on engineering projects. http://www.uiweb.com/issues/issue22.htm

Study: For Site Cred, Looks Matter "Although consumers taking part in the research were aware of important factors such as quality of information when they were judging a site's credibility, the bells and whistles of its design also held sway, the Stanford study showed." http://www.internetnews.com/IAR/article.php/1491871

Does CSS provide higher ROI than straight HTML?
http://builder.com.com/5100-6374-5085600.html

Branding - From the Point of View of a Usability & Design Consultant "Companies strive to align their outward and inward appearance and presentation with their corporate design or corporate identity (CI), trying to establish their own name and logo as a brand. Getting all of the customer's printed and online materials in visual sync - stationery, business cards, brochures, the intranet, and the corporate Internet site - creates a feeling of unity and identity for people within the organization and an impression of quality and solidity to the outside."
http://wwwext.sapdesignguild.org/editions/edition6/mich_hat.asp

15 Trends in Logo Design. Droplets: Two or more droplets caught in the act of merging, usually symbolic of convergence or union: The Cingular logo is a wonderful example. The effect can also be used to express a technical or scientific association. Sometimes these shapes are flat, but other designs have highlights or shadows that give the impression of dimension."
http://www.gdusa.com/feature/4_03/trends.php

IAnything Goes "What is good for the user, however, is not always good for the business. Users were happy, but businesses failed."
http://www.digital-web.com/columns/ianythinggoes/ianythinggoes_2002-10.shtml

IA: You Do It, You Just Don't Know It "Technical communicators who have learned to think like information architects can greatly improve the user experience of the information products they design. So how can you learn to think like an information architect? Chances are, you already do.
http://www.stc.org/news/Info_Architects.asp

Progress Paralysis "What follows are eight steps to achieving an expertly produced Web presence that satisfies your visitors' needs and helps your staff regain its footing."
http://www.newarchitectmag.com/documents/s=2450/na1002b/index.html

Accountability of Accessibility and Usability "If the people who build Web sites don't hold themselves accountable to a set of basic standards, then someone else, probably the government, will create standards."
http://www.digital-web.com/features/feature_2002-11.shtml

Tackling Maintenance Projects "Most of what one reads about information architecture and interaction design work assumes several things: that you are creating the project from scratch, that you have the ability to alter anything on the screen, and that the project is free of technical or political constraints. None of these assumptions are true when you are dealing with maintenance projects."
http://www.boxesandarrows.com/archives/tackling_maintenance_projects.php

Criteria for optimal web design (designing for usability) "Designing a website that takes into account the human element requires both an understanding of our nature as well as our physiological limitations. Usable websites incorporate human tendencies and limitation into its overall design. The questions below are meant to address some of the more important human factors concerns in the design and building of usable websites."
http://psychology.wichita.edu/optimalweb/

Font usability

http://psychology.wichita.edu/surl/usabilitynews/2S/font.htm

http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm

"A fascinating chart showing text sizes that your browser is showing on top, and actual scanned graphics of those point sizes at the bottom. How far off is your browser?"

http://psychology.wichita.edu/surl/usabilitynews/2S/comparsion.htm

Limitations of online usability testing "Tom Tullis at Fidelity did some research in this area that you all might find helpful:"

It's a PDF file
http://hci.stanford.edu/cs377/nardi-schiano/AW.Tullis.pdf

'Click here': Needless words "Perhaps when the Web was just catching on - in 1995, say - writing "click here" within links made some sense, to teach new surfers the Web's fundamental interface element. But those words are meaningless, especially today when people have already learned that clicking links takes you to a page described within the link."
http://www.ashbykuhlman.net/blog/2002/11/17/0027

The "click here" article is nice, but I have a much more effective demonstration of why you shouldn't use click here. This should cure you.

Usability Views "The A to Z of Usability"
http://www.usabilityviews.com/

Is There A UI Generation Gap? "Kids are better than adults with these tools because it satisfies a need that is greater in kids than adults -- connecting with peers. Which means, typically, that kids are willing to spend longer figuring out these stupid things, because the end result--being in communication with peers--is desirable enough to warrant hurdling over bad interfaces. Adults simply have other things that warrant greater attention. I'm guessing adults are far more facile with, say, Quicken, than teenagers are."
http://peterme.com/archives/00000348.html

Has Your Web Designer Ever Heard of Contrast? "It seems that more and more web sites, and not just small personal web sites, are switching from black to gray text. It sounds crazy, doesn't it? Why would you willingly make your text less readable."
http://www.wowwebdesigns.com/power_guides/ever_heard_of_contrast/

Business-centered design: Designing web sites that sell. "When designing a persuasive architecture, we have to understand and account for every step in the buying process and design for effective calls to action, even if this action is simply to move on to the next step in the process..."
http://guuui.com/issues/01_03.asp

Color Me Calm: Color Theory and Personality. "Color is important -- for those of us in ebusiness, it's an integral part of the way we 'speak' to our visitors..."
http://www.grokdotcom.com/colorandpersonality.htm

Colorblind Web Page Filter "This should be useful to developers and designers."
http://colorfilter.wickline.org/

Breadcrumb Navigation: An Exploratory Study of Usage "This exploratory study was conducted to determine whether participants used the breadcrumb trail as a navigational tool within a site. We found the overall usage of the breadcrumb in site navigation to be low. Breadcrumb users were not found to be more efficient than non breadcrumb users."
http://psychology.wichita.edu/surl/usabilitynews/51/breadcrumb.htm

Success or Failure: Human Factors in Implementing New Systems "Some key factors in the success of any implementation project have little to do with technology. It is important to have the right individuals and to have clear processes in place for decision making and project management. Obtaining buy-in from all of the stakeholders, clearly defining players' roles, knowing how decisions will be reached, and having a clear understanding of the expected outcomes are all critical to success."

This is a PDF file.
http://www.educause.edu/ir/library/pdf/EDU0152.pdf

I don't hate Flash; I just hate what it does to designers "But I'm tired of dealing with the effect it has on those designers. Too easily, it becomes their first line of defense to "save" Web projects that appear to be going astray. It absorbs all their design energies and entices them to disregard the basics -- and simple beauty -- of well-planned hypertext interfaces."
http://smallinitiatives.com/journal13_0_1_0_C.html

Usability Glossary
http://www.usabilityfirst.com/glossary/index_terms.txl

Consumers on the Web: Identification of usage patterns "The results point out that particularly in the case of high frequency users, a small number of sites accounts for a significant percentage of the pages viewed by an individual."
http://firstmonday.org/issues/issue8_4/koiso/index.html

Being User-Centered When Implementing a UCD Process "A typical user-centered design process has three major phases of the work - analysis, design and evaluation - with iterations that cycle between each phase.
http://www.wqusability.com/articles/ucd-on-ucd.html

Ann's Rant: The Time and Place for Usability "So, it's all a matter of timing. Too early and the idea doesn't struggle into life. Too late and a lot of money gets wasted and emotion invested into products and services that don't work as well as they could."
http://usabilitynews.com/news/article1019.asp

Improving WEB Page Revisitation: Analysis, Design and Evaluation "Although the results do not conclusively show advantages for the temporal behaviour of Back, they strongly suggest that revisitation can be improved by providing temporally ordered lists of previously visited pages"
http://www.cpsc.ucalgary.ca/grouplab/papers/2003/03-improving-web-revisitation.ITandT/abstract.html

Identifont: "Welcome to Identifont, the unique font identifier that enables you to identify a font from a sample by answering a series of simple questions. It is ideal if you want to match an existing typeface, or identify a typeface you have seen in a publication. Identifont includes information about fonts from most of the major type libraries, including Adobe, Agfa-Monotype, Berthold, Bitstream, Elsner+Flake, Font Bureau, FontFont, ITC, Letraset, Linotype, P22, and URW++."
http://www.identifont.com/

E-Mail Marketing Works -- Or Hurts. "While more than half of consumers in a recent study made purchases because of e-mail, an almost equal number stopped doing business with a company because of its e-mail practices."
http://redir.internet.com/rss/top-news/www.internetnews.com/IAR/article.php/3101221

Match photos to color schemes. "Royalty-free stock photo agency iStockPro has introduced a nifty Browse by Color dialog which lets you find photos that match your layout's color scheme."
http://www.istockpro.com/browse.php

Quirksmode "It contains more than 150 pages with CSS and JavaScript tips and tricks, and is one of the best sources on the WWW for studying and defeating browser incompatibilities."
http://www.quirksmode.org/

Tables vs CSS for Layout Presentation "I can't think of any kind of visitor to this site who wouldn't be interested in seeing this presentation, the content is excellent, the design is really nice and it's also funny, check it out."
http://www.hotdesign.com/seybold/

Top 10 Problems with HTML Email "Old but still interesting."
http://www.webadvantage.net/tip_archive.cfm?tip_id=220&;&a=1

comment []

trackback []

Wednesday, November 12, 2003

The Daily Sucker Backgrounder

The Daily Sucker contains material that should be considered updates to the book, "Web Pages That Suck." and Son of Web Pages That Suck. I can't see the future -- if I could, I'd be picking lottery numbers and stocks. The Daily Sucker features new sucky design techniques not in existence when the book was written. Since Web designers are stubborn, I also include old sucky techniques featured in the book. Maybe if they see a bad technique featured enough they'll stop using it.

The suckers are based on user input. You see a site that you think sucks and then e-mail the URL to me. No personal pages (personal pages are supposed to reflect the individual's personality, artistic freedom, and lack of taste -- a commercial site is about making money) or Web site designers (it would look like a conflict of interest). If I think there's some merit to your selection, I post it along with some commentary -- and quality commentary helps determine whether I use the suggestion. If you know of a site that qualifies, let me know.

The sucky example will usually be available for only 24 hours (or thereabouts -- weekends and egregious examples are exceptions) -- never to be seen again. Well, probably. Somebody could always suggest them again -- and they do.

E-mail Vincent