Transcript Web Site Design Principles

Mgt 240 Lecture
Web Site Design Principles
April 5, 2005
Planning and Designing a
Successful 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 Problem

C. J. Strittmayer, who has been hired to
design the Web site for the Fort Worth
Museum of Western Art, asks you to work
on the plan and design of the new Web
site.
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
Worth Museum of Western Art
Using Site Goals for Site Planning
and Design

Site goals impact site



Content
Organization
Structure
Identifying the Target Audience
• 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 Questions
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 Fort
Worth Museum of Western Art




Fort Worth demographics
Fort Worth demographics
Fort Worth demographics
Dallas demographics
Insights from Demographics for
Web Site
Using Target Audience for Site
Planning and Design

Design site to respond to user




Wants
Needs
Technical proficiencies
More?
Designing for Multiple Audiences



Identify each user group
Define the need of each group -information & functions
Will need to design site to accommodate
needs of each group
Research Other Western Museum
Sites




Amon Carter Museum
Eiteljorg Museum
Booth Western Art Museum
Sid Richardson Collection of Western Art
Conducting Market Research
• 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 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
Architecture
• 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
Architecture
• 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 Outline for
Western Museum of Art
Creating Information
Architecture
• 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
Architecture
A sample flow chart with a shape key
Flow Chart for Western Museum of
Art
Creating Information
Architecture
• 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 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 Western
Museum of Art
Designing 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 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 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 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
Western Museum of Art
Designing a Web Site
Sample layout sketches (Catalyst site)
Checking the Design for Logic



Is the navigation system easy to follow?
Does the graphic style support the site
metaphor?
Do the individual elements flow together
to create a consistent look for the site?
Design Guidelines





Use a consistent look and feel
Use recurring visual elements
Don’t use dark backgrounds
Don’t cram your pages with too much text
and too many graphics
Don’t force users to scroll horizontally
Web Design Do’s

Use meta tags












Title, meta description, meta keywords
Simply state the purpose of your web site
Use a simple intuitive navigation scheme
Use multiple browsers to test web site
Test at multiple resolutions and font settings
Use pictures appropriately
Include dynamic content
Use a good host for your web site
Keep your site fresh
Test, test, test
Collect user stats
Design for a 2-10 second maximum download
Page Layout Guidelines






Align page elements
Establish level of importance
Be consistent
Reduce unused space
Put important information at top of page
Format for efficient viewing
Web Design Don’ts




Avoid using frames
Avoid audio
Avoid video
Don’t spam
Examples of Bad Design

Web pages that suck