Guidelines for Guidelines for GOODGOOD Web DesignWeb Design

a presentation bya presentation by

Patrick Douglas CrispenPatrick Douglas Crispen

Our GoalsOur Goals

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

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

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

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

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

• And much, much more …And much, much more …

Good News / Bad NewsGood News / Bad News

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

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

Regardless of whether you use Regardless of whether you use Macromedia Dreamweaver, Macromedia Dreamweaver,

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

remember whenever you designremember whenever you design anythinganything for the web.for the web.

Why We Need PrinciplesWhy We Need Principles

• Some bristle at the Some bristle at the thought of codified thought of codified guidelines for good guidelines for good design, concerned design, concerned that such guidelines that such guidelines stifle individual stifle individual creativity.creativity.

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

Part One:Part One:Top Ten Guidelines for Homepage Top Ten Guidelines for Homepage

UsabilityUsability

From Jakob Nielsen’s “Alertbox,” From Jakob Nielsen’s “Alertbox,” May 12, 2002May 12, 2002

http://www.useit.com/alertbox/http://www.useit.com/alertbox/20020512.html20020512.html

Make the Site's Purpose Clear: Make the Site's Purpose Clear:

Explain Who You Are and What You DoExplain Who You Are and What You Do 1.1. Include a one-sentence Include a one-sentence

taglinetagline..• This is more for This is more for

unexpected visitorsunexpected visitors

2.2. Write a window title with Write a window title with good visibility in both good visibility in both search engines and, more search engines and, more importantly, bookmark importantly, bookmark lists.lists.

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

Help Users Find What They NeedHelp Users Find What They Need

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

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

5.5. Include a search Include a search input box.input box.

Reveal Site ContentReveal Site Content

6.6. Show examples of real Show examples of real site content.site content.

Use pull quotes where Use pull quotes where possible. possible.

7.7. Begin link names with Begin link names with the most important the most important keyword.keyword.

8.8. Offer easy access to Offer easy access to recent homepage recent homepage features.features.

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

Use Visual Design to Enhance, not Use Visual Design to Enhance, not Define, Interaction Design Define, Interaction Design

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

10.10. Use meaningful Use meaningful graphics graphics

Part Two: Part Two: Designing GOOD Web Sites Designing GOOD Web Sites

from the Startfrom the StartIt is easy, as long as you follow It is easy, as long as you follow

a few basic steps.a few basic steps.

The “Paper” RuleThe “Paper” Rule

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

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

The Three Parts of Web DesignThe Three Parts of Web Design

• Information Information designdesign

• Interaction Interaction designdesign

• Presentation Presentation designdesign

Information DesignInformation Design

• MessageMessage

• AudienceAudience

• PurposePurpose

• BackgroundBackground

• StructureStructure ??

The Audience Is KeyThe Audience Is Key

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

• Example: the Bertrand Russell Example: the Bertrand Russell Intermediate High School Concert Intermediate High School Concert ChoirChoir

Part Three:Part Three:Basic Design RulesBasic Design Rules

Stuff that no one ever tells youStuff that no one ever tells you

Homepage UsabilityHomepage Usability

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

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

at Amazon.com)at Amazon.com)

Oh sure, it LOOKS good ...Oh sure, it LOOKS good ...

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

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

Serif versus sans-serifSerif versus sans-serif

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

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

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

The basic schemeThe basic scheme

• For the main content area of your pages, For the main content area of your pages, ALWAYS use black text on a white background.ALWAYS use black text on a white background.– We have to defer to both David Ogilvy We have to defer to both David Ogilvy ANDAND the Fortune 500 the Fortune 500

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

content area alonecontent area alone!!

• If you have to change fonts, use a sans-serif font If you have to change fonts, use a sans-serif font like like VerdanaVerdana, , HelveticaHelvetica, or Arial., or Arial.– Or, if you code by hand, use a font family like <font Or, if you code by hand, use a font family like <font

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

• Don’tDon’t change the link colors! change the link colors!

How wide?How wide?

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

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

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

How big?How big?

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

• Your secondary pages can be larger.Your secondary pages can be larger.

• I break this rule I break this rule ALLALL the time. the time.

Your Main HomepageYour Main Homepage

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

6868

• Include a tag line Include a tag line that explicitly that explicitly summarizes what summarizes what your site does.your site does.

Your “home” page needs:Your “home” page needs:

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

• A summary of the most important A summary of the most important news or promotionsnews or promotions

• A search feature (if possible)A search feature (if possible)

Your other pages need:Your other pages need:

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

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

Communicating Information about Communicating Information about YourselfYourself

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

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

LinksLinks

• Differentiate links and make them easy to Differentiate links and make them easy to scan.scan.– By default, links are differentiated by being blue By default, links are differentiated by being blue

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

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

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

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

Stay away from frames ...Stay away from frames ...

• Many browsers cannot print framed pages Many browsers cannot print framed pages appropriately.appropriately.

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

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

Part Four:Part Four:AccessibilityAccessibility

Welcome to the wonderful Welcome to the wonderful world of Section 508world of Section 508

What is Section 508?What is Section 508?

• Section 508 of the Rehabilitation Act requires all Section 508 of the Rehabilitation Act requires all federal agencies (with the exception national federal agencies (with the exception national security systems) to ensure that electronic and security systems) to ensure that electronic and information technology is accessible to information technology is accessible to employees and members of the public with employees and members of the public with disabilities.disabilities.

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

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

Why Comply Voluntarily?Why Comply Voluntarily?

• Why? One word: traffic. Why? One word: traffic.

• If you can make your Web pages If you can make your Web pages more accessible, especially to people more accessible, especially to people with disabilities more people are with disabilities more people are going to be able to visit your Web going to be able to visit your Web pages. pages.

How Do You Comply?How Do You Comply?

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

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

Part Five:Part Five:The BasicsThe Basics

If you break Web design into its If you break Web design into its individual components, it individual components, it

becomes a heck of a lot easierbecomes a heck of a lot easier

Three Parts of a Web PageThree Parts of a Web Page

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

with your audience.with your audience.

• The MultimediaThe Multimedia– Usually, this is just pictures, but it could Usually, this is just pictures, but it could

also include sound files, movies, also include sound files, movies, animation, and stuff like that.animation, and stuff like that.

• The HTMLThe HTML

The TextThe Text

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

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

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

Creating TextCreating Text

• You can use You can use anyany Word processor:Word processor:– Microsoft WordMicrosoft Word– WordPerfectWordPerfect

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

(PC)(PC)– SimpleText (Mac)SimpleText (Mac)

The MultimediaThe Multimedia

• Usually just a Usually just a collection of collection of “compressed” “compressed” images.images.

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

(PDF)(PDF)– And so on ...And so on ...

Creating GraphicsCreating Graphics

• Graphic creation Graphic creation ability is built into ability is built into hundreds of programshundreds of programs

• GIFs for drawings and GIFs for drawings and texttext

• JPEGs for photosJPEGs for photos

The HTMLThe HTML

• HHyperyperttext ext MMarkup arkup LLanguage (anguage (HTMLHTML))

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

• Should you learn Should you learn HTML? HTML? YES!YES!

Simple HTML basicsSimple HTML basics

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

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

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

– http://www.webmonkey.com/http://www.webmonkey.com/

Creating HTMLCreating HTML

• Text EditorsText Editors– NotepadNotepad

• Word ProcessorsWord Processors– Word or WordPerfectWord or WordPerfect– File > Save As HTMLFile > Save As HTML

• HTML EditorsHTML Editors– Microsoft FrontpageMicrosoft Frontpage– Macromedia Macromedia

DreamweaverDreamweaver

Part Six:Part Six:Sites that Ignore These GuidelinesSites that Ignore These Guidelines

Including a few sites Including a few sites shamelessly stolen from shamelessly stolen from WebPagesThatSuck.comWebPagesThatSuck.com

http://www.tuxedogov.org/http://www.tuxedogov.org/

• Auto loading MIDI is Auto loading MIDI is ANNOYING!ANNOYING!

• No titleNo title• Table borders are Table borders are

unnecessaryunnecessary• ““Welcome To” should Welcome To” should

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

graphic is unnecessarygraphic is unnecessary• Navigation is centeredNavigation is centered• Unorganized menuUnorganized menu

http://www.jcsheriff.com/http://www.jcsheriff.com/

• The title doesn’t The title doesn’t include the state.include the state.

• The gun is wholly The gun is wholly inappropriate.inappropriate.

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

and you get a “not and you get a “not found” note.found” note.

http://www.auburn.edu/http://www.auburn.edu/

• It’s Auburn!It’s Auburn!• Actually, it’s a decent site, Actually, it’s a decent site,

but …but …• The image doesn’t match The image doesn’t match

the linksthe links• Rollover navigation link Rollover navigation link

callouts are confusingcallouts are confusing• Images in bottom corner Images in bottom corner

look like ads (and will be look like ads (and will be ignored)ignored)

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

More Sites that StinkMore Sites that Stink

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

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

Part Seven:Part Seven:Sites that Exemplify These Sites that Exemplify These

GuidelinesGuidelines

Including a few sites shamelessly Including a few sites shamelessly stolen fromstolen from

http://www.coolhomepages.com/http://www.coolhomepages.com/

Super Sight!!!Super Sight!!!

• http://rareformbranding.com/http://rareformbranding.com/

• http://soffercollective.com/http://soffercollective.com/

• http://www.schweppes.com.au/http://www.schweppes.com.au/home/?noflash=truehome/?noflash=true

• And for even more sites check outAnd for even more sites check out– http://www.coolhomepages.com/ http://www.coolhomepages.com/

Important InformationImportant Information

• This presentation was created by This presentation was created by Patrick Crispen.Patrick Crispen.

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

presentation.presentation.– Give credit where credit is due.Give credit where credit is due.