Transcript Lecture Notes 6B

Multimedia and the World Wide Web
HCI 201 Lecture Notes #6B
What will we learn today?




Purpose of your web site
Audience of your web site
Structure of your web site
Construct your web site
HCI 201 Notes #6B
2
Purpose of your web site





Who is the site for?
Why is this site needed in the first place?
A web site should address specific needs or desires
of a specific audience.
Before deciding what technologies, design, or
content will be used in a web site, you should clearly
define the purpose and target audience.
The purpose and audience will drive all other
decisions you will make as you develop a site.
HCI 201 Notes #6B
3
Purpose could be …








Provide entertainment
Provide news or information
Sell products or services
Promote products or services
Provide customer support
Recruit employees, volunteers, or members
Provide business services
Communicate with customers
HCI 201 Notes #6B
4
Three sites, three audience

Disney (http://disney.go.com/home/today/index.html)


Children, limited choices, pictorial representations, simple
words.
Fidelity Market News
(http://personal.fidelity.com/research/stocks/content/marketsindex.shtml)
 Investors, easy and quick access to many types of information,
specialized vocabulary, very little need for pictures.

Nissan (http://www.nissanusa.com/)

Potential purchasers, eye-catching presentation of quality and
services.
HCI 201 Notes #6B
5
Audience could be …







Employees
Existing customers
Potential customers
People with a common interest
People in a certain profession
General consumers
Students
HCI 201 Notes #6B
6
Characteristics

Demographic Characteristics
- Gender
- Geographic location
- Language
- Residence

- Age
- Occupation
- Education
- Race/ethnicity
Online Characteristics
- How do they access the Internet?
- Which browsers might they use?

Other Characteristics
- Experience/history
- Interests
- Needs and desires
HCI 201 Notes #6B
- Skill
- Attitude
- Motivation
7
How do you measure success?







Products sold
Sales leads generated
Customer service calls reduced
Requests for printed materials decreased
Cost savings realized
Time saved
Number of visitors per day
HCI 201 Notes #6B
8
Important questions







How will they find out about the site?
Why will they come to the site?
What information will they want to find?
What expectations and goals do they have?
What do you want the outcome of their visit to be?
How often will they access the site?
When will they access the site?
HCI 201 Notes #6B
9
How do we find the answers?
Surveys
 Focus groups
 Interviews
 Observation
 Market research
 Assumptions

HCI 201 Notes #6B
10
Site structure

Logical structure
How documents relate to each other.
- Linear
- Hierarchy

Physical structure
Where a document “lives” - location on server.

A site’s logical structure is more important to a user
than the site’s physical structure.
HCI 201 Notes #6B
11
Logical site structure -- Linear

Pros




Cons


Corresponds to traditional print media
Step-by-step
Good for album presentations, tutorials, or purchase steps
User may find restrictive
Suggestions

Let users know how far they are in a linear structure
Examples:
page 4 of 10
1|2|3|4|5
HCI 201 Notes #6B
12
Logical site structure - Hierarchy



Most Common.
Can be modified to hide or expose as much
information as necessary.
As the user clicks deeper into the site, the choices
get more specific.
HCI 201 Notes #6B
13
Hierarchy - narrow vs. wide trees

Narrow and deep hierarchy



Wide and shallow hierarchy




Not many links on each page.
May increase number of clicks to find certain info.
Most of the info. is “a-click-away”.
Too many options confuse users.
Links get “lost” in the crowd.
Characterized by number of clicks


Studies suggest that users prefer sites that require fewer
clicks and are more satisfied with a wide selection of
choices.
Aim for click depth of 3.
HCI 201 Notes #6B
14
Typical pages for business sites









Main page tells your visitor what you offer and details what they
can find on your site.
Products/Services lists your products or services, with/out
price/rate info. These pages get most of your web site traffic.
About us can replace a number of other pages such as history.
Location displays your address, map, and driving directions.
Contacts displays your e-mail, fax, and phone numbers.
Testimonials will reinforce your credibility and trustworthiness.
FAQs answers questions that might otherwise be an obstacle
to a sale.
Privacy policy tells your potential customers that you won't
abuse the collected information from them.
Employment Opportunities lists your current job openings.
HCI 201 Notes #6B
15
Physical site structure
Organizing your site carefully from the start
can save you frustration and time later on.
 Break down your site into categories and put
related pages in the same folder.

HCI 201 Notes #6B
16
Physical site structure
Root
 Main (index.html)
 Company Services
 Products
 About Us
 Contact
Images
 Photo1.jpg
 Logo.gif
HCI 201 Notes #6B
 Root
 Main Page
 Company Services
 Service A
 Service B
 Images
 Products
 Product A
 Product B
 Images
 ProductA.jpg
 ProductB.jpg
 About Us
 Company History
 Bios
 Images
 Contact
 Images
 Images
 Photo1.jpg
 Logo.gif
17
Source File Management

You should

Establish and follow file naming conventions.




Keep a copy of all source files in your possession.



Lowercase
Underscore (not space!) between words
Avoid using special characters (., #, &, (), ?, etc.)
Don't rely on school server to keep your work
Make a working copy of files before making sweeping
changes, then use the working copy once you are sure
everything works.
Create an archive of sources that you are not actively using,
but may want to use sometime.
HCI 201 Notes #6B
18
Source File Management

If you do not manage your source files, you may:


Waste time in trying to figure out which of your multiple
copies is the right one.
Inability to re-create your site in another environment, such
as if you change ISPs or employers.
HCI 201 Notes #6B
19
Error Checking




Always check and double-check the site for spelling
and grammatical errors.
Make sure the images and links are all working
properly on different platforms/browsers.
Errors make a site appear to be unprofessional.
Make sure you refresh your browser if you have
made a repair to the code and come back to look at
it again.
HCI 201 Notes #6B
20
Troubleshooting

If your page doesn't look like it’s supposed to be …

Make sure all tags are closed correctly. Especially check for
<list>s, <head>s, <b>s, <font>s, etc.




Make sure the tag name is spelled correctly. <htm> or <html>?
Make sure the end tag matches the start tag. <h2> … </h3>?
Make sure both angle brackets are there.
Make sure the tags are nested properly


Wrong: <li><b>Item name</li></b>
Make sure you have quote marks around values of attributes.
HCI 201 Notes #6B
21
Writing for the Web


Reading from computer screens is about 25% slower
than reading from paper.
Guidelines:








Be concise.
Use simple sentences.
Keep pages short.
Use bulleted lists.
Break up text with headings and subheadings.
Use 2nd person ("You can contact us 24 hours a day!”)
Match your writing style to your site's audience and
purpose.
Proofread!
HCI 201 Notes #6B
22
Navigation




The main page should specifically let your visitors know exactly
what you're offering. You have 5~10 seconds.
Your visitors may enter your site from pages other than your
main page:
 Include good navigational links on every page.
 Place navigation links together at the top, bottom, left or
right side of the page.
 Use tables to align your links and maintain a nicely
organized and uniform appearance throughout.
Try to keep the number of clicks required to get from your main
page to any other page on your site down to three.
Place your company logo consistently on each page.
HCI 201 Notes #6B
23
Common Design Mistakes








Long loading time
Poor overall visual appearance
Spelling/grammar mistakes
No contact information
Poor content
Poor navigation
Broken links and graphics
Too many graphics
HCI 201 Notes #6B
24
Common Design Mistakes








Pages scrolling to oblivion
Abuse of animated graphics / flash
Very large or very small fonts
Poor use of tables
Different backgrounds on each page
Over powering music set to AutoPlay or loop forever
Multiple colored text and multiple font faces
Under construction signs here and there
HCI 201 Notes #6B
25