Sign in or
Much research has been conducted about the design of web sites. Although trends in design change over time with the development of new technologies (such as Web 2.0) and behaviors of users (such as the tolerance for clicking through multiple pages), following principles of design can enhance usability and function of a web site.
Each person will identify at least five (5) principles of web design and post to this page (See Helpful Links - particularly the Style Guides) . IMPORTANT! Be sure that you are posting to the thread that relates to your principle. You MAY NOT duplicate the posts others have included! Read through the posts before you include your own principles. Be sure to include your NAME at the end of each entry.
The topics are:
- Multimedia elements
Follow these steps:
First, click on the EasyEdit button that opens a simple editor Toolbar. This toolbar allows you to edit this wiki (web) page in real time. Please note that you must SAVE your changes on the Toolbar or they will not appear.
NOTE: You *may* receive a message that someone else is editing at the same time. Make sure you back up your answers in a document (copy and paste) in case this happens. Wait a few minutes and try to save again.
(1) For each of your five posts, include a statement that summarizes the principle (rule) in a sentence (or two) so that others can apply the principle.
(2) Include the source of your principle in APA style.
(3) Include your name at the end of each entry (e.g., P. McGee).
(4) For each of your five posts, include a URL that illustrates the principle -or- an example of what the principle means when it is applied. Be sure to link the URL - use the Easy Edit tool.
(5) When you have posted ALL FIVE principles, go the the Blackboard Assignment for Design Principles and post a message that says "I have completed this assignment."
EXAMPLE - see below.
The principles posted here will be used to assess your work in the wed design course. You will follow these principles as you complete assignments this semester.
The text and content of a site should always be spellchecked and observe correct English (unless the site's in another language) to enhance usability.
Montecino, V. (n.d.). Web Design Principles Checklist. Retrieved June 13, 2009, from George Mason University Web site: http://mason.gmu.edu/~montecin/webdesign.htm
On the forum for this site, people are complaining about the poor grammar and typing and how it makes the site look bad and unprofessional. (Shawna Fuentes)
Designers should make sure their "(b)ackground does not interrupt the text" (from http://www.ratz.com/featuresgood.html). For a good example, see Jennsylvania. (A. McLean)
Georgia and Verdana, "... screen fonts offer excellent legibility for web pages designed to be read directly from the screen." Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Typefaces Retrieved June 10, 2009, from http://www.webstyleguide.com/wsg3/8-typography/4-web-typefaces.html. For an example, visit http://www.everythingesl.net/. (T. De Hoyos).
Font Choices —Different types of fonts say different things about a design. Some look modern, some look retro. Make sure you are using the right tool for the job.(D.Barcenez)9 Essential Principles for Good Web Design Retrieved June 10,2009 fromhttp://psd.tutsplus.com/designing-tutorials/9-essential-principles-for-good-web-design/ example?
According to Adam Baker’s (n.d.) “Theory” on text (Retrieved June 10, 2009 from http://www.merges.net/theory/20010528.html) “The web may be evolving significant multimedia capabilities, but it is still home to primarily one medium: text.” Text is an important element and a good web designer will use it wisely by ensuring that it’s big enough to read; is plain; uses bold and italic lettering for emphasis; has a high-contrast against the background; hierarchy of information is clear to the user; doesn’t interfere with other elements on the page; and is consistent throughout. See BBC news (http://www.bbc.co.uk/) for a good example. (J. Steele)
“The text should be of interest to anyone designing presentations, computer-based reading materials, student computer labs, or educational Web sites.” http://www.math.duke.edu/education/ccp/resources/write/design/ (N. Greathouse) example?
Text and hyperlinks will be ignored if they are located on the right or top where colorful banners usually are. Users go for the small text of the article and ignore the larger more colorful text on the periphery. Editorial, S. (2007). “30 Usability Issues To Be Aware Of.” Retrieved June 12, 2009, from http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/. (J. Sanchez). For example http://www.nymag.com, http://www.espn.com any news site where you ignore top and right banner ads.
letter spacing, proportional or non-proportional, can influence readability. A non-proportional font gives the same amount of space for an 'i' that it gives for an 'o,' while proportional fonts give an 'i' a smaller space than an 'o.' Courier New is a non-proportional font, and Times New Roman and Arial are proportional fonts. Helander et al. (1984) found that proportionally spaced type is read faster than "fixed-width" font. (L. Wooden) http://www.laurenscharff.com/research/AHNCUR.html
Getting type right: "The web is the Wild West of typography. When dealing with type, it's useful to consider that the form and content of a piece of writing are related. The typography and the text itself should form a harmonious whole. A simple principle to bear in mind is that, while headlines should grab the reader's attention, body type should be much 'calmer' as it's often detailed and lengthy".
Garnham, P (2007, May). There's not reason why a piece of work should look great in a book but not on the internet.Practical Web Design,(162), 40. Posted by: Ed Valenzuela
Jakob Nielsen summed it up well when he wrote, "A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read." Instead text should be scannable, which can be achieved by chunking content with subheads, bulleted lists, highlighted keywords, and hyperlinks to provide the user with the option for greater detail if he/she wants to click.
Nielsen, J. (2007). Top 10 mistakes in web design. Retrieved June 13, 2009, from http://www.useit.com/alertbox/9605.html
Digg, the social bookmarking site, is an example of a site that is chock-full of content and a lot of text, but it’s not overwhelming. Rather than presenting long lists of links, Digg uses a hierarchy of subheads and lists that make you want to explore.
Hypertext saves space while providing an overview of topics. Viewers don’t have to waste their time on subtopics they aren’t interested in reading. http://www.angelfoodministries.com/Default.asp? Nielsen, J. (1999). Ten good deeds in web design. Retrieved June 11, 2009 from website: http://www.useit.com/alertbox/991003.html. (Jeanine Palow)
To keep consistency be sure to keep all font size and style the same on every page. Anonymous. (2009). What should a good website look like?, Retrieved June 12, 2009, from http://www.letsdoit.net.au/template.asp?.... Example: http://www.stevenbradbury.com/index.html. (Leila)
“Users hate coming across a PDF file while browsing, because it breaks their flow…PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.” (Top 10 Mistakes in Webdesign – J. Nielsen). Example http://www.nngroup.com/reports/ir/ (S. McGree)
From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.
10 Principles of Effective Web Design. (2008, January 31). Retrieved June 14, 2009, from Smashing Magazine Web site: http://www.smashingmagazine.com/2008/01/31/
10-principles-of-effective-web-design/ Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content. (S. Fuentes)
The use of white space in a website offers a sense of neatness and spaciousness. Avoid cluttering the site with images and media. (from http://www.entheosweb.com/website_design/webdesign_tips.asp) Most information based sites utilize whites pace in their site, but you can see an example of it in the source site for this tip. (J. Naas)
"Colors in a web site should be thematic and consistent"http://www.useit.com/
Color Theory - Color Wheels Using color wheels and color theory to choose the color scheme for your Web site is good sense. This allows you to put together groups of colors that are harmonious and look nice together(D.Barcenez)Color Wheel and ColorTheory:Using Color Harmoniously on Your Web SiteByJennifer Kyrnin, About.com. Retrieved June 10,2009 fromhttp://webdesign.about.com/od/colortheory/Color_Theory_Color_Wheels.htm example?
Al Martinovic (n.d) explains that "Just as you use words to express yourself, colors can be used as an expression as well and are a language all on their own." Retrieved June 10, 2009 from http://www.2createawebsite.com/design/color-psychology.html. See Vandelay Design at: http://vandelaydesign.com/blog/galleries/colorful-websites/ to view "25 Beautifully Colored Websites." (J. Steele)
"The optimal combination for legibility is black on white." Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Visual Design Retrieved June 10, 2009, from http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html. Here is an example http://education.jlab.org/itselemental/ele047.html. (T. De Hoyos).
The main ingredient for good legibility is strong contrast, http://www.sitepoint.com/article/colour-checklists-web-design/ (N. Greathouse) example?
Visited and unvisited links should be two different colors to keep users from getting lost inside a website. Nielson, J. (2004). “Change the Color of Visited Links.” Retrieved June 12, 2009, from http://www.useit.com/alertbox/20040503.html. (J. Sanchez). Also keep text from being in a weird color unless it's a link. For example this site http://www.useit.com/alertbox/20040510.html after you click on some links they should have different colors to see where you've already gone.
One-color wonders: "A 'monochromatic color scheme' conjures up images of old televisions, black-and-white laser printers and pretty boring websites. In actual fact, when used successfully, it's the complete opposite. This type of scheme uses variation in saturation and brightness of a single color to achieve a clean, elegant look that's easy on the eyes".
Yuen, J Jonathan Yuen.Web Designer,(141), 69. Posted by Ed Valenzuela
When light text is placed on a dark background the text may seem to glow and become blurred; this is referred to as halation, and it may make the text harder to read. (L. Wooden) http://www.laurenscharff.com/research/AHNCUR.html
“Participants read all or part of the story that starts with bold text” Norton, J. (2005). What research tells us about designing online content. MERLOT International Conference. Nashville, TN. Be selective in what information you bold – bold important words. http://cybscribe.net/articles/fiveEssentials.php (S. McGree)
Use Nature as an Example (C. Beckwith)
PRINCIPLE: Color palettes chosen from nature are an almost infallible guide to color harmony, particularly if you are not a trained graphic designer. Subtle, de-saturated colors make the best choices for backgrounds or minor elements. Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and even there use them cautiously.
REFERENCE: Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Visual Design Retrieved June 12, 2009, from http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html
EXAMPLE: National Geographic (http://www.nationalgeographic.com/)
Color can have the appeal to change the mood of the user. There can be colors that influence male, females, or users from other countries. (2009). Power of Color in Web Design Retrieved June 14, 2009, from http://www.webguru-india.com/web-site-design-color-power.php (Y. Ponce)
“Color and contrast also show relationships between items, establish importance, and most importantly draw attention.” Fleming, J. (1998). Web Navigation: Defining the User Experience”. Retrieved June 15, 2009, from http://oreilly.com/catalog/navigation/chapter/ch05.html Example: www.utsa.edu The UTSA website uses color to contrast and make a distinction between sections. Color is also used to draw attention to the various sections of the page. Posted by A. Thompson
"Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who won't be experiencing any color coding today." Retrieved June 15, 2009 from AskTog: First Principles of Interaction Design by Bruce Tonazzini http://www.asktog.com/basics/firstPrinciples.html For example, use alt text as well as graphic or color links and run software like http://www.vischeck.com/ to check your images and site. (Jeanette Howe)
"Dense text documents without contrast and visual relief are also hard to read, particularly on low resolution screens."
(Lynch, P., & Horton, S. (2009). Web style guide.New Haven, CT : Yale University Press. p. 351)
When there is a vast expanse of text with no visual relief, viewers may not even bother to read the first sentence. The beginnings of paragraphs may be hard to find, making scanning more difficult.
The free photo links page within the Geek Philosopher website does not use this principle. The text reaches all across the page, each line looking like the next. Making it more difficult to scan and find the information sought. On the other hand, the website Skull A Day, breaks up the text in such a way that the viewer may easily scan each paragraph without getting lost. (LLLindsey)
Allowing visitors a way to get back to the home page on every page of your website. When people get lost, they like to restart at the beginning and go from there. (from http://websitehelpers.com/design/) www.youtube.com does this by having its logo as a link to the home page on every page in the site. Most sites make their logo the link back home.
Avoid the use of popup windows at all costs. Remember, when designing a site, design it how a visitor would like to view it. The visitor knows what they are looking for, we can not assume to know what they want and pop it in their face. (from http://websitehelpers.com/design/) For an example of how annoying this could be for a visitor, go to www.ebaumsworld.com or www.break.com. (J. Naas)
Because of the wide range of computer capabilities and monitor sizes, it is important to design you site for a range of different resolutions. A good way to do this is to design your site in terms of percentages instead of pixels. (from http://www.entheosweb.com/website_design/webdesign_tips.asp) Here is a site that can help explain how to design sites for all resolutions http://www.entheosweb.com/website_design/advanced_web_design.asp. (J. Naas)
"Crowded pages confuse the figure-ground relationships of page elements by creating an ambiguous field of visual texture, with little contrast to draw the eye and few landmarks to help the user understand content organization." (from http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html). For a page so crowded it will make your head hurt, visit the Burlington National UFO Center. (A. McLean)
Having to scroll horizontally for the rest of the information is annoying, but it is also not fun either to have to scroll down the page forever just to be able to get the whole information. The rule: one web page shouldn't require a viewer to page down more than three screens. Of it is more than that then you better go back to the drawing board and re-design your screens. (D.Barcenez):http://www.webdesign.org/web/web-design-basics/design-principles/basic-rules-on-web-design.4316.html example?
Drop down menus should be used sparingly because they are hidden until the user activates them, therefore causing limited visibility and usability. Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Interface Retrieved June 12, 2009, from http://www.webstylhttp://webstyleguide.com/wsg3/6-page-structure/4-page-templates.htmleguide.com/wsg3/4-interface-design/3-interface-design.html. Example of good drop down: http://www.sazoo-aq.org/ (Leila)
Analyze Your Audience and Purpose “Careful planning is crucial. Think about who your readers are, why they are visiting your site, and what they already know about your subject.” http://www.bedfordstmartins.com/markel_tutorial/1a.html (N. Greathouse)example?
According to Williams (n.d.), a good web design avoids “junky advertising” and “counters” on the web page. This example violates both principles: http://www.embroworld.com/new/index.php. Williams, R. (n.d.). Web design features. Retrieved June 10, 2009 from website: http://www.ratz.com/features.html. (Jeanine Palow)
Baby-Duck-Syndrome is the tendency for users to stick to the first design they learn and judge all future sites in relation to the first site. Editorial, S. (2007). “30 Usability Issues To Be Aware Of.” Retrieved June 12, 2009, from http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/. (J. Sanchez). For example http://www.bing.com/search?q=example&go=&form=QBLH looks just like any other search engine because users are used to seeing a list of results in the middle.
“Sliders, also known as carousels, are an organized, interactive and quite smooth way to present information. Sliders are a popular technique because they’re very usable, and you can put a good amount of content into a fixed, compact area…” Cronin, M. (2009, May 19) 8 layout solutions to improve your designs. Smashing Magazine. Retrieved June 11, 2009, from http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/
An example of this is http://www.panic.com/coda/ Posted by Scott Spence
Balance is critical in designing a Web page. That doesn’t mean everything must be centered or symmetrical, but “you should consider the visual weight of each element. Weight can be determined by the size of the object, the value (dark objects weigh more than light objects), and the density of the detail or texture.”
Mitchell, B. (n.d.). Principles of design and page layout. Retrieved June 11, 2009, from http://www.siggraph.org/education/materials/graphics_design/mitchell_S96/chap1_3.htm
A good example of balance is http://www.adidas.com/us/homepage.asp. And even though the balance shifts as you rollover, the page never feels unbalanced.
We think this spells good news for those websites with homepages that extend well beyond the initial screen view. Eyetrack III found that people do typically look beyond the first screen. What happens, however, is that their eyes typically scan lower portions of the page seeking something to grab their attention. Their eyes may fixate on an interesting headline or a stand-out word, but not on other content. Again, this points to the necessity of sharp headline writing. (L. Wooden) http://www.poynterextra.org/eyetrack2004/main.htm
Headings and Subheadings should be used “consistently, same places, same color, and same font.” Norton, J. (2005). What research tells us about designing online content. MERLOT International Conference. Nashville, TN. A website where headings and subheadings are used consistently is… http://www.learner.org/interactives/rockcycle/types.html (S.McGree).
Consistency (C. Beckwith)
PRINCIPLE: Establish a layout grid and a style for handling your text and graphics, and then apply it consistently to build rhythm and unity across the pages of your site. Repetition is not boring; it gives your site a consistent graphic identity that creates and then reinforces a distinct sense of “place” and makes your site memorable. A consistent approach to layout and navigation allows users to adapt quickly to your design and to predict with confidence the location of information and navigation controls across the pages of your site.
REFERENCE: Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Visual Design Retrieved June 12, 2009, from http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html
EXAMPLE: The official U.S. Air Force website (www.af.mil)
When planning your layout be consistent, use colors and fonts, and split your information into sections. REFERENCE: Mackenzie, Colin. (2009). Web Design Tips. Retrieved Jun 14, 2009, from http://www.colin.mackenzie.org/webdesign/layout.html (Y. Ponce)
Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. 10 Principles of Effective Web Design. (2008, January 31). Retrieved June 14, 2009, from Smashing Magazine Web site: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Amazon uses a conventional design that's easy to use. (S. Fuentes)
White space is very important. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.
10 Principles of Effective Web Design. (2008, January 31). Retrieved June 14, 2009, from Smashing Magazine Web site: http://www.smashingmagazine.com/2008/01/31/
10-principles-of-effective-web-design/ White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves. (S. Fuentes)
According to Jacob Nielson’s Alert Box, web users scan a page instead of reading it word for word. One way to make web pages scannable is to use bulleted lists. Nielson, J. (1997). How Users Read on the Web”. Retreived June 15, 2009, from http://www.useit.com/alertbox/9710a.html
Example: www.msn.com MSN uses bullets to organize its news links making it easier for the user to see what news stories as available to read. Posted by (A. Thompson)
Superior design elements, such as how professional the site appeared, how well organized the content was, and how easy it was for users to find information, made the Red Cross site more likable and credible than the American Cancer Society site. Most importantly, users should be able to trust the website. (V. Olague)
Website examples: www.redcross.org and www.cancer.org
Rosaline J. (2007).Designing trust. Stanford Social Innovation Review, 5(1),17.
Retrieved June 14, 2009, from http://proquest.umi.com.libweb.lib.utsa.edu/pqdweb?index=20&did=1181392881&SrchMode=1&sid=8&Fmt=3&VInst=PROD&VType=PQD&RQT=309&VName=PQD&TS=1245036005&clientId=2944
"Photographs and illustrations bring the world into your document in a concise and unforgettable way that saves that proverbial “thousand words” of explanation." Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Graphics Retrieved June 10, 2009, from http://www.webstyleguide.com/wsg3/11-graphics/2-graphics-as-content.html. For an example of the effective use of images from Greece, see this travel agency site http://www.greekhotel.com/cyclades/santorin/kamari/vacation-greece/home.htm. (T. De Hoyos).
Everyone has heard the phrase, "A picture is worth a thousand words" which remains absolutely true even with web design and the right image can take your breath away. See Boston Globe online at http://www.boston.com/bigpicture/ for breath taking images that need little text to accompany them. (J. Steele)
“Images are perhaps the largest files a new web designer will be handling… Web pages should download as quickly as possible…a large (image) file will greatly slow down the download time of a full page. You need to strike a balance between image quality and image size.” Griffiths, P. (2007) Images. HTML Dog. Retrieved June 11, 2009, from http://htmldog.com/guides/htmlbeginner/images/ An example of this is http://htmldog.com/examples/images1.html The image on this page is large enough to show the sifaka, but it does not slow down the loading of the page. by Scott Spence
Use descriptive "alt" attributes within all <img> tags. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. Including the "alt" attribute for each image on a page improves the display and usefulness of your document for people who have text-only browsers. In the example below, the <alt> tag conveys information about the image. (L. Wooden) http://www.lib.umd.edu/itd/web/bestpractices/images.html
"Avoid moving background images!" They distract your eyes from the text. Anonymous. (2006). Free Internet Marketing Tips. Retrieved June 12, 2009, from http://www.freemarketingzone.com/website-design/bad-background-design.html. Example: http://www.angelfire.com/super/badwebs/ (Leila)
"If you would like to use a background picture, select a picture that uses muted colors or format your picture as a watermark. Select text colors which will contrast well with the background picture."Anonymous. (n.d.). The World's Worst Website, Retrieved June 12, 2009, from http://www.angelfire.com/super/badwebs/. Example: http://www.mewspage.pwp.blueyonder.co.uk/ (Leila)
Graphic Text (C. Beckwith)
PRINCIPLE: Graphic typography in gif and jpeg graphics is invisible to screen readers. In general, the best approach is to use plain html text for text, particularly for essential functional elements of the interface, such as navigation links. Graphic text becomes an insurmountable barrier if it means that users cannot navigate your site. (NOTE: Alt-Tags are useful here!) Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Graphics Retrieved June 12, 2009, from http://www.webstyleguide.com/wsg3/11-graphics/7-images-on-the-screen.html
EXAMPLE: Build a Shelf Project (http://www.acehardware.com/sm-ace-bookshelf-project--bg-1300489.html)
Images must be about 70K or less to download fast so the users stay interested. (2009). Images in Web Pages. Retrieved June 14, 2009, from http://www.killersites.com/articles_2005/theory/images-in-webpages.php (Y. Ponce)
Brisk emphasizes the idea to communicate more and decorate less. Creating effective online design should draw attention to the message as appropriate and relevant rather than to dazzle at the design. (V. Olague) Brisk, P. (2009). Don’t Decorate, Communicate. Retrieved June 15, 2009, from http://webdesignfromscratch.com/design-process/dont-decorate-communicate.php
Website example: http://store.altestore.com/
Instead of resizing the original image, zoom in on the most relevant detail and use a combination of cropping and resizing. The best I could do for an example is the following website that shows you an example: http://groups.drupal.org/node/8266.
Nielsen,J. (1999). 10 good deeds in web design. Retrieved June 15, 2009, from http://www.useit.com/alertbox/991003.html. (D. Garcia)
"Provide adequate feedback
Users need to be confident that their actions have been successful. This is usually evident from a distinct change in appearance of the window, e.g. after completing a transaction. If completion will take more than a second or so, a progress or working indicator should be displayed to give the user confidence that the computer is still operating. But avoid presenting the user with unnecessary or irrelevant diagnostic or status information about the internal state of the system. Feedback should be provided at several levels of interaction. At a low-level, users should receive confirmation that they have operated a control successfully – for example, a button immediately indicates when it has been operated by appearing momentarily pressed in. Users should also be informed when a longer sequence of operations has been completed." Retrieved June 15, 2009 from Usability Net: Key principles of user centred design http://www.usabilitynet.org/management/b_design.htm A transactional website with good examples of this kind is https://www.usaa.com/ (Jeanette Howe)
"Interaction supports learning when a student action triggers an event from which the student makes a new decision and facilitates a new action." (P. McGee) See Interactive planetary orbits,http://www.bridgewater.edu/~rbowman/ISAW/PlanetOrbMain.html
Interaction Law of Proximity is the Gestalt principle that we see objects right next to each other as creating a group Editorial, S. (2007). “30 Usability Issues To Be Aware Of.” Retrieved June 12, 2009, from http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/. (J. Sanchez). An example is the MTV Music Awards 2002 home page where the title icons are grouped together and the sponsor icons are grouped together so they are clearly separated. If they were all together they would be hard to distinguish and you might think you were at footlocker with an MTV ad on the left. Picture here at http://www.smashingmagazine.com/images/usability-glossary/proximity.png.
Learners retain 80% by “doing”. http://gwydir.demon.co.uk/jo/index.htm Norton, J. (2005). What research tells us about designing online content. MERLOT International Conference. Nashville, TN. (Jeanine Palow)
Web usability consultant Steve Krug points out that users typically “muddle through” instead of taking time to read instructions. This fact makes a case for keeping Web design and an interactive interface as simple as possible if your goal is for users to learn from your site. Mint.com is a great example of a simple interface that teaches users to organize and manage their finances. Mint makes the process of setting up your account almost like a game, with a forced step-by-step interface that’s practically goof proof. You can’t stray from the course because the site tackles just one step at a time. The user feels empowered after completing each interactive step. Citation:
Krug, S. (2005). How we really use the web. In Don’t make me think: A common sense approach to web usability. (2nd ed., chap. 2). Retrieved June 11, 2009, from http://www.sensible.com/chapter.html
“Interactivity prompts learners to retrieve information from memory, and it's this retrieval practice that prompts the learning improvements.” (Thalheimer, n.d.). An interactive and Multimedia wiki built by “a group of university students” led me to Thalheimer’s article and summed up this theory well by saying: “Practicing the retrieval of information during the learning event, is the best way to ensure that it is retrieved from memory in an on-the-job situation.”
This made me this of the Times Spelling Bee Web site, which uses interactivity to provide a tool for practicing information retrieval – how to spell words. Wouldn’t it be cool if spellers who use this tool to practice could also use it in competition? Thalheimer might argue that it would be more effective than “writing” the words on their hands or in the air.
Thalheimer, W. (n.d.). Stop aiming for interactivity! Workplace Xpert: Your link to training & HR solutions. Retrieved June 11, 2009, from http://www.n-email.com/trimax/interactivity.htm
Accordingly, designing Webs without an underlying theory of Web perception is like building houses without using any guiding principles of construction theory. Moreover diversity, mystery, and coherence that relates to the attitude toward the Web page and behavioral intensions can enhance theoretical understanding of Web page perception. It is vital to consider the user’s understanding and involvement in the website. (V. Olague) Surendra S., Nikunj D., Nancy S. (2005). Understanding web home page perception. European Journal of Information Systems, 14(3), 288-302.
Retrieved June 15, 2009, from http://proquest.umi.com.libweb.lib.utsa.edu/pqdweb?index=33&did=987145471&SrchMode=1&sid=8&Fmt=3&VInst=PROD&VType=PQD&RQT=309&VName=PQD&TS=1245038038&clientId=2944
Website example: http://www.tickettoread.com/about/index.jsp
Be interactive and have self- generating content. "Sites that involve the user and have a sense of fun or adventure will get more hits" and "allowing your visitors to interact with your site they actually create content for you. Script-driven user surveys and forums allow visitors to share information with others and can help shape your site to better serve their needs." Example: http://slashdot.org/ King,A. (2009). What Makes a Great Website?. Retrieved June 15, 2009, from: http://webreference.com/greatsite.html. (D. Garcia)
"Help readers quickly find the desired content"
(McGovern, G. (2001). Web Navigation Design Principles: Part 1. Retrieved June 11, 2009, from ClickZ Web site: http://www.clickz.com/840601)
This is illustrated on the TED.com website. The index page contains easy and very visual ways to categorize listings instantly with a descriptive list of categories in which to explore clearly listed on the left hand column of the page. (LLLindsey)
"Let readers know where they are at all times."
(McGovern, G. (2001). Web Navigation Design Principles: Part 1. Retrieved June 11, 2009, from ClickZ Web site: http://www.clickz.com/840601)
On the TED.com site this principle is evident. On every page of the site, the TED: Ideas worth spreading logo is prominently displayed in the upper left corner. When clicked this logo takes the viewer to the home page, which may not be a principle of design in websites, but I believe it is almost essential. (LLLindsey)
"Users should always be able to return easily to your home page and to other major navigation points in the site." Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Interface Retrieved June 10, 2009, from http://www.webstyleguide.com/wsg3/4-interface-design/3-interface-design.html. Notice how the top navigation bar is consistent on every page: http://www.etsy.com. (T. De Hoyos).
When it comes to navigation, sites should be designed to give the user choices, but "too many choices delivered simultaneously leave most users overwhelmed and likely to abandon the problem altogether" (from http://www.webstyleguide.com/wsg3/4-interface-design/2-navigation.html). Northside ISD's homepage violates this policy by providing too many links on their homepage - NISD's Homepage. (A. McLean)
Navigation –To help easy navigation a menu or table of contents helps. http://www2.mlc-wels.edu/jgrunwald/page.html (N. Greathouse) example?
Flanders (n.d.) recommends not using “mystery meat” navigation “which it is inordinately difficult for users to discern the destinations of navigational hyperlinks—or, in severe cases, even to determine where the hyperlinks are” as found on http://www.jkrowling.com/en/index.cfm. Flanders, V. (n.d.). Web pages that suck. Retrieved June 11, 2009 from website: http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html. (Jeanine Palow)
“Designing navigation is like designing highway signs. The overriding design principle is functionality, not style.” McGovern, G. (2001). Web Navigation Design Principles: Part 1. Retrieved June 15, 2009, from http://www.clickz.com/840601 Example: http://www.surveymonkey.com/ Survey Monkey is designed so that the user can easily find what he/she is looking for. Because of this, navigation of the page is simple and functional. (Posted by A. Thompson)
Text Links: "Include a clearly visible sub-navigation row of text links at the bottom of each page, specially if you have dynamic menus at the top of the page. Add a hierarchical 'sitemap.html' page, and ensure that links in your text include descriptive keywords rather than just 'click here for more'. Text links should be placed strategically to aid readability".
Buckingham, M (2007, June). Search engine optimization: playing by the rules. Practical Web Design,(163), 40. Posted by: Ed Valenzuela Valenzuela
If you are designing for teens or adults avoid using hidden navigation links. Children might like these “mine sweeper” hunts, but most adults do not. Nielsen, J. (2009) Top 10 information architecture mistakes. Retrieved June 11, 2009 from http://www.useit.com/alertbox/ia-mistakes.html. A semi-example of this is the Discovery Kids website at http://kids.discovery.com/ where you have to select a category image before it shows you the links to the other pages on the site. Another example is Real Player http://www.real.com/realplayer/ where many of the links are hidden behind pictures. Posted by Scott Spence
If you're using a graphic or logo as your homepage link, the established place it sis to be located is in the top left corner of your layout, users now expect graphics in this positions to behave a certain way. (L. Wooden) http://www.yourhtmlsource.com/accessibility/navigation.html#REQUIRED
Napawan and Sharon suggest the use of analytic framework for Design Synthesis in navigation. For instance, a website for business transactions or purchasing items require brief or summary info, recommendation, glossary or frequently asked questions, as well as rating, reviews, or testimonials which form part of the comparison tool. (V. Olague) Napawan S., Sharon H. (2003). User analysis: Framework. Visible Language: Research in Communication Design, 37(1), 59-91. Retrieved June 14, 2009, from http://proquest.umi.com.libweb.lib.utsa.edu/pqdweb?index=15&did=351377031 &SrchMode=1&sid=4&Fmt=4&VInst=PROD&VType=PQD&RQT=309&VNa e=PQD&TS=1245032381&clientId=2944 Website example: http://qvisionaz.com/
Have consistent navigation, do not change your navigation features in between sites your users might get lost or confused. website example: http://www.ted.com (the side and top navigation bars stay put and also it has a search box right above the video clips). Nielsen, J. (2009) Top 10 information architecture mistakes. Retrieved June 14, 2009 from http://www.useit.com/alertbox/ia-mistakes.html. (D.Garcia)
"Dead links (links that don't work anymore)" are a bad web design feature (from http://www.ratz.com/featuresbad.html). An example of this principle can be found at King Sites on the Web. Of the 35+ links, only 11 are functional. (A. McLean)
Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them. (D.Barcenez)http://www.useit.com/alertbox/991003.html example?
The first two words (about eleven characters) of a link should be enough for the user to know basically what the link is about. Nielsen, J. (2009) First two words: A signal for the scanning eye. Retrieved June 11, 2009, from http://www.useit.com/alertbox/nanocontent.html An example of this is http://www.barclays.co.uk/ Posted by Scott Spence.
Set new links to open in the same window. If the user wants to open it in a new window they can set their browser functions to do so. Nielsen, J. (2009) Top mistakes in web design. Retrieved June 11, 2009 from http://www.useit.com/alertbox/9605.html Most websites follow this principle. However, the National Library of Virtual Manipulatives http://nlvm.usu.edu is one that doesn’t. Clicking on a link in the home page will open the link in the same window, but clicking on some of the links to a manipulative activity opens a new window. May or may not be annoying. Posted by Scott Spence.
Don't give your links bad titles, for example, "click here". Be sure the link title describes the destination. Chromatic. (2008). Good Hyperlink, Bad Hyperlink. Retrieved June 12, 2009, from http://www.oreillynet.com/onlamp/blog/2004/11/good_hyperlink_bad_hyperlink.html. Example: http://edweb.tusd.k12.az.us/ekowalcz/math/elementary_web_sites.htm (Leila)
“Use color to distinguish visited and unvisited links” http://www.useit.com/alertbox/20031110.html J. Neilsen. Do a search in Google and you should notice the links you visited will change color. Usually they are blue before you click to visit a link and turn purple after you visit them. (S.McGree)
If you mention websites or pages that you would users to view, then you should provide a link. Avoid using the "click here" for links. Keep the links brief, but descriptive. Also, make links open in a new browser window. Hyperlinks. Retrieved June 14, 2009, from http://www.leafdigital.com/class/lessons/writing/9.html (Y. Ponce) Example?
“Link colors coordinate with page colors.” Williams, R. Good Web Design Features. Retrieved June 15, 2009, from http://www.ratz.com/featuresgood.html Example: http://www.webmd.com/ The WebMD site’s links all coordinate with the color scheme of the page. Posted by A. Thompson
When designing a information based website, it is important to realize that people looking for information want it fast and do not want to have to wait for multimedia downloads. (from http://www.edezines.com/tips.shtml) This idea can be seen in almost all encyclopedia sites. For example, www.wikipedia.com. (J. Naas)
When it comes to music, "(u)sually, it is best to skip the tunes, but if you must add music, be sure you provide a way for them to turn it off!" (from http://www.angelfire.com/super/badwebs/). For an example of a site with no music controls (and each page features a different song), visit Seven Oaks Kennel. (A. McLean)
Compared to video, "Still images compress much more efficiently ..." Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Multimedia Retrieved June 10, 2009, from http://www.webstyleguide.com/wsg3/12-multimedia/2-web-multimedia-strategies.html. For an efficient slideshow example, see http://www.opus39.com/. (T. De Hoyos).
Web pages should download quickly and animated graphics should stop or turn off automatically. These principles are not followed on the Harry Potter website. http://www.jkrowling.com/en/index.cfm Williams, R. (n.d.). Web design features. Retrieved June 10, 2009 from website: http://www.ratz.com/features.html. (Jeanine Palow)
“pictorial information is remembered much more easily than text” http://www.usask.ca/education/coursework/skaalid/media/mediarsrch.htm (N. Greathouse) Example?
Although descriptive writing makes up the vast majority of websites (Norton, 2005), multimedia elements can offer a rich tapestry for your website with dynamic text, visual motion and effects, animation and high quality audio and video—giving it a modern or high-tech feel. See the Air Force’s website at http://www.airforce.com/ or the MINI website at http://www.miniusa.com/#/MINIUSA.COM-m (J.Steele)
Graceful degradation or Fault-tolerance is the ability of a website to display critical information if some modules inside the page fail. Editorial, S. (2007). “30 Usability Issues To Be Aware Of.” Retrieved June 12, 2009, from http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/. (J. Sanchez). The red x image is an example of this found in most pages with broken images. A more advanced example is with gmail widgets http://media.photobucket.com/image/gmail%20all%20widgets/blogwork/imageaxdpicture20092f42fGMailCompac.png. The calendar and chat functions may fail to load once in a while but the center mail part will still work (most of the time).
Does animation allow the reader to comprehend the information better? Not necessarily…Norton found, animation should be coupled with descriptive text. Norton, J. (2005). What research tells us about designing online content. MERLOT International Conference. Nashville, TN. (S.McGree). This website offers small interactives for the reader with descriptive text next to it. http://www.learner.org/interactives/rockcycle/change.html
Is Flash the future?: "Because web sites have become more multimedia-oriented, Flash certainly is the in-vogue technology for web designers today. It allows wider creative freedom, and designer relish the rich environment and interactivity it provides. In future, the web will become more of an integrated multimedia showcase, and Flash could ultimately replace HTML as we know it. [...] I would advise against creating web sites entirely in Flash: you could shut out a big percentage of your users. If you must, a parallel HTML version is recommended".
Rusbrook, T (2006, July). Is Flash the future? Practical Web Design,(29), 23. Posted by: Ed Valenzuela. Example: http://www.mtv.com/
Size Matters, Offer a Choice (C. Beckwith)
PRINCIPLE: Although there are certainly favorites, there are no established standards for multimedia formats. There is no single answer to the question: “Which format should I use to ensure that everyone can access my multimedia content?” Instead, the best approach is to offer a range of choices and allow the user to select the one that best suits his or her environment and preferred access method.
REFERENCE: Lynch, P. J., & Horton, S. (2009). Web Style Guide 3rd Edition. Web Style Guide Online, Design and Multimedia Retrieved June 12, 2009, from http://www.webstyleguide.com/wsg3/12-multimedia/4-design-and-multimedia.html
EXAMPLE: “Toy Story 3” Movie Trailers (http://www.apple.com/trailers/disney/toystory3/)
"...Krug’s first law of usability, the web-page should be obvious and self-explanatory." Retrieved June 15, 2009 from Smashing magazine: 10 Principles Of Effective Web Design January 31, 2008 http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ Here's an example of one that is NOT obvious or self-explanatory, so it is not as useful as it could be to either the user or the company that presents it. http://www.theatkinsgroup.com/ (Jeanette Howe)
"Documents written to be read online should be concise and structured for scanning."
(Lynch, P., & Horton, S. (2009). Web style guide. New Haven, CT : Yale University Press. p. 231)
Writing for online viewing should be more concise and less verbose than printed writing. There should be about half as many words used to convey the same idea or concept. On the webpage A Method for Longitudinal Behavioral Data Collection in Second Life, the paragraphs may stretch across the screen, but the headlines are bold and orange so they will be seen first. The first sentence in each paragraph gives an idea of what resources will be found in that paragraph. (LLLindsey)
Regarding forms: "An effective user interface guides users through a task, providing feedback along the way to help avoid errors." (Lynch, P., & Horton, S. (2009). Web style guide.New Haven, CT: Yale University Press. p.250). I found this to be a characteristic of the FAFSA site. The form to fill out is long and it will tell the user if they have made a mistake and gives the user. an opportunity to view the information entered before it is sent allowing user to recheck for errors. (LLLindsey)
Observe accessibility for the disabled guidelines:
- Alliance for Technology Access:http://www.ataccess.org/rresources/webaccess.html(D.Barcenez) example?
People visit websites because they want/need: information, make a purchase or a donation, entertainment, or to become part of a community. http://www.rxlist.com/ibuprofen-drug.htm offers reliable medical information for medical professionals and laypeople/consumers. Lanier, C. (2009). The journey of a thousand miles. Retrieved June 11, 2009 from website: http://www.killersites.com/magazine/2009/the-journey-of-a-thousand-miles/. Flanders, V. (n.d.). Web pages that suck. Retrieved June 11, 2009 from website: http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html. (Jeanine Palow)
When you’re designing a site from scratch, first develop your site map on index cards. Write the name of each page and a short description on individual index cards. Then have three people organize the cards so that the navigation/order makes sense to them. Take notes and look for patterns. Before you start coding, reorganize the cards and rename the pages based on the feedback you received in the card sort activity. I found this tip in a blog entry from someone who attended an online marketing summit, but the usability team where I work uses the card sorting test for every major Web development project on usaa.com, especially for online applications.
Anonymous. (2008). Three key site usability tips. Retrieved June 12, 2009, from http://www.bluetentmarketing.com/blog/three-key-site-usability-tips/
The most common errors in web design are listed on this website. There are about 11 and they are excellent tips. For example: excessive use of graphics, link problems, and usage of pop-ups. (2009). Most Common Errors in Web Design. Retrieved June 14, 2009, from http://www.webguru-india.com/website-design-errors.php (Y. Ponce)
This so-called TETO-principle (“Test Early, Test Often”) should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout. 10 Principles of Effective Web Design. (2008, January 31). Retrieved June 14, 2009, from Smashing
Magazine Web site: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/This site has a list of links that don’t work in Firefox… should’ve tested! (S. Fuentes)
“Selective attention is very powerful and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation.” Including aggressive animations. Nielsen, J. (2009). Top 10 Mistakes in Web Design Retrieved June 15, 2009, from http://www.useit.com/alertbox/9605.html. Here is an example of a visually loud animated robot advertisement; it is easy to ignore once you know it’s an ad. View the far right hand column http://kids.nationalgeographic.com/. (T. De Hoyos)
According to Jacob Nielson’s Alert Box, use old words when writing for findability. Nielson, J. (2006). “Use Old Words When Writing for Findability.” Retrieved June 15, 2009, from http://www.useit.com/alertbox/search-keywords.html Example: www.yahoo.com In a Yahoo search, when you use old words, more sites come up than when using “modern” terms. Posted by A. Thompson
Standard for screen resolution is 800 (width) by 600 (height). If you design for a higher resolution the user may have to scroll back and forth or up and down to view your full content. Retrieved June 15, 2009 from Web Design Principles Checklist by Virginia Montecino, http://mason.gmu.edu/~montecin/webdesign.htm For example, PBSKids.org places all of its front page navigation within a 800x600 area http://pbskids.org/ (Jeanette Howe)
Content (C. Beckwith)
PRINCIPLE: The best way to get people to come back to your site again and again is by having content they need, and then updating this content on a regular basis.
REFERENCE: Flanders, V. (n.d.). Web pages that suck. Retrieved June 12, 2009 from website: http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html
EXAMPLE: The Drudge Report (http://www.drudgereport.com/) .
According to Royal, Dreamweaver doesn't handle QuickTime streaming video well at all. Thus, it is necessary to create a text file with the QuickTime server video file address in it, save the file with ".mov" extension, and refer to this file in the html code under the tag of "embed." This way, QuickTime, which is smarter than any browser, finds the streaming server (rtsp://) address. (V. Olague)
Website example: http://www.mediacollege.com/video/format/quicktime/streaming/example.html
Friendly URLs. Make sure that your url is correlated to the contents of the page, this will make it easier for search engines and visitors. Also, if you have a page with several words use dashes or underscores no spaces. Website example: http://www.southwest.com/travel_center/travel_center.html (notice the under scores and dashes) Lough, C. (2009). Web Design Basics-Good Web Design Practices. Retrieved June 15, 2009, from http://www.noamdesign.com/Web-Design-Blog/web-design-basics-good-web-design-practices/. (D. Garcia)
Use a Tracking Tool: use a tracking tool to see the popularity, duration, and path that visitors take on your site. This will help gauge the effectiveness of your pages.
Website example: http://my4.statcounter.com/project/standard/stats.php?account_id=1222777&login_id=5&code=2741c9f0243ccefc5377a3ae581e4ec9&guest_login=1&project_id=1773020
(this will give you an example of what information a tracking tool can give the webmaster). King, A. (2009) What Makes a Great Website?. Retrieved June 15, 2009, from http://www.webreference.com/greatsite.html. (D.Garcia)
Norton, J. (2005). What research tells us about designing online content. MERLOT International Conference. Nashville, TN.
Royal V. H. (2001). Website design sites. Phi Delta Kappan, 83(1), 8-10. Retrieved June 14, 2009, from http://proquest.umi.com.libweb.lib.utsa.edu/pqdweb?index=21&did=79660524&SrchM=1&sid=4&Fmt=3&VInst=PROD&VType=PQD&RQT=309&VName=PQD&TS=1245034323&clientId=2944
Latest page update: made by drpmcgee
, Jul 23 2009, 5:48 AM EDT
(about this update
About This Update
Moved from: Home
No content added or deleted.
- complete history)
Keyword tags: None (edit keyword tags)
More Info: links to this page
There are no threads for this page. Be the first to start a new thread.