IBE312 Information Architecture 2013 extracted from IA: Moreville and Rosenfeld, 2007 Ch. 10 Research Ch. 11 Strategy Ch. 12 Design & Documentation

2 The Process Research – background, goals & business context Strategy – high level framework, guides project Design – shape into IA, detailed – wireframes, metadata schemes Implementation – design put to test, built-tested-launched Administration – continuous evaluation & improvement

3 Ch. 10 Research The framework is (p.233) – Context – Content – Users We need tools and methods

Context – building awareness and support for the project, p.234, meetings with key groups Content- do a heuristic evaluation of the current site to see what already exists that can be used. To analyze the content of the present website, gather representative samples from the site of: – Format, Document types, Source, Subject, Existing architecture Next analyze the samples by looking for patterns and relationships. Two other tools for the content research phase are content mapping (making a visual map of the current site) and benchmarking, both internally (before-and-after) and against competitors’ websites. p.240

Users – key to finding out what they want is ”Testing, testing, testing”, p Tools for researching Users – Usages statistics (where are they coming from, where are they going, which pages do they like) – Search log analysis – Customer Support data – Surveys (another good one for getting backup) – Contextual inquiry (aka field studies) – Focus groups (good for getting ideas – but don’t trust that they really feel the way they say they do. Like surveys, customers often say they want something that they won’t actually use.) – Interviews – Card sorting – User Testing

6 Tools and Methods Context Background research Presentation and meetings Stakeholder interviews Technology assessment Content Heuristic evaluation Metadata and content analysis Content mapping Benchmarking Users Search log and clickstream analysis Use cases and personas Contextual inquiry User interviews and user testing Materials, vision So all understand: Strategy team, content team, IT team Users assessments- now & future Gap analysis Expert critiques audits p.244p. 245

Ch 11 - Strategy “The bridge between research and design is information architecture strategy.” –Morville & Rosenfeld, p. 264 High-level conceptual framework for structuring and organizing a web site Based on the research, design a strategy that balances the needs found. Key ingredients: – Administration – how will the site be maintained? How will new information be added? Is what I am doing going to work with that? – Technological Integration – what tools already exist that I can use and what do I still need? – Emphasis – focus on top down or bottom up? For top down, what scheme will I use as the primary hierarchy For bottom up, what docs and object types will be used? How will content be authored & managed? – Labeling & Organization

8 Strategy (cont.) – Document type identification (Bottom-up) – Metadata fields definition - what fields will I use? How are they defined? Are they global or specific to regions? – Navigation system design - how will the structure all work? See later slide for the strategy products

9 Strategy Development Process - TACT Think: research  ideas Articulate: use tools like diagrams, metaphors, stories, & wireframes to explain your ideas Communicate: “communicate your ideas early and often” (p. 270) – so difficult to do and yet so useful Test: You MUST test. Use card sorting (closed), task performance analysis, or if you have the funds & time, a fully designed web- based prototype to test. P. 269

10 Communicating Metaphor exploration - – Organizational metaphor – connect the user experience to an organizational structure people are familiar with – like going to a car dealer – Functional metaphor – connect hands-on tasks to web tasks such as browsing a bookshelf or asking for help – Visual metaphor – use familiar images or colors to connect new elements. The example they used was using the yellow background and telephone icons to connect a directory to the phonebook. – DO NOT try to connect a metaphor throughout the website design. This is just to help people understand and brainstorm ideas! Scenarios – create different “situations” of how different types of users or users with different tasks will interact with the site Case studies - compare & contrast this strategy to cases where things worked/didn’t work in the past Conceptual diagrams – next slide Blueprints and wireframes – Blueprints (show the relationships between pages and other content components) and wireframes (quick-and-dirty visuals that show the content and links of major pages on the website) are the architect’s tools of choice for going from brainstorming to order... p. 278 & ch. 12

Conceptual diagrams

12 Strategy Deliverables Strategy report - “forces tough decisions, intellectual honesty, and clear communication” (Morville & Rosenfeld, p. 279) – Executive summary – p. 280 – Audiences, mission and vision (for the site) – p. 281 – Lessons learned – p. 282 – Architectural strategies and approaches – pp (blueprints fig 11-9, wireframes fig 11-10, models – fig 11-11) – Content management - including rules, roles, resources, templates, metadata & thesaurus Project plan - create at this stage in order to keep on track and to help later when getting to the design phase – How? How long? Who? Dependencies? – Timelines, teams, budgets Presentations - high-level direction & scope – Make as many presentations as you need to communicate your recommendations to the right groups at the right level of detail – Make sure you have the basics down and structured into a logical order – Sales perspective. Use Metaphors?

13 Ch Design and Documentation Transition from research/strategy into design, from process to deliverables. Diagramming guidelines – Multiple views – Develop the views for specific audiences and needs.

14 Design – Blueprints Show the relationship between pages and other content components. Can be used to portray organization, navigation and labelling systems. High-level architecture blueprints Task-oriented, Detailed blueprints Fig 12-1 p. 297

Example of a high level (task oriented) blueprint – how filtering might work at a greeting card site

Example of a task- oriented blueprint This is a user- centered view of the card-sending process at a greeting card site

17 Design – Wireframes Show how a page should appear. How to group components Types – from very simple to hi-fi… Follow the guidelines (p313) – Consistency – Reuse (navigation bars/elements throughout the site, with the help of tools) – Callouts – notes on functionality – Professional – page numbers, titles, etc – Follow procedures when working in teams e.g. High fidelity wireframe - p.285

21 Design – Other topics Content mapping – breaking info into pieces- subjective process of defining chunks should be determined by asking the following questions (p.314), (see fig p.315) – Should this content be divided into smaller chunks that users might want to access separately? – What is the smallest section of content that needs to be individually indexed? – Will this content need to be repurposed across multiple documents or as part of multiple processes? Once the chunks are defined they can be mapped to destinations (PDA, webpages, etc.). A unique id code (e.g. legend) for each chunk is important. Content model – Relationship between chunks, micro- information architectures made of small chunks of inter-connected content, help with contextual navigation (you might be also interested in this...), cope with scale (auto populate/link content in a site) – We experience content models on the web (e.g. a recipe, a clothing website) – content models depend on consistent steps of objects and logical connections between them to work. – Should also identify: what is the point of entry for a site, what metadata is needed to connect the chunks (links)?

Example of a content model (design) Card sort exercise – ask subjects where they want to go next among the content objects. They should draw lines that indicate navigation links between objects. Gap analysis – ask subjects wich missing context objects would be good to include.

Design – other topics Web-based prototypes – digital renditions that show how a website will look and function,...helps in design as it offers concrete visual example of website Administration – can ask: are chunks small enough? Is more navigation needed? Can we shorten the label of a page? Style guide – describes how the site is organized, why it is that way, and for who. Can contain: standards, guidelines and maintenance procedures Design tools and resources: