Chapter 8
Design and the User Interface

MELJUN CORTES
Chapter Objectives
• Explain how the planning process and documents
are important to good design
• List the factors that s...
Chapter Objectives
• Define metaphor as it relates to Web design and
provide an example of its potential benefits
• Explai...
Introduction


Web design is a tricky topic
– Basic design principles
– Artistic endeavor
– Subjective

Planning

docume...
User-Centered Design


Based on design strategy
– Detailed purpose
– Target audience



Focus on user’s wants and needs
...
Designing the User Interface


Users interact with Web sites
– Design and visual appeal are integral to the
user’s experi...
Optimize User Access and Control


Quick to Load
– Threshold of frustration is about 10 seconds
– Design small



Minimi...
Optimize User Access and Control


Sense of Context
– Help users determine where they are at all times
– Contextual Clues...
Optimize User Access and Control


Opportunity for Feedback/Dialog
– Give the impression of an ongoing relationship
– Dir...
Optimize User Access and Control


Equal Access
– Disabilities prevent some people from taking
full advantage of all medi...
Color Scheme


Powerful communication tool
– Convey information
– Set mood/tone of site



Color
– Hue - color in its pu...
Color Scheme


Tips for beginners
–
–
–
–

Avoid working with too many colors
Begin by designing in black and white
Use a...
Color Scheme


Themes
– Preset color schemes
– Unified design elements
• bullets, fonts, images, navigation bars, other m...
Metaphor


Figurative representation that
links content to an established
mental model
– Must be concrete and obvious
– W...
Styles


Cascading Style Sheets
– Improve
• type design
• layout
• consistency

Harcourt, Inc. items and derived items co...
Page Design
Simple and Consistent
 Independent and Functional
 Worthwhile/Accessible Content
 Balanced Layout
 Unified...
Multimedia Elements


Tips:
–
–
–
–

Graphics
Animation
Sound
Video

Keep media elements to a max of 30K
 Keep Web pages...
Extras


Links
– Separate page of clearly identified, external links



FAQs
– Saves time and money for user and organiz...
Upcoming SlideShare
Loading in …5
×

MELJUN CORTES Multimedia Lecture Chapter8

178 views
121 views

Published on

MELJUN CORTES Multimedia Lecture Chapter8

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
178
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MELJUN CORTES Multimedia Lecture Chapter8

  1. 1. Chapter 8 Design and the User Interface MELJUN CORTES
  2. 2. 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. 3. 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.
  4. 4. Introduction  Web design is a tricky topic – Basic design principles – Artistic endeavor – Subjective Planning documents –Storyboards, flowcharts, scripts Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  5. 5. User-Centered Design  Based on design strategy – Detailed purpose – Target audience  Focus on user’s wants and needs Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  6. 6. Designing the User Interface  Users interact with Web sites – Design and visual appeal are integral to the user’s experience – Function is part of form  Goal: fulfill the needs of all users without requiring them to conform or work around an interface full of obstacles – examples Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  7. 7. 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. 8. Optimize User Access and Control  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 Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  9. 9. Optimize User Access and Control  Opportunity for Feedback/Dialog – Give the impression of an ongoing relationship – Direct link to site’s creator, editor or individual responsible for site maintenance – Be prepared to professionally respond to user questions, comments and complaints • example Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  10. 10. Optimize User Access and Control  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 • example – Use the ALT attribute • <IMG SRC = “logo.gif” ALT = “company logo” Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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 appearance – Avoid if they appear amateurish Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  14. 14. Metaphor  Figurative representation that links content to an established mental model – Must be concrete and obvious – Well-designed and targeted, they are powerful communication tools – Poorly-designed and inappropriate, they can be distasteful and unnecessary Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  15. 15. Styles  Cascading Style Sheets – Improve • type design • layout • consistency Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  16. 16. 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.
  17. 17. 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.
  18. 18. Extras  Links – Separate page of clearly identified, external links  FAQs – Saves time and money for user and organization Contact Information  Last Modified Date  – Confidence that information is up-to-date  Copyright Notice – Further substantiate by applying for a copyright Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

×