Date post: | 11-Nov-2014 |
Category: |
Technology |
Upload: | meljun-cortes |
View: | 252 times |
Download: | 0 times |
Chapter 8
Design and the User Interface
MELJUN CORTESMELJUN CORTES
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.
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.
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.
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.
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.
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.
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.
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
Optimize User Access and Control
Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
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”
Optimize User Access and Control
Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
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.
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.
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.
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.
Styles
Cascading Style Sheets– Improve
• type design
• layout
• consistency
Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
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.
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.
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 copyrightHarcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.