Guidelines for GOOD Web Design

Our Goals• See why Web design guidelines are necessary• Discover how to find the defacto standard for

every aspect of your site's design • Discuss Jakob Nielsen’s "Top Ten Guidelines for

Homepage Usability" • Learn how to design good Web pages and Web

sites from the start • See how your choice of page font impacts your

pages' readability (and why you should stay away from serif fonts like Times New Roman)

• And much, much more …

Good News / Bad News

• The good news is that anyone can create a Web page or Web site.

• The bad news is that anyone can create a Web page or Web site.

Regardless of whether you use Macromedia Dreamweaver,

Microsoft FrontPage, or simply code by hand, there are some guiding principles you need to

remember whenever you design anything for the web.

Why We Need Principles• Some bristle at the

thought of codified guidelines for good design, concerned that such guidelines stifle individual creativity.

• They don’t realize what you and I already know: bad web design isn’t creative, it’s bloody ANNOYING!

Part One:Top Ten Guidelines for Homepage

UsabilityFrom Jakob Nielsen’s “Alertbox,”

May 12, 2002http://www.useit.com/alertbox/

20020512.html

Make the Site's Purpose Clear: Explain Who You Are and What You Do

1. Include a one-sentence tagline.• This is more for

unexpected visitors2. Write a window title with

good visibility in both search engines and, more importantly, bookmark lists.

3. Group all “school business” information in one distinct area.

Help Users Find What They Need

4. Emphasize your site’s top high-priority tasks.

class site: Homework lists, special announcements, class calendars, etc. should be prominent – located higher on your homepage than CVs, personal photos, etc.

5. Include a search input box.

Reveal Site Content6. Show examples of real

site content.Use pull quotes where possible.

7. Begin link names with the most important keyword.

8. Offer easy access to recent homepage features.

If you change your site frequently, have an archive of the stuff you’ve recently removed or updated.

Use Visual Design to Enhance, not Define, Interaction Design

9. Don't over-format critical content, such as navigation areas

10.Use meaningful graphics

Part Two: Designing GOOD Web Sites

from the StartIt is easy, as long as you follow

a few basic steps.

The “Paper” Rule

• The first step to good web design is to turn off your computer and pull out a couple of pieces of paper.

• Most poorly designed sites are poorly designed from the start.

The Three Parts of Web Design

• Information design

• Interaction design

• Presentation design

Information Design

• Message• Audience• Purpose• Background• Structure ?

The Audience Is Key

• Once you identify your audience, designing the web page or web site is a snap!

• Example: the Bertrand Russell Intermediate High School Concert Choir

Part Three:Basic Design Rules

Stuff that no one ever tells you

Homepage Usability

• Most of the tips you are about to see come straight from Homepage Usability by Jakob Nielsen & Marie Tahir.

• ISBN: 073571102X• US$39.99 ($27.99

at Amazon.com)

Oh sure, it LOOKS good ...

• Reading from a computer screen is about 25% slower than reading from paper.

• Write 50% less text than you would normally write for a brochure or paper.

Serif versus sans-serif

• On paper, we are all used to reading serif fonts – fonts with a “tail” (like Times New Roman.)

• On screens, however, sans-serif fonts are easier to read.

• The most readable screen font is Verdana (which ships with Internet Explorer.)

The basic scheme• For the main content area of your pages, ALWAYS

use black text on a white background.– We have to defer to both David Ogilvy AND the Fortune 500

on this one.– The rest of your page can be colored, but leave the main

content area alone!• If you have to change fonts, use a sans-serif font

like Verdana, Helvetica, or Arial.– Or, if you code by hand, use a font family like <font

face="Verdana, Arial, Helvetica, sans-serif“>– Better still, use CSS [which we’ll talk about in a bit.]

• Don’t change the link colors!

How wide?

• While bigger monitors continue to pop-up, most people are still using 800 by 600.

• You have to account for the scroll bars.• Stay under 760 pixels wide, especially with

your graphics (600 wide if you are making something for Blackboard or WebCT.)

How big?

• Try to follow the “30/30 rule”: keep your main homepage – graphics and everything – to under 30 kilobytes in size. That way it will load in under 30 seconds over a very slow dial-up.

• Your secondary pages can be larger.• I break this rule ALL the time.

Your Main Homepage

• Your logo (if you have one) should be in the upper left corner– Average size: 80 x

68• Include a tag line

that explicitly summarizes what your site does.

Your “home” page needs:

• A directory of the site’s main content areas (navigation)

• A summary of the most important news or promotions

• A search feature (if possible)

Your other pages need:

• Easy-to-understand navigation features that show:– Where I am (relative to the Web as a whole

AND relative to the site’s structure)?– Where I have been?– Where can I go?

Communicating Information about Yourself

• Include a homepage link to an “About <name of organization>” section.

• Include a “Contact Me” or “Contact Us” link on the homepage that goes to a page with all contact information for you or your organization.

Links• Differentiate links and make them easy to

scan.– By default, links are differentiated by being blue

and underlined. DON’T CHANGE THIS!• Don’t use generic instructions, such as

“Click Here” as a link name.• Don’t use generic links, such as “More …”

at the end of list items.• If a link does something other than go to

another Web page … make sure the link explicitly indicates what will happen.

Stay away from frames ...

• Many browsers cannot print framed pages appropriately.

• Frames are so hard to learn that many authors write buggy code when they try to use them.

• Search engines have trouble with frames because they don’t know what composites of frames to include in their index.

Part Four:Accessibility

Welcome to the wonderful world of Section 508

What is Section 508?• Section 508 of the Rehabilitation Act requires all

federal agencies (with the exception national security systems) to ensure that electronic and information technology is accessible to employees and members of the public with disabilities.

• This only applies to electronic and information technology that is procured by a FEDERAL department or agency.

• BUT, most companies and educational institutions around the world voluntarily comply with section 508, especially when it comes to those companies' or institutions' Web sites.

Why Comply Voluntarily?

• Why? One word: traffic. • If you can make your Web pages

more accessible, especially to people with disabilities more people are going to be able to visit your Web pages.

How Do You Comply?

• Just go to http://www.webaim.org/standards/508/checklist

• The folks at WebAIM took the 16 Web design rules in section 508 and converted them into an easy to read checklist.

Part Five:The Basics

If you break Web design into its individual components, it

becomes a heck of a lot easier

Three Parts of a Web Page

• The Text– This is simply the content you are sharing

with your audience.• The Multimedia

– Usually, this is just pictures, but it could also include sound files, movies, animation, and stuff like that.

• The HTML

The Text

• The “text” is just another way of saying “the content.”

• A lot of Web content is just re-tasked Word documents and PageMaker files.– CTRL + C and CTRL + V– CTRL + Shift + V– CTRL + Z

• The danger with re-tasking is that no one has ever read the original.

Creating Text

• You can use any Word processor:– Microsoft Word– WordPerfect

• You can also use any text editor:– Notepad or Wordpad

(PC)– SimpleText (Mac)

The Multimedia

• Usually just a collection of “compressed” images.

• Could also be:– Sound (Real Audio)– Animation (Flash)– Preformatted Files

(PDF)– And so on ...

Creating Graphics• Graphic creation

ability is built into hundreds of programs

• GIFs for drawings and text

• JPEGs for photos

The HTML

• Hypertext Markup Language (HTML)

• Tells the software (Web “browser”) how to display a Web Page.

• Should you learn HTML? YES!

Simple HTML basics

• HTML works a lot like an old word processor – you have to turn formatting on and off by hand.

• To make something bold:<BOLD>This text is bold</BOLD>

• There are some great sites out there that can teach you HTML:– http://www.builder.com/– http://www.webmonkey.com/

Creating HTML

• Text Editors– Notepad

• Word Processors– Word or WordPerfect– File > Save As HTML

• HTML Editors– Microsoft Frontpage– Macromedia Dreamweaver

Part Six:Sites that Ignore These Guidelines

Including a few sites shamelessly stolen from WebPagesThatSuck.com

http://www.tuxedogov.org/• Auto loading MIDI is

ANNOYING!• No title• Table borders are

unnecessary• “Welcome To” should

have a top vertical alignment– And the “Welcome To”

graphic is unnecessary• Navigation is centered• Unorganized menu

http://www.jcsheriff.com/

• The title doesn’t include the state.

• The gun is wholly inappropriate.

• The Flash is … um …• Click on “webmaster”

and you get a “not found” note.

http://www.auburn.edu/• It’s Auburn!• Actually, it’s a decent site,

but …• The image doesn’t match

the links• Rollover navigation link

callouts are confusing• Images in bottom corner

look like ads (and will be ignored)

• Any others? (Besides the fact that IT’S AUBURN?!)

More Sites that Stink

• See if you can figure out why?– http://www.havenworks.com/– http://www.fabricland.co.uk/ – http://yvettesbridalformal.com/– http://www.teacherxpress.com/

• And for even more useless sites:– http://internettourbus.com/bizarre.htm

Part Seven:Sites that Exemplify These

GuidelinesIncluding a few sites shamelessly

stolen fromhttp://www.coolhomepages.com/

Super Sight!!!

• http://rareformbranding.com/• http://soffercollective.com/• http://www.schweppes.com.au/home/

?noflash=true• And for even more sites check out

– http://www.coolhomepages.com/

Important Information

• This presentation was created by Patrick Crispen.

• You are free to reuse this presentation provided that you– Not make any money from this

presentation.– Give credit where credit is due.