• Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Information Architecture

on

  • 1,834 views

 

Statistics

Views

Total Views
1,834
Views on SlideShare
1,834
Embed Views
0

Actions

Likes
4
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Information Architecture Information Architecture Presentation Transcript

    • Information Architecture 3-4 February 2009
    • Our Vision
    • Our Mission Bring innovative new ways of working to the enterprise by promoting online collaboration through modern web-based social platforms.
    • Our Values
    • Consulting Services Business Watch Knowledge Management Social Intelligence Online Strategy
    • Software, Open Source, SaaS
    • Other Services Watch Community Management Online Presence Content Creation Marketing 2.0 Training Support
    • What is this strange bear?
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • Technique & Profession content context IA users IA balances the characteristics and needs of users, content and context
    • Different Contexts Research Trade Education content Lobbying Collaboration context IA Consultation Innovation Also: users Social Cultural Context is the joint of a corporate strategy and a market
    • Users Have Needs Learn Discuss Interact content Create Discover context IA Exchange Influence Buy/Sell users Share IA is User-Centered Design aka Usability aka User Experience
    • Content To... Communicate Inform Teach content Reference Collect context IA Promote Advertise Sell users Share Persuade Content is the vector of your objectives PURPOSE!
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • Content Meaning Data Information Information is data that has been processed for use
    • Content (bis) Meaning Understanding Data Information Knowledge Knowledge is information that is understood and integrated
    • Users Continuing to use Using Discovering
    • IA Validate Design Research
    • IA Validate Test the design against the requirements Design Use research to solve the problem Research Understand the audience and context
    • Project Launch Build Visual Design Requirements Strategy & Scoping
    • IA in a Project Launch Validate Build Design Visual Design Research Requirements Strategy & Scoping
    • Measure Outcome Output Objectives
    • Measured IA in a Project Launch Outcome Validation Build Output Design Visual Design Research Requiremnts Objectives Strategy & Scoping
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • 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?
    • User Research Techniques Interviews Practice reviews Surveys Focus groups Market analysis Web analytics Sales data analysis (CRM)
    • Research Users come first !
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • Model-View-Controller
    • 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
    • Type of Content Events News Docs Resources Profile s
    • Language Plain vs ... Legalese Technical Esoteric Promotional Summarized vs ... Detailed Verbous Lengthy
    • 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.
    • Format for Computers <XML>
    • Classification by date:
    • Classification alphabetical:
    • Classification by geo:
    • Classification by task:
    • Classification by audience, readership:
    • Classification with tags:
    • Classification by topic:
    • Structure: Hierarchy Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
    • Structure: Database Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
    • Structure: Heuristic Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
    • Structure: Organic Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
    • Structure: Conceptual Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
    • Internationalisation Languages: Cultures: Localisation: English European Currencies French American Date formats Spanish Asian Content German Latin Number formats Chinese World-wide Time shifts Etc Dev'ed vs dev'ing Etc
    • Language Can be based upon... User Preferences Physical Address IP Address Web Browser Settings Operating System
    • Culture Influences... Content Wording Tone Presentation References Priorities
    • Localisation Determines... Currencies Date formats Content Number formats Time shifts Text in images
    • Taxonomy = Predefined Tagging = many-to-many categorisation
    • Many-to-many
    • Folksonomy = User Defined Tagging --> Collaborative Tagging
    • 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?
    • 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.
    • 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
    • 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.
    • Licensing Creative Commons (better for multimedia works)
    • Licensing Copyleft and Creative Commons licenses ensure open access and dissemination of scientific, cultural, artistic content regardless of the social classes.
    • 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
    • Pagination Number of search results per page Length Criteria: alpha, relevance, popularity, date, etc Content Highlight
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • Model Type of content: Activities Meetings Publications News Projects External Links Information (what information?)
    • Model Language: Plain English Technical? Legal? Conversational? Summaries vs detailed?
    • Model Format: PDF PDF to HTML? Videos? Audios? Images? Slideshows? RSS?
    • Model Classification: By date -> calendar (meetings) By topic (activities, ...) By language (projects) By geo (meetings) By tag? Other?
    • Model Structure: What is the best model? One or several models? Try to make a sketch
    • Model Internationalisation: Language: Language of content Language of website Culture: World-wide Eastern vs Western Developed vs developing countries Localisation ?
    • Model Taxonomy: Is it necessary for your needs? Taxonomy vs folksonomy? Existing rules? Categories? Evolution of taxonomy? Add? Remove?
    • 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?
    • Model Licensing: Copyright? Copyleft? Creative Commons? Use? Copy? Modify? Distribute? Attribution? Derivative work? Commercial use? What is the best solution for you?
    • Model Navigation: What are / should be the different paths to access information? Search? Site map? Cross-linking? Contexts? Related content?
    • Model Pagination: What type of content is likely to require pagination? What criteria should be used to sort results? Should results be highlighted?
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • Model-View-Controller
    • Design
    • View - Design Layout Interface Aesthetic
    • 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
    • Layout Presentation Organization Structure Conventions Standards Templates
    • 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) ...
    • 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
    • Presentation
    • Layout Presentation Organization Structure Conventions Standards Templates
    • 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.
    • 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
    • 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
    • Organization Standard sitemap
    • Organization Sitemap using MindMapping
    • Layout Presentation Organization Structure Conventions Standards Templates
    • 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...)
    • 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
    • Structure
    • Layout Presentation Organization Structure Conventions Standards Templates
    • 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
    • Conventions Use icons to label some task or action Keep the same typography (font, size...) between the same kind of content
    • Layout Presentation Organization Structure Conventions Standards Templates
    • 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)
    • Layout Presentation Organization Structure Conventions Standards Templates
    • 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
    • Templates
    • Templates Header Logo + Baseline Languages 1st level tranversal menu Breadcrumbs Left Column Center Right Column 2nd level menu Main content Search engine Categories / Tags Images + Videos Newsletter RSS Footer Addtional information Legal Terms Copyright Sitemap FAQ Contact
    • Templates
    • View - Design Layout Interface Aesthetic
    • Interface design is the arrangement and makeup of how a user can interact with a site
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • 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)
    • 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.
    • 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.
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • 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)
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • 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
    • 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
    • RIA
    • 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
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • 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
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • Orientation Users should always be able to work out where they are on a site Breadcrumbs (clickable)
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • 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
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • Search You must provide a search engine for your content
    • Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
    • KISS Keep It Simple, Stupid
    • View - Design Layout Interface Aesthetic
    • Aesthetic design is all about getting the look right and appropriate
    • Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
    • Themes & Skins Custom graphical appearances that can be applied to a website in order to suit different tastes
    • Themes & Skins
    • Themes & Skins
    • Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
    • Colour Palettes
    • Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
    • Rounded Shapes
    • Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
    • Big Characters
    • Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
    • Uncluttered Layout
    • Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
    • Branding
    • Branding
    • Conclusion
    • 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?
    • 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
    • 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?
    • View Layout: Conventions What conventions are required? Colours? Fonts? Icons? Logo? Layout: Standards Are web standards required and/or useful?
    • 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.
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • Model-View-Controller
    • Controllers are in charge to manage business processes and workflows.
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • 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!
    • 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
    • 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'
    • 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%
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • 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
    • CMS Separation between content (model) and view Templates & Themes Comments Workflow & Tasks => Collaboration Versioning Plugins Open Source
    • CMS
    • 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
    • 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
    • ECM
    • External Roles Public Private (membership)
    • Internal Roles Project Manager Editor Process Engineer Moderator Developer Marketer Web Designer Community Manager Tester Competitive Monitoring & Webmaster Strategic Watch Traffic Manager
    • Communities Web 2.0 UGC Prosumer CrowdSourcing Participation Co-creation Social Networks Sharing (e.g. Facebook) Conversations C2C - P2P Viral Influencer Engage Widgets Digital Natives
    • Social Media
    • Social Media
    • Direction of Information People trust recommendations of their peers
    • Metrics Website Traffic RSS Subscriptions Brand, Reputation, Trend, Conversation Tracking Alerts Competitive Monitoring & Strategic Watch
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • Tools Roles: Try to define the internal and external roles/profiles Order them by importance May any persons/employees have different profiles?
    • 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 ?
    • Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
    • 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
    • THANK YOU http://b-spirit.com/ info@b-spirit.com Olivier Tripet Mathieu Favez
    • 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