Mgt 240 Lecture

1
Mgt 240 Lecture

• Web Site Design Principles
• April 5, 2005

2
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

3
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.

4
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.

5
Determining Site Goals for Fort Worth Museum of
Western Art
6
Using Site Goals for Site Planning and Design

• Site goals impact site
• Content
• Organization
• Structure

7
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.

8
General User Profile Questions

• What is the age range of the user?
• What is the gender of the user?
• What is the economic situation of the user?
• What is the geographic location of the user?
• What is the primary language of the user?
• What is the ethnic background of the user?
• Are there other unifying characteristics that are
  relevant to the user?

9
Identifying Target Audience for Fort Worth Museum
of Western Art

• Fort Worth demographics
• Fort Worth demographics
• Fort Worth demographics
• Dallas demographics

10
Insights from Demographics for Web Site
11
Using Target Audience for Site Planning and Design

• Design site to respond to user
• Wants
• Needs
• Technical proficiencies
• More?

12
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

13
Research Other Western Museum Sites

• Amon Carter Museum
• Eiteljorg Museum
• Booth Western Art Museum
• Sid Richardson Collection of Western Art

14
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.

15
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.

16
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

17
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.

18
Information Architecture Outline for Western
Museum of Art
19
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.

20
Creating Information Architecture
A sample flow chart with a shape key
21
Flow Chart for Western Museum of Art
22
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

23
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.

24
Potential Metaphors for Western Museum of Art
25
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.

26
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.

27
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

28
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.

29
Potential Graphics Choices for Western Museum of
Art
30
Designing a Web Site
Sample layout sketches (Catalyst site)
31
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?

32
Design Guidelines

• Use a consistent look and feel
• Use recurring visual elements
• Dont use dark backgrounds
• Dont cram your pages with too much text and too
  many graphics
• Dont force users to scroll horizontally

33
Web Design Dos

• 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

34
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

35
Web Design Donts

• Avoid using frames
• Avoid audio
• Avoid video
• Dont spam

36
Examples of Bad Design

• Web pages that suck