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

2. 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

3. 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.)

4. 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

5. 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

6. Adapted from slide by Saul Greenberg Components of Visual Design l Layout l Typography l Imagery l Animation l Color l Texture Visual Identity

7. 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

8. 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.

9. Adapted from slide by Saul Greenberg Using grouping to show relationships between visual elements (Gestalt principles) Mmmm

10. 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

11. 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

12. Adapted from slide by Saul Greenberg Clear Logical Relationships Indicated by Hierarchical Layout SubmitReset HomeHelpInfo SubmitReset Home Help Info Whats New

13. 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

14. Show Sano Grid Examples

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

16. 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

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

18. 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

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

20. Before Compare the Designs After

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

22. 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.

23. Site Map

24. Table of Contents

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

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