"The two most important tools an architect has are the eraser in the drawing room and the sledge hammer on the construction site. Frank Lloyd Wright

Transcription

1 Bad Web Design "The two most important tools an architect has are the eraser in the drawing room and the sledge hammer on the construction site. Frank Lloyd Wright Why Study Bad Design? it's easy to teach someone how to create a page but it's difficult to teach them how to design a page The purpose of this is to help people design effective and aesthetically pleasing web pages People often commit the same mistakes over and over By pointing out these mistakes, and being told that they are mistakes, you can avoid them when you design your web pages. 1

2 I don't know what a good idea looks like until I've seen the bad ones. Each new idea sketched out is more informed than the last. Each bad idea illustrates some important aspect of the problem that hadn't been thought about before. Out of every five or six ideas, one or two might be feasible. There are so many variations for designing a Web page, that if you only show one idea, anyone who thinks they can design something (which includes everyone) will point out several alternatives to you, and ask why the idea you're going with isn't the one they just came up with. You want the bad ideas to come out on sketch paper or in prototypes, not in the product. Examples of Bad Design

3 Bad Design xvf.html as.php ( The Top No-Nos in the web Using Frames Gratuitous Use of Technology Under Construction Signs Misusing Graphics Ransom Notes Fonts - and Comic Sans Complex Backgrounds Scrolling Text, Marquees, and Constantly Running Animations Complex URLs Orphan Pages Long Scrolling Pages Lack of Navigation Support No Unique Content Too Many Ideas No Authoritativeness Outdated Information Link Problems Overly Long Download Times 3

4 Using Frames Often web designers break up the browser window with separate sub-windows. These divisions are called frames. Splitting a page into frames is very confusing for users Cannot bookmark the current page and return to it URLs stop working Printouts become difficult Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a link? framesets are not addressable So what's wrong with frames? Some browsers do not support frames at all; others support only one type of frames. If you are using frames on your web site and someone using a non-compatible browser visits your site, things aren't going to display properly, and may not display at all. Search engines do not understand pages with frames very well. This might not be such a big deal for personal pages, but if you run a business, you want as many people as possible to be able to find your site by using a search engine. Often, if you try to print out a page that uses frames, only one frame will be printed (usually the one containing the selection menu, which is likely not what you were interested in). 4

5 Gratuitous Use of Technology Don't try to attract users to your site by bragging about use of the latest web technology Some designers delight in using little "tricks," such as input boxes, opening new browser windows or background music. The first time a visitor experiences these, the visitor may be impressed. However, after a few more visits, the viewer will just be annoyed. When desktop publishing was young, people put twenty fonts in their documents: let's avoid similar design bloat on the Web. Under Construction Signs All good web pages are always under construction, but some web designers still insist on placing a under construction icon on their site. This graphic comes from the designers feelings of insecurity. Problem sites are recognizable with or without under construction signs. Good web designers should not put up a site until they feel comfortable enough to display it without the under construction warning. 5

6 Misusing Graphics No matter how fast an Internet connection is, the graphics on web sites take a long time to load. Large graphics can take several minutes to load When selecting images, they should include only graphics that add value to their site content, and they should "shrink" large graphics using computer software specifically made to re-size images. A web site should not be overly dependent on graphics. For graphics that direct the visitor to an alternate location, designers should include a graphic's text equivalent through navigational bars, and the ALT attribute when using the IMG element. The ALT attribute allows web visitors who are using text based web browsers to view a short text description where graphics are normally displayed. Ransom Notes Fonts It is a problem with desktop designer newbies and now it is a problem with web designer newbies. Designers are caught up in all the available fonts, colors, sizes and styles, and they are using them all. Because text needs to convey information, and not complicate it, good designers must limit themselves to one or two fonts. Also, when text is too small or too large, it is difficult to read. Type for body text should be set to "normal" while headlines should be a little bigger (+1 to +3). Large body copy is distracting, and a sure sign of the web designer's insecurity. "Big" information does not hide a page's lack of content. When emphasizing text, do not underline it. Highlight text by using bold, italics or different colors. Underlining makes words more difficult to read and it also confuses the web visitor, because text that links visitors to alternate locations, is underlined as well. 6

7 Complex Backgrounds A complex background may make a beautiful art piece, but it does a lousy job as a backing for text. It confuses the eye. Designers must remember to use contrasting colors for the background and the text. If a light text color is used on a light background, it will be hard to read, as dark text on a dark background will be hard to read as well. For web visitors unable to view graphics, text should be readable for them as well. Even if the designers have a background image, they must assign a background color for their site that does not blend in with the text. For users who can see graphics, it will not make a difference because they will see the background graphic, and for users who cannot see the background graphic it will make all the difference in the world. Remember, type must always be readable. Scrolling Text, Marquees, and Constantly Running Animations Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision Give your user some peace and quiet to actually read the text! Of course, <BLINK> is simply evil. 7

8 Complex URLs a URL should contain human-readable directory and file names that reflect the nature of the information space Users sometimes need to type in a URL, so try to minimize the risk of typos by using short names with all lower-case characters and no special characters (many people don't know how to type a ~). Orphan Pages All web pages should include a clear indication of what site they belong to, because some users may access the minor pages indirectly without coming through the main home page. Every page on a web site should have a link returning to its home page. Some indication of where they fit within the structure of your information space 8

9 Long Scrolling Pages Only 10% of users scroll beyond the information that is visible on the screen when a page comes up. All critical content and navigation options should be on the top part of the page. More recent studies show that users are more willing to scroll now than they were in the early years of the Web. Still recommend minimizing scrolling on navigation pages, but it is no longer an absolute ban. Lack of Navigation Support Pages should be user-friendly. An index or menu helps the web visitor find the desired information. To support simple navigation between the pages on a web site, designers should use a similar layout between one page and the next. Don't assume that users know as much about your site as you do. They always have difficulty finding information, so they need support in the form of a strong sense of structure and place. Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user. Provide a site map and let users know where they are and where they can go. 9

10 No Unique Content One of the biggest threats to the Internet is the amazing number of people beginning to use it. It is starting to become a large entanglement of meaningless information. Many pages say nothing more than "This is my home page," with a collection of links that connect to the same collections of sites as the last page the web visitor just looked at. The real key is content. Before any site is created, its designer should have something to say. The web site should not restate what other web sites have said, and should not attempt to create the ultimate navigational tool for web visitors (site of links) Too Many Ideas Some people have too many things to say. They are excited about the opportunity to make a web page, but they do not know why they want to make one or what they want to accomplish by doing so. Personal web sites can also run into the difficulty of mixed motifs. Some web designers start out by saying their name, and then talk about the company they work for, and then their pets, and then how much they like scuba diving, and then all the great things that can be done with shell fish. This information is unfocused and scattered, and does not display well on a web site. The web designer's solution is either to focus on one topic or to create a menu page that includes links which bring the visitor to separate pages for each topic. 10

11 No Authoritativeness What makes the web so frustrating is that there are no tests or rules designers have to take or follow before they can post information about anything, and claim they are experts. A web page should be more than another unsubstantiated source of information. Designers should include their names and credentials on their web site, and provide the source materials and raw data to justify any conclusions they may make. Outdated Information Web garden. You need somebody to root out the weeds and replant the flowers as the website changes but most people would rather spend their time creating new content than on maintenance. In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. Of course, some pages are better off being removed completely from the server after their expiration date. 11

12 Link Problems When creating documents, links should be meaningful and readable. The text of links should flow well within the context of the rest of the text, and the text should be able to stand alone as a printable document. Oftentimes designers either make full lines of text link-able or use click-here statements to navigate the web visitor. Instead, keywords should be highlighted and link-able within the text. Overly Long Download Times Traditional human factors guidelines indicate 10 seconds as the maximum response time before users lose interest. On the web, users have been trained to endure so much suffering that it may be acceptable to increase this limit to 15 seconds for a few pages 12

13 Content Content is by far the most important element on any web page. If the page says nothing, the web visitor will leave. By avoiding these mistakes, web designers can use design as a tool to enhance their sites' content, rather then distract from it. Ten Good Deeds in Web Design name and logo search headlines and page titles facilitate scanning hypertext to structure the content space (don t cram all related into one page) product photos (but don t clutter) relevance-enhanced image reduction link titles with meaning! accessible for users with disabilities, Do the same as everybody else 13