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.