1. Multimedia and the World Wide Web HCI 201 Lecture Notes #6B

2. HCI 201 Notes #6B2 What will we learn today? Purpose of your web site Audience of your web site Structure of your web site Construct your web site

3. HCI 201 Notes #6B3 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.

4. HCI 201 Notes #6B4 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

5. HCI 201 Notes #6B5 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.

6. HCI 201 Notes #6B6 Audience could be … Employees Existing customers Potential customers People with a common interest People in a certain profession General consumers Students

7. HCI 201 Notes #6B7 Characteristics Demographic Characteristics - Gender - Age - Geographic location - Occupation - Language - Education - Residence- Race/ethnicity Online Characteristics - How do they access the Internet? - Which browsers might they use? Other Characteristics - Experience/history - Skill - Interests - Attitude - Needs and desires - Motivation

8. HCI 201 Notes #6B8 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

9. HCI 201 Notes #6B9 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?

10. HCI 201 Notes #6B10 How do we find the answers? Surveys Focus groups Interviews Observation Market research Assumptions

11. HCI 201 Notes #6B11 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.

12. HCI 201 Notes #6B12 Pros Corresponds to traditional print media Step-by-step Good for album presentations, tutorials, or purchase steps Cons 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 Logical site structure -- Linear

13. HCI 201 Notes #6B13 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. Logical site structure - Hierarchy

14. HCI 201 Notes #6B14 Narrow and deep hierarchy Not many links on each page. May increase number of clicks to find certain info. Wide and shallow hierarchy 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. Hierarchy - narrow vs. wide trees

15. HCI 201 Notes #6B15 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.

16. HCI 201 Notes #6B16 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. Physical site structure

17. HCI 201 Notes #6B17 Physical site structure  Root  Main (index.html)  Company Services  Products  About Us  Contact  Images  Photo1.jpg  Logo.gif  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  Photo1.jpg  Logo.gif

18. HCI 201 Notes #6B18 Source File Management You should Establish and follow file naming conventions. Lowercase Underscore (not space!) between words Avoid using special characters (., #, &, (), ?, etc.) Keep a copy of all source files in your possession. 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.

19. HCI 201 Notes #6B19 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.

20. HCI 201 Notes #6B20 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.

21. HCI 201 Notes #6B21 Troubleshooting If your page doesn't look like it’s supposed to be … Make sure all tags are closed correctly. Especially check for s, s, s, s, etc. Make sure the tag name is spelled correctly. or ? Make sure the end tag matches the start tag. … ? Make sure both angle brackets are there. Make sure the tags are nested properly Wrong: Item name Make sure you have quote marks around values of attributes.

22. HCI 201 Notes #6B22 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!

23. HCI 201 Notes #6B23 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.

24. HCI 201 Notes #6B24 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

25. HCI 201 Notes #6B25 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