Web Design by Jack Davis Based on: The WEB WIZARD’S GUIDE TO WEB Design by James G. Lengel

Chapter 1 – Planning A Web Site Chapter Objectives - identify and describe the audience - site purpose - plan site structure - communications through site - planning table for a site

Audiences/Users Yahooligans! Fidelity Investments National Oceanic and Atmospheric Administration

Audience/Design Yahooligans Children- limited choices - pictures - simple words Fidelity Adult Investors- information & advice - quick and easy access to info. NOAA wide audience- researchers, meteorologists, and people who need weather information

User-Centered Design Organization-centered - built from company point of view - company vocabulary and structure Technology-centered - uses a particular set of tools - designed based on technology User-centered - considers target audience - what they need and how they work

Defining the Audience Demographics age gender geographic location residence: urban, suburban, rural level of income level of education race or ethnicity interest history (path of Web pages previously visited)

Defining the Audience Who are they? Why are they at the site? How did they get there? How old are they? What’s the age range? Where do they live? What gender? Why? How wealthy? History of dealing with this organization? What are the common characteristics?

Audience Definition The audience for the LeftyStuff Web site is potential purchasers of LeftyStuff products who have responded to one of LeftyStuff’s banner ads and are interested in items designed especially for left-handed people Most are adults, equally divided among men and women, between 25 and 50 years of age, who live in the United States or Canada, are sports-minded, and have family incomes greater than $50,000. Most have never visited the site before.

Site’s Purpose What the users will be trying to do and why? Part is stated in the audience definition and part is in the organization’s goals. Organization - increase the direct online sales of … - make it easy to find the right item … - easy to make purchases (credit card) - communicate the organization’s goals

Financial Times News What’s the purpose of the Financial Times Web site? - provide news and advertising - ??? (other) How would you define the audience? - age, gender, economics, history, ???

Goals & Objectives Statement of purpose should contain both goals and objectives Goals – state the desired long-term results, such as - “to increase the direct online sales of tennis racquets by 30% over the next year” - “provide a wider range of services to readers”

Goals and Objectives Objectives include specific means and methods used on the site to accomplish its goals - “to provide online readers of the newspaper with hourly updates of key news stories”

Organization and User Purposes Both types should be included in the purpose statement. A user-centered objective might be, “to promote intelligent conversation about XYZ among all audiences” An organization-centered objective – “to expand and broaden the reach of the program so it makes a greater impact on American education.”

Evaluating Success How will you know if the web site achieves the goals? To measure you must have stated measurable goals and objects. Some measures might include: - how much did product sales go up? - how many new readers registered? - how many hits on the site? - how many return hits? - how many requests?

Site Purpose Goals of the organization Goals of the user Objectives for display Objectives for interactivity Objectives for communication Objectives for technology

Planning Site Structure The layout of a web site typically includes each of the pages and functions of each part. It typically consists of a flow chart and a detailed written statement of functions. Home Page

Complete Site Structure Home Page About the Home Page Calendar of Events Teaching Resources Institutes Faculty and Staff Forums Teaching Units Publications Multimedia Synchronous Chat Discussion Topics Faculty Pages

Component Descriptions describes what’s included Teaching Resources Section This is the largest part of the site, contains materials to help teachers integrate media and democracy topics into curriculum * Teaching units: full text available on-line * Publication: references to print and on- line publications with links * Multimedia: video, audio, image and slide material

Function Descriptions describe how the site works. Functions - Dynamic home page: program staff need to change images and text on the home page weekly, without reprogramming - Database of resources: viewers need to be able to search and retrieve teaching units from a large collection. Program staff need to be able to add new units to this database easily and index them.

Goal – Function Description A good way to develop the site’s structure is to list the goals and objectives specified. Then, for each one, write a statement of functionality. Calendar of Events section: Viewers will find a listing of various types of events: workshops and institutes, offered by the program staff. Online discussions and chats offered by the program. Viewers can search events by topic, date, and other criteria. PurposeStructure To inform audiences about XYZ happenings.

“Speccing” Out the Flow Chart Adding important characteristics to the flow chart will make it more useful. - filename - graphics to be used - menu items - multimedia elements - input forms - etc.

Web Site Components Text – most efficient for many types of communication (html) - Text to be printed is a problem, one solution is to use PDF files Images – (gif, jpeg, & others) Multimedia - animation (Macromedia Flash) - sound, video - virtual reality (VR)

Interactivity is the key difference in Web applications User’s are interactive when they: -choose (select their next topic or page) -participate in animations (usually via choices) -search & find -buy & sell -manipulate (move screen objects) -construct -converse -play

Web app Planning Table Start with purpose and list site components. Purpose Structure Function Media To inform audiences about … Calendar of Events: list of events … user can link to teaching resources and … Text, with small icons for each event …