1. Project HE Assignment Web Site Design
Marti Hearst (UCB SIMS)
SIMS 213, UI Design & Development
March 30, 1999

2. Today Discuss Next Assignment Web Design Return Midterm
Difference between Web and GUI design
Review Newman’s talk
Return Midterm

3. Next Assignment Project Heuristic Evaluation Two parts
individual HE
two to three people pool violations and make general recommendations
I’ve assigned partners since number of people per project group varies
Class on Thursday will introduce you to the project you will be evaluating.

4. Next Assignment Individual HE Two passes First pass: Second pass:
read the materials associated with the project
walk through the interface using the supplied task scenarios
Second pass:
look for and note down HE violations
don’t note missing features over and over
do it with respect to what the designers intended

5. Next Assignment Group HE Pool violations, remove redundancies
Come to agreement on severity ratings (average if necessary)
Provide general recommendations

6. The Difference between Web Design and GUI Design (Nielsen alertbox)
Designer has to give up full control
Device Diversity
layout, fonts, screen space
execution time can vary by a factor of 6 on web (PDA vs. workstation)
User Controls Navigation
where user can go next
borders fluid -- using the Web as a whole
no specialized manuals!
back button
Some people disagree

7. The Web Page Represents...
1) User's view of information on screen
2) Unit of navigation
what you get when you click a link / bookmark
3) Address to get info. over net (URL)
4) Storage of the information
on the server & the author's editing unit
except embedded objects like images
Page is an atomic unit unifying these concepts
Adapted from slide by James Landay

8. Adapted from slide by James Landay
Desktop-based Wizard
Adapted from slide by James Landay

9. Adapted from slide by James Landay
Web-based Wizard
What is the difference?
Adapted from slide by James Landay

10. Browsers & Servers: Where is the Application & the State?
Back (previous) in desktop wizards
typically undoes any changes made on that step
Back on web pages
is it the “back” button of the browser?
server isn’t necessarily aware of it - no change to state
is it the “back” link on the page?
server could do something to its state
can you keep the user from using browser’s back?
Clearly defined exits...
Adapted from slide by James Landay

11. Adapted from slide by James Landay
Desktop Dialog Box
Adapted from slide by James Landay

12. Adapted from slide by James Landay
Web Dialog Box
Adapted from slide by James Landay

13. Adapted from slide by James Landay
Web Dialog Box
Adapted from slide by James Landay

14. Adapted from slide by James Landay
“What am I Buying?”
Desktop apps bring up dialogs boxes
usually smaller than main window
leave you context (below) about your main task
Web apps bring you to a new page
need to move back & forth to get context
browser Forward may lose old values after a “back”
often a LARGE delay between page loads
need to remember context over time!
Adapted from slide by James Landay

15. Solutions to the Context Problem
Repeat context
add new information to the current page
appears to the user as if page is expanding
Optimize pages for loading speed
reduce graphics
improve server performance
Adapted from slide by James Landay

16. Web Site Design Seems to have three main components:
Information Architecture
Navigation Structure
Graphic Design
This is new; not standard HCI
Newman’s findings overlap strongly with those of Sano’s book

17. Overview of Newman’s Investigation
Field visits to four companies
three design firms
one design department of web “portal”
in addition: two independent consultants
In situ interviews with designers
placed focus on specific projects
Collection of artifacts
used artifacts to frame discussion
Adapted from slide by Mark Newman

18. Adapted from slide by Mark Newman
Interviewees
11 interviews total
Training & Education
7 graphic design, 2 computer science, cognitive science, 1 other
Current responsibilities
4 graphic design, 3 UI design, 4 hybrid
Professional experience
7 had < 5 years experience
others 8, 10, 20+
Adapted from slide by Mark Newman

19. Adapted from slide by Mark Newman
Design Specialties
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

20. Adapted from slide by Mark Newman
Design Specialties
Information Architecture
includes management and more responsibility for content
User Interface Design
includes testing and evaluation
Adapted from slide by Mark Newman

21. Web Site Design Process
Discovery
Conceptualization
Preliminary Design
Design
Implementation
Adapted from slide by Mark Newman

22. Design Process: Discovery
Assess needs
understand client’s expectations
determine scope of project
characteristics of users
Discovery
Conceptualization
Preliminary Design
Design
Implementation
Adapted from slide by Mark Newman

23. Design Process: Discovery
Activities
Review materials provided by client
Existing versions of products/sites
Other documents
Competitive analysis
Collect data from users: interviewing, task analysis, etc.
Deliverables
Written reports
Presentations
Adapted from slide by Mark Newman

24. Design Process: Conceptualization
Begin defining site
Take results from discovery and visualize solutions
Early information design
Discovery
Conceptualization
Preliminary Design
Design
Implementation
Adapted from slide by Mark Newman

25. Design Process: Conceptualization
Activities
Brainstorming (collaborative & solo)
Sketching ideas (collaborative & solo)
Defining site structure
Deliverables
Site maps, written reports, presentations
Note: Sano suggests
focus on organizing the content
very abstract structure diagrams at this point, not sketches
Adapted from slide by Mark Newman

26. Show Sano-style structure layouts

27. Design Process: Conceptualization
(information design: site map + navigation)
Adapted from slide by Mark Newman

28. Design Process: Conceptualization
(information design: site map)
Adapted from slide by Mark Newman

29. Design Process: Preliminary Design
Generate multiple (3-5) designs
one will be selected for development
navigation design
early graphic design
Discovery
Conceptualization
Preliminary Design
Design
Implementation
Adapted from slide by Mark Newman

30. Design Process: Preliminary Design
Activities
Sketching designs
Creating mock-ups
Quick and rough
Deliverables
Schematics (a.k.a. templates)
Site maps
Mock-ups
Presentations
Adapted from slide by Mark Newman

31. Design Process: Preliminary Design
(information/navigation design: schematic)
Adapted from slide by Mark Newman

32. Design Process: Preliminary Design
Information/navigation design: schematic Note that shading is used to show the information structure; this is NOT meant to show how the page will actually be laid out.
Adapted from slide by Mark Newman

33. Design Process: Preliminary Design
(navigation design: storyboard)
Adapted from slide by Mark Newman

34. Design Process: Design
Develop the design
Design is selected in previous stage
Increasing level of detail
Iterate on design
Discovery
Conceptualization
Preliminary Design
Design
Implementation
Adapted from slide by Mark Newman

35. Design Process: Design
Activities
Creating and refining mock-ups
Graphic design very active
Prototyping
Deliverables
Mock-ups
Prototypes (HTML, Director)
Presentations
Adapted from slide by Mark Newman

36. Design Process: Implementation
Prepare design for handoff
Create final deliverable
Specifications and prototypes
As much detail as possible
Discovery
Conceptualization
Preliminary Design
Design
Implementation
Adapted from slide by Mark Newman

37. Design Process: Implementation
Activities
Create final deliverables
Prepare specifications and guidelines
Prepare prototypes
Deliverables
Specifications/Guidelines
written or interactive
Prototypes (HTML, Director)
Presentations
Adapted from slide by Mark Newman

38. Duration of design phases
Discovery
1-2 weeks
Conceptualization
1-2 weeks
Preliminary Design
Design
6-8 weeks
Implementation
2-3 weeks
This is not really representative of all the data -- it actually varies widely

39. Midterm Average 83.5/100 Grade scale: 96-99 A+ 4 90-95 A 3 85-89 A- 10
B+ 3
B 7
B- 3

40. Next Classes Class Presentations More on Web Design User Studies
Navigation structure
Layout
User Studies