Intro to Web Design

1
Intro to Web Design
2
Web Design Difficulties

• Too much information
• Impatience of web readers
• Limits of short-term memory
• Tendency to get lost
• Reading from screens more difficult

3
Too Much Information

• Volumes of available information
• Sometimes disorganized
• Difficult to get through

4
Impatience of Web Readers

• Instant gratification takes too long
• Slow web pages leads to frustration
• Two Four seconds
• Information is disorganized or hard to find

5
Limits in Short-Term Memory

• Limits to STM independent of culture,
  intelligence, and gender
• Generally people can handle 4-6 items of
  information
• Two many choices leads to confusion
• Two few choices is inefficient

6
Tendency to Get Lost

• Web pages are not all the same
• No intuitive map of how things are organized
• Non standard controls

7
Reading from the Screens More Difficult

• Fonts are not as clear and crisp
• One screen at a time
• Space available to the designer is limited
• Continually reading from a screen is tiring

8
Design Challenge

• Understandable
• Interesting and valuable
• Capable of converting surfers to users
• Consistent and engaging
• Integration of text, graphics, audio, etc.
• Easily navigated
• Unified look and feel

9
Three Essential Criteria

• Effectiveness
• Affectiveness
• Navigational efficiency

10
Effectivenss

• Rational criterion
• Requires the presentation be
• Complete
• Sensibly organized
• Accurate in conveying the intended message

11
Affectiveness

• Emotional criterion
• Presentation should be
• Interesting
• Stimulating
• Enjoyable

12
Navigational Efficiency

• Ease of use
• Quickly find the desired information
• Consistency

13
Design Mix

• Successful web sites must satisfy all three
  criteria to some degree
• Trade-off between the three criteria
• Keep it simple
• When in doubt cut it out

14
Design Cycle

• Three stages (or more)
• Iterative process
• Gen 1 text
• Gen 2 text graphics
• Gen 3 multimedia

15
First Generation

• Formatting paper-based text as web pages
• Reflects a print-based design
• Content is very important but content alone will
  not generally sell the pages
• Basic hyperlinking

16
Second Generation

• Improved layout and design
• Better graphics
• Links that make sense
• Some content may be removed

17
Third Generation

• Deeper understanding of
• The intended user audience
• The purposes of the web presentation
• The design demands of the media
• The information presented
• Hyperlinks

18
Purpose in Design

• Three basic purposes
• To inform
• To entertain
• To enable exhange

19
Informational Pages

• Answer these questions
• What is it?
• Where is it?
• When does it take place
• Who does it?
• How does it work?
• How much does it cost?
• How can I buy it?

20
Informational pages

• Emphasize the completeness of the information
  provided
• Require decomposition of the information into
  short, comprehensible chunks
• Additional objects to help tell the story
• Maps, tables, charts, graphs, audio, video

21
Information pages

• Criteria
• Clarity
• Simplicity
• Directness

22
Entertainment Pages

• Provide
• Amusement
• Relaxation
• Diversion
• Engage in a new experience

23
Entertainment Pages

• Emphasize
• Whimsy
• Variety
• Surprise
• Action

24
Exchange pages

• Allow users to perform some useful action
• Buy something
• Submit information
• Request information
• Answer questions
• Interaction with the site

25
Exchange pages

• Emphasize
• Advertising
• Persuasion
• Fast access
• Search facilities

26
Basic Rules

• Simple
• Fast
• Easy to use