Multimedia for the Web: Creating Digital Excitement Design and the User Interface.

Multimedia for the Web: Creating Digital Excitement

Design and the User Interface

2Multimedia for the Web Chapter 3

Understand Design Guidelines: Appearance

Understand Design Guidelines: Interactivity

Chapter Concepts


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


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


Principles based on design guidelines: target audience, content, type of Web site

Two broad categories of design guidelines: – Appearance– Interactivity

Introduction


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)



Design guidelines (continued)

– Balanced layout– Movement– Color scheme– Independence– Functionality – Unity



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


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


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


Consistency


Precise layout indicating where various elements will appear on the Web page

Dictate positions of various elements– Graphics, Heading, Menu, Text,

Navigation bar

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

Template


Template


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


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


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


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


Content


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


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


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


Balanced layout


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


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


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


White Space


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


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


(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


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


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

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

Color scheme


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




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



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


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


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


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


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


The User Interface


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


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


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


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

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

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

Link Effectively


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


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


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


Opportunity for Feedback


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


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


IntroductionUnderstand Design Guidelines: AppearanceMetaphorConsistencyTemplateContent

Summary


Links or HyperlinksBalanced layoutSymmetrical balanceAsymmetrical BalanceWhite SpaceMovementColor scheme

Summary


Independent and FunctionalUnified PieceUnderstand Design Guidelines: Interactivity The User InterfaceOptimize User Access and Control

Summary


Quick to LoadLink EffectivelySense of ContextProvide Choices and EscapesOpportunity for FeedbackEqual Access

Summary

Multimedia for the Web: Creating Digital Excitement Design and the User Interface.

Documents

web consistency slide

web design guidelines

web template slide

web metaphor

web design strategy

web consistent

web templates

appearance slide