Shelby Simmons
EDET 703, Spring 2012
Mistakes in WWW Design
February 1, 2012
Web design has changed over time. At one point in time, almost anything passed for inspired design and users had low, few, or no expectations of the medium. Today there are websites and pages designed for a wide variety of purposes and designed to suit specific objectives. Several online journals and self-styled gurus judge pages a present awards for web design. A review of several “mistakes in web design” lists generates the following top ten mistakes in web design:
1. Overly Long Download Times
A website typically has about 10 seconds as the maximum response time before users lose interest. Since “bandwidth is getting worse, not better, as the Internet adds users faster than the infrastructure can keep up” keeping file sizes, scripts, and multimedia features to a manageable size and length will promote usage of your site (Nielsen, 2006, pp. 10). The longer it takes to download the site, the smaller your audience. Why discourage people with dial-up, dsl, basic cable speeds, or older computers from using your site?
Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. There is also music and no quick and easy way to turn the music off, other than closing your browser. There are many other mistakes on the homepage that will be highlighted later. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling.
2. 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. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text!” (Nielsen, 2006, pp. 3). These animations and moving images obscure the purpose and professionalism of any site. Unless there is a style and design reason to use these, such as constantly changing information including stock prices or game scores, they should be avoided.
Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. Not only is there a scrolling message across the top of the home page, above the navigation, but there are also hovering butterflies and bubbles as well. WARNING, the site images include nudes, so please avoid if offended.
3. Orphan Pages
“Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space” (Nielsen, 2006, pp. 5). Even if the page will return users to the homepage, if there is no link to the page other than a direct link, the page can be considered an orphan.
Example: http://ccsdtitle1.org/title-i-blog.html this page is hidden from current navigation and you cannot reach it from the main website, which is http://ccsdtitle1.org. This is one of the websites I manage, this page will remain hidden until I update it to match the previous blog page: http://ccsdtitle1.weebly.com/title-i-blog.html
4. Long Scrolling Pages
“All critical content and navigation options should be on the top part of the page. Users will only scroll if they believe that there is something useful lower down the page” (Nielsen, 2006, pp. 6).
Example: http://www.serene-naturist.com/ this site’s homepage is very long. It is surprising that the designer needed more than one page after the first, but the other pages of the site repeat the mistakes of the first. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling. A second example is http://pinesol.com, which actually scrolls in four directions.
5. Lack of Navigation Support
“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” (Nielsen, 2006, pp. 7). Just like getting lost in a mall, getting lost online is no fun and does not encourage repeat visits. Site maps, breadcrumbs, and explicit menus carried from page to page help counteract this mistake. Using multiple fonts, images, and locations for the navigation are also examples of this mistake. Some pages also use random images as unlabeled links.
Example: http://pinesol.com and http://www.genicap.com/Site/ have images as links but very little explanation, text, or mapping to support the user navigating the site for the first, or third, time.
6. Forgoing Web page titles
“Many Web designers don’t set the title of their Web pages. This is obviously a mistake, if only because search engines identify your Web site by page titles in the results they display, and saving a Web page in your browser’s bookmarks uses the page title for the bookmark name by default” (Perrin, 2012, pp. 10). While this may be easy to forget when you are new to hard-coding a webpage or learning to use a design program, professional developers should never forget to use a simple, unique, and descriptive title for every page.
Examples: http://www.wesleyburt.com/drawingsamples.html and http://www.jeffkoons.com/ are the top two results for “untitled document”. The title for each of these pages? “Untitled Document” which is a shame given the excellent artwork.
7. Going overboard with images
“With the exception of banners and other necessary branding, decorative images should be used as little as possible. Use images to illustrate content when it is helpful to the reader, and use images when they themselves are the content you want to provide. Do not strew images over the Web site just to pretty it up or you’ll find yourself driving away visitors. Populate your Web site with useful images, not decorative ones, and even those should not be too numerous. Images load slowly, get in the way of the text your readers seek, and are not visible in some browsers or with screen readers. Text, on the other hand, is universal” (Perrin, 2012, pp. 6).
Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling. A second example is http://pinesol.com, which looks like a scrapbook, a very colorful scrapbook about a cleansing fluid.
8. Failing to provide information that describes your Web site
“Every Web site should be very clear and forthcoming about its purpose. Either include a brief descriptive blurb on the home page of your Web site or provide an About Us (or equivalent) page with a prominent and obvious link from the home page that describes your Web site and its value to the people visiting it” (Perrin, 2012, pp. 1) .
Example: http://www.genicap.com/Site/ A visit to this homepage provides no information about what the company is or does, or if it is in fact a company. At least the rest of the site is consistent with that first impression.
9. Poor text contrast or placement
Communication on the internet is primarily text based. In order to read text it needs to have enough contrast with the background color of the page to be visible. For the blind or those who have visual impairments, text readers may help them experience the internet, however if text is displayed in image files without descriptions the site becomes essentially blank. Moreover, text as images may cause large sections of text to become unreadable due to image blockers or stretching of images. Allowing text to continue to the point where readers must horizontal scroll also decreases the ease of use and readability of the site.
Example: http://www.sixtiespress.co.uk/ This site uses various colors and fonts throughout the website and places columns and paragraphs too close together. On some pages, there is blue text on a bluish background.
10. Broken links
Broken links are links to other web pages that do not, in fact, actually lead to the intended pages. Search engines and blogs commonly have this problem. Broken links also tend to come from Search Engine Optimization companies that create pages and links to promote a website or business, but then fail to maintain the sites. More information on broken links can be found here: http://www.seoptimise.com/blog/2011/03/what-checking-broken-links-can-teach-you-about-the-web-and-linking-out.html
Example: http://www.google.com/search?q=internet&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a While many of the links Google compiles do work, as you move through the 7,580,000,00 results for “Internet” you find many broken links that lead to the 404 “page not found” message seen here: http://www.ebonphire.com/current_projects
There are many other errors listed online that damage the readability, functionality, and commercial value of a website, but hopefully this summary is beneficial to new would-be web moguls and design novices.
References:
Flanders, V. 1996-2012 Biggest mistakes in website design. Accessed 1 February 2012 from: http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html
Nielsen, J. (2006). Jakob Nielsen's top ten mistakes in web design. Accessed 1 February 2012 from: http://www.usabilitynet.org/management/b_mistakes.htm
Perrin, C. (2012). 10 common website design mistakes to watch out for. Accessed 1 February 2012 from: http://www.techrepublic.com/blog/10things/10-common-web-design-mistakes-to-watch-out-for/259
EDET 703, Spring 2012
Mistakes in WWW Design
February 1, 2012
Web design has changed over time. At one point in time, almost anything passed for inspired design and users had low, few, or no expectations of the medium. Today there are websites and pages designed for a wide variety of purposes and designed to suit specific objectives. Several online journals and self-styled gurus judge pages a present awards for web design. A review of several “mistakes in web design” lists generates the following top ten mistakes in web design:
1. Overly Long Download Times
A website typically has about 10 seconds as the maximum response time before users lose interest. Since “bandwidth is getting worse, not better, as the Internet adds users faster than the infrastructure can keep up” keeping file sizes, scripts, and multimedia features to a manageable size and length will promote usage of your site (Nielsen, 2006, pp. 10). The longer it takes to download the site, the smaller your audience. Why discourage people with dial-up, dsl, basic cable speeds, or older computers from using your site?
Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. There is also music and no quick and easy way to turn the music off, other than closing your browser. There are many other mistakes on the homepage that will be highlighted later. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling.
2. 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. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text!” (Nielsen, 2006, pp. 3). These animations and moving images obscure the purpose and professionalism of any site. Unless there is a style and design reason to use these, such as constantly changing information including stock prices or game scores, they should be avoided.
Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. Not only is there a scrolling message across the top of the home page, above the navigation, but there are also hovering butterflies and bubbles as well. WARNING, the site images include nudes, so please avoid if offended.
3. Orphan Pages
“Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space” (Nielsen, 2006, pp. 5). Even if the page will return users to the homepage, if there is no link to the page other than a direct link, the page can be considered an orphan.
Example: http://ccsdtitle1.org/title-i-blog.html this page is hidden from current navigation and you cannot reach it from the main website, which is http://ccsdtitle1.org. This is one of the websites I manage, this page will remain hidden until I update it to match the previous blog page: http://ccsdtitle1.weebly.com/title-i-blog.html
4. Long Scrolling Pages
“All critical content and navigation options should be on the top part of the page. Users will only scroll if they believe that there is something useful lower down the page” (Nielsen, 2006, pp. 6).
Example: http://www.serene-naturist.com/ this site’s homepage is very long. It is surprising that the designer needed more than one page after the first, but the other pages of the site repeat the mistakes of the first. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling. A second example is http://pinesol.com, which actually scrolls in four directions.
5. Lack of Navigation Support
“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” (Nielsen, 2006, pp. 7). Just like getting lost in a mall, getting lost online is no fun and does not encourage repeat visits. Site maps, breadcrumbs, and explicit menus carried from page to page help counteract this mistake. Using multiple fonts, images, and locations for the navigation are also examples of this mistake. Some pages also use random images as unlabeled links.
Example: http://pinesol.com and http://www.genicap.com/Site/ have images as links but very little explanation, text, or mapping to support the user navigating the site for the first, or third, time.
6. Forgoing Web page titles
“Many Web designers don’t set the title of their Web pages. This is obviously a mistake, if only because search engines identify your Web site by page titles in the results they display, and saving a Web page in your browser’s bookmarks uses the page title for the bookmark name by default” (Perrin, 2012, pp. 10). While this may be easy to forget when you are new to hard-coding a webpage or learning to use a design program, professional developers should never forget to use a simple, unique, and descriptive title for every page.
Examples: http://www.wesleyburt.com/drawingsamples.html and http://www.jeffkoons.com/ are the top two results for “untitled document”. The title for each of these pages? “Untitled Document” which is a shame given the excellent artwork.
7. Going overboard with images
“With the exception of banners and other necessary branding, decorative images should be used as little as possible. Use images to illustrate content when it is helpful to the reader, and use images when they themselves are the content you want to provide. Do not strew images over the Web site just to pretty it up or you’ll find yourself driving away visitors. Populate your Web site with useful images, not decorative ones, and even those should not be too numerous. Images load slowly, get in the way of the text your readers seek, and are not visible in some browsers or with screen readers. Text, on the other hand, is universal” (Perrin, 2012, pp. 6).
Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling. A second example is http://pinesol.com, which looks like a scrapbook, a very colorful scrapbook about a cleansing fluid.
8. Failing to provide information that describes your Web site
“Every Web site should be very clear and forthcoming about its purpose. Either include a brief descriptive blurb on the home page of your Web site or provide an About Us (or equivalent) page with a prominent and obvious link from the home page that describes your Web site and its value to the people visiting it” (Perrin, 2012, pp. 1) .
Example: http://www.genicap.com/Site/ A visit to this homepage provides no information about what the company is or does, or if it is in fact a company. At least the rest of the site is consistent with that first impression.
9. Poor text contrast or placement
Communication on the internet is primarily text based. In order to read text it needs to have enough contrast with the background color of the page to be visible. For the blind or those who have visual impairments, text readers may help them experience the internet, however if text is displayed in image files without descriptions the site becomes essentially blank. Moreover, text as images may cause large sections of text to become unreadable due to image blockers or stretching of images. Allowing text to continue to the point where readers must horizontal scroll also decreases the ease of use and readability of the site.
Example: http://www.sixtiespress.co.uk/ This site uses various colors and fonts throughout the website and places columns and paragraphs too close together. On some pages, there is blue text on a bluish background.
10. Broken links
Broken links are links to other web pages that do not, in fact, actually lead to the intended pages. Search engines and blogs commonly have this problem. Broken links also tend to come from Search Engine Optimization companies that create pages and links to promote a website or business, but then fail to maintain the sites. More information on broken links can be found here: http://www.seoptimise.com/blog/2011/03/what-checking-broken-links-can-teach-you-about-the-web-and-linking-out.html
Example: http://www.google.com/search?q=internet&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a While many of the links Google compiles do work, as you move through the 7,580,000,00 results for “Internet” you find many broken links that lead to the 404 “page not found” message seen here: http://www.ebonphire.com/current_projects
There are many other errors listed online that damage the readability, functionality, and commercial value of a website, but hopefully this summary is beneficial to new would-be web moguls and design novices.
References:
Flanders, V. 1996-2012 Biggest mistakes in website design. Accessed 1 February 2012 from: http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html
Nielsen, J. (2006). Jakob Nielsen's top ten mistakes in web design. Accessed 1 February 2012 from: http://www.usabilitynet.org/management/b_mistakes.htm
Perrin, C. (2012). 10 common website design mistakes to watch out for. Accessed 1 February 2012 from: http://www.techrepublic.com/blog/10things/10-common-web-design-mistakes-to-watch-out-for/259
RSS Feed
