multimedia for the web: creating digital excitement design and the user interface
TRANSCRIPT
2Multimedia for the Web Chapter 3
Understand Design Guidelines: Appearance
Understand Design Guidelines: Interactivity
Chapter Concepts
3Multimedia for the Web Chapter 3
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
Introduction
4Multimedia for the Web Chapter 3
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
Introduction
5Multimedia for the Web Chapter 3
Principles based on design guidelines: target audience, content, type of Web site
Two broad categories of design guidelines: – Appearance– Interactivity
Introduction
6Multimedia for the Web Chapter 3
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)
Understand Design Guidelines: Appearance
7Multimedia for the Web Chapter 3
Design guidelines (continued)
– Balanced layout– Movement– Color scheme– Independence– Functionality – Unity
Understand Design Guidelines: Appearance
8Multimedia for the Web Chapter 3
Metaphor: figurative representation that links content of site to established mental model– E-commerce metaphor is electronic
shopping cart
Metaphors must be concrete, obvious
Metaphor
9Multimedia for the Web Chapter 3
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
Metaphor
10Multimedia for the Web Chapter 3
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
Consistency
12Multimedia for the Web Chapter 3
Precise layout indicating where various elements will appear on the Web page
Dictate positions of various elements– Graphics, Heading, Menu, Text,
Navigation bar
Template
13Multimedia for the Web Chapter 3
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
Template
15Multimedia for the Web Chapter 3
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
Content
16Multimedia for the Web Chapter 3
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)
Content
17Multimedia for the Web Chapter 3
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
Content
18Multimedia for the Web Chapter 3
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
Content
20Multimedia for the Web Chapter 3
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
Links or Hyperlinks
21Multimedia for the Web Chapter 3
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
Balanced layout
22Multimedia for the Web Chapter 3
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
Balanced layout
24Multimedia for the Web Chapter 3
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
Symmetrical balance
25Multimedia for the Web Chapter 3
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
Asymmetrical Balance
26Multimedia for the Web Chapter 3
Do not forget white space; the blank areas on a page wheretext and other elements are not found
Blank space does not have to be white
Users like space between elements
White Space
28Multimedia for the Web Chapter 3
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
Movement
29Multimedia for the Web Chapter 3
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)
Movement
30Multimedia for the Web Chapter 3
(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
Movement
31Multimedia for the Web Chapter 3
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
Color scheme
33Multimedia for the Web Chapter 3
Increase visual appeal
Improve readability
Color signals changes in context
Fewer colors create a cleaner, more tasteful look
Design with a monochromatic color scheme
Color scheme
34Multimedia for the Web Chapter 3
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
Color scheme
35Multimedia for the Web Chapter 3
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
Independent and Functional
37Multimedia for the Web Chapter 3
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
Independent and Functional
38Multimedia for the Web Chapter 3
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
Unified Piece
39Multimedia for the Web Chapter 3
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
Unified Piece
40Multimedia for the Web Chapter 3
Developers must design the site’s interactivityInteractive 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
Understand Design Guidelines: Interactivity
41Multimedia for the Web Chapter 3
User interface is crucialWhen designing the user interface, you are establishing the foundation of the Web siteInterface gives users direct control over the Web siteMetaphors, images, and concepts
The User Interface
42Multimedia for the Web Chapter 3
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
The User Interface
44Multimedia for the Web Chapter 3
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
Optimize User Access and Control
45Multimedia for the Web Chapter 3
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
Quick to Load
46Multimedia for the Web Chapter 3
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
Quick to Load
48Multimedia for the Web Chapter 3
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
Link Effectively
49Multimedia for the Web Chapter 3
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
Link Effectively
50Multimedia for the Web Chapter 3
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
Link Effectively
51Multimedia for the Web Chapter 3
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
Sense of Context
52Multimedia for the Web Chapter 3
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
Provide Choices and Escapes
53Multimedia for the Web Chapter 3
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
Opportunity for Feedback
55Multimedia for the Web Chapter 3
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
Equal Access
56Multimedia for the Web Chapter 3
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 www.w3.org to stay current on these laws
Equal Access
57Multimedia for the Web Chapter 3
IntroductionUnderstand Design Guidelines: AppearanceMetaphorConsistencyTemplateContent
Summary
58Multimedia for the Web Chapter 3
Links or HyperlinksBalanced layoutSymmetrical balanceAsymmetrical BalanceWhite SpaceMovementColor scheme
Summary
59Multimedia for the Web Chapter 3
Independent and FunctionalUnified PieceUnderstand Design Guidelines: Interactivity The User InterfaceOptimize User Access and Control
Summary