Information System Design Info-440

1. Information System DesignInfo-440 BOO! BOO! Autumn 2002 Session #10

2. Agenda • Admin/review • Conceptual modeling • Discussion of exercises • Site maps • Describing information architecture & flow • Break • Assignment #2 • Return and discussion

3. Admin • Announcements • Anyone? • Interactive design project • See Acer Tablet computer at: http://www.thesource.ucsf.edu/computerscpusacerTPC.html • Questions? • Upcoming • Quiz #2: Nov 6th [covers weeks: 3-5] • Design Exercise #3: Nov 13th

4. Last time • Conceptual modeling • Metaphors

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. 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. Conceptual modeling:Discussion of examples

8. Examine problem Scenario Tasks analysis Initial ideas

9. Begin with a very simple idea

10. … and then start refining it Place Photograph

11. Brainstorm: UI elements, entities, goals Map Timeline User goals

12. Invent new scenario but avoid details New Entities New scenario

13. Start simple • Feels like a task analysis • High-level entities

14. Elaborated… • Focuses on entities • Internal vs. external

15. Sketch first, model second Sketch schematic • Root of tree • Sub-topics

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. 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. 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. 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. Site Architecture Blueprints

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

24. Labeling Relationships

25. Concurrent Actions

26. Decision points

27. Summary • Site blueprints specify the structure of the system • Enough detail to implement the website • A physical representation

28. Recap of system representations

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/

30. Assignment #2

31. Wonderful websites and wonderful thinkingIt was a joy to explore your ideas

32. Discussion • Telling a story is very important • Introduction on 1st page • Ordering of navigation links • Internal navigation links • Engaging readers • Use of images • Whitespace & information hierarchy • Personality (photographs of designers) • Interesting layouts

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

36. Next Week • Topics • Participatory prototyping • More on Information Architecture • Monday • Introduction to assignment #3 • Wednesday • Quiz 2 • Feedback on proposals • Readings