2. Chapter Concepts Understand Design Guidelines: Appearance
OVERVIEW
Chapter Concepts
Understand Design Guidelines: Appearance
Understand Design Guidelines: Interactivity
Multimedia for the Web

3. Introduction Use basic standards of design
Designs should be cohesive and functional
Key is planning phase
Design must be user-centered, not designer-centered
Focus on user wants and needs
Multimedia for the Web

4. INTRODUCTION
Introduction
Design strategy should be solid; simple, easily understood, easy to use
Web site should be intuitive
Users should know where they are and where they can go
Home page indicates what is contained in site and how to navigate
Multimedia for the Web

5. INTRODUCTION
Introduction
Principles based on design guidelines: target audience, content, type of Web site
Two broad categories of design guidelines:
Appearance
Interactivity
Multimedia for the Web

6. Understand Design Guidelines: Appearance
CONCEPT 1
Understand Design Guidelines: Appearance
Superb visual design and high editorial standards inspire confidence
Design guidelines related to overall appearance of Web site include:
Metaphor
Consistency
Template
Content (continued on next slide)
Multimedia for the Web

7. Understand Design Guidelines: Appearance
CONCEPT 1
Understand Design Guidelines: Appearance
Design guidelines (continued)
Balanced layout
Movement
Color scheme
Independence
Functionality
Unity
Multimedia for the Web

8. CONCEPT 1
Metaphor
Metaphor: figurative representation that links content of site to established mental model
E-commerce metaphor is electronic shopping cart
Metaphors must be concrete, obvious
Multimedia for the Web

9. Metaphor Consistent with Web site’s content
CONCEPT 1
Metaphor
Consistent with Web site’s content
Metaphors must be appropriate; otherwise, they mislead and confuse user
Metaphor should reinforce the message, appeal to target audience without detracting from content
Multimedia for the Web

10. Consistency Consistency is an essential component of Web site
CONCEPT 1
Consistency
Consistency is an essential component of Web site
Applies to both appearance and navigation scheme
Navigation bar remains consistent from one page to the next
Multimedia for the Web

11. CONCEPT 1
Consistency
Multimedia for the Web

12. CONCEPT 1
Template
Precise layout indicating where various elements will appear on the Web page
Dictate positions of various elements
Graphics, Heading, Menu, Text, Navigation bar
Multimedia for the Web

13. Template Templates can aid the design process in several ways
CONCEPT 1
Template
Templates can aid the design process in several ways
Provide consistency
Shorten development time
Prevent “object shift”
Templates that utilize grids can prevents objects from shifting
Multimedia for the Web

14. CONCEPT 1
Template
Multimedia for the Web

15. CONCEPT 1
Content
All multimedia elements (text, graphics, animation, sound, and video) should complement content, not be the focus
Major consideration in designing site is determining:
What content
How many levels users must navigate
Multimedia for the Web

16. Content Less text is usually better
CONCEPT 1
Content
Less text is usually better
Excess content requires more levels
More levels add to confusion and frustration for user
Reduce levels by providing hyperlinks (also called links)
Multimedia for the Web

17. Content Make sure content always accessible
CONCEPT 1
Content
Make sure content always accessible
Users do not read a Web page; they scan it, looking for keywords/links
First-time visitors to a Web site generally spend less than 60 seconds on the Web page
Multimedia for the Web

18. Content Web site must capture visitor’s interest
CONCEPT 1
Content
Web site must capture visitor’s interest
Text still the primary element used to convey information; text must be readable
Always test your color and background combinations
Multimedia for the Web

19. CONCEPT 1
Content
Multimedia for the Web

20. CONCEPT 1
Links or Hyperlinks
Replace parts of original Web page with new content
Give users frame of reference, allow user to return quickly to previously viewed page
Allow designers to keep text on each page to a minimum
Multimedia for the Web

21. CONCEPT 1
Balanced layout
Balance in Web page design refers to the distribution of optical weight in the layout
Optical weight is the ability of an element to attract the user’s eye
Each element has optical weight as determined by its nature and size
Multimedia for the Web

22. CONCEPT 1
Balanced layout
Nature of an element refers to its shape, color, brightness, type
Balance determined by the weight of the elements and their position on the Web page
Three types of balance:
symmetrical balance, asymmetrical balance, no balance
Multimedia for the Web

23. CONCEPT 1
Balanced layout
Multimedia for the Web

24. CONCEPT 1
Symmetrical balance
Symmetrical balance: arranging elements as mirrored images on both sides of a center line
Symmetrical design is static
Suggests order and formality
Appropriate to highlight corporate image of conservative organizations
Multimedia for the Web

25. CONCEPT 1
Asymmetrical Balance
Asymmetrical balance: arranging non-identical elements on both sides of a center line
Asymmetrical design is dynamic; suggests diversity and informality
Might be appropriate for entertainment Web sites for a feeling of movement and discovery
Multimedia for the Web

26. CONCEPT 1
White Space
Do not forget white space; the blank areas on a page where text and other elements are not found
Blank space does not have to be white
Users like space between elements
Multimedia for the Web

27. CONCEPT 1
White Space
Multimedia for the Web

28. CONCEPT 1
Movement
Relates to how the user’s eye moves through the elements on the page
Optical center; a point somewhat above the physical center of the page
As designers for a global community, critical to include visual clues such as arrows that help direct the viewers’ movement on the page
Multimedia for the Web

29. Movement To have user work through content in more structured way:
CONCEPT 1
Movement
To have user work through content in more structured way:
Control where user starts on page
Use lines or objects that point the user in a certain direction
Use color gradients that go from light shade to dark shade (continued next slide)
Multimedia for the Web

30. CONCEPT 1
Movement
(continued from last slide)
Have people or animals look in the direction the user should look
Emphasize an element; make it a different shape or color, surround it with white space, use a different font or type style, create borders, or use different backgrounds for selected objects
Multimedia for the Web

31. Color scheme Powerful communication tool
CONCEPT 1
Color scheme
Powerful communication tool
Wrong colors may communicate the wrong message
Color evokes emotion and associations
Adding color changes the look of pages without adding to file size
Multimedia for the Web

32. CONCEPT 1
Color scheme
Multimedia for the Web

33. Color scheme Increase visual appeal Improve readability
CONCEPT 1
Color scheme
Increase visual appeal
Improve readability
Color signals changes in context
Fewer colors create a cleaner, more tasteful look
Design with a monochromatic color scheme
Multimedia for the Web

34. Color scheme Easier to work with dark objects on light backgrounds
CONCEPT 1
Color scheme
Easier to work with dark objects on light backgrounds
Web authoring programs include pre-set color schemes
Themes contain color schemes, and consist of unified design elements for bullets, fonts, images
Multimedia for the Web

35. Independent and Functional
CONCEPT 1
Independent and Functional
Keep site fresh and functional
Internal and external links must be maintained
Web pages need to be more freestanding than pages in print
Single Web page may be only page viewed by user
Multimedia for the Web

36. Independent and Functional
CONCEPT 1
Independent and Functional
Multimedia for the Web

37. Independent and Functional
CONCEPT 1
Independent and Functional
For consistency, include basic information on each page:
Contact information
Last modified date
Copyright notice
Link to home page
A Frequently Asked Questions page can be helpful
Multimedia for the Web

38. Unified Piece Two types of Unity:
CONCEPT 1
Unified Piece
Two types of Unity:
Intra-page unity: how the various page elements relate
Inter-page unity: interactive design that users encounter as they navigate from one Web page to another
Multimedia for the Web

39. CONCEPT 1
Unified Piece
Maintain consistency in shapes, colors, text styles, themes
In games or entertainment sites, unified design may be too dull
Users appreciate common metaphor, color scheme, navigation method from page to page
Multimedia for the Web

40. Understand Design Guidelines: Interactivity
CONCEPT 2
Understand Design Guidelines: Interactivity
Developers must design the site’s interactivity
Interactive design must be user-centered:
If sound is played, user should be able to adjust volume
User to decide to play a video or download a plug-in
Multimedia for the Web

41. The User Interface User interface is crucial
CONCEPT 2
The User Interface
User interface is crucial
When designing the user interface, you are establishing the foundation of the Web site
Interface gives users direct control over the Web site
Metaphors, images, and concepts
Multimedia for the Web

42. CONCEPT 2
The User Interface
Impossible to fully separate design from function in interactive sites
Users expect function and sophistication from all interfaces
Navigational structure should be transparent to user
Multimedia for the Web

43. CONCEPT 2
The User Interface
Multimedia for the Web

44. Optimize User Access and Control
CONCEPT 2
Optimize User Access and Control
Users must know where they are within overall structure of the site
Users want quick and easy access to content of site
Should be easy to return to home page or other major pages
Multimedia for the Web

45. Quick to Load Users will not tolerate delay
CONCEPT 2
Quick to Load
Users will not tolerate delay
Research shows threshold of frustration for any computer-related task is about 10 seconds
To improve download time, optimize graphics and use thumbnails
Multimedia for the Web

46. CONCEPT 2
Quick to Load
Broadband connections and improved compression and streaming have made multimedia possible on Web, but download speed is still a major issue in Web page design
Keep page size smaller than 100k
Multimedia for the Web

47. CONCEPT 2
Link Effectively
Multimedia for the Web

48. Link Effectively Users favor menus with minimum of five to nine links
CONCEPT 2
Link Effectively
Users favor menus with minimum of five to nine links
Users favor a few Web pages with lots of choices
Additional links through hot spots, mouseovers
Multimedia for the Web

49. CONCEPT 2
Link Effectively
Goal is to provide users with the information they want:
Fewest number of steps
Shortest amount of time
Using least amount of screen real estate
Multimedia for the Web

50. Link Effectively Web based on cross-linking or cross-referencing
CONCEPT 2
Link Effectively
Web based on cross-linking or cross-referencing
By establishing a clearly identified page of external links, users will not unknowingly leave your site
Open external links in separate browser window
Multimedia for the Web

51. Sense of Context Contextual clues for user include:
CONCEPT 2
Sense of Context
Contextual clues for user include:
Familiar and intuitive icons
A common color scheme
Consistent method of navigation
Graphic similarity
Consistent approach to layout reinforces user’s sense of context
Multimedia for the Web

52. Provide Choices and Escapes
CONCEPT 2
Provide Choices and Escapes
Avoid long introductions of automatically scrolling text, narration, music, credits
Provide a way to skip or escape introductory elements
Provide way for user to control the playing of animations, sound, video
Multimedia for the Web

53. Opportunity for Feedback
CONCEPT 2
Opportunity for Feedback
Give users an opportunity to establish an ongoing relationship with company or organization
Users need to be able to communicate with company or organization online
Multimedia for the Web

54. Opportunity for Feedback
CONCEPT 2
Opportunity for Feedback
Multimedia for the Web

55. CONCEPT 2
Equal Access
Many people have disabilities that prevent them from taking advantage of media elements
Many visually impaired individuals use a text-based Web browser
For them to take advantage of your content, include alternative text
Multimedia for the Web

56. CONCEPT 2
Equal Access
There are laws in place that require Web sites that receive federal funding to be accessible by people with disabilities
Check government Web sites or to stay current on these laws
Multimedia for the Web

57. Summary Introduction Understand Design Guidelines: Appearance Metaphor
Consistency
Template
Content
Multimedia for the Web

58. Summary Links or Hyperlinks Balanced layout Symmetrical balance
Asymmetrical Balance
White Space
Movement
Color scheme
Multimedia for the Web

59. Summary Independent and Functional Unified Piece
Understand Design Guidelines: Interactivity
The User Interface
Optimize User Access and Control
Multimedia for the Web

60. Summary Quick to Load Link Effectively Sense of Context
Provide Choices and Escapes
Opportunity for Feedback
Equal Access
Multimedia for the Web