Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.

Web Site Design

Marti Hearst (UCB SIMS)SIMS 213, UI Design &

DevelopmentApril 6, 1999

Today

Last two project overviews More on web design

– the graphic design component– one strategy: using grid structure to

organize visual design hierarchically

Adapted from slide by Mark Newman

Web Design Specialities

Information design– structure, categories

of information Navigation design

– interaction with information structure

Graphic design– visual presentation of

information and navigation (color, typography, etc.)

Adapted from slide by Mark Newman

Web Design Specialties

Information Architecture– includes management

and more responsibility for content

User Interface Design– includes testing and

evaluation

Graphic Design– layout, look-and-feel,

consistent view

Adapted from slide by Saul Greenberg

Graphical Design

Must account for:– a comprehensible mental model– appropriate organization of

information, functions, tasks, and role– quality and aesthetics of appearance

»the “look”

– effective interaction sequencing»the “feel” of the navigation

Adapted from slide by Saul Greenberg

Components of Visual Design

Layout Typography Imagery Animation Color Texture

Visual Identity

Adapted from slide by Saul Greenberg

Goals of Good Graphic Design

Communicate a visual identity– deal with the tension between a uniform

look and visual interest Communicate visual relationships Communicate a visual precedence

ordering– Reflects levels of importance– Reflects user needs and task frequencies– Facilitates rapid scanning

Adapted from slide by Saul Greenberg

Establishing Visual Relations

Assume we have identified information groups

Assume we have created hierarchical structure for these

Use graphic design elements to communicate this structure.

Adapted from slide by Saul Greenberg

Using grouping to show relationships between visual elements

(Gestalt principles)

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Mmmm

Adapted from slide by Saul Greenberg

Visual Hierarchies

Provide initial focus Direct attention to important,

secondary, or peripheral items, as appropriate

Ordering follows user’s conceptual model of the task flow

Adapted from slide by Saul Greenberg

Use Visual Hierarchies

Use visual hierarchy and precedence to order page elements in a top-down task flow– Fill in information– Make a selection– Submit or reset– Plus global navigation controls

Adapted from slide by Saul Greenberg

Clear Logical Relationships Indicated by Hierarchical Layout

Submit Reset

Home Help Info

Submit ResetHome

Help InfoWhatsNew

Adapted from slide by Saul Greenberg

One Strategy:Make use of Grid Layout

Grid layout– Horizontal and vertical lines to position window

components Align and group related items

– allows for many variations on hierarchical organization

– contrast brings out dominant elements Consistency in

– location– format– repetition– organization

Show Sano Grid Examples

Adapted from slide by Saul Greenberg

Practice Graphical Redesign

A Slide Show applicationWhat should be changed, and why?

(Not a web interface)

Adapted from slide by Saul Greenberg

Using a Grid Layout

Step 1: Maintain visual consistency with standard GUI style– standard locations for title, navigation

controls, etc Step 2: Decide on

– navigational layout– white space– typography/legibility

Adapted from slide by Saul Greenberg

Construct grid layoutannotate the grid

Adapted from slide by Saul Greenberg

Using a Grid Layout

Step 3: Determine relationships– map information structure and

navigational structure onto the grid Step 4: Economize

– collapse two windows/panels into one Step 5: Evaluate by incorporating

actual content Step 6: Economize further

– remove gratuitous icons, etc

Adapted from slide by Saul Greenberg

Fill in the componentsEconomize -- two windows into one

Before

Compare the DesignsAfter

Adapted from slide by Saul Greenberg

Evaluate with real examplePerhaps economize more

or

Use Visual Overviews to Provide Context

Table of contents “Site maps” Map of physical entity

– shopping mall, campus Conventional organization

– newspaper sections and columns

In a sense, these show the navigational structure,as opposed to the information structure or the task

structure that we have been looking at so far.

Sit

e M

ap

Table

of

Conte

nts

Fancier Site Maps(hyperbolic browser: not clear if useful)

Next Time(s)

Other types of evaluation– Formal User Studies– GOMS