Upload
meljun-cortes-mbampa
View
223
Download
0
Embed Size (px)
Citation preview
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
1/18
Chapter 8
Design
& the User
InterfaceMELJUN CORTES
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
4/18
Introduction
Web design is a tricky topic
Basic design principles
Artistic endeavor
Subjective
Planning documentsStoryboards,
flowcharts, scripts
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
5/18
User-Centered Design
Based on design strategy
Detailed purpose
Target audience
Focus on users wants and needs
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Optimize User Access and Control
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Optimize User Access and Control
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
15/18
Styles
Cascading Style Sheets
Improve
type design
layout
consistency
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
16/18
Page Design
Simple and Consistent
Independent and Functional
Worthwhile/Accessible Content
Balanced Layout
Unified Piece
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
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
Harcourt, Inc. items and derived items copyright 2002 by Harcourt, Inc.
8/10/2019 MELJUN CORTES Multimedia Chapter8 Design User Interface
18/18