Transcript Web Site Design: Best Practices

Connie Hancock
University of Nebraska - Lincoln
Extension Educator
[email protected]
The only reason
your Web site exists
is to solve
your customers’ problems!
Why people come to your site?
•They want/need information
•They want/need to make a purchase/donate
•They want/need to be entertained
http://webpagesthatsuck.com
HOME RUN
High-quality content
Often updated
Minimal download
time
Ease of Use
Relevant to users’
needs
Unique to the online
medium
Net-centric corporate
culture
Designing Web Usability – Jakob Nielsen
Activity 1
http://abc.go.com/
http://www.amctv.com
ASK YOURSELF
What do you like and dislike about this web
page?
What information does this page share?
Does it appear to be easy to find important or
pertinent information?
Is the information well presented?
Three Parts of a Web Site
Information
Interaction
Presentation
Web Page Design – Stubbs, Barksdale, Crispen
Information
Message
Audience
Purpose
Background
Structure
www.webguild.org
Interaction
Presentation
Organization
Navigation
Interactivity
Color scheme
Font Selection
Graphics selection
Multimedia effects
Arrangement
Information Design
Message
Audience
Purpose
Background
Structure
Activity 2
http://www.senate.gov/
ASK YOURSELF
What is the primary message of the Web
page?
Whom do you think message is directed to?
Why do you think they want to share this
information?
Did you already know about them before you
visited this Web site?
Is the message easy to read and follow?
Hints for “Old Sites”
Content rich sites
More likely to remain on site
More likely to return
Content is the focus
Reason why people go online
First thing they look for
Must provide fast answers
Web Site Content
Beginning – grabs attention
Middle – value added portion
Ending – payoff or call to action
Do you have “Heroin” Content ?
The best content is content people want to
see over and over again!
http://websitesthatsuck.com
Does it solve problems?
Does it match target market expectations?
Do you know the purpose of your site?
Do you know target customer?
Would it cause people to re-visit?
Is it technically correct?
Is the content current and updated?
Can people find what they are looking for?
Page Content
Keep Text Short
Bullets
Structure articles with headings
Use highlighting
Plain Language
One idea per paragraph
Start each page with a conclusion - Most important first
Page Chunking
Copy Editing
Message
Think about what you want to tell
Whom you’re going to tell it to
What do they already know
How will information be put together
Example – http://www.irs.gov
4 Seconds
To download Home page
To figure out your message
What about your Web site
What is your Web site’s message?
Who is your audience?
What is the purpose and scope of your
Web site?
How is the message structured?
Interaction Design
Organization
Navigation
Interactivity
Activity 3
http://go.com/
ASK YOURSELF
 Which web site’s organization did you like
best?
What navigation tools did they use? What do
they have in common?
Which of these two sites has you participating
or making the most decisions? What kinds of
decisions or interactions are expected?
Hints for “Old Sites”
Organization = Uniform Context
Now where do you go?
Where are you going?
Knowing where you are
Organizing the message
Random
Linear
Hierarchical
Mixed
Navigation
Home Page – Welcome Page
Site identity/mission
Site hierarchy
Search
Teases
Timely content
Deals
Short-cuts
Registration
Don’t Make Me Think – Steve Krug
It also has to
Show me what I’m looking for
…..and what I’m not looking for
Show me where to start
Establish credibility and trust
Don’t Make Me Think – Steve Krug
All web navigation must answer:
Where am I?
Where have I been?
Where can I go next?
Where’s the Home Page?
Where’s the Home Home Page?
Example: http://sethgodin.typepad.com/
“Mystery Meat” Navigation
Mouse-over “buttons” to know where to go
Graphics that are usually blank
Example - http://slashdot.org/
What about your site?
How is your site organized?
Does your home page do it’s job?
Can people find their way around your site
easily?
Are you asking them to take action?
Presentation Design
Color scheme
Font selection
Graphics selection
Multimedia effects
Arrangement
Looks of the House are important
People don’t care what “tools” were used
to build it
Don’t want design elements that get in the
way
Activity 4
http://disney.go.com
ASK YOURSELF
What colors, written text, hyperlinks were
chosen?
Is the font easy to read?
Describe the graphics.
Are there any special effects?
Are all the elements arranged on the page in
such a way that each element adds to the
page?
Hints for “Old Sites”
Must inspire confidence
Must appear you understand
Must show your share their values
Must show your product/service will
solve THEIR problem
Don’t confuse web design with a
magic trick!
Which one is the real dentist?
http://websitesthatsuck.com
Human Factors
Brain is built for recognition
Brain likes 7
Brain thrives on contrast
Brain likes to find patterns
Marketing on the Internet – Jan Zimmerman
Design Elements
Background – colors/images
Foreground – content/links
Other – buttons, hyperlinks, search,
navigation bar, table of content, etc…..
Organizing space
Unity
Balance
Proportion
Misusing Graphics and Flash
Tools to explain your message
Example – Flash
Example – Graphics
http://websitesthatsuck.com
What about your Web site?
Are your colors inviting?
Is the text/font easy to read?
Do the graphics add to the message?
Are the elements arranged to add to the
page?
Krug’s Laws of Usability
Don’t make me think!!
It doesn’t matter how many times I have to
click
Get rid of half of the words on each page,
then get rid of half of what’s left
Don’t Make Me Think –Steve Krug
Accessibility
Visually impaired use special readers for text.
Blinking text can trigger seizures .
Poor color choices may render text unreadable
to color blind visitors.
Mouse-dependent site navigation can be difficult
for visitors with physical limitations.
Information contained in sound clips is
inaccessible to hearing-impaired visitors.
Text only default
www.cast.org/bobby
Check out a website
http://bobby.watchfire.com/bobby/html/en/index.jsp
CERN Usability Guidelines –
http://www.w3.org/WAI
Microsoft Usability Guidelines –
http://msdn.microsoft.com
Philip Greenspun –
http://www.arsdigita.com/books/panda
Everybody test
Ask visitors what they think of the content
and imagery of your page.
Let them express their opinions
Then show them you value their opinions
and comments and make the positive
changes they suggest
Web site is NOT your Marketing
Strategy
IT IS PART OF IT
Resources
Don’t Make Me Think – Steve Krug
Designing Web Usability – Jacob Nielsen
Web Page Design – Stubbs, Barksdale, Crispen
Marketing on the Internet – Jan Zimmerman
http://www.webpagesthatsuck.com
http://www.useit.com
http://www.cast.org/bobby
Additional Resources
http://www.htmldog.com/
http://webopt.com
http://webmonkey.com
http://www.htmlhelp.com/
http://www.wikipedia.org/
http://www.webopedia.com
http://www.fixingyourwebsite.com/drhtml.html
http://www.browsercam.com/
http://www.webpagesthatsuck.com/cheaptools.html
Connie Hancock
University of Nebraska - Lincoln
Extension Educator
[email protected]