Information Architecture and User-friendly design


Published on

1 Comment
  • good one :)
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Information Architecture and User-friendly design

    1. 1. Information Architecture: What is it?
    2. 2. Is it real? <ul><li>Most major corporations have an information architecture team, or at least one IA person. </li></ul><ul><li>Number of jobs on </li></ul><ul><li>Number of jobs on </li></ul><ul><li>Perhaps it is real, after all. Or is it just a new term for something we have been / or ought to have been doing? </li></ul>
    3. 3. So, what is Information Architecture? <ul><li>The definition: The art and science of organizing and labeling information to improve browsing and searching </li></ul><ul><li>The thing: The structure of information and components for searching and browsing that information </li></ul>
    4. 4. What are its components? <ul><li>Structuring: Chunking, grouping, and ordering content </li></ul><ul><li>Organizing: Taxonomies/hierarchies, auto-classification </li></ul><ul><li>Labeling: Indexing, vocabularies, thesauri </li></ul><ul><li>Navigating: Menus, tables of contents, site indices, search systems </li></ul>
    5. 5. IA: The practice <ul><li>Balances characteristics and needs of users, content and context </li></ul><ul><li>Three phases: </li></ul><ul><ul><li>Research </li></ul></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Implementation </li></ul></ul>
    6. 7. IA:Where it fits within User Experience <ul><li>From Jesse James Garrett’s </li></ul><ul><li>“ The Elements of </li></ul><ul><li>User Experience” </li></ul><ul><li> </li></ul>
    7. 9. Who does it? <ul><li>Technical writers </li></ul><ul><li>Graphics artists </li></ul><ul><li>Architects </li></ul><ul><li>Film makers </li></ul><ul><li>Information specialists </li></ul><ul><ul><li>librarians </li></ul></ul><ul><ul><li>publishers </li></ul></ul><ul><ul><li>web designers </li></ul></ul><ul><ul><li>database administrators </li></ul></ul>
    8. 11. Emergent Fields: No one has the whole picture © © Louis Rosenfeld
    9. 12. Why Information Architecture? <ul><li>Inform </li></ul><ul><ul><li>scholarship </li></ul></ul><ul><ul><li>common good </li></ul></ul><ul><ul><li>instruction </li></ul></ul><ul><li>Persuade </li></ul><ul><ul><li>advertise/promote/sell </li></ul></ul><ul><ul><li>control </li></ul></ul><ul><li>Entertain </li></ul><ul><ul><li>passive </li></ul></ul><ul><ul><li>active </li></ul></ul><ul><li>Create </li></ul>
    10. 13. Factors Context Message Audience Media Goals
    11. 14. Context <ul><li>Cultural setting </li></ul><ul><ul><li>social acceptance </li></ul></ul><ul><ul><li>Timing </li></ul></ul><ul><li>Costs </li></ul>
    12. 15. Goals <ul><li>Transfer/Lookups </li></ul><ul><li>Education </li></ul><ul><li>Social Good </li></ul><ul><li>Business </li></ul><ul><li>Political/Legal </li></ul>
    13. 16. Messages <ul><li>Content (discipline, organization) </li></ul><ul><li>Scope </li></ul><ul><li>Complexity </li></ul><ul><li>Novelty </li></ul>
    14. 17. Audience <ul><li>Range (who, where, why) </li></ul><ul><li>Knowledge base (what can you assume?) </li></ul><ul><li>Experience base (including the use of the interfaces) </li></ul><ul><li>Receptivity (physical, mental, emotional; factors like anxiety) </li></ul>
    15. 18. Media <ul><li>Technical requirements </li></ul><ul><li>Format </li></ul><ul><li>Number of channels (multimedia) </li></ul><ul><li>Transfer rate (bandwidth issues) </li></ul><ul><li>Degree of interaction (upload, download) </li></ul>
    16. 19. Users Information (Knowledge) Information (Data) Information Architect Use - Navigate - Search - Browse - Evaluate - Design - Implement - Structure - Tag/index - Analyze - Model - Classify - Evaluate - Create - Own - Edit - Manage - <ul><li>IA Goals </li></ul><ul><li>- satisfy user needs </li></ul><ul><li>- mediate </li></ul><ul><li>- make usable </li></ul><ul><li>add value </li></ul><ul><li>manage interaction </li></ul><ul><li>- </li></ul>Disciplines Standards Technology Policies Information Architecture Model ver. 0.01 (from IA Summit in 2000) (synthesis of ~900 terms from 250 cards) CLIENT END USER
    17. 20. Discussion Question (for Blackboard) How is the electronic medium different from: books/newspapers? film/TV? paintings/sculpture? What are the implications for users? for designers? for intermediaries?
    18. 21. Electronic medium and the ‘Information Overload.’ “ Everyone spoke of an information overload, but what there was in fact was a non-information overload.” Richard Saul Wurman, What-If, Could-Be (Philadelphia, 1976)
    19. 22. Design Process (is very much like Systems Analysis) <ul><li>Mission definition </li></ul><ul><ul><li>Problems/needs, materials, skills, vision </li></ul></ul><ul><li>Feasibility </li></ul><ul><ul><li>Needs assessment, cost-benefit analysis </li></ul></ul><ul><li>Prototyping and evaluation </li></ul><ul><li>Implementation </li></ul><ul><li>Evaluation and maintenance </li></ul>
    20. 23. Information Packages
    21. 24. Aggregation of Packages Screen 1 Screen 2
    22. 25. Smaller packages, more linkages <ul><li>Designing messages for electronic consumption suggests small chunks </li></ul><ul><ul><li>Screen real estate limitations </li></ul></ul><ul><ul><li>Scroll, paging limits </li></ul></ul><ul><li>Hyperlinks give flexibility but also add cognitive load (lost in cyberspace) </li></ul><ul><li>Implications of search engine entry points </li></ul><ul><li>Everything is becoming more like a reference work and less like a novel?? </li></ul>
    23. 26. Packages <ul><li>Objects </li></ul><ul><ul><li>physical attributes (e.g., size, color, shape, pre-iconographic) </li></ul></ul><ul><ul><li>conceptual attributes </li></ul></ul><ul><ul><ul><li>denotation (e.g., iconographic) is cultural </li></ul></ul></ul><ul><ul><ul><li>connotation (e.g., iconological) is personal and cannot be indexed. </li></ul></ul></ul><ul><ul><li>behavior (e.g., display, compute, compare) </li></ul></ul><ul><ul><li>(based on Erwin Panofsky’s “three strata of subject matter or meaning” from Studies in Iconology (1972) </li></ul></ul>
    24. 27. Packages (cont’) <ul><li>Relationships </li></ul><ul><ul><li>Intrapackage relationships (like pronouns) </li></ul></ul><ul><ul><ul><li>physical (next page, previous screen, see Figure #, position, order) </li></ul></ul></ul><ul><ul><ul><li>conceptual (anaphora) </li></ul></ul></ul><ul><ul><li>Interpackage relationships </li></ul></ul><ul><ul><ul><li>physical (citations) </li></ul></ul></ul><ul><ul><ul><li>conceptual (Allusions & metaphors. These cannot be machine generated) </li></ul></ul></ul>
    25. 28. Use of metaphors in IA <ul><li>Organisational Metaphors: shopping cart, wastebasket etc. </li></ul><ul><li>Functional Metaphors : cut and paste, paintbrush etc. </li></ul><ul><li>Visual Metaphors: homepage, window, music interface buttons that look like a stereo, folders etc. </li></ul>
    26. 29. Metaphors can become tired, or carry no meaning. <ul><li>Metaphors that are too obvious: Tree for a family tree etc. </li></ul><ul><li>Metaphor Overkill : They cannot convey meaning for you if you stretch the metaphors beyond their limits. </li></ul><ul><li>Colours carry metaphors too: Be careful how you use them. Can be culture-specific also. (Blue Zone, Red Line, Yellow Fever, Red Light etc.) </li></ul>
    27. 30. Packages (cont’) <ul><li>[Control] Mechanisms </li></ul><ul><ul><li>control </li></ul></ul><ul><ul><ul><li>display (scroll, jump, zoom) </li></ul></ul></ul><ul><ul><ul><li>usage monitor (histories, bookmarks, ISP, IP address) </li></ul></ul></ul><ul><ul><li>query </li></ul></ul><ul><ul><ul><li>analytical (Boolean; with/without relevance feedback; dynamic) </li></ul></ul></ul><ul><ul><ul><li>Selection </li></ul></ul></ul><ul><ul><ul><li>Dynamic </li></ul></ul></ul><ul><ul><li>manipulation </li></ul></ul><ul><ul><ul><li>cut and paste </li></ul></ul></ul><ul><ul><ul><li>add value (e.g., concordance, link plots--who links to the site, who you link to?) </li></ul></ul></ul><ul><ul><ul><li>information visualisation ) </li></ul></ul></ul>
    28. 31. Events <ul><li>Exchange cycle </li></ul><ul><ul><li>e.g., a smile acknowledged, an http requested page returned, cookie stored (client-server model) </li></ul></ul><ul><li>Share cycle (eg. social networking) </li></ul><ul><ul><li>perception, processing, comprehension of an information package by more than one [person/package/object] </li></ul></ul><ul><ul><li>Manipulation of the information. Cannot control it once it’s out there… </li></ul></ul>
    29. 32. www Design <ul><li>Know the audience </li></ul><ul><ul><li>Universal access </li></ul></ul><ul><li>Iterative design and testing </li></ul><ul><ul><li>Consider the development curve </li></ul></ul><ul><li>Organise, organise, organise </li></ul><ul><li>Be consistent </li></ul><ul><li>Appropriate use of media </li></ul><ul><ul><li>Avoid gratuitous ‘bells and whistles’ </li></ul></ul><ul><li>Leverage interactivity </li></ul><ul><ul><li>Maintain interest </li></ul></ul><ul><ul><li>Gather feedback </li></ul></ul>
    30. 33. Organisational Structures <ul><li>List </li></ul><ul><li>Array ( a link list) </li></ul><ul><li>Hierarchy (trees) </li></ul><ul><li>Network </li></ul><ul><li>Hybrids (DNA organisation?) (This is not apparent in traditional information organisations, but happens in our heads, perhaps?) </li></ul>
    31. 34. Organizational Schemes <ul><li>Alphabetical </li></ul><ul><li>Chronological </li></ul><ul><li>Geographic </li></ul><ul><li>Topical </li></ul><ul><li>Numerical </li></ul><ul><li>Administrative Parts/Units </li></ul><ul><li>Importance, size </li></ul><ul><li>Task </li></ul><ul><li>User group </li></ul><ul><li>Metaphor </li></ul><ul><li>Random </li></ul>
    32. 35. Control Mechanisms (Navigation) <ul><li>Context (where am I? Branding?) </li></ul><ul><ul><li>Consistency (layout, labeling, etc.) </li></ul></ul><ul><li>Links (types, labels; currently not bi-directional or computed, although the early days of digital hypertext was conceived in that way) </li></ul><ul><li>Input forms </li></ul><ul><li>Menus </li></ul><ul><li>Toolbars </li></ul><ul><li>TOCs, sitemaps, tours </li></ul><ul><li>Mouse events, zooms </li></ul>
    33. 36. Expression <ul><li>Words </li></ul><ul><ul><li>Appropriate and controlled vocabulary </li></ul></ul><ul><ul><li>Clear, concise statements and prompts </li></ul></ul><ul><li>Images </li></ul><ul><ul><li>Appropriate </li></ul></ul><ul><ul><li>Browser friendly </li></ul></ul><ul><li>Video, sound </li></ul><ul><ul><li>Appropriate controls </li></ul></ul><ul><li>Interactivity and Flow </li></ul>
    34. 37. Planning <ul><li>Storyboards </li></ul><ul><li>Scenarios </li></ul><ul><li>Templates </li></ul><ul><li>Feedback from users (eg., Children’s Digital Library that was created with input from children; Fiction Finder created by Reference Librarians who interact with the users as opposed to Cataloguers who mostly interact just with the books) </li></ul><ul><li>Maintenance </li></ul>
    35. 38. Implementation <ul><li>Tools </li></ul><ul><ul><li>Wireframes </li></ul></ul><ul><ul><li>Software (e.g., Visio, Flowcharter) </li></ul></ul><ul><li>Evaluation </li></ul><ul><li>Maintenance </li></ul><ul><ul><li>Content management </li></ul></ul><ul><ul><li>Digital libraries </li></ul></ul>
    36. 39. Examples of wireframes
    37. 40. Examples of wireframes, cont.
    38. 41. Examples of wireframes, cont.
    39. 42. IA Bibliography Constantine, Larry L., and Lucy A.D. Lockwood. Software for Use . Reading, Mass.:Addison Wesley, 1999. Krug, Steve. Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis, IN: Library, 2000. Morville, Peter. Semantics Archive . Semantics Studio Archives. Web site. Available from Morville, Peter. Ambient Findability . O’Reilly Media: Safari Books, 2005. Nelson, Theodor. Computer Lib/Dream Machines , Redmond, WA: Tempus Books of Microsoft Press, 1987 Nielsen, Jakob. Usability Engineering . San Diego, CA: Morgan Kaufman, 1993. Nielsen, Jakob. Designing Web Usability . Indianapolis, IN: New Riders, 1999.
    40. 43. IA Bibliography Cont’ <ul><li>Norman, Donald A. The Design of Everyday Things . New York, NY: Doubleday, 1990. </li></ul><ul><li>Rosenfeld, Louis, and Peter Morville. Information Architecture for the World Wide Web . Sebastopol, CA: O'Reilly, 1997. </li></ul><ul><li>Shneiderman, Ben. Designing the User Interface : Strategies for Effective Human-Computer Interaction . 3rd ed. Reading, Mass.: Addison Wesley, 1997. </li></ul><ul><li>Tufte, Edward R. Envisioning Information . Cheshire, Conn.: Graphics Press, 1990. </li></ul><ul><li>Wurman, Richard Saul. Information Architects . Zurich, Switzerland: Graphis Press Corporation,,1996. </li></ul>
    41. 44. <ul><li>Explore this website. </li></ul><ul><li>Edward Tufte is a pioneer in Data Graphics and in the presentation of information with visual simplicity, as opposed to ‘Chart Junk.’ </li></ul><ul><li>His ideas are very useful in transmitting information in organisational settings. </li></ul><ul><li>He believes PowerPoint is evil, and it may well be :-) </li></ul>