Week 3: Information Architecture

1. Week 3: Information Architecture • How IA helps the team develop a web project • How Usability helps accomplish site goals • How users really use the web

2. Information Architecture • “IA” is the structure of the web site – what goes where, how they connect, and how usable the site will be • Needs a Creative Brief or User Experience document to work from • Creates User Scenarios, Site Map, and Wireframes (or “schematics”)

4. Information Architecture: a Definition “Information architecture involves the design of organization, labeling, navigation, and searching systems to help people find and manage information more successfully.”

5. Who is the Information Architect? • Specifies how users will find information in the site by defining its organization, navigation, labeling and searching systems • Determines what content and functionality the site will contain. • Clarifies the mission and vision for the site, balancing the needs of its sponsoring organization and the needs of its audiences. • Maps out the site

6. Monster.com, hotjobs.com Search for an Information Architect Agency.com Walt Disney

7. Information Architecture • Well-planned IA greatly benefit both consumers and producers. • Accessing a site for the first time, consumers can quickly understand it effortlessly • Producers of web sites and intranets benefit because they know where and how to place new content without disrupting the existing content and site structure.

8. Organizing Information • The beginning of all understanding is classification. • Hayden White • We organize information so that people can find the right answers to their questions. Our aim is to apply organization and labeling systems that make sense to users. • Why are many large web sites so difficult to navigate? • Why CAN’T people who design these sites make it easy to find information.

9. Organizational Challenges • People have struggled with the difficulties of Information Organization for centuries. • The field of librarianship has been largely devoted to the task of organizing and providing access to information. • “We are all becoming librarians” • Not long ago the responsibility for labeling,organizing and providing access to information fell in the labs of librarians. • The internet is forcing the responsibility for organizing information on more of us each day.

10. Language of Librarians • We unknowingly adopt the language of librarians. • How should we label that content? • Is there an existing classification system? • Who is going to catalog all that information?

12. The Value of IA • While discovery documents are verbal descriptions of the project’s goals, the Site Map and Wireframes (aka Schematics) are a visual presentation of the web site • These “blueprints” are useful to client, PM, designers, technical team, QA team • A tangible document that gives everyone a common direction

13. Site Maps • Road map of site • Demonstrates surf path taken by visitor • Client/contractor collaboration • Purpose is to communicate • Many different formats, graphic tools to create them • Include site map on site??

14. Sample Site Maps Architectural blueprints are visual representations of the site structure. They are diagrams showing how elements of the site are grouped and how they link or relate to one another.

15. Sample Site Maps

16. Sample Site Maps

17. IA as Blueprint – aol.com • A real-world example of how AOL.com used their site maps to organize their project

19. Added Value of IA - Usability • Works with Usability Principles & Usability Testing to create a design that helps site visitors accomplish their tasks • Happy visitors = achieving business goals

20. Food for thought… • What do you cook when you make dinner for yourself? • What do you cook when you make dinner for someone else?

21. Food for thought… • What do you cook when you are running a restaurant?

22. Differences In Perspectives • Differences in perspectives • Have you ever tried to find a file on a coworkers desktop computer? • In some cases immediately or • You may have searched for hours. • The ways people organize and name files and directories on their computers can be illogical • When questioned their organization system makes perfect sense. • The fact is that labeling and organization systems are intensely affected by their creators perspectives. • To design usable organization systems, we need to escape from our own mental models of content labeling and organization. • One size does not fit all.

24. Usability Basics • From Usability.gov: http://www.usability.gov/basics/index.html

25. What Is Usability? • Usability is the measure of the quality of a user's experience when interacting with a product or system — whether a Web site, a software application, mobile technology, or any user-operated device. • Usability is a combination of factors that affect the user's experience with the product or system, including:

26. What is usability 2 • Ease of learning How fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks? • Efficiency of use Once an experienced user has learned to use the system, how fast can he or she accomplish tasks? • Memorability If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything? • Error frequency and severity How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors? • Subjective satisfaction How much does the user like using the system?

27. Why Is Usability Important? • Research by User Interface Engineering, Inc., shows that people cannot find the information they seek on Web sites about 60% of the time. This can lead to wasted time, reduced productivity, increased frustration, and loss of repeat visits and money.

28. Other sources report: • "There are about 43 million Web sites, and no one knows which ones are usable. The best sites we've found are usable only 42 percent of the time, and none that we have studied are usable a majority of the time ...." • Studies by Forrester Research estimate several costs of bad site design. The two most striking are: • Losing approximately 50% of the potential sales from a site as people can't find what they need • Losing repeat visits from 40% of the users who do not return to a site when their first visit resulted in a negative experience

29. Site design guru Jakob Nielsen reports: • "Studies of user behavior on the Web find a low tolerance for difficult designs or slow sites. People don't want to wait. And they don't want to learn how to use a home page. There's no such thing as a training class or a manual for a Web site. People have to be able to grasp the functioning of the site immediately after scanning the home page — for a few seconds at most."

31. Approaches • Elements of User Experience Design, Ch. 5

32. Conceptual Models • How users think about interactive components • Is it an article to read? A place to visit? An object they acquire? A tool to use? • Use a conceptual model to make consistent design decisions (why?)

33. Shopping Cart or Order Form? • How do you use a “shopping cart”? • How do you use a catalog “order form”? • How would you design a system differently if it was a cart or a form? • How do “conventions” affect your design choices?

34. Top-Down vs. Bottom-Up Approaches • Ways to develop a structure for your site • Top-down approach • Typical hierarchy approach • Start with objectives & needs at highest level • Divide into logical categories • Content goes into this empty shell • Bottom-up approach • Starts with the material (content) you have • Create a structure for the material

35. Be Adaptable • Top-down can miss important content • Bottom-up can be so precisely tuned to existing content that it’s not flexible • An adaptable approach will strike a balance between T-D and B-U

36. Architecture Approaches • These are ways to structure information to give the user a sense of what they are doing and where they are – and give you & the team a sense of what they are building • Hierarchy or Tree • Matrix or Facets • Organic (no structure) • Sequence

37. The Hierarchy • A top down approach • Well designed hierarchy is the foundation of almost all IA’s • Simple • Familiar • Family trees are hierarchical • Organization charts are usually hierarchical • A good way of start the IA process

38. Hierarchy Structure • Aka “Tree” or “hub-and-spoke” structure • Nodes have “parent-child” relationship • Most common web site structure • See Yahoo.com as a Web Site Directory • Other hierarchical structures?

39. Designing Hierarchies • Rules of thumb • Categories should be mutually exclusive • Do tomatoes belong to Fruit, vegetable or berry category? • Balance between Breadth and Depth • Breadth, number of options in each level • Users are faced with too many options • Depth, number of levels in the hierarchy • Users have to click-through inordinate number of levels

40. Narrow and Deep Users are faced with six clicks to reach the deepest content If users are forced to click more than four or five levels, they may simply give up and leave your web site.

41. Broad and Shallow • Users must choose from ten options to reach a limited amount of content • Try to follow the seven +- two rule • Web sites with more than ten options on the main menu can overwhelm • users

42. Adaptable Hierarchies • For new web sites and intranets that are expected to grow you should lean towards a broad and shallow rather than narrow and deep hierarchy. • This approach allows for the addition of content without major restructuring.

43. Matrix Structureaka “Facet-based browsing” • A facet is an aspect or dimension of an object or piece of information. • (Also the sides of an object, such as a gem) • You can access the information by starting with any of the facets available • (You can look through a gem from any angle) • Lets the user choose their own tree structure

44. Facet Based Browsing

45. See also…(facets) • How does www.zagat.com use facets in their site’s organization?

46. Organic Structure • No specific structure • Good for free-form exploration • Doesn’t create a sense of where you are

47. Sequential Structure When “One thing leads to another” • This class; • Any book; • Any movie; • Real life Fewer web examples, because the web is a hypertext system • (can you think of some?)

49. Organizing Principles • High-level concept to organize your site …or, what is the top level of your tree? • See… • cnn.com • Dell.com • Zagat.com