design and the user interface

Multimedia for the Web: Creating Digital Excitementg g

Design and the User InterfaceDesign and the User Interface

Chapter ConceptsUnderstand Design Guidelines: AppearanceUnderstand Design Guidelines: Interactivity y

Chapter 3 2Multimedia for the Web

IntroductionUse basic standards of designDesigns should be cohesive andDesigns should be cohesive and functionalKey is planning phaseKey is planning phaseDesign must be user-centered, not d i t ddesigner-centeredFocus on user wants and needs


IntroductionDesign strategy should be solid;simple, easily understood, easy to usep y yWeb site should be intuitiveUsers should know where they areUsers should know where they are and where they can goH i di t h t iHome page indicates what is contained in site and how to navigate


IntroductionPrinciples based on design guidelines: target audience, content, g gtype of Web siteTwo broad categories of designTwo broad categories of design guidelines: – AppearanceAppearance– Interactivity


Understand Design Guidelines: Appearance

Superb visual design and high editorial standards inspire confidence

pp

editorial standards inspire confidenceDesign guidelines related to overall appearance of Web site include:appearance of Web site include:– Metaphor– ConsistencyConsistency– Template– Content (continued on next slide)

Chapter 3

Content (continued on next slide)

6Multimedia for the Web

Understand Design Guidelines: Appearance

Design guidelines (continued)– Balanced layout

pp

– Balanced layout– Movement– Color schemeColor scheme– Independence– FunctionalityFunctionality – Unity


Metaphor

Metaphor: figurative representation that links content of site tothat links content of site to established mental model

E commerce metaphor is electronic– E-commerce metaphor is electronic shopping cart

Metaphors must be concrete obviousMetaphors must be concrete, obvious


Metaphor

Consistent with Web site’s contentM t h t b i tMetaphors must be appropriate; otherwise, they mislead and

fconfuse userMetaphor should reinforce the message, appeal to target audience without detracting from content


Consistency

Consistency is an essential component of Web sitecomponent of Web siteApplies to both appearance and

i ti hnavigation schemeNavigation bar remains consistent from one page to the next


Consistency


Template

Precise layout indicating where various elements will appear on thevarious elements will appear on the Web pageDi t t iti f i l tDictate positions of various elements– Graphics, Heading, Menu, Text,

N i ti bNavigation bar


Template

Templates can aid the design process in several waysprocess in several waysProvide consistencyShorten development timePrevent “object shift”j– Templates that utilize grids can

prevents objects from shifting


Template


ContentAll multimedia elements (text, graphics, animation, sound, and video) should complement content, not be the focusMajor consideration in designing site is determining:s dete g– What content – How many levels users must navigate

Chapter 3

How many levels users must navigate


ContentLess text is usually betterExcess content requires more levelsExcess content requires more levelsMore levels add to confusion and frustration for userfrustration for user Reduce levels by providing hyperlinks (also called links)(also called links)


ContentMake sure content always accessibleUsers do not read a Web page; theyUsers do not read a Web page; they scan it, looking for keywords/linksFirst-time visitors to a Web siteFirst-time visitors to a Web site generally spend less than 60 seconds on the Web pageon the Web page


ContentWeb site must capture visitor’s interestText still the primary element used to convey information; text must beconvey information; text must be readableAlways test your color andAlways test your color and background combinations


Content


Links or HyperlinksReplace parts of original Web page with new content Give users frame of reference, allow user to return quickly to previouslyuser to return quickly to previously viewed pageAllow designers to keep text on eachAllow designers to keep text on each page to a minimum


Balanced layout

Balance in Web page design refers to the distribution of optical weight in thethe distribution of optical weight in the layoutO ti l i ht i th bilit fOptical weight is the ability of an element to attract the user’s eyeEach element has optical weight as determined by its nature and size


Balanced layout

Nature of an element refers to its shape color brightness typeshape, color, brightness, typeBalance determined by the weight of th l t d th i iti ththe elements and their position on the Web pageThree types of balance:– symmetrical balance, asymmetrical

Chapter 3

balance, no balance 22Multimedia for the Web

Balanced layout


Symmetrical balance

Symmetrical balance: arranging elements as mirrored images on bothelements as mirrored images on both sides of a center lineS t i l d i i t tiSymmetrical design is staticSuggests order and formalityAppropriate to highlight corporate image of conservative organizations

Chapter 3

g g


Asymmetrical Balance

Asymmetrical balance: arranging non-identical elements on both sides of aidentical elements on both sides of a center lineA t i l d i i d iAsymmetrical design is dynamic; suggests diversity and informalityMight be appropriate for entertainment Web sites for a feeling of movement

Chapter 3

and discovery25Multimedia for the Web

White Space

Do not forget white space; the blank areas on a page wherethe blank areas on a page wheretext and other elements are not foundBl k d t h tBlank space does not have to be white Users like space between elements


White Space


Movement

Relates to how the user’s eye moves through the elements on the pagethrough the elements on the page Optical center; a point somewhat b th h i l t f thabove 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’

Chapter 3

movement on the page28Multimedia for the Web

Movement

To have user work through content in more structured way:more structured way:– Control where user starts on page

Use lines or objects that point the user– Use lines or objects that point the user in a certain directionUse color gradients that go from light– 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 p pdirection the user should look

– Emphasize an element; make it a different shape or color, surround it with white space, use a different font

t t l t b dor type style, create borders, or use different backgrounds for selected objects

Chapter 3

objects


Color scheme

Powerful communication toolW l i tWrong colors may communicate the wrong messageColor evokes emotion and associationsAdding color changes the look of pages without adding to file size

Chapter 3

pages without adding to file size31Multimedia for the Web

Color scheme


Color scheme

Increase visual appealI d bilitImprove readabilityColor signals changes in contextg gFewer colors create a cleaner, more tasteful lookmore tasteful lookDesign with a monochromatic color

hChapter 3

scheme33Multimedia for the Web

Color scheme

Easier to work with dark objects on light backgroundslight backgroundsWeb authoring programs include pre-set color schemesThemes contain color schemes, ,and consist of unified design elements for bullets, fonts, images

Chapter 3

elements for bullets, fonts, images


Independent and Functional

Keep site fresh and functionalI t l d t l li k t bInternal and external links must be maintainedWeb pages need to be more freestanding than pages in printg p g pSingle Web page may be only page viewed by user

Chapter 3

page viewed by user35Multimedia for the Web


For consistency, include basic information on each page:information on each page:– Contact information– Last modified date– Copyright notice– Link to home page– A Frequently Asked Questions page

Chapter 3

eque t y s ed Quest o s pagecan be helpful


Unified Piece

Two types of Unity:I t it h th i– Intra-page unity: how the various page elements relateI t it i t ti d i– Inter-page unity: interactive design that users encounter as they navigate from one Web page tonavigate from one Web page to another


Unified Piece

Maintain consistency in shapes, colors text styles themescolors, text styles, themesIn games or entertainment sites, unified design may be too dullUsers appreciate common ppmetaphor, color scheme, navigation method from page to page

Chapter 3

method from page to page


Understand Design Guidelines: Interactivity

Developers must design the site’s interactivity

y

interactivityInteractive design must be user-centered:centered:– If sound is played, user should be

able to adjust volumeable to adjust volume– User to decide to play a video or

download a plug-in

Chapter 3

download a plug in


The User Interface

User interface is crucialWhen designing the user interfaceWhen designing the user interface, you are establishing the foundation of the Web siteof the Web siteInterface gives users direct control over the Web siteover the Web siteMetaphors, images, and concepts


The User Interface

Impossible to fully separate design from function in interactive sitesfrom function in interactive sitesUsers expect function and sophistication from all interfacesNavigational structure should be gtransparent to user


The User Interface


Optimize User Access and Control

Users must know where they are within overall structure of the sitewithin overall structure of the siteUsers want quick and easy access to content of siteShould be easy to return to home ypage or other major pages


Quick to Load

Users will not tolerate delayR h h th h ld fResearch shows threshold of frustration for any computer-related task is about 10 secondsTo improve download time, p ,optimize graphics and use thumbnails

Chapter 3

thumbnails


Quick to Load

Broadband connections and improved compression andimproved compression and streaming have made multimedia

ibl W b b t d l dpossible on Web, but download speed is still a major issue in Web

d ipage designKeep page size smaller than 100k

Chapter 3

p p g


Link Effectively


Link Effectively

Users favor menus with minimum of five to nine linksof five to nine linksUsers favor a few Web pages with lots of choicesAdditional links through hot spots, g p ,mouseovers


Link EffectivelyGoal is to provide users with the information they want:y– Fewest number of steps– Shortest amount of time– Shortest amount of time– Using least amount of screen real

estateestate


Link EffectivelyWeb based on cross-linking or cross-referencing gBy establishing a clearly identified page of external links users willpage of external links, users will not unknowingly leave your siteO t l li k i tOpen external links in separate browser window


Sense of Context

Contextual clues for user include:F ili d i t iti i– Familiar and intuitive icons

– A common color scheme– Consistent method of navigation– Graphic similarity

Consistent approach to layout reinforces user’s sense of context

Chapter 3

reinforces user s sense of context51Multimedia for the Web

Provide Choices and Escapes

Avoid long introductions of automatically scrolling text

p

automatically scrolling text, narration, music, creditsProvide a way to skip or escape introductory elementsProvide way for user to control the playing of animations, sound, video

Chapter 3

playing of animations, sound, video


Opportunity for Feedback

Give users an opportunity to establish an ongoing relationshipestablish an ongoing relationship with company or organizationUsers need to be able to communicate with company or organization online


Opportunity for Feedback


Equal Access

Many people have disabilities that prevent them from takingprevent them from taking advantage of media elementsMany 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 receiverequire Web sites that receive federal funding to be accessible by

l ith di bilitipeople with disabilitiesCheck government Web sites or www.w3.org to stay current on these laws


SummaryIntroductionUnderstand Design Guidelines:Understand Design Guidelines: AppearanceMetaphorMetaphorConsistencyTemplateTemplateContent


SummaryLinks or HyperlinksBalanced layoutBalanced layoutSymmetrical balanceAsymmetrical BalanceAsymmetrical BalanceWhite SpaceM tMovementColor scheme


SummaryIndependent and FunctionalUnified PieceUnified PieceUnderstand Design Guidelines: InteractivityInteractivity The User InterfaceOptimize User AccessOptimize User Access and Control


SummaryQuick to LoadLink EffectivelyLink EffectivelySense of ContextProvide Choices and EscapesProvide Choices and EscapesOpportunity for FeedbackE l AEqual Access


design and the user interface

Documents