BC Logo
  .    BCINFO    .    Personal Web Server    .   Phone/Email Directory    .   Find BC   .    Agora    .
. BCINFO / Web Master's Corner  
Search
 
  BCINFO
. Web Operations
    Welcome
    Visitor Status
    Search Engine
    CGI
    FTP
    Development Tools
  IT
  WWW
 
 
  

Webmaster's Corner

  
 

Web Design Dos and Don'ts

If you've spent some time on the BC website, you've probably noticed that there are some excellent examples of good web design practices and some that could use a little help. This document is intended to help you make the best choices when designing a website.

What is web interface design?

Its basically the process of allowing a user to find the information he needs in the quickest, most logical manner. Its not only about colors and backgrounds, but about navigational choices and search strategies. Its the whole package, from how long did it take my page to load to, did I find what I was looking for in less than 3 clicks.
Less is more. Forget the fancy or colored backgrounds.
While backgrounds can add an element of branding to your site, more often than not, they make your site difficult to view. Web standards support a 90% color contrast between foreground and background colors on the screen. Don't forget, not all screens look like your beautiful 21" MAC and not everyone's vision is perfect.
Fonts should be easy to read and set to relative sizes.
Choose your fonts with the computer screen in mind, not the print world. Allow the user to control the size of the font for his own screen. You can do this by using relative font sizes such as < font size= +1>. Pick a string of fonts to be used, for example: < font face="verdana, geneva, arial, sans-serif">. This choice has fonts that appear both on the MAC and PC.
Avoid the use of frames.
Frames should not be used wherever possible. So that means most website should not use frames. There are 4 good reasons to avoid frames:
  • Frames don't bookmark well.
  • People have to select the "right" frame to print from
  • Search does not work well with framed sites. A search often returns only the "meaty" part of the frameset and looses the navigation
  • Text readers do not work well with framed sites
Usability
All of your website should address usability issues. Any website should be capable of being read efficiently by a text reader. Text readers require elements such as image alt tags and the proper titling of pages. The W3 has extensive literature available on the topic.
MetaTags and Titles
A title tag should always be used to define the purpose of a page. More description should be used in your metatags and keywords. These items will help people find or bookmark your pages. For more information on metatags, consult the search instructions for this website.
Good navigation is consistent navigation
Always place your navigation elements on the same place on a page. Don't be too creative. Users want to find the data and move on. Try to include a search option on all pages.
Write for the Web
Make your documents short and concise. Use bullets, blockquotes and tables to break things up. Try to avoid converting a book to the web.
Avoid the use of pull down menus.
Recent studies have shown that users don't like too many pull down menus. They just don't want to have to find the information. They want it easily visible.
Don't insist a user use a particular browser
There are two main browsers on the market and several others you may never have heard of. Always write your code to meet W3 standards not a particular software vendor.
Avoid opening a new browser window
Opening a new browser window can confuse any user. The use of the back button is so common that you don't want to take away that option. If you must open a new window, be sure the user knows that's what's happening.
Include Contact Information
Always have a way for the user to contact you on every page. This can be done using an email address or a form.

 

  
   [ Contact : Technical Credits : Top of Page ]
This version: http://www.bc.edu/webops/design.html
Copyright © 1997-2000 The Trustees of Boston College.