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

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

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

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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

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

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

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

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

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

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

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

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

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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

The Information School of the University of Washington Site Architecture Blueprints

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

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

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

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

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

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

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

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

The Information School of the University of Washington Assignment #2

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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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.

The Information School of the University of Washington Copyright David Hendry (INFO-440 session /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?

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

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