Table of Contents | All Slides | Link List | Examples ...cscie12.dce.harvard.edu/lecture_notes/2005-06/cscie12_20060314.pdf · 14.03.2006 · technology profile Web experience What

http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html

1 of 118 3/14/2006 2:04 PM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Building a SiteMarch 14, 2006

Harvard UniversityDivision of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2006 David P. Heitmeyer

My email: [email protected] staff email: [email protected]


2 of 118 3/14/2006 2:04 PM

Building a Web SiteThe SiteInformation gathering and organizationSite and Page DesignImplementationMaintenance


3 of 118 3/14/2006 2:04 PM

Design and Usability Resources

Online

Web Style Guide, 2nd EditionJakob Nielsen's Useit.com

Jakob Nielsen's Alertbox ColumnUser Interface Engineering (UIE)

Books

See Assignment 2


4 of 118 3/14/2006 2:04 PM

Jakob Nielsen's Useit.com and AlertboxUseit.com: Alertbox

Usability 101: Introduction to UsabilityTop Ten Mistakes of Web DesignTop Ten Web Design Mistakes of 2005The Need for Web Design StandardsTop Ten Web Design Mistakes of 2003Ten Most Violated Homepage Design Guidelines, November 2003Top Ten Web Design Mistakes of 2002Top Ten Guidelines for Homepage Usability, May 2002Ten Good Deeds in Web Design, October 1999The Top Ten New Mistakes of Web Design, May 1999


5 of 118 3/14/2006 2:04 PM

Building a Web SiteAudience and GoalsContent and OrganizationSite and Page Design


6 of 118 3/14/2006 2:04 PM

Audience and GoalsWhy are you building the site? Who are you buliding the site for?

Most sites get a variety of usersSome audiences will be "primary", others "secondary"What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.


7 of 118 3/14/2006 2:04 PM

Michigan State UniversityWhat audiences can be identified?


8 of 118 3/14/2006 2:04 PM


9 of 118 3/14/2006 2:04 PM

AudienceWho are they?

language, vocabularytechnology profileWeb experience

What are their goals?What are their information needs?What are they trying to do?

Know Your Audience

User testing, market research, focus groups.Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 UsersBe clear on who you are building for. Anticipate their needs.Feedback from users - chew before you swallow!Alertbox: First Rule of Usability? Don't Listen to UsersAs target audiences increase, difficulty of Web design increases.


10 of 118 3/14/2006 2:04 PM

Typical Audiences for an Academic DepartmentUndergraduate Students

ConcentratorsPotential concentratorsNon-concentrators

Graduate StudentsPotential Graduate StudentsFaculty

CurrentPotential

ResearchersPublic


11 of 118 3/14/2006 2:04 PM

Content and OrganizationWhat information is on the site?How will it be organized?


12 of 118 3/14/2006 2:04 PM

ContentWhat content already exists in other media types (brochures, pamphlets, statements, etc.).What content would be good to develop for the site?

Does it fit purpose of site?Does it suit the audience?Why would people come to see this item?

Define incremental goalsWhat should be published first?What can come later stages?


13 of 118 3/14/2006 2:04 PM

Organization of ContentFrom Information Architecture for the World Wide Web, 2nd Edition:

information architecture defined:

The combination of organization, labeling, and navigation schemes within an information system.1.The structural design of an information space to facilitate task completion and intuitive access to content.2.The art and science of structuring and classifying web sites and intranets to help people find and manage information. 3.An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.4.

Organize/CategorizeLabelNavigate


14 of 118 3/14/2006 2:04 PM

Organize and Label

Organize

Hi-tech tools are a mustSticky-notes or Index cardsWhiteboard

Categories, sub-categories, etc.Don't be too deep or too shallowAim for 3 to 7 (could go higher) categories per level

Plan for future growth

Label

Know your audienceTest your labels (ask your audience)

Where can I get a driver for my HP8500N?What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?What IT degree programs are available?


15 of 118 3/14/2006 2:04 PM

Too deep or too shallow?


16 of 118 3/14/2006 2:04 PM

The "Miscellaneous" categoryCategories have Failed. Try again.Content can be in multiple categories or linked to from multiple categories


17 of 118 3/14/2006 2:04 PM

Categories and Labels from News SitesCBS

CNN ABC News Fox News

MSNBC NPR


18 of 118 3/14/2006 2:04 PM


19 of 118 3/14/2006 2:04 PM

The Web SiteThe Web site is not just like a brochure or book, it is also like a piece of software.Visitors must learn the interface of your site.

See Jakob Nielsen's End of Web Design.Keep in mind Jakob's Law of the Internet User Experience:Users spend most of their time on other sites.


20 of 118 3/14/2006 2:04 PM

OrganizationHierarchicalSequential"Webs"

Reading Suggestion: Ontology is Overrated: Categories, Links, and Tags by Clay Shirkey


21 of 118 3/14/2006 2:04 PM

Hierarchical

Library of Congress Classification Outline

"Q" - Science

Open Directory Project


22 of 118 3/14/2006 2:04 PM


23 of 118 3/14/2006 2:04 PM

SequentialWhen order is important or part of presentation.Useful when "workflow" is important in web applications.


24 of 118 3/14/2006 2:04 PM

Webs

Wikipedia.com


25 of 118 3/14/2006 2:04 PM

Site Architecture

Topics

Audience


26 of 118 3/14/2006 2:04 PM

Task-oriented

Internal Organization Structure

Search


27 of 118 3/14/2006 2:04 PM

Multiple Architectures

Often a site may need to have multiple architectures.


28 of 118 3/14/2006 2:04 PM

Michigan State


29 of 118 3/14/2006 2:04 PM


30 of 118 3/14/2006 2:04 PM

IBM


31 of 118 3/14/2006 2:04 PM

Hewlett Packard


32 of 118 3/14/2006 2:04 PM

Site ArchitectureCritical to site's successPrecede any design/visual elementsWork from paper or text-based Web sites


33 of 118 3/14/2006 2:04 PM

Navigation SystemsWhere am I?Where can I go?

What is close by?What is further away?

Where have I been?


34 of 118 3/14/2006 2:04 PM

Harvard College


35 of 118 3/14/2006 2:04 PM

Main Sections


36 of 118 3/14/2006 2:04 PM

Current Page and Section


37 of 118 3/14/2006 2:04 PM

More within Current Section


38 of 118 3/14/2006 2:04 PM

Global NavigationAppears on every inner page.


39 of 118 3/14/2006 2:04 PM

Quicklinks


40 of 118 3/14/2006 2:04 PM

Bread Crumb navigation"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

DMOZ

Construction Projects at FAS, Harvard University


41 of 118 3/14/2006 2:04 PM

Clamshell navigation

O'Reilly Safari Harvard College


42 of 118 3/14/2006 2:04 PM


43 of 118 3/14/2006 2:04 PM

LinksPay attention to the scent of the site's links.

Links within navigation and content must be:

PredictableAm I getting 'closer' to my goal?DifferentiableWhat is the difference between clicking here or clicking there?

When creating links:

Be descriptiveDon't lie

Your links should have scent, and on a related note, your site should suck.


44 of 118 3/14/2006 2:04 PM

Please don't "Click Here"Click here to go to the course home page.Click here to go to the course syllabus page.Click here to go to the course schedule page.Click here to go to the course assignment page.

To go to the course home page click here.To go to the course syllabus page click here.To go to the course schedule page click here.To go to the course assignment page click here.

Better...

The CSCI E-12 web site contains the syllabus, schedule, and assignments.

The CSCI E-12 web site contains:

syllabusscheduleassignments


45 of 118 3/14/2006 2:04 PM

Use "title" attributeTitle attribute can add information so that the link is more predictable and able to be differentiated from others.

Example 6.1Example 6.1 Source:

<p><a href="http://www.college.harvard.edu/deans_office/dean_lewis/morningprayer_2_2003.html" title="Text of talk given by Dean Lewis at Morning Prayers" >Dean Harry Lewis spoke</a>

at <a href="http://www.memorialchurch.harvard.edu/services/morningprayers.shtml" title="Morning Prayers at The Memorial Church of Harvard University" >morning prayers</a>

at <a href="http://www.college.harvard.edu" title="Harvard College Home Page" >Harvard College</a>

in February 2003.</p>

Example 6.1 Rendered:

Dean Harry Lewis spoke at morning prayers at Harvard College in February 2003.


46 of 118 3/14/2006 2:04 PM

Deep LinkingLink directly to content within a site.Support deep linking to your site.

Alertbox: Deep Linking is Good Linking

Example 6.2Example 6.2 Source:

<a href="http://www.summer.harvard.edu/2006/register/default.jsp" >Regster for Harvard Summer School</a><a href="http://www.summer.harvard.edu/2006/courses/csci.jsp#s-l" > CSCI S-L, "Advanced Web Development Using XML"</a>


Regster for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".

Example 6.3

Example 6.3 Source:

<a href="http://www.summer.harvard.edu/" >Register for Harvard Summer School</a><a href="http://www.summer.harvard.edu/2006/courses/" > CSCI S-L, "Advanced Web Development Using XML"</a>


Register for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".


47 of 118 3/14/2006 2:04 PM

Every Page NeedsTitleCreator (person or institution)Creation or Revision dateLink to home pageURL of page (or at least home page)


48 of 118 3/14/2006 2:04 PM

Importance of a Good TitleBrowser

BookmarksHistoryWindow Title

Search Engine results

Search for "Untitled" in "title" element:


49 of 118 3/14/2006 2:04 PM

Search Enginestitlemeta descriptionmeta keywords

<head> <title>Harvard College Admissions Office</title> <meta name="keywords" content="harvard admissions, harvard college admissions, harvard admissions office, harvard college admissions office, harvard undergraduate admissions, harvard undergrad admissions, harvard undergraduate admissions office, visiting harvard, visiting harvard university, harvard university admissions, harvard university undergraduate admissions, harvard college, travel to harvard" /> <meta name="description" content="The main website for the Harvard College Admissions Office which oversees undergraduate admissions for Harvard University." /></head>


50 of 118 3/14/2006 2:04 PM

Visual Design

LogoTitleNavigationContent


51 of 118 3/14/2006 2:04 PM

Creating ContentPeople scan Web content. Content designed for print publications will need to be made Web-friendly:

Information needs to be "chunked"For existing print content, reduce word count by 50%Use bullet lists, subheadingsAdd appropriate hyperlinksProvide print-friendly (either PDF or HTML) versions for certain documents


52 of 118 3/14/2006 2:04 PM

Technology Constraintsmonitorbrowserinternet connection speedplugins


53 of 118 3/14/2006 2:04 PM

Design "Above the Fold"Check your pages for several window sizes:

640 x 480800 x 6001024 x 768


54 of 118 3/14/2006 2:04 PM

Below the FoldAbove the fold:

Below the fold:


55 of 118 3/14/2006 2:04 PM

and even more:


56 of 118 3/14/2006 2:04 PM


57 of 118 3/14/2006 2:04 PM

Below the Fold, Part 2Above the fold:

Below the fold:


58 of 118 3/14/2006 2:04 PM


59 of 118 3/14/2006 2:04 PM

Page Design: Fixed or Variable Width?Printing: 560 pixels maximum for fixed widthReading: about the sameAvoid horizontal scrollingVariable width does not waste space, but may make text lines too long.


60 of 118 3/14/2006 2:04 PM

CNN - fixed table width


61 of 118 3/14/2006 2:04 PM


62 of 118 3/14/2006 2:04 PM

W3C - flexible table width


63 of 118 3/14/2006 2:04 PM

Page WeightTake advantage of client-side caching: re-use URLs for CSS, images, javascript throughout the side.

Decide on per page kilobyte budget (30kb, 40kb, 50kb, etc.) which reflects your audience.


64 of 118 3/14/2006 2:04 PM

URLs as UIFile structure should resemble site organization.For some users, your URL can also function as a user-interface. (Alertbox: URL as UI)

http://www.macromedia.com/software/dreamweaver/http://www.macromedia.com/software/fireworks/http://www.macromedia.com/software/flash/http://www.macromedia.com/software/homesite/

Keep to less than 72 characters so that it doesn't "wrap" in an email or when printed.Often "advertised" or "published" URLs will be short and easy to remember. These URLs can be redirected to the true resource viaApache Redirect or Rewrite directivesOr use something like TinyURL.com


65 of 118 3/14/2006 2:04 PM

Homepage is often a different beast.

Boeing


66 of 118 3/14/2006 2:04 PM

Harvard College


67 of 118 3/14/2006 2:04 PM


68 of 118 3/14/2006 2:04 PM


69 of 118 3/14/2006 2:04 PM

An Aside: The Wayback Machine

Internet Archive Wayback Machine


70 of 118 3/14/2006 2:04 PM

Southwest Airlines

Southwest Airlines, 1998



71 of 118 3/14/2006 2:04 PM



72 of 118 3/14/2006 2:04 PM



73 of 118 3/14/2006 2:04 PM


74 of 118 3/14/2006 2:04 PM

Commonwealth of Massachusetts

1998


75 of 118 3/14/2006 2:04 PM


76 of 118 3/14/2006 2:04 PM

1999


77 of 118 3/14/2006 2:04 PM


78 of 118 3/14/2006 2:04 PM

2002


79 of 118 3/14/2006 2:04 PM


80 of 118 3/14/2006 2:04 PM

2003


81 of 118 3/14/2006 2:04 PM


82 of 118 3/14/2006 2:04 PM

2004


83 of 118 3/14/2006 2:04 PM


84 of 118 3/14/2006 2:04 PM

2005


85 of 118 3/14/2006 2:04 PM


86 of 118 3/14/2006 2:04 PM

Internal Revenue Service

2001


87 of 118 3/14/2006 2:04 PM


88 of 118 3/14/2006 2:04 PM

2003

2005


89 of 118 3/14/2006 2:04 PM


90 of 118 3/14/2006 2:04 PM

Boston.com

1997


91 of 118 3/14/2006 2:04 PM


92 of 118 3/14/2006 2:04 PM

1999


93 of 118 3/14/2006 2:04 PM


94 of 118 3/14/2006 2:04 PM

2001


95 of 118 3/14/2006 2:04 PM


96 of 118 3/14/2006 2:04 PM

2002


97 of 118 3/14/2006 2:04 PM


98 of 118 3/14/2006 2:04 PM

2003


99 of 118 3/14/2006 2:04 PM

2004


100 of 118 3/14/2006 2:04 PM

2005


101 of 118 3/14/2006 2:04 PM


102 of 118 3/14/2006 2:04 PM

Accessibility"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Two initiatives to be aware of:

W3C Web Accessibility Initiative (WAI)United States Government Section 508


103 of 118 3/14/2006 2:04 PM

W3C Web Accessibility Initiative (WAI)W3C's Web Accessibility Initiative (WAI)http://www.w3.org/WAI/

WAI Resources on Introducing Web AccessibilityQuick Tips to Make Accessible Web Sites

The Details

Web Content Acccessibility Guidelines 1.0 (WCAG 1.0)http://www.w3.org/TR/WAI-WEBCONTENTTechniques for Web Content Accessibility 1.0http://www.w3.org/TR/WAI-WEBCONTENT-TECHSList of Checkpoints for Web Content Accessibillity Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/checkpoint-listChecklist of Checkpoints for Web Content Accessibility Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/full-checklist


104 of 118 3/14/2006 2:04 PM

W3C WAI Guidelines: ThemesEnsuring Graceful TransformationGuidelines 1 to 11Making Content Understandable and NavigableGuidelines 12 to 14


105 of 118 3/14/2006 2:04 PM

W3C WAI Guidelines14 Guidelines

Three levels of conformance:

Priority 1: must16 checkpoints

Priority 2: should30 checkpoints

Priority 3: may19 checkpoints


106 of 118 3/14/2006 2:04 PM

10 Quick Tips to Make Accessible Web Sites from the W3C

This content taken from WAI, Quick Tips to Make Accessible Web Sites, http://www.w3.org/WAI/References/QuickTips/Overview.php

The links in the Quick Tips below mostly go to the techniques documents that provide implementation guidance - including explanations,strategies, and detailed markup examples.

Images & animations: Use the alt attribute to describe the function of each visual.1.Image maps. Use the client-side map and text for hotspots.2.Multimedia. Provide captioning and transcripts of audio, and descriptions of video.3.Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."4.Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.5.Graphs & charts. Summarize or use the longdesc attribute.6.Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.7.Frames. Use the noframes element and meaningful titles.8.Tables. Make line-by-line reading sensible. Summarize.9.Check your work.Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG10.

© W3C (MIT, INRIA, Keio) 2001/01


107 of 118 3/14/2006 2:04 PM

Section 508United States Federal Government Section 508: "The Road to Accessibility"http://www.section508.gov/


108 of 118 3/14/2006 2:04 PM

Accessibility ImplementationOrganizations

W3C WAICenter for Applied Special Technology (CAST)Web Accessibility in Mind (WebAIM)

Tools and ResourcesResource List: WAI ResourcesOpera Browser: Using Opera to Check for AccessibilityTool: WAVE 3.0 from WebAIMTool: WebXACT from Watchfire


109 of 118 3/14/2006 2:04 PM

Example: ready.govReady.gov: From the U.S. Department of Homeland Security


110 of 118 3/14/2006 2:04 PM

Text ViewOpera User Style Sheet, "Text" view:

<body><a href="#mainnav"><img src="_images/s.gif" alt="Skip to main navigation"></a><a href="#content"><img src="_images/s.gif" alt="Skip to main content"></a>


111 of 118 3/14/2006 2:04 PM

Ready.gov: From the U.S. Department of Homeland Security


112 of 118 3/14/2006 2:04 PM

High Contrast ViewOpera User Style Sheet, "High Contrast (W/B)" view:


113 of 118 3/14/2006 2:04 PM


114 of 118 3/14/2006 2:04 PM



115 of 118 3/14/2006 2:04 PM

Images OffImages disabled (Opera or Firefox Web Developer Extension)



116 of 118 3/14/2006 2:04 PM

Small ScreenOpera "small screen" view


117 of 118 3/14/2006 2:04 PM


118 of 118 3/14/2006 2:04 PM


Table of Contents | All Slides | Link List | Examples | CSCI E-12

Documents

Table of Contents | All Slides | Link List | Examples ...cscie12.dce.harvard.edu/lecture_notes/2005-06/cscie12_20060314.pdf · 14.03.2006 · technology profile Web experience What