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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adapted from slide by Mark Newman Interviewees 11 interviews total Training & Education 7 graphic design, 2 computer science, 1 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

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

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

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

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

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

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

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

Show Sano-style structure layouts

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

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

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

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

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

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

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

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

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

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

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

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

Midterm Average 83.5/100 Grade scale: 96-99 A+ 4 90-95 A 3 85-89 A- 10 80-84 B+ 3 70-79 B 7 60-69 B- 3

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