The Biology Project Web Lecture Series

A Practical Introduction to Web Design

Denice Warren, Instructional Specialist, Dept. of Biochemistry

Simple tests to make sure your site is well designed
  1. The squint test
    When you squint your eyes at your home page, do the clickable elements stand out?

  2. The flip test
    When you flip between pages of your web site, does it look and feel like you're still at the same web site?

  3. The usability test
    Give a group of naive users a task to accomplish on your web site. Watch them move through the site and look for areas where they hesitate, click on the wrong links, or seem to get confused or frustrated.

  4. The card sorting test
    Write the names of all of the major links in your site onto note cards. Give those cards to naive users and have them group the cards into categories. Watch for patterns that emerge that may help you organize the links on your web site.

  5. The systems test
    Be sure to view your web site from different systems. You want to know how the site works on a Mac, PC and Unix machine. You also want to know how it works on at least the 2 most recent major releases of Netscape and Internet explorer. Test it from home on a 28.8 modem, and also see how it looks on a 640x480 monitor in 8-bit color. Try printing a page to see if there are any problems with printability.

Ways to get people to your site

  1. Integrate your web site address into all your promotional materials, including business cards. Try distributing your URL printed on posters, bookmarks, pens, t -shirts, post-it notes, etc.

  2. Choose a web address that is easy to remember and is easy to give to people over the phone (avoid too many slashes, abbreviations, and specials characters like _ and ~)

  3. Register your site with all the major search engines (www.submit-it.com is a good service) and make your pages search-engine friendly.

  4. Make sure your site is easy to find from your unit/university's home page.

Elements to keep people coming back to your site

  1. Update your site often.

  2. Give users a way to contribute to your site.

  3. Organize information on your site efficiently¯don't compromise usability for the sake of fancy graphics and animations.

Good resources on web design

http://info.med.yale.edu/caim/manual/
The Web Style Manual by Patrick Lynch at the Yale Center for Advanced Instructional Media is a thorough, academic approach to web page design. It is well organized and worth visiting if only to see a very well- designed web site.

"Web Site Usability: A Designer's Guide" by Jared Spool is full of good feedback from UIE's extensive experience with designing usability studies. Some of their results are truly surprising! You can order the book at their web site. http://www.uie.com

http://www.useit.com/
Jakob Nielsen's Usable Information Technology web site is an efficient resource for learning about major issues in web site usability and design.

http://www.lynda.com/books.html
These books on web graphics by Lynda Weinman are the absolute best. Especially recommended is "Designing Web Graphics 2: How to Prepare Images and Media for the Web."

http://www.highfive.com
High Five: Excellence in Site Design is there to promote fine design and high style on the Web. These folks have brought web design to a new level. Visit their bookstore for a comprehensive list of the best books on web design.

http://www.ippa.org
The Internet Professional Publishers Association is a beautiful site geared towards professionals involved in New Media and the Internet. Like the High Five site, IPPA has site reviews and articles from leaders in the field.

"How to Use HTML 3.2" by Scott Arpajian is the best book available for learning HTML. It has pictures and is easy to follow. Even for those using WYSIWYG editors, this book is handy for those times when you have to modify the code manually.

Quick tips from experts

Top Ten Mistakes in Web Design (http://www.useit.com/alertbox/9605.html)

  1. Using Frames
  2. Gratuitous Use of Bleeding-Edge Technology
  3. Scrolling Text, Marquees, and Constantly Running Animations
  4. Complex URLs
  5. Orphan Pages
  6. Long Scrolling Pages
  7. Lack of Navigation Support
  8. Non-Standard Link Colors
  9. Outdated Information
  10. Overly Long Download Times

Five Ways to Improve a Site (http://www.ippa.org/essays/essay2.html)

  1. For each and every image on your pages, include a HEIGHT= and WIDTH= tag.
  2. If you use JPEGs, do not use the highest compression settings.
  3. Use GIFs for signage, images with long horizontal runs of like color, images with few colors, and those that feature large, uniform, one color areas. For photographic imagery, use JPEGs.
  4. To the maximum extent possible, program for cross-browser performance.
  5. Do not base your opening page on a plug-in¯this includes Shockwave.

Sites linked to at this lecture are available at: http://www.arizona.edu/dkw/123.html

All contents copyright © ABOR 1997-8 Reproduction permitted for educational, not-for-profit use.