1. The Information School of the University of Washington Information System Design Info-440 Autumn 2002 Session #10 BOO! BOO!

2. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 2 Agenda Admin/review Conceptual modeling –Discussion of exercises Site maps –Describing information architecture & flow Break Assignment #2 –Return and discussion

3. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 3 Admin Announcements –Anyone? Interactive design project –See Acer Tablet computer at: http://www.thesource.ucsf.edu/computerscpusacerTPC.html –Questions? Upcoming –Quiz #2: Nov 6 th [covers weeks: 3-5] –Design Exercise #3: Nov 13 th

4. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 4 Last time Conceptual modeling Metaphors

5. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 5 Metaphors Metaphors are persuasive in technology Consider online shopping –Product catalog –Shopping cart (some cards are abandoned) –Checkout process Metaphors give users a base conceptual model to extend BUT metaphors can be limiting –You can leave notes behind at Amazon but not at Barnes & Noble

6. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 6 Metaphors in design Use metaphors to brainstorm about design For example, in Jill’s picture scenario –Matching is like ….. –History is like … –Environment is like … –Change is like … In your systems, use metaphors to explain abstract concepts

7. The Information School of the University of Washington Conceptual modeling: Discussion of examples

8. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 8 Examine problem Scenario Tasks analysis Initial ideas

9. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 9 Begin with a very simple idea

10. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 10 … and then start refining it Place Photograph

11. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 11 Brainstorm: UI elements, entities, goals Map Timeline User goals

12. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 12 Invent new scenario but avoid details New scenario New Entities

13. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 13 Start simple Feels like a task analysis High-level entities

14. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 14 Elaborated… Focuses on entities Internal vs. external

15. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 15 Sketch first, model second Root of tree Sub-topics Sketch schematic

16. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 16 Observations The problem statements are vague –Therefore: Refine the problem on your terms The objective is ill-defined –Therefore: Decide on an target end-state You lack information –Therefore: Make assumptions

17. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 17 Problem-solving guidelines Move from the users’ perspective –First: Task analysis or metaphors –Then: conceptual model Move from the system’s perspective (be *very* careful) –First: What’s the database look like –Then: conceptual model Sketch the user interface then –Identify entities, relationships, attributes

18. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 18 Problem-solving guidelines Explore by trial and error –Its okay if it feels wrong at first Iterate –Try again Brainstorm –Free associate synonymous words –Use metaphors –Examine similar systems

19. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 19 Problem-solving guidelines Get feedback from others –Talk it through with a colleague Look for simple problems –Reuse elements from existing conceptual models Avoid premature details –Event higher-level abstractions

20. The Information School of the University of Washington Site Architecture Blueprints

21. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 21 Objective of site architecture blueprints Specify the structure of the system Developed –In cross-functional team; or –Interaction designers/information architects In theory, engineering team implements system to blueprints

22. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 22 Blueprint notations Many different kinds of notations Consultancies invent their own versions Example (from reading) –Visual Vocabulary from Jesse James Garrett The goal is to represent –Paths –Goals –Results

23. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 23 Basic elements

24. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 24 Labeling Relationships

25. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 25 Concurrent Actions

26. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 26 Decision points

27. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 27 Summary Site blueprints specify the structure of the system Enough detail to implement the website A physical representation

28. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 28 Recap of system representations User flowSystem (logical) System (Physical) Task analysis * Conceptual modeling * Site architecture *

29. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 29 Exercise Think of your website for assignment #2 Draw a quick sketch of this information architecture using this vocabulary Reminder: –Read http://jjg.net/ia/visvocab/http://jjg.net/ia/visvocab/

30. The Information School of the University of Washington Assignment #2

31. The Information School of the University of Washington Wonderful websites and wonderful thinking It was a joy to explore your ideas

32. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 32 Discussion Telling a story is very important –Introduction on 1 st page –Ordering of navigation links –Internal navigation links Engaging readers –Use of images –Whitespace & information hierarchy –Personality (photographs of designers) –Interesting layouts

33. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 33 Discussion (cont.) Be careful of –Linking styles Underlined headings Links that don’t look like links –Consuming too much vertical space at the top –Emphasizing the ‘brand’ instead of the ‘topic’ –Using secondary windows, which do not come to the front –Aim to make the site feel whole –Make writing/look-and-feel correspond with purpose of content, etc.

34. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 34 Discussion (cont.) Challenges with taxonomy –Why two representations? –How to show original materials? Challenges with methodology –Will people really understand process? Social issues –Did the affinity diagram really help?

35. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 35 Grade Distribution

36. The Information School of the University of Washington Copyright David Hendry (INFO-440 session 10 - 10/30/2002) 36 Next Week Topics –Participatory prototyping –More on Information Architecture Monday –Introduction to assignment #3 Wednesday –Quiz 2 –Feedback on proposals Readings