1. INFM 700: Session 5 Techniques and Technologies (cont’d) Paul Jacobs The iSchool University of Maryland Wednesday, Oct. 9, 2013 This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States See http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for detailshttp://creativecommons.org/licenses/by-nc-sa/3.0/us/

2. iSchool Today’s Topics Research & Strategy – Parts Omitted Design & Documentation Process Research & Strategy Design & Documentation

3. iSchool Research & Strategy - Review Research: identify goals & issues User needs Organizational/context Content and other issues Strategy: build and sell the plan Process Research & Strategy Design & Documentation Context ContentUsers Business goals, funding, politics, culture, technology, human resources Data types, content objects, metadata, volume, existing structure Audience, tasks, user behavior, experience, vocabulary MR, p. 233

4. iSchool User Studies Process Research & Strategy Design & Documentation Why do we do user studies? How do we do user studies? Decide what we need to know (e.g., what works, what doesn’t, priority tasks, how they find stuff, what’s easy and what’s hard to find) Design the test (range of users, difficulties) Collect data Analyze

5. iSchool User Studies – What to Test Process Research & Strategy Design & Documentation User needs (e.g., “find a book”) User desires (not necessarily “needs”, e.g., “get it free”, “make it simple”) User abilities (e.g., can they do it, can they find it) User methods (how they did it)

6. iSchool User Studies – What to Test Process Research & Strategy Design & Documentation Needs (conceptual), desires (preference), abilities & methods Timing & techniques www.adaptivepath.com

7. iSchool Explore User Studies – When to Test Process Research & Strategy Design & Documentation Mental Model Content Model Align MM & Content Define the Audience Prioritize IA & Interaction Diagrams and Prototypes Validate www.adaptivepath.com

8. iSchool User Studies – Protocols Process Research & Strategy Design & Documentation Develop a list, for example, of five tasks, based on: What is your site about? What features are most important? What features/parts do you want exercised You can also try to prioritize, or give them prioritized tasks Many other possibilities

9. iSchool User Studies – What to Look For Process Research & Strategy Design & Documentation Any apparent misconceptions or misunderstandings/confusion Mistakes that were consistently made/tasks they had trouble with Did they look frustrated? What worked? What were they able to do? Did they understand the site/what they were supposed to do? What did they like/find interesting? Did they do what was expected?

10. iSchool From Research to Strategy What have we learned from our research? What do we do next? Process Research & Strategy Design & Documentation

11. iSchool Strategy Goal of IA Strategy Elements of IA Strategy (e.g., TACT) What will it do? How? Impact (e.g., use of tools, technology, content, vendors, people) How much will it cost? What are the risks? What’s the Output? (see, e.g., Weather.com report, MR p. 281) Process Research & Strategy Design & Documentation

12. iSchool The Acme Component Organization’s IA Plan September 2005, Best Practices “Simplifying Information Architecture” Process Research & Strategy Design & Documentation

13. iSchool Process Research & Strategy Design & Documentation Case Study: E-Bay http://terpconnect.umd.edu/~psjacobs/RUMM_Handout_or__final__paper.pps

14. iSchool Segue: Strategy to Design Process Research & Strategy Design & Documentation Strategy has two purposes Communicate Articulate (abstract, top-down) Now move toward implementation

15. iSchool Design and Documentation Overview Process Research & Strategy Design & Documentation Why to document What to document When to document How to document

16. iSchool Design and Documentation Deliverables Process Research & Strategy Design & Documentation Conceptual Diagrams Blueprints (structural) Wireframes (physical) Text (e.g., reports) Presentations and meetings

17. iSchool Blueprints - Overview Process Research & Strategy Design & Documentation Can show organization, navigation and/or labeling Range from abstract to detailed Related to “site maps”

18. iSchool Blueprints - Process Process Research & Strategy Design & Documentation Mostly “Big Projects,” scaled down for small projects - yearly, quarterly Mental Model Content Model Align MM & Content Define the Audience Prioritize IA & Interaction Diagrams and Prototypes

19. iSchool Gap Analysis Process Research & Strategy Design & Documentation Compare “Mental Model” to site data Types of “gaps” Content missing to support mental model Mental model doesn’t support content Extraneous content “Skew” – both there but don’t quite fit How do we close gaps?

20. iSchool Blueprints (top-down) Process Research & Strategy Design & Documentation M&R p. 299

21. iSchool Top-down and bottom-up

22. iSchool Wireframes - Overview Process Research & Strategy Design & Documentation “Get Physical” Move from site level to page level Inherently constrained by screen real estate

23. iSchool Wireframes - Consideration Process Research & Strategy Design & Documentation Types of pages Types of elements How they fit together

24. iSchool Wireframes – Types of Pages Process Research & Strategy Design & Documentation

25. iSchool Wireframes – Components Process Research & Strategy Design & Documentation Main Content Item Detail List Input Tabular Data

26. iSchool Wireframes – Components Process Research & Strategy Design & Documentation Main Nav Bar Personalization Brand header Logo Search Cobrand Nav bar Breadcrumbs Page Footer

27. iSchool Main Page Wireframe Process Research & Strategy Design & Documentation M&R p. 308

28. iSchool XHTML Wireframes © Anders Ramsay 2006 drawing-based … xhtml … Process Research & Strategy Design & Documentation

29. iSchool XHTML Wireframes © Anders Ramsay 2006 Process Research & Strategy Design & Documentation © Anders Ramsay 2006 drawing-based … xhtml …

30. iSchool Copyright © 2004-2006 Todd Warfel. These slides may not be reproduced or distributed without prior written consent from Messagefirst http://messagefirst.com http://messagefirst.com Traditional Wireframing Methods FlashHTML Illustrator, ID, Visio Initial Setup ***** Maintenance Reuse Delivery Method ***** Behavior Notes ***** Tool Knowledge ***** RIAs

31. iSchool Case Study www.massbio.org/writable/committees/presentations/mbchcri_presentation.ppt Process Research & Strategy Design & Documentation

32. iSchool Recap Research & Strategy Purpose – Learn, focus, define objectives, get buy-in Next – Align goals/models with user mental models Deliverables – User studies, taxonomies, plans Design & Documentation Purpose – Define it before you build it Deliverables – Blueprints, wireframes, reports, more plans Process Research & Strategy Design & Documentation

33. iSchool Additional Topic: IA & The Mobile Web What do we really mean by mobile? Accessibility is the ultimate goal. Let’s revisit the Create Once, Publish Everywhere concept. What does this mean for IA?

34. iSchool Recommended Reading

35. iSchool What do we really mean by mobile? Hardware and Software: Phones, Tablets Twitter, Facebook What else? Users and uses: Mobile vs. traditional use Mobile *AND* traditional use Mobile only

36. iSchool Who and what are we missing? What if you can’t: See, hear or move your arms Speak or read English Grok American Culture Get a constant, speedy connection regularly Additional hardware and software Different ways to consume content Don’t forget the robots!

37. iSchool Accessibility: Why bother? It’s the right thing to do. It may be required by law. Everyone will find your content easier to consume. You will find it easier and cheaper to maintain. New technologies will not require as much work to assimilate.

38. iSchool Is there really a difference? No mouse tablets and smartphones Voice podcasts Zoomed desktop screens phone viewports

39. iSchool Accessibility Guidelines It depends Make it simple Use code according to its specification Provide multiple ways to find and consume your content Fail gracefully

40. iSchool Create Once, Publish to Everyone, Everywhere and at Any Time (COPEEAT?)

41. iSchool Everywhere!

42. iSchool Organization and Navigation are separate from Presentation Every device will have global, local and contextual navigation The elements will remain the same. How it looks will vary by device Debate over whether or not to use the same markup.

43. iSchool Make it Simple Smallest, reasonable chunks Regulate your language Controlled Vocabularies Minimize cryptic jargon Speak your users’ language (can’t say that often enough) How precise do you really need to be?

44. iSchool Use Code Correctly HTML for Content and Structure vs. CSS for Display If it’s not content, deploy it via CSS JavaScript, PHP, etc. for logic Exception: MediaQueries for CSS

45. iSchool Multiple Paths Text and text-to-speech Video and close-captioning / transcripts Photos and captions (aka, the ALT attribute) Color and something else

46. iSchool Fail Gracefully What if JavaScript is turned off? What if your style sheet is blocked or over- ridden? What if colors are forced to grey-scale?

47. iSchool Review Mobile as a gateway to ubiquity Accessibility is a vested self-interest Create Once, Publish to Everyone, Everywhere and Anytime IA is about organizing information, not presentation….but….