Mgt 240 LectureMgt 240 Lecture

Web Site Design PrinciplesWeb Site Design Principles

April 5, 2005April 5, 2005

Planning and Designing a Planning and Designing a Successful Web SiteSuccessful Web Site

• Steps for successful web site planning and design– Determine the site goals

– Identify the target audience

– Conduct market research

– Create end-user scenarios

Case ProblemCase Problem

C. J. Strittmayer, who has been hired C. J. Strittmayer, who has been hired to design the Web site for the Fort to design the Web site for the Fort Worth Museum of Western Art, asks Worth Museum of Western Art, asks you to work on the plan and design you to work on the plan and design of the new Web site.of the new Web site.

Determining Site Goals Determining Site Goals

• First you must determine the goals, audience and expectations for the site.

• Determining the site goals:– Brainstorm to determine what the goals might be – for

instance to sell a product, provide information about the product or give help.

– Sort the goals into order of importance.

– Review and refine the list, combining goals if possible.

– Focus on the first four or five in the site design.

Determining Site Goals for Fort Determining Site Goals for Fort Worth Museum of Western ArtWorth Museum of Western Art

Using Site Goals for Site Using Site Goals for Site Planning and DesignPlanning and Design

Site goals impact siteSite goals impact site ContentContent OrganizationOrganization StructureStructure

Identifying the Target Identifying the Target AudienceAudience

• Set up a list of questions to allow you to profile the characteristics of the site users (user profile).

• Use data gathered from any previous Web sites.

• Use the determined profile to make content decisions for the site.

• Focus the design to match the needs of the user profile audience.

General User Profile General User Profile QuestionsQuestions

1. What is the age range of the user?

2. What is the gender of the user?

3. What is the economic situation of the user?

4. What is the geographic location of the user?

5. What is the primary language of the user?

6. What is the ethnic background of the user?

7. Are there other unifying characteristics that are relevant to the user?

Identifying Target Audience for Identifying Target Audience for Fort Worth Museum of Western Fort Worth Museum of Western

ArtArt Fort Worth demographicsFort Worth demographics Fort Worth demographicsFort Worth demographics Fort Worth demographicsFort Worth demographics Dallas demographicsDallas demographics

Insights from Demographics for Insights from Demographics for Web SiteWeb Site

Using Target Audience for Site Using Target Audience for Site Planning and DesignPlanning and Design

Design site to respond to userDesign site to respond to user WantsWants NeedsNeeds Technical proficienciesTechnical proficiencies More?More?

Designing for Multiple Designing for Multiple AudiencesAudiences

Identify each user groupIdentify each user group Define the need of each group -- Define the need of each group --

information & functionsinformation & functions Will need to design site to Will need to design site to

accommodate needs of each groupaccommodate needs of each group

Research Other Western Research Other Western Museum SitesMuseum Sites

AmonAmon Carter Museum Carter Museum EiteljorgEiteljorg Museum Museum Booth Western Art MuseumBooth Western Art Museum Sid Richardson Collection of Western Sid Richardson Collection of Western

ArtArt

Conducting Market Conducting Market ResearchResearch

• Look at the target audiences preferences for your product or service.

• Evaluate similar products and their Web sites.

• Use a search engine like Altavista or Google to locate data about the target audience.

• Review the information to get an understanding of the target audiences habits, etc.

• Explore sample sites that the target audience frequents, looking at graphics, colors, design, etc.

Creating End-User ScenariosCreating End-User Scenarios

• An end-user scenario is an imagined situation in which the target audience might access a Web site.

• Scenarios help evaluate in what situations someone might access the Web site and to help them get the information they need.

• Scenarios help hone the design information and create a more user-friendly site.

Creating Information Creating Information ArchitectureArchitecture

• Information Architecture – determining what the site should do and creating a framework to accomplish it.

• It should:– Provide a blueprint for page arrangement

– Set up site navigation

– Provide page content organization

Creating Information Creating Information ArchitectureArchitecture

• The Web site should be organized into categories that will provide the main navigation paths.

• The main navigation system is the interface that visitors use to move through a Web site.

• The navigation system will appear on every page of the site to facilitate movement through the site.

• You should have no more than 5 main categories.

• The categories should be based on the site goals and information gathered during planning.

Information Architecture Information Architecture Outline for Western Museum of Outline for Western Museum of

ArtArt

Creating Information Creating Information ArchitectureArchitecture

• The next step is to create a flowchart from the category outline.

• A flowchart represents the outline in picture form using geometric shapes and connector lines.

• In a flowchart, the shapes represent steps, decision points, and dead ends.

• The lines represent the connection of steps.

Creating Information Creating Information ArchitectureArchitecture

A sample flow chart with a shape key

Flow Chart for Western Flow Chart for Western Museum of ArtMuseum of Art

Creating Information Creating Information ArchitectureArchitecture

• Now you need to gather and organize the content for each page of the Web site.

• There are many sources to use when gathering information, such as: – Company and management team interviews

– Promotional materials

– Company documentation including logos and graphics

– Outside research sources

Designing a Web SiteDesigning a Web Site

• You will need to set up a site concept (unifying theme) for the Web site.– Review the artwork and Web sites that appeal to your

target audience.

– Make a list of words that reinforce the site goals and say what you want the site to convey.

– Write the concept out on paper.

• Then create a metaphor to use to represent your site concept – such as representing fluidity with lines and colors to represent a river.

Potential Metaphors for Potential Metaphors for Western Museum of ArtWestern Museum of Art

Designing a Web SiteDesigning a Web Site

• You will also need to select colors for the site:– Colors set the tone of the site and create an emotional

response from the user.

– How colors interact can be shown by the RGB (red, green, blue) system.

– Color can be used for emphasis or to differentiate different categories of information, for instance

– You should keep your color selection simple and pleasing, using no more that 3 to 6 colors per site.

– Use your color choices to enhance the mood you desire.

Designing a Web SiteDesigning a Web Site

• You must also select the fonts for the web site– Consider what you are trying to convey - Fonts elicit

responses and should be consistent with the site concept and metaphor.

– Consider accessibility – some users may have trouble reading some fonts or sizes of text.

• Links are often done in different colors to show status such as unused, active or visited.

Designing a Web SiteDesigning a Web Site

• Graphics add interest and personality. Graphics include images, photos, buttons, logos, etc.

• To create a cohesive site, the graphics should all follow the same style:– Be consistent

– Design with purpose

– Consider size

– Consider the target audience

– Support your concept and metaphor

Designing a Web SiteDesigning a Web Site

• With all of your elements (color, font, graphics, etc) selected, sketch out the layout of each page.– Remember the site goals and metaphor.

– Consider ease and appeal.

– Do a layout sketch and then a comp (comprehensive drawing)

• When the comps are complete, you need to check your site design, ensuring all of the goals are met, the site is consistent and navigation is easy.

Potential Graphics Choices for Potential Graphics Choices for Western Museum of ArtWestern Museum of Art

Designing a Web SiteDesigning a Web SiteSample layout sketches (Catalyst site)

Checking the Design for Checking the Design for LogicLogic

Is the navigation system easy to Is the navigation system easy to follow?follow?

Does the graphic style support the Does the graphic style support the site metaphor?site metaphor?

Do the individual elements flow Do the individual elements flow together to create a consistent look together to create a consistent look for the site?for the site?

Design GuidelinesDesign Guidelines

Use a consistent look and feelUse a consistent look and feel Use recurring visual elementsUse recurring visual elements Don’t use dark backgroundsDon’t use dark backgrounds Don’t cram your pages with too Don’t cram your pages with too

much text and too many graphicsmuch text and too many graphics Don’t force users to scroll Don’t force users to scroll

horizontallyhorizontally

Web Design Do’sWeb Design Do’s

Use meta tagsUse meta tags Title, meta description, meta keywordsTitle, meta description, meta keywords

Simply state the purpose of your web siteSimply state the purpose of your web site Use a simple intuitive navigation schemeUse a simple intuitive navigation scheme Use multiple browsers to test web siteUse multiple browsers to test web site Test at multiple resolutions and font settingsTest at multiple resolutions and font settings Use pictures appropriatelyUse pictures appropriately Include dynamic contentInclude dynamic content Use a good host for your web siteUse a good host for your web site Keep your site freshKeep your site fresh Test, test, testTest, test, test Collect user statsCollect user stats Design for a 2-10 second maximum downloadDesign for a 2-10 second maximum download

Page Layout GuidelinesPage Layout Guidelines

Align page elementsAlign page elements Establish level of importanceEstablish level of importance Be consistentBe consistent Reduce unused spaceReduce unused space Put important information at top of Put important information at top of

pagepage Format for efficient viewingFormat for efficient viewing

Web Design Don’tsWeb Design Don’ts

Avoid using framesAvoid using frames Avoid audioAvoid audio Avoid videoAvoid video Don’t spamDon’t spam

Examples of Bad DesignExamples of Bad Design

Web pages that suckWeb pages that suck