Successfully reported this slideshow.

Information Architecture

2,323 views

Published on

Published in: Technology, Education
  • Be the first to comment

Information Architecture

  1. 1. Information Architecture 3-4 February 2009
  2. 2. Our Vision
  3. 3. Our Mission Bring innovative new ways of working to the enterprise by promoting online collaboration through modern web-based social platforms.
  4. 4. Our Values
  5. 5. Consulting Services Business Watch Knowledge Management Social Intelligence Online Strategy
  6. 6. Software, Open Source, SaaS
  7. 7. Other Services Watch Community Management Online Presence Content Creation Marketing 2.0 Training Support
  8. 8. What is this strange bear?
  9. 9. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  10. 10. Technique & Profession content IA balances the characteristics and needs of users, content and context context users IA
  11. 11. Different Contexts content Context is the joint of a corporate strategy and a market context users IA Research Trade Education Lobbying Collaboration Consultation Innovation Also: Social Cultural
  12. 12. Users Have Needs content IA is User-Centered Design aka Usability aka User Experience context users IA Learn Discuss Interact Create Discover Exchange Influence Buy/Sell Share
  13. 13. Content To... content Content is the vector of your objectives context users IA Communicate Inform Teach Reference Collect Promote Advertise Sell Share Persuade PURPOSE!
  14. 14. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  15. 15. Content Data Information Meaning Information is data that has been processed for use
  16. 16. Content (bis) Data Information Knowledge Meaning Understanding Knowledge is information that is understood and integrated
  17. 17. Users Continuing to use Using Discovering
  18. 18. IA Validate Design Research
  19. 19. IA Validate Design Research Understand the audience and context Use research to solve the problem Test the design against the requirements
  20. 20. Project Launch Build Visual Design Requirements Strategy & Scoping
  21. 21. IA in a Project Launch Build Visual Design Requirements Design Validate Strategy & Scoping Research
  22. 22. Measure Objectives Outcome Output
  23. 23. Measured IA in a Project Launch Build Visual Design Requiremnts Design Validation Research Outcome Output Objectives Strategy & Scoping
  24. 24. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  25. 25. User Research Understand your users Watch them Talk to them Who are they? What do they need? How will they find what they need? What do they want? What do they know? What do they like? How do they use technology? How might they use your product? What resources do they have? What kind of tasks they are expecting to perform? How to serve the users?
  26. 26. User Research Techniques Interviews Practice reviews Surveys Focus groups Market analysis Web analytics Sales data analysis (CRM)
  27. 27. Research Users come first !
  28. 28. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  29. 29. Model-View-Controller
  30. 30. Model Use knowledge of users Involve them in the process Balance user needs and business objectives Define the model: Type of content Language Format Structure Taxonomy Etc
  31. 31. Type of Content News Docs Resources Profile s Events
  32. 32. Language Plain vs ... Legalese Technical Esoteric Promotional Summarized vs ... Detailed Verbous Lengthy
  33. 33. Format for Humans Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta. Etiam at justo in nunc semper lacinia. Cras interdum adipiscing elit. Sed dapibus ultricies erat. In at enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dictum interdum lorem. Fusce volutpat. Maecenas et nulla.
  34. 34. Format for Computers <XML>
  35. 35. Classification by date:
  36. 36. Classification alphabetical:
  37. 37. Classification by geo:
  38. 38. Classification by task:
  39. 39. Classification by audience, readership:
  40. 40. Classification with tags:
  41. 41. Classification by topic:
  42. 42. Structure: Hierarchy Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  43. 43. Structure: Database Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  44. 44. Structure: Heuristic Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  45. 45. Structure: Organic Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  46. 46. Structure: Conceptual Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  47. 47. Internationalisation Languages: English French Spanish German Chinese Etc Cultures: European American Asian Latin World-wide Dev'ed vs dev'ing Etc Localisation: Currencies Date formats Content Number formats Time shifts
  48. 48. Language Can be based upon... User Preferences Physical Address IP Address Web Browser Settings Operating System
  49. 49. Culture Influences... Content Wording Tone Presentation References Priorities
  50. 50. Localisation Determines... Currencies Date formats Content Number formats Time shifts Text in images
  51. 51. Taxonomy = Predefined Tagging = many-to-many categorisation
  52. 52. Many-to-many
  53. 53. Folksonomy = User Defined Tagging --> Collaborative Tagging
  54. 54. Semantic Web "wall" ? a brick wall? the Berlin Wall? the Great Wall of China? a song by the Pink Floyd? a virtual pinboard on Facebook?
  55. 55. Semantic Web Set of standards and tools by W3C to: add meaning to content make information understandable by computers Microformats is another tentative towards semantic web.
  56. 56. Data Portability Move or copy data in order to reuse it outside its original container. DataPortability Project Supported by Google, Facebook, Plaxo, Drupal, Netvibes, LinkedIn, Flickr, Six Apart, Twitter, Digg, Microsoft Multiple open standards: APML, FOAF, hCard, OAuth, OpenID, OPML, RDF, RSS, XFN, etc Question: copying/pasting vs linking vs embedding
  57. 57. Licensing Copyright Copyleft the freedom to use and study the work, the freedom to copy and share the work with others, the freedom to modify the work, and the freedom to distribute modified and therefore derivative works. the author of a derived work can only distribute such works under the same or equivalent license.
  58. 58. Licensing Creative Commons (better for multimedia works)
  59. 59. Licensing Copyleft and Creative Commons licenses ensure open access and dissemination of scientific, cultural, artistic content regardless of the social classes.
  60. 60. Navigation Structure Search Site map Documentation Cross-linking Cross-referencing Contexts Related content Advice: Design browse structures Design the front page last Provide different paths Link-rich pages
  61. 61. Pagination Number of search results per page Length Criteria: alpha, relevance, popularity, date, etc Content Highlight
  62. 62. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  63. 63. Model Activities Meetings Publications News Projects External Links Information (what information?) Type of content:
  64. 64. Model Plain English Technical? Legal? Conversational? Summaries vs detailed? Language:
  65. 65. Model PDF PDF to HTML? Videos? Audios? Images? Slideshows? RSS? Format:
  66. 66. Model Classification: By date -> calendar (meetings) By topic (activities, ...) By language (projects) By geo (meetings) By tag? Other?
  67. 67. Model Structure: What is the best model? One or several models? Try to make a sketch
  68. 68. Model Internationalisation: Language: Language of content Language of website Culture: World-wide Eastern vs Western Developed vs developing countries Localisation ?
  69. 69. Model Taxonomy: Is it necessary for your needs? Taxonomy vs folksonomy? Existing rules? Categories? Evolution of taxonomy? Add? Remove?
  70. 70. Model Semantics & Portability: Is it necessary for your needs? Does your information require to be recognised by computers? Does or should your information be processed by third parties? Internal tools? Should your information be indexed by semantic search engines? Should your information be transferred to other systems or services?
  71. 71. Model Licensing: Copyright? Copyleft? Creative Commons? Use? Copy? Modify? Distribute? Attribution? Derivative work? Commercial use? What is the best solution for you?
  72. 72. Model Navigation: What are / should be the different paths to access information? Search? Site map? Cross-linking? Contexts? Related content?
  73. 73. Model Pagination: What type of content is likely to require pagination? What criteria should be used to sort results? Should results be highlighted?
  74. 74. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  75. 75. Model-View-Controller
  76. 76. Design
  77. 77. View - Design Layout Interface Aesthetic
  78. 78. Layout design is about preparing the information on a website in the best possible way, so that users can efficiently and effectively find and digest information
  79. 79. Layout Presentation Organization Structure Conventions Standards Templates
  80. 80. Presentation Techniques making the information on a page much easier to digest: how menus and sub-menus are laid out how different sections are cross linked how to build a website easy, effective and intuitive how to design a page to facilitate the way of consuming information (most users skim, scan and jump) ...
  81. 81. Presentation Don't wrap key information in bundles of text Highlight it Don't give users paragraphs on end Break them up with headings, subheadings, bullet points, diagrams Lead the users in with titles, subheadings, demarcations, pullquotes, and other techniques for pulling the eye. Give them a summary of the four step process on the homepage, then at each stop there are pointers to direct the user onto the next step
  82. 82. Presentation
  83. 83. Layout Presentation Organization Structure Conventions Standards Templates
  84. 84. Organization Develop a sitemap and plan of how the information will site in a hierarchical way. Define how different sections might tie in together Specifiy paths a user might take through a sitemap Organising information doesn't even necessarily have to be about putting it into menus and submenus: you may find that some information shouldn't be on a site or that it requires a subsite or that you need to do something else altogether.
  85. 85. Organization How deep or how wide should your navigation be ? Depth: number of layers of categories and subcategories Width: number of items of each level Find the right balance
  86. 86. Organization Too many items on a single level (especially the top level) => confusing the user If a user has to click many levels in => you risk losing them Good Rule Keep the number of options on a given level to 4 - 8. 8 top level items x 8 subcategories x 8 sub-subcategories = 512 pages
  87. 87. Organization Standard sitemap
  88. 88. Organization Sitemap using MindMapping
  89. 89. Layout Presentation Organization Structure Conventions Standards Templates
  90. 90. Structure Short, clear and explicit titles Paragraphs concise and focused on 1 idea Short sentences (15-20 words) Simple texts (80% short words, max. 4 syllables) Rule of the inverted pyramid (from the most important to the detail) Avoid promotional tone Highlight your content (font sizes, bold, colors for links, lists, icons...)
  91. 91. Structure Distinguish between information content (consuming mode) and orientation content (guidelines, introduction, search, help mode) Avoid columning articles Correct use of links: max. 5 links in an article other links grouped aside the article "Learn more..." Add images and videos to illustrate the content
  92. 92. Structure
  93. 93. Layout Presentation Organization Structure Conventions Standards Templates
  94. 94. Conventions When you click on a button that says "Home" you expect to go to the start page, you do not expect to go to a page that shows a person's house. Logo on the top left side Languages on the top right side
  95. 95. Conventions Use icons to label some task or action Keep the same typography (font, size...) between the same kind of content
  96. 96. Layout Presentation Organization Structure Conventions Standards Templates
  97. 97. Standards W3C Recommendations www.w3.org CSS Valid (Cascading Style Sheets) XHTML Valid (eXtended HyperText Markup Language) RSS & Atom Valid (Really Simple Syndication) WCAG (Web Content Accessibility Guidelines) MWI (Mobile Web Initiative)
  98. 98. Layout Presentation Organization Structure Conventions Standards Templates
  99. 99. Templates Pre-developed page layouts used: to create new pages from the same design, pattern, or style to separate content from presentation to separate business logic from presentation logic for mass-production of web pages to deploy applications that are flexible and easily maintainable
  100. 100. Templates
  101. 101. Templates Header Logo + Baseline Languages 1st level tranversal menu Breadcrumbs Center Main content Images + Videos Footer Legal Terms Copyright Sitemap FAQ Contact Left Column 2nd level menu Categories / Tags Right Column Search engine Newsletter RSS Addtional information
  102. 102. Templates
  103. 103. View - Design Layout Interface Aesthetic
  104. 104. Interface design is the arrangement and makeup of how a user can interact with a site
  105. 105. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  106. 106. Eyetracking Users spent a longer amount of time viewing the original version of the content (left) but remembered 34 percent less than those who received the reformatted story (right)
  107. 107. Eyetracking The image of the train did not get eye fixations. Users did find the "top stories" and spent the most time there, but only after traveling the page and making fixations in other areas.
  108. 108. Eyetracking The longest eye fixations are on the area labeled "News Releases," where the main stories are and where the site designers intended to direct them. Users seemed to find exactly what they needed and stay there when information was more clearly labeled. Again, the image gets no fixations.
  109. 109. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  110. 110. Components Interface = where a person and a website touch Usually built with visual components: menus buttons drop-down lists forms and all the other ways you can interact with a website (hyperlinks)
  111. 111. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  112. 112. RIA RIA = Rich Internet Application Web applications that have the features and functionality of traditional desktop applications => Web page does not need to be reloaded. A simple area of the web page is refreshed
  113. 113. RIA Rich components: Drag and drop Sliders Technologies: Ajax Flash Silverlight Drawbacks Search engines may not be able to index the text content of the application Accessibility issues with screen readers
  114. 114. RIA
  115. 115. RIA Useful when the web page provides a specific tool: Image & video editing Slideshows (Google Docs) Music manager Maybe not so useful for pure content web pages: News and articles Documents
  116. 116. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  117. 117. Navigation Navigation system should remain consistent Let the user figure out where he can go Example - A menu bar should not: move somewhere else change dramatically just disappear
  118. 118. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  119. 119. Orientation Users should always be able to work out where they are on a site Breadcrumbs (clickable)
  120. 120. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  121. 121. URL Use friendly, clean and explicit URL's Prefer http://www.mysite.com/section/my-article-title Instead of http://www.mysite.com?sid=203&pid=1243 Friendly URL's will inform users and search engines about the content of your page Permalinks to send and bookmark easily a page
  122. 122. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  123. 123. Search You must provide a search engine for your content
  124. 124. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  125. 125. KISS Keep It Simple, Stupid
  126. 126. View - Design Layout Interface Aesthetic
  127. 127. Aesthetic design is all about getting the look right and appropriate
  128. 128. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  129. 129. Themes & Skins Custom graphical appearances that can be applied to a website in order to suit different tastes
  130. 130. Themes & Skins
  131. 131. Themes & Skins
  132. 132. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  133. 133. Colour Palettes
  134. 134. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  135. 135. Rounded Shapes
  136. 136. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  137. 137. Big Characters
  138. 138. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  139. 139. Uncluttered Layout
  140. 140. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  141. 141. Branding
  142. 142. Branding
  143. 143. Conclusion
  144. 144. View Layout: Presentation Menus? Submenus? Sections? Ratio of text vs graphics? 2-3 core services of the website? Key vs secondary information? How easily can one find the relevant info?
  145. 145. View Layout: Organization Try to design the sitemap based on the model (only high level) Define the menus based on the sitemap Define the depth and width of each one of the menus
  146. 146. View Layout: Structure Go to ... and redesign the structure of the page Think about the different items (pdf, video, html, links, headlines, sections, paragraphs, lists, etc) Is it necessary to have everything on one single page? What existing content could be reused? How can the content of this page be reused elsewhere?
  147. 147. View Layout: Conventions What conventions are required? Colours? Fonts? Icons? Logo? Layout: Standards Are web standards required and/or useful?
  148. 148. View Layout: Templates Image a generic template that could apply to the majority or a significant number of pages. Consider columns, headers, menus, categories, etc.
  149. 149. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  150. 150. Model-View-Controller
  151. 151. Controllers are in charge to manage business processes and workflows.
  152. 152. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  153. 153. Validation Involve users Get feedback Start early in the process Prototyping Functional and usability testing Schedule testing activities Apply realistic scenarios Favor interactions Iterate / revise design (Agile) -> easier than waiting until the end!
  154. 154. Functional Testing Useful to check the behavior of the information system Controllers are involved in the functional behavior of the information system Create test cases: Specify the steps of the test Define the input data Check the output data
  155. 155. Functional Testing Log in valid account: Steps: go to the homepage and click the login link to access the login form Input data: username + password Output data: message 'you are logged in' + personal account information Log in with wrong password: Steps: go to the homepage and click the login link to access the login form Input data: username + wrong password Output data: login form + message 'wrong password, try again' + link 'I forgot my password, send me a new one'
  156. 156. Usability Testing You can learn a lot by watching people You should analyze: how people use the website how they digest the information how they behave where you can improve your design Heuristic Evaluation by Jakob Neilsen 5 people should find around 75% of all usability problems 10 people will only get you up to 85%
  157. 157. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  158. 158. CMS Content Management System Software used to create, edit, manage, search and publish various kinds of content (text, image, vidéo, audio, documents...) Access & Identification Roles & Responsabilities Editor WYSIWYG Taxonomy & Folksonomy
  159. 159. CMS Separation between content (model) and view Templates & Themes Comments Workflow & Tasks => Collaboration Versioning Plugins Open Source
  160. 160. CMS
  161. 161. ECM Entreprise Content Management Software used to capture, manage, store, preserve, and deliver content and documents related to organizational processes CMS for Entreprise EDM (Electronic Document Management) Repository
  162. 162. ECM Optical Character Recognition (OCR) Document Sharing Versioning, Backup, Archiving, Recovery, Lifecycle Advanced Search Connectors to 3rd party apps Workflow & BPM (Business Process Management) converting the document to another format moving it to another folder notifying a set of users via email reviewing steps
  163. 163. ECM
  164. 164. External Roles Public Private (membership)
  165. 165. Internal Roles Project Manager Process Engineer Developer Web Designer Tester Webmaster Editor Moderator Marketer Community Manager Competitive Monitoring & Strategic Watch Traffic Manager
  166. 166. Communities Web 2.0 UGC Prosumer CrowdSourcing Participation Co-creation Sharing Conversations C2C - P2P Viral Influencer Engage Widgets Digital Natives Social Networks (e.g. Facebook)
  167. 167. Social Media
  168. 168. Social Media
  169. 169. Direction of Information People trust recommendations of their peers
  170. 170. Metrics Website Traffic RSS Subscriptions Brand, Reputation, Trend, Conversation Tracking Alerts Competitive Monitoring & Strategic Watch
  171. 171. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  172. 172. Tools Roles: Try to define the internal and external roles/profiles Order them by importance May any persons/employees have different profiles?
  173. 173. Tools Communities What are your existing communities? Internal and external ? How could you benefit from social networks to increase your audience and make your website successful ?
  174. 174. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  175. 175. Maintenance Your website becomes obsolete the day you launch it Mid-term and long-term strategy and objectives Content generation Evolving a website Communication with your community/ies Learn from your users and react... Online Marketing Monitoring and strategic watch Traffic Analysis Software upgrade + Bug fixing
  176. 176. THANK YOU http://b-spirit.com/ info@b-spirit.com Olivier Tripet Mathieu Favez
  177. 177. Credits http://psdtuts.com/articles/6-interface-design-principles-and-tips-every-web-designer-should- know/#more-1669 http://blog.kinoa.com/2008/12/05/reussir-sa-page-web-les-bons-ingredients/ http://blog.kinoa.com/2008/10/07/10-astuces-pour-optimiser-vos-contenus-sur-le-net/ http://en.wikipedia.org/wiki/File:TempEngWeb017b.svg http://www.ojr.org/ojr/stories/070312ruel/ http://www.readwriteweb.com/archives/report_social_web_usage_tipped_2008.php

×