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

Today l Last two project overviews l 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 l Information design –structure, categories of information l Navigation design –interaction with information structure l Graphic design –visual presentation of information and navigation (color, typography, etc.)

Adapted from slide by Mark Newman Web Design Specialties l Information Architecture –includes management and more responsibility for content l User Interface Design –includes testing and evaluation l Graphic Design –layout, look-and-feel, consistent view

Adapted from slide by Saul Greenberg Graphical Design l 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 l Layout l Typography l Imagery l Animation l Color l Texture Visual Identity

Adapted from slide by Saul Greenberg Goals of Good Graphic Design l Communicate a visual identity –deal with the tension between a uniform look and visual interest l Communicate visual relationships l 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 l Assume we have identified information groups l Assume we have created hierarchical structure for these l 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

Adapted from slide by Saul Greenberg Visual Hierarchies l Provide initial focus l Direct attention to important, secondary, or peripheral items, as appropriate l Ordering follows user’s conceptual model of the task flow

Adapted from slide by Saul Greenberg Use Visual Hierarchies l 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 SubmitReset HomeHelpInfo SubmitReset Home Help Info Whats New

Adapted from slide by Saul Greenberg One Strategy: Make use of Grid Layout l Grid layout –Horizontal and vertical lines to position window components l Align and group related items –allows for many variations on hierarchical organization –contrast brings out dominant elements l Consistency in –location –format –repetition –organization

Show Sano Grid Examples

Adapted from slide by Saul Greenberg Practice Graphical Redesign A Slide Show application What should be changed, and why? (Not a web interface)

Adapted from slide by Saul Greenberg Using a Grid Layout l Step 1: Maintain visual consistency with standard GUI style –standard locations for title, navigation controls, etc l Step 2: Decide on –navigational layout –white space –typography/legibility

Adapted from slide by Saul Greenberg Construct grid layout annotate the grid

Adapted from slide by Saul Greenberg Using a Grid Layout l Step 3: Determine relationships –map information structure and navigational structure onto the grid l Step 4: Economize –collapse two windows/panels into one l Step 5: Evaluate by incorporating actual content l Step 6: Economize further –remove gratuitous icons, etc

Adapted from slide by Saul Greenberg Fill in the components Economize -- two windows into one

Before Compare the Designs After

Adapted from slide by Saul Greenberg Evaluate with real example Perhaps economize more or

Use Visual Overviews to Provide Context l Table of contents l “Site maps” l Map of physical entity –shopping mall, campus l 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.

Site Map

Table of Contents

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

Next Time(s) l Other types of evaluation –Formal User Studies –GOMS