CONTENTS

Key Design Points

User-centered design

Navigation aids

No dead-end pages

Users direct access

Design for the Disabled

Naming conventions

Bad Design Features

Key Design Points

• Create a consistent look and feel for the web site including footers.
• Separate information into manageable page-sized chunks.
• Provide cues for the reader about the web's information structure and contents, context, and navigation.
• Users should be within 3 hyperlinks of all information from the front page and should be able to get back to the front page with one click.
• Use links to connect pages along the routes of use and user thinking.
• Design your pages so that everything horizontally is viewable at a screen resolution 0f 600X 800. And vertically the most important elements are viewable.
• Include alt tags on all buttons and important images
• Naming conventions should have no spaces and be consistent
• Keep your file and folder structure orderly, consistent and intuitive and do not include files not in use.

User-centered design

Graphic user interfaces were designed to give people direct control over their personal computers. Users now expect a level of design sophistication from all graphic interfaces, including Web pages. The goal is to provide for the needs of all of your potential users, adapting Web technology to their expectations, and never requiring the reader to simply conform to an interface that puts unnecessary obstacles in their paths.

This is where your research on the needs and demographics of your target audience is crucial. It's impossible to design for an unknown person whose needs you don't understand. Create sample scenarios with different types of users seeking information from your site. Would an experienced user seeking a specific piece of information be helped or hindered by your home page design? Would a novice be intimidated by a complex text-based menu? Testing your designs and getting feedback from users is the best way to see whether your design ideas are giving users what they want from your site.

Clear navigation aids

At the current state of web technology most user interactions with Web pages involve navigating hypertext links between documents. The main interface problem in Web sites is the lack of a sense of where you are within the local organization of information. Clear, consistent icons, graphic identity schemes, and graphic or text-based overview and summary screen can give the user confidence that they can find what they are looking for without wasting time.

Users should always be able to easily return to your home page, and to other major navigation points in your local site. These basic links, that should be present on every page of your site, are often graphic buttons that both provide basic navigation links, and help create the graphic identity that signals the user that they are still within your site domain. For example, in the Netscape corporate site this bar of buttons appears at the foot of every page:

Graphic has been reduced from the original size. www.netscape.com

The button bar is useful (lots of choices in a small space), predictable (it is always there, at the bottom of every page), and provides a consistent graphic identity to every page in the Netscape site.


Providing a rich set of graphic navigation and interactivity links within your Web pages will pull the user's attention down the page, weaning them away from the general-purpose browser links, and drawing them further into your content. By providing your own consistent and predictable set of navigation buttons you also help give the user a sense of your site's organization, and makes the logic and order of your site visually explicit.

No dead-end pages

Every Web page should contain at least one link. "Dead-end" pages pages with no links to any other local page in the site are not only a frustration to users, they are often a lost opportunity to bring browsers into other pages in your site.

Web pages often appear with no preamble: readers often make or follow links directly to subsection pages buried deep in the hierarchy of Web sites. Thus they may never see your Home Page or other introductory information in your site. If your subsection pages do not contain links back up the hierarchy, to the home page or to local menus pages, the reader is essentially locked out of access to the rest of your Web site:



Users direct access

The goal here is to provide the user with the information they want in the fewest possible steps, and in the shortest time. This means you must design an efficient hierarchy of information, to minimize the number of steps through menu pages. Interface studies have shown that users prefer menus that present a minimum of five to seven links, and that users prefer a few very dense screens of choices over many layers of simplified menus.



Design for the disabled

Not every user of your site will be able to take advantage of the graphics you offer on your pages, and a number of users may be visually impaired. One of the beauties of the Web and HTML is the ability to build in "alternate" messages ("ALT" tags in HTML) so that users without graphics capabilities can still understand the function of graphics on your pages. Using specially designed software, blind users can hear (via synthesized speech) the alternate messages you supply along with your graphics, and so will not completely miss the content of your pictures and graphic navigation buttons. If you will be using graphic menu systems for navigation, these text-based alternate menus will be an especially important aid to users without the ability to see your graphics.

Provide context
( or lose the reader)

Readers need a sense of context, of their place within an organization of information. In paper documents this sense of "where you are" is a mixture of graphic and editorial organizational cues supplied by the graphic design of the book, the organization of the text, and the physical sensation of the book as an object. Electronic documents provide none of the physical cues we take for granted in assessing information.

When we see a Web hypertext link on the page we have few cues to where we will be led, how much information is at the other end of the link, and exactly how the linked information relates to the current page. Even the view of individual Web pages is restricted for most users.

Naming conventions and file structures

Should all of the HTML files go in one folder and all images in another? If you have a small site and only a handful of each, this could be a simple way to go. But as your site grows, so will the number of files, and sorting them into subcategories will make them simpler to locate and change. Think about alternatives that make sense for your particular setup. What about grouping the files by model, so each product has its own folder? Or you could organize everything by date, if you are constantly adding new content.

There is no right or wrong way to organize this stuff. It's all up to you. But if you're in charge of maintaining the site, you'll want the structure to make sense to you. Just think about the type of content you'll be dealing with and map out the backend accordingly.

You should also be mindful of the names of your files and directories (directory is another word for folder — basically, it's just a container for files). When you're first building a site, you probably don't give a whole lot of thought to that type of stuff — you just name everything something that's intuitive to you so you don't need to sit and remember what each file or folder contains. But the people who visit your site may find your nicknames and shorthand a little baffling.
"But, hey," you might say. "We're just talking about filenames. Users will never see any of that stuff, except in the URLs, and who pays attention to that garbage anyway?" But users often do look at URLs, and some use them to navigate. Somebody could do a search and end up at a page deep within your site, and then he or she might get back to the root level by erasing all the extra stuff from the URL. For example, a user might cut http://www.stapler-co.com/guns/themonster.html down to http://www.stapler-co.com/guns/, hoping to see a complete list of stapler guns. If the URLs are nonintuitive, then that is just one more barrier between visitors and the content they want — and such barriers are to be avoided whenever possible.

It's also better to have short, memorable names, resulting in URLs that roll off the tongue, than names leading to URLs that have to be scrawled on two or three pieces of paper. Remember to pay attention to case too. Depending on what type of server your site is on, "a" can be an entirely different animal than "A".

To keep things consistent and simple, use lowercase letters for all folder and filenames. Servers tend to get confused by strange filenames, so be kind to them. Don't use spaces or questionable characters (like |, &, *, %, etc.). Only use periods before the extension (like .html or .gif), and don't include more than one extension in your filename:
OK: deluxe_model_stapler.gif
Not OK: deluxe.model.stapler.map.gif

Bad Design Features

Not all of these I necessarily agree with but they are worth consideration.

Backgrounds
Colour combinations of text and background that make the text hard to read
Busy, distracting backgrounds that make the text hard to read

Text
Text that is too small to read
Text crowding against the left edge
Text that stretches all the way across the page
Centred type over flush left body copy
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and italic all at once
Underlined text that is not a link

Links
Default blue links
Links that are not clear about where they will take you
Dead links (links that don't work anymore)

Graphics
Large graphic files that take forever to load
Meaningless or useless graphics
Thumbnail images that are nearly as large as the full-sized images they link to

Graphics with no alt labels
Missing graphics, especially missing graphics with no alt labels
Graphics that don't fit on the screen (assuming a screen of 640x460 pixels)

Animations
Under construction" signs, especially of little men working
Animated "under construction" signs
Animated pictures for e-mail
Animations that never stop
Multiple animations that never stop

Junk
Counters on pages--who cares
Junky advertising
Having to scroll sideways (640 x 460 pixels)
Too many little pictures of meaningless awards on the first page

Navigation
Unclear navigation; over complex navigation
Complicated frames, too many frames, unnecessary scroll bars in frames
Orphan pages (no links back to where they came from, no identification)
Useless page titles that don't explain what the page is about

General Design
Entry page or home page that does not fit within standard browser window (800 x 600 pixels)
Frames that make you scroll sideways
No focal point on the page
Too many focal points on the page
Navigation buttons as the only visual interest, especially when they're large (and dorky)
Cluttered, not enough alignment of elements
Lack of contrast (in colour, text, to create hierarchy of information, etc.)
Pages that look okay in one browser but not in another

Src http://www.baddogdesign.com/webdesignprocess.html