MELJUN CORTES Multimedia Chapter8 Design User Interface

8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface

1/18

Chapter 8

Design

& the User

InterfaceMELJUN CORTES


2/18

Chapter Objectives

Explain how the planning process and documents

are important to good design

List the factors that should be considered in

designing the user interface

List and describe five ways to optimize user access

and control

Explain the importance of the color scheme and list

several basic guidelines beginners should follow in

establishing a color scheme

Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.


3/18

Chapter Objectives

Define metaphor as it relates to Web design and

provide an example of its potential benefits

Explain how Cascading Style Sheets (CSS) can save

the Web designer time

List and describe five fundamental design guidelines

that apply to Web page design

List and describe the design factors that apply to

text, graphics, animation, sound and video

List and describe five extras that you should

consider including at your Web site



4/18

Introduction

Web design is a tricky topic

Basic design principles

Artistic endeavor

Subjective

Planning documentsStoryboards,

flowcharts, scripts



5/18

User-Centered Design

Based on design strategy

Detailed purpose

Target audience

Focus on users wants and needs



6/18

Designing the User Interface

Users interact with Web sites

Design and visual appeal are integral to the

users experience

Function is part of form

Goal: fulfill the needs of all users without

requiring them to conform or work aroundan interface full of obstacles

examples



7/18

Optimize User Access and Control

Quick to Load

Threshold of frustration is about 10 seconds

Design small

Minimize Links

Users favor 5-7 link menus

Users favor a few screens with more choices

over many screens with few choices

example



8/18

Sense of Context

Help users determine where they are at all times

Contextual Clues

Familiar and intuitive icons

Common color scheme

Consistent navigation method Graphic similarity

Consistent layout of titles, subtitles, footers and links

example




9/18

Opportunity for Feedback/Dialog

Give the impression of an ongoing relationship

Direct link to sites creator, editor or individual

responsible for site maintenance

Be prepared to professionally respond to user

questions, comments and complaints example




10/18

Equal Access

Disabilities prevent some people from taking

full advantage of all media elements

Design for text-based browsers such as Lynx

Synthesized readers read text, not graphics

exampleUse the ALT attribute


11/18

Color Scheme

Powerful communication tool

Convey information

Set mood/tone of site

Color

Hue - color in its purest form

Shade - color when light is added or subtracted

Test against Web-safe color palette



12/18

Color Scheme

Tips for beginners

Avoid working with too many colors

Begin by designing in black and white

Use a monochromatic color scheme

Easier to work with dark on light than light on

dark



13/18

Color Scheme

Themes

Preset color schemes

Unified design elements

bullets, fonts, images, navigation bars, other media

Excellent place to start or gain inspiration

Used to give attractive and consistent appearanceAvoid if they appear amateurish



14/18

Metaphor

Figurative representation thatlinks content to an establishedmental model

Must be concrete and obvious

Well-designed and targeted,they are powerfulcommunication tools

Poorly-designed andinappropriate, they can bedistasteful and unnecessary



15/18

Styles

Cascading Style Sheets

Improve

type design

layout

consistency



16/18

Page Design

Simple and Consistent

Independent and Functional

Worthwhile/Accessible Content

Balanced Layout

Unified Piece



17/18

Multimedia Elements

Tips:

Graphics

Animation

Sound

Video

Keep media elements to a max of 30K

Keep Web pages including media elements

to a max of 100K



18/18

Documents

MELJUN CORTES Multimedia Chapter8 Design User Interface