Guidelines for GOOD Web Design

Guidelines for GOODWeb Design a presentation by Patrick Douglas Crispen

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 Dreamweaver, or simply code by hand, there are some guiding principles you need to remember whenever you designanythingfor 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 Usability From Jakob Nielsen’s “Alertbox,” http://www.useit.com/alertbox/20020512.html

Make the Site's Purpose Clear: Explain Who You Are and What You Do • Include a one-sentence tagline. • This is more for unexpected visitors • Write a window title with good visibility in both search engines and, more importantly, bookmark lists. • Group all “school business” information in one distinct area.

Help Users Find What They Need • 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. • Include a search input box.

Reveal Site Content • Show examples of real site content. Use pull quotes where possible. • Begin link names with the most important keyword. • 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 • Don't over-format critical content, such as navigation areas • Use meaningful graphics

Part Two: Designing GOOD Web Sites from the Start It 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 (used 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/

Text Editors Notepad Word Processors Word or WordPerfect File > Save As HTML HTML Editors Microsoft Frontpage Macromedia Dreamweaver Creating HTML

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.topdesignmag.com/20-examples-of-bad-web-design/ • http://www.fabricland.co.uk/ • And for even more useless sites: • http://internettourbus.com/bizarre.htm

Part Seven:Sites that Exemplify These Guidelines Including a few sites shamelessly stolen from http://www.coolhomepages.com/

Super Sight!!! • http://rareformbranding.com/ • http://audiofly.com/ • http://www.schweppes.com.au/home/?noflash=true • And for even more sites check out • http://www.coolhomepages.com/

Guidelines for GOOD Web Design