1 / 36

Information System Design Info-440

Information System Design Info-440. BOO!. BOO!. Autumn 2002 Session #10. Agenda. Admin/review Conceptual modeling Discussion of exercises Site maps Describing information architecture & flow Break Assignment #2 Return and discussion. Admin. Announcements Anyone?

rashad
Download Presentation

Information System Design Info-440

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related