Transcript Principles of GOOD Web Design

Guidelines for GOOD
Web 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
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
Usability
From Jakob Nielsen’s “Alertbox,”
May 12, 2002
http://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 visitors
2. 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 highpriority 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 Content
6.
Show examples of real
site content.
Use pull quotes where
possible.
7.
8.
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
9. Don't over-format
critical content,
such as
navigation areas
10. 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 (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
Guidelines
Including a few sites shamelessly
stolen from
http://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.