Transcript source
Components of information architecture I. Information organization II. Information access • Labeling • Navigation III. Design • Page layout • Site design • Interface design L571: Information Architecture for the Web I. Information organization In general, we “organize to understand, to explain, and to control.” Our classification systems reflect our social and organizational worlds IAs organize information so that people can find what they need to meet their needs The scheme should support directed searching and casual browsing It should also make sense to the person using the site Rosenfeld and Moreville, 2002; 50 L571: Information Architecture for the Web I. Information organization Organizing, labeling, and providing access to information is a basic IA function Classification is based on language which is ambiguous Heterogeneity A collection of unrelated elements with different levels of granularity Web content tends to be heterogeneous Mixed content should not be at the same level of a hierarchy Idiosyncrasy People have unique ways to organize information L571: Information Architecture for the Web I. Information organization Organizational scheme defines shared characteristics of content Influences logical groupings of content We routinely use a range of schemes Organizational structure is the explicit definition of relationships among content groups Types of schemes Exact schemes Well defined and mutually exclusive sections Good for known-item searching if you are looking for the item around which the scheme is organized L571: Information Architecture for the Web I. Information organization Exact schemes Examples of exact schemes Alphabetical, chronological, geographical Ambiguous schemes Divided into categories that are not easy to define as mutually exclusive Sections that may overlap Goal is to organize the information in intellectually meaningful ways Useful when you are not sure what you are looking for http://gallery.hd.org/_exhibits/toilets/toilet-paper-in-supermarket-1-DHD.jpg L571: Information Architecture for the Web I. Organizational systems Ambiguous schemes Topic Important to cover the breadth of content Should represent the major subject headings Task Focus is processes, functions, and tasks Useful when the purpose is to do something Audience Divide the content into smaller audience-specific areas May be open or closed http://philo.zm3.net/visuals/Ambiguous/Faces-Vases.gif L571: Information Architecture for the Web http://www.cs.toronto.edu/ ~moraes/illusion.html L571: Information Architecture for the Web I. Information organization Organizational schemes Metaphor (risky) Hybrids Risky because it can be confusing Organizational structure Constrains the ways people can navigate the site Top down hierarchy Taxonomy: a hierarchical arrangement of categories Mutually exclusive subdivisions Clear parent-child relationships http://www.labschool.org/honda site/images/taxonomy%203.jpg L571: Information Architecture for the Web I. Information organization Hierarchies Balancing relationship between exclusivity and inclusiveness Cross listing can be useful Listing items in more than one category Balancing breadth and depth in the taxonomy There are three main options http://www.franadvisors.com/ Hierarchy.jpg Narrow and deep, broad and shallow, hub and spokes The choice should be determined by the needs of the major stakeholders L571: Information Architecture for the Web I. Information organization Narrow and deep L571: Information Architecture for the Web I. Information organization Broad and shallow L571: Information Architecture for the Web I. Information organization Hub and spokes L571: Information Architecture for the Web I. Information organization Database driven A bottom up approach used in dynamically generated sites The use of relational databases means that metadata becomes more important Metadata supports browsing and searching A structured metadata scheme involves working with entity relationship diagrams (ERD) Define entities, attributes, and relations among them Allows automatic index generation Searching through specific fields L571: Information Architecture for the Web I. Information organization An example of a database-driven site http://www.smartdraw.com/resources/examples/softw are/images/database_web_site_full.gif L571: Information Architecture for the Web Components of information architecture I. Information organization II. Information access • Labeling • Navigation III. Design • Page layout • Site design • Interface design L571: Information Architecture for the Web II. Information access Labels A label is a shorthand representation of the site’s organization and content Challenge: use terms meaningful to the audience that accurately reflect the site’s content Labels should represent and clearly differentiate among major content and functional categories They should avoid jargon They should make a good impression on the audience since they represent the site owners Good labeling is a major component in the site’s usability L571: Information Architecture for the Web II. Information access What labels are in use here? Are they effective? L571: Information Architecture for the Web II. Information access Within navigation systems Consistency is important here The same label can sometimes be used to represent different types of information News can refer to site updates here and press releases there Scope notes are useful to clarify the particular use Index terms Making use of keywords, metadata, or controlled vocabularies as labels Supports browsing and provides an overview, especially when used in a site index L571: Information Architecture for the Web II. Information access Iconic labels Graphics must be used carefully Conveying meaning may be difficult with a cross-cultural audience Designing labels Consider the site’s content, audience, and context when creating a labeling system Try to keep the scope narrow Make sure that the system is consistent Predictability helps it to become invisible Try not to mix levels of granularity L571: Information Architecture for the Web II. Information access Here are iconic labels Do they work? http://www.slope7.com/ L571: Information Architecture for the Web II. Information access Navigation What we know about information seeking on the web will aid in the design of usable navigation We know it’s more complex than the standard model of IR Document Surrogate System Query Need Output Relevance judgment This model has been criticized Kalbach, J. (2001). Designing for information foragers: A behavioral model for information seeking on the world wide web. Internetworking 3(3). http://www.internettg.org/newsletter/dec00/article_information_foragers .html L571: Information Architecture for the Web II. Information access Many people say that one advantage of the Web (and other forms of hypermedia) over traditional print books is that the Web provides users with more navigational freedom. But how can this be? I can open any book to any page at any time. Nothing can be faster or easier. On the Web, I can only follow links that the designer has created, unless I use the Search feature—which takes time and does not always lead to success. As I see it, printed books offer greater navigational freedom than the Web. L571: Information Architecture for the Web II. Information access The research tells us that: Failures are due more often to poor system design, rather than user error Online search strategies change rapidly and searches evolve as we learn more about what is available User must be able to interact and negotiate effectively with systems to meet their information needs Searchers weigh the potential information gained against cost of task necessary to find information An important design challenge is saving time for users Web information seeking has unique attributes, but can be explained by traditional models of behavior L571: Information Architecture for the Web II. Information access Bates’ berry picking model: We traverse information space in a non-linear way We move from resource to resource, varying search strategies rapidly Browsing and searching complementary activities As we move, our information need may change based on what we learn We are involved in a negotiation with the system This means that flexibility and user control are critical Users must be able to interact naturally and intuitively with a system L571: Information Architecture for the Web II. Information access Pirolli and Card’s information foraging This is based on foraging theories in biology and anthropology It emphasizes ability to calculate the value of searching on the fly We trade-off the value of information gained against the cost of the task necessary to find information Foraging refers to strategies we use in searching for information It focuses on situational adaptation to environments The design challenges are to facilitate finding and retrieving while minimizing time on task L571: Information Architecture for the Web II. Information access Spool’s “scent of information” To forage efficiently we need to have a sense of where we are going and why Typically we can’t articulate these reasons The design of a navigation system should provide us with an accurate “scent” so that we can follow it to our destination These are cure that we use to decide whether something is interesting Images, hyperlinks and bibliographic citations related to the information needed If the scent is strong we continue to follow the trail L571: Information Architecture for the Web II. Information access Ellis’ model of information seeking Starting: identifying relevant sources of interest Chaining: following and connecting new leads found in an initial source Browsing: scanning contents of identified sources for subject affinity Differentiating: filtering and assessing sources for usefulness Monitoring: keeping up in a given subject area Extracting: systematically working through a source for material of interest L571: Information Architecture for the Web II. Information access So what does this work tell us about navigation? We use navigation tools help us determine where we came from, where we are going and where we are going Navigation should support the site’s organizational structure Tools should support users’ information seeking behaviors “Embedded” tools provide context and flexibility in the site (links) “Supplemental” tools are external to the content of the site (site map) L571: Information Architecture for the Web II. Information access Navigation that works should: Be easily learned and equire an economy of action and time Remain consistent and provide feedback Appear in context Offer alternatives Provide clear visual messages Use clear and understandable label Be appropriate to the site’s purposes Support users’ goals and behaviors L571: Information Architecture for the Web II. Information access IBSTOCK Brick’s site map http://www.ibstock.uk.com/ibstockpages/site-map/map-images/main-map2.gif L571: Information Architecture for the Web II. Information access One important purpose is to provide context This is important because of the nature of linking People often enter a site without coming through the home page Goal: people should know where they are at all times They should have a sense of the site If they enter at random, can they figure out where they are in relation to the rest of the site? Will they know how to get to the home page? Do they know where the next pages will lead? What can serve as landmarks? L571: Information Architecture for the Web II. Information access Three levels of “embedded” systems Global Present on every page on the site Allows access to all key areas on the site Local Provides access to smaller sections of the site These areas may be self-contained (subsites) More common in large sites since these areas may be controlled by different groups Each section may have a different form of navigation L571: Information Architecture for the Web II. Information access Contextual These may be unique to a page or set of pages Can be used to support associative learning and directed exploration Often represented with inline links Should be done with care since people tend to scan large blocks of text and may miss them When implementing embedded navigation systems the challenge is to minimize the real estate they use Can use textual or iconic links Very important to test these tools L571: Information Architecture for the Web II. Information access Supplemental navigation systems External to the basic site hierarchy Can be critical to usability Sitemaps Provides an overview of the entire site’s structure Should represent the site hierarchy Site index Typically a flat alphabetical listing of major sections on the site Supports known item searching Put some thought into the level of granularity L571: Information Architecture for the Web II. Information access Site index Large sites use a controlled vocabulary “See also” references Term rotation (permutation) site map - map, site Logs can be useful to find terms that are typically used Guides A restricted way to learn about the site’s structure Tour or tutorial Can focus on a specific topic or task L571: Information Architecture for the Web II. Information access Guides Can be used to preview restricted areas Typically uses linear navigation mixed with graphics Advanced navigation Personalization Dynamically generated pages based on user profiling Different for different types of users Customization User controls presentation, navigation, and content Takes effort to select and organize the options L571: Information Architecture for the Web Components of information architecture I. Information organization II. Information access • Labeling • Navigation III. Design • Page layout • Site design • Interface design L571: Information Architecture for the Web III. Design Page layout This will depend on the type of site Informational: news services, catalogues, newsletters Interactive: games and social networking (registration) Transaction: shopping, banking Workflow: planning, scheduling What should be on every page? What parts of every page can change? This leads to a page template L571: Information Architecture for the Web III. Design One way to begin is with the “layout grid” Determine generic pages to be used in major sections The content data is useful here Develop generic page elements using content and navigation data What should be on every page (globally and locally) Draw generic template pages with major elements in place Consider: branding, advertising and sponsorship info, company info, contact info, navigation, page titles, header graphics, footers, and copyrights and privacy statements L571: Information Architecture for the Web III. Design A layout grid Schiple, J. (2000). Information Architecture Tutorial. WebMonkey. http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=de sign L571: Information Architecture for the Web III. Design Another layout grid http://www.donald-firesmith.com/index.html?Components/WorkProducts/DesignSet/ HumanInterfaceDesignDocument/HumanInterfaceDesignDocument.html~Contents L571: Information Architecture for the Web A complex layout grid III. Design http://www.webstyleguide.com/site/graphics/3.33.gif L571: Information Architecture for the Web III. Design The next step is to mock up pages This is the job of the graphic designer The general structure and layout grids set parameters within which designers can develop the pages This is also a point of tension The result is the initial prototype This can be developed as a series of graphic files or HTML pages Eventually the prototype will be mounted on a development server and tested L571: Information Architecture for the Web III. Design Two important questions: What is the range of content that the key stakeholders want to see on the site? Categories of content include Static Dynamic Functional Transactional Have key informants generate a similar list L571: Information Architecture for the Web III. Design What are the key functions that should be on the site? Categories include Logon page Sign-up or registration pages Purchasing pages Interaction pages Help pages Have key informants develop similar lists then combine the lists and ask for feedback These lists form the basis for the organization and interactivity of the site (and information architecture) L571: Information Architecture for the Web III. Design Site design Organization: content areas have to be named (labeled) and placed in relation to each other This can be done with paper prototyping Develop a schematic for the site 1. Home (URL) 2.1 Who we are (URL) 2.1.1 Job opportunities (URL) 2.1.2 How to contact us (URL) 2.2 What we do (URL) 2.2.1 What we sell (URL) L571: Information Architecture for the Web III. Design Provide more detail in the schematic 2.2 What we do (URL) Content type: (from your controlled vocabulary of types) Purpose of the page: Page topic: Functionalities: Management: producer, owner, audience, updated, outdated Problems: Recommendations: L571: Information Architecture for the Web III. Design Use this as a basis for the first attempt at structure Can get very detailed depending on the size of the site Begin with the major content areas and sketch out the relationships among them Home Who we are What we do Job opportunities What we sell How to contact us L571: Information Architecture for the Web III. Design Metaphors are useful to site design: Organizational metaphors: rely on the existing structure of a group, system, or organization Use with caution Functional metaphors: relate tasks you can do on the site with tasks you can do in another environment The list of functionalities will be useful here Visual metaphors: based on common graphic elements familiar to most people in our culture Risky to use in a global environment L571: Information Architecture for the Web III. Design Putting the structure, general content categories and metaphors together provides a high-level view of the site Thinking about the user experience helps you develop the navigation scheme for the site The major content categories can be used for the global navigation scheme Then local schemes can be created for subsections of the site Testing these schemes is important L571: Information Architecture for the Web III. Design Home page usability A homepage is an important feature of an working site “The homepage is the most valuable real estate in the world” Nielsen and Tahir (2001). Homepage Usability. Preface. It is the digital face of the company This is the point of first impression It receives the most visits although people typically do not spend a lot of time there It represents a very large investment The average commercial web site costs ~$1,400,000.37 L571: Information Architecture for the Web III. Design What does a home page do? It provides an overview of the company’s web space It provides a high level view of the site’s information architecture It lays out the top level navigation scheme The page has marketing functions as well This is where branding begins The groundwork for trust-formation occurs here The basic messages of the organization are initially presented here L571: Information Architecture for the Web III. Design Design goals How can you communicate the purpose of your site? Make sure that your logo is visible and in a noticeable location Use a slogan that concisely explains what you do Use it to differentiate yourself Make sure that the home page is distinct in its design This minimizes user confusion Decide what the most important tasks are for your patrons and display appropriate links prominently Be sure to include contact information L571: Information Architecture for the Web III. Design Use the page to inform the visitor about your company Provide links to information about the company This could include About us Employment Investor relations Groups these links together Include a link to a page of press releases This is important for journalists Have a link to a page describing your privacy policy Tell people what type of information you collect and what it’s used for Only include information relevant to external audiences L571: Information Architecture for the Web III. Design Pay attention to the content of this page - writing matters Use your customers’ language to describe the main sections and categories Find out what terms they use to describe your business processes Avoid the jargon of your particular specialty Try to minimize redundant content Use consistent style rules throughout the site Use examples to clarify content Provide links to further explanations (narrowing) Provide links to more general information (expanding) L571: Information Architecture for the Web III. Design Be judicious in your use of graphics and animation Use graphics for content and not ornamentation Label the image if it differs from the text it supports Edit or crop images to fit the page Be very careful about overlaying text on images Be even more careful using animation Don’t animate critical elements (they draw attention away from critical content) Use high contrast text and background Have the most critical elements “above the fold” Use “liquid layout” L571: Information Architecture for the Web III. Design Working with contingency design 37Signals: designing for events when things go wrong on a site What options are available to people when they face problems Search results that are not useful 404 error pages Dynamic pages not loading Walk through a site design to check for possible trouble spots L571: Information Architecture for the Web III. Design Use language your customers understand Treat customers with respect (be polite) Offer an escape route Have customized error pages Don’t disable the back button Use intelligent forms validation Clearly identify trouble spots (with highlighting) Don’t block content with ads Use smart searching Accept misspellings L571: Information Architecture for the Web III. Design Restrict search return entries Provide an email link to retrieve forgotten password Have contextual FAQs (on the relevant pages) Answer email quickly and effectively Don’t force registration for assistance Solicit customer feedback Offer multiple communications channels Learn from failures Plan for failure L571: Information Architecture for the Web