Web Design

Module 1: Web Design Issues

Contents
Web Design Issues: Web design Web design process

Designing for others

Web Design
Web Design: A multidisciplinary pursuit pertaining to

the planning and production of Web sites, including, but

not limited to, technical development, information structure, visual design, and networked delivery.

Web Design
There are five areas that cover the major facets of Web

design:
Content Visuals Technology Delivery

Purpose

Web Design
The Web Design Pyramid

Web Design: Client-Server Network Programming Model

Three common elements: The server-side The client-side The network

Types of Web Sites

Less interactive.

Eg: Wikipedia

Types of Web Sites

Very interactive.

Eg: e-bay, amazon

Types of Web Sites

Informational sites: Eg: Wikipedia

Transactional sites: Eg: E-commerce sites

Community sites: Eg: Facebook Entertainment sites: Eg: Gaming & music sites Other sites: Included here are artistic or experimental sites, personal Web spaces such as Web logs (also called

blogs), and sites that may not follow common Web

conventions or have a well-defined economic purpose.

Types of Web Sites

Grouping the sites based on the organization:

Commercial
Government Educational Charitable Personal

Types of Web Sites

Visual Groupings :

Text oriented:
focus on textual content relatively lightweight, download-wise, and often minimalist in design.

Types of Web Sites

Visual Groupings :

Text oriented:
GUI style Metaphorical
borrow ideas from real life. Eg: site about cars might employ a dashboard and steering

wheel in design and navigation.

Types of Web Sites

Visual Groupings :

Text oriented:
GUI style Metaphorical Experimental
attempt to do things a little differently than the norm.

Creative, unpredictable, innovative and random

Web Design Process

Sequential design process

Web Design Process

Other models:

Iterative models
Spiral model Agile methodology etc

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements

The Site Plan Design Phase Dissected

The Mock Beta Site Implementation

Testing
User Acceptance Testing Release and Beyond

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements

make more money by

opening up an online
market Create an online automobile parts store that will sell at least $10,000/month of products directly to the consumer.

The Site Plan Design Phase Dissected

The Mock Beta Site Implementation

Testing
User Acceptance Testing Release and Beyond

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements
Know your audience: Where are they located? How old are they? What is their gender? What language do they speak?

The Site Plan Design Phase Dissected

The Mock How technically and Web proficient Beta Site Implementation

Testing
User Acceptance Testing Release and Beyond

are they? When will they return to the site, if ever? How often do they return to site?

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements
What kind of content will be required?

What kind of look should the site

have? What types of programs will have to

The Site Plan Design Phase Dissected

be built? The Mock Beta Site Implementation How many servers will be required
to service the sites visitors?

Testing
User Acceptance Testing Release and Beyond

What kind of restrictions will users

place on the site with respect to bandwidth, screen-size, the browser,

and so on?

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements
Audience Usage

Content
Technical requirements Visual requirements Delivery requirements

The Site Plan Design Phase Dissected

The Mock Miscellaneous requirements(language, Beta Site Implementation

Testing
User Acceptance Testing Release and Beyond

legal, standards etc)

Site structure Staffing Time line Budget

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements

The Site Plan Design Phase Dissected

The Mock Beta Site Implementation

Testing
User Acceptance Testing Release and Beyond

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements

The Site Plan Design Phase Dissected

The Mock Beta Site Implementation
Implement the real site

Testing
User Acceptance Testing Release and Beyond

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements
Testing has to be done to find the defects and verify website

compliance with the requirements.

Testing Types: Visual Acceptance Testing

The Site Plan Design Phase Dissected

The Mock Beta Site Implementation

Functionality Testing
Content Proofing System and Browser Compatibility

Testing
User Acceptance Testing Release and Beyond

Testing
Delivery Testing User Acceptance Testing

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements
Testing performed by the users. Often called Beta testing

The Site Plan Design Phase Dissected

The Mock Beta Site Implementation

Testing
User Acceptance Testing Release and Beyond

Web Design Process

Approaching a Web Site
Goals and Problems Audience Site Requirements
Release to large group of users Maintenance Upgrade

The Site Plan Design Phase Dissected

The Mock Beta Site Implementation

Testing
User Acceptance Testing Release and Beyond

Usability:
Definition: Usability is the extent to which a site can be

used by a specified group of users to achieve specified

goals with effectiveness, efficiency, and satisfaction in a specified context of use. Five ideas determining the usability of a site:
Learnability Rememberability Efficiency of use Reliability in use

User satisfaction

Usability:
Common User Characteristics

Vision
Avoid using text, graphics, and backgrounds of similar hue. Avoid combining text, graphics, and backgrounds of similar saturation Keep contrast high. Avoid using text, graphics, and background of similar lightness. Avoid using busy background tiles.

Usability:
Common User Characteristics

Vision
Memory
Users try to maximize gain and minimize work. Recognition is easier than recall. Do not make visited links the same style or color as unvisited ones.

Usability:
Common User Characteristics

Vision
Memory
Make pages that should be remembered visually different from the rest. Limit groups of similar choices such as links to between five and nine items. Aim for memorization of only three items or pages sequentially.

Usability:
Common User Characteristics

Vision
Memory Response and Reaction Times Stimulus
Make page elements obviously different if they are

different.
Limit page noise and segment page objects so that they dont compete so much visually that users are unable to

focus on what they are interested in.

Usability:
Common User Characteristics

Vision
Memory Response and Reaction Times Stimulus Movement Capabilities
Try to optimize keyboard access for all pages in a site, not
just form pages.

Usability:
Common User Characteristics

Vision
Memory Response and Reaction Times Stimulus Movement Capabilities
Minimize mouse travel distance between successive choices
Minimize mouse travel between primary page hover locations and the browser's Back button.

Types of Users:
Users can be classified to reflect their knowledge of how

to use a Web site:

novices, intermediates, and experts or power users.

Web Conventions:examples
Upper-left corner logo signals home page return.

Text links are repeated at the bottom of a page.

Back-to-top link used on long pages. Special print forms used for heavily printed pages. Shopping cart in the upper right. Clickable items are blue and underlined.

Secondary navigation elements such as a site map or

search are presented separately from sectional navigation.

Web Conventions:

Building a Usable Site:

Rule: You are NOT the user.

Rule: Users are NOT designers.

Perform user testing early and tests might include
Casual observation of users Surveys and interviews Focus groups Lab testing Heuristic evaluations by developers or usability experts

Building a Usable Site:

Web Usability Guidelines:

Be consistent
Dont violate a users expectations, and make sure to follow Web and GUI conventions Support the ways people use Web pages Use surprise properly and sparingly

Simplify the site and individual pages as much as

possible

Building a Usable Site:

Web Usability Guidelines:

Rely on recognition, not recall

Do not assume users will read instructions Provide feedback Support different interaction styles Minimize mouse travel and keystrokes

Consider medium of consumption.

Consider environment of use. Focus on speed

For Web design conventions visit:

www.w3.org
World Wide Web Consortium is an international community specifying the guidelines for web design

END