Information Architecture and Content Organization

  • 1,953 views
Uploaded on

Students will understand principles of …

Students will understand principles of
creating sensible, comprehensible,
memorable, and convenient organization
of the content and the tasks to be
performed on their interactive product

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,953
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONwelcome toUSER INTERACTION DESIGNLecturer Itamar Medeiros (Brazil) BA in Industrial Design; PgDip in Information Design; 1 /56 USER INTERACTION DESIGNExpertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction.
  • 2. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONCLASSROOM RULESitamar medeirosAnswer to commands promptly;No food, no drinks, no games in class;Always keep your mobile in silent mode; 2 /56No electronic devices during class-time; USER INTERACTION DESIGNBring only class related material to class;
  • 3. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONLESSON 05:INFORMATION ARCHITECTURE& CONTENT ORGANIZATIONlearning outcomeStudents will understand principles of creating sensible, comprehensible, memorable, and convenient organization 3 /56 of the content and the tasks to be USER INTERACTION DESIGN performed on their interactive product.
  • 4. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONLESSON 05:INFORMATION ARCHITECTURE& CONTENT ORGANIZATIONcontentIntroduction to Information Architecture principles; 4 /56Introduction to Content Organization USER INTERACTION DESIGN techniques;
  • 5. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTURE& CONTENT ORGANIZATIONOrganizing functionality and content into a structure that people are able to navigate intuitively doesn’t happen by chance. 5 /56Organizations must recognize the USER INTERACTION DESIGN importance of information architecture* or else they run the risk of creating great content and functionality that no one can ever find.
  • 6. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTURE& CONTENT ORGANIZATIONinformation architecture | 信息构架The design and structure of an interactive system/product.一个交互系统或者产品的设计和结 构。 6 /56 USER INTERACTION DESIGN
  • 7. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTURE& CONTENT ORGANIZATIONinformation architecture | 信息构架Good information architecture ensures that data is structured so that information can be easily found by the user.好的信息构架 保数据结构化,致使 7 /56 用户可以轻易地找到信息。 USER INTERACTION DESIGN
  • 8. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTURE& CONTENT ORGANIZATIONThe incredible amount of functionality and information has become the new problem: the challenge facing organizations is how to guide people through the vast amount of 8 /56 information on offer, so they can USER INTERACTION DESIGN successfully find the information they want and thus find value in the system?
  • 9. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREwhat is it?Information architecture helps us describe the structure of a system:The way information is grouped; 9 /56Its navigation system; USER INTERACTION DESIGNThe terminology* used within the system.
  • 10. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREterminology | 术语The technical or specialized words and expressions of a subject or system.一门学科或者系统的技术或者专业单 词和表达。 10/56 USER INTERACTION DESIGN
  • 11. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREwhat is it?Information architecture take into account the information itself -- content --, the people using the information -- users --, and the business issues -- context* -- in which the information is being presented. 11/56 USER INTERACTION DESIGN
  • 12. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREcontext | 背景The set of facts or circumstances that surround a situation or event.围绕某一情况或者事件的一系列情况 或者环境。 12/56 USER INTERACTION DESIGN
  • 13. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREcontext | 背景While designing the information architecture, the context is the information that lets the user know where they are, where have they just been, when where can they go to. 13/56 USER INTERACTION DESIGN在设计信息构架时,指让用户知晓他 们在 里,去过 里和何时、他们 去何处的信息。
  • 14. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREhelping people find informationInformation architecture organize content and design navigation systems* to help people find and manage information, based in the context of use of the system/product. 15/56 USER INTERACTION DESIGN
  • 15. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREnavigation systems | 导航系统The navigation system is the physical manifestation of an organizational structure. It determines how information is actually going to be interconnected. 16/56一个组织结构的物理性表述。它决定 USER INTERACTION DESIGN 了信息究竟是如何相互链接的。
  • 16. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSA well designed navigation system is critical to a good interactive product. Whether or not people can find their way around is what will most commonly make or break a Web site, for example. 17/56 USER INTERACTION DESIGN
  • 17. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSmost common elementsThe most common navigation element is a menu* of some kind, but navigation elements can also be include inline links*, tables of contents*, search engines*, site maps*, and most any way of organizing 18/56 connections between documents that can USER INTERACTION DESIGN be though of.
  • 18. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSmenu | 菜单A component of a user interface that allows the user to make choices from a preset list, each of which performs a desired action such as choosing a command or to navigate within a system/product. 19/56 USER INTERACTION DESIGN允许用户从预先设置列单中选择的用 户界面的一个组成部分,其中每一 项执行一个期望的命令,例如选择 一个命令,或者在一个系统或者产 品内导航等。
  • 19. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 20/56
  • 20. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSlinks | 链接A graphic, line of text, or both on a web- page that connects to another page on the same website or to one in another website located anywhere in the world. 21/56在网页上一个图片、文字行或 者与 USER INTERACTION DESIGN 同一网站上的另一页网页链接,或 与位于其他网站上的网页链接。
  • 21. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMStable of contents | 目录An organized list of titles for quick information on the summary of a book or document and quickly directing the reader/user to any topic or part of the document. 23/56 USER INTERACTION DESIGN一个有条理性的主题列单,提供书本 或文件内容的快速检索及向读者或 者用户引导文件中的任何主题或者 部分。
  • 22. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSsearch engines | 搜索引擎Web services which help search through Internet addresses for user-defined terms or topics in which users are interested. 26/56通过互联网地址针对用户感 趣的用 USER INTERACTION DESIGN 户定义的术语或者主题,提供的网 络搜索服务。
  • 23. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSsite map | 网站地图Overview of the navigational structure of a website, acting like a Table of Contents, and used to orient users and show them the scope of the site. 29/56网站的导航结构的概况,好比一个目 USER INTERACTION DESIGN 录,用来导向用户,展示网站范 围。
  • 24. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSpurposeThe purpose of a good navigation system goes beyond just getting people from one place to another. They should provide three elements to assist in moving around within a interactive system: 30/56 USER INTERACTION DESIGN• Structure• Flexibility• Context
  • 25. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSstructureInteractive products with a good navigation system allows the user to understand its structure in a way that facilitates navigation. 31/56This is why the navigation system should grow USER INTERACTION DESIGN out of the scheme and structure of the product. If it grows out of the underlying structure then it will fit that structure and reflect it in what is hopefully a comprehensible way.
  • 26. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 32/56
  • 27. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSflexibilityAs well as having structure, navigation systems should also be flexible. They should allow different people to use them in different ways to get to the same information. 33/56 USER INTERACTION DESIGN
  • 28. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSflexibilityThe information structure the site is built upon should be rigidly structured. The navigation system is where you put in the exceptions and the additional tools to facilitate navigating around. A well 34/56 designed navigation system can actually USER INTERACTION DESIGN reinforce the site structure by effectively working around it.
  • 29. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMScontextContext is information that lets the user know where they are, where have they just been, when where can they go to. Any element that provides context can be seen as part of the navigation system. 35/56 USER INTERACTION DESIGNFor instance, page and section titles tell the user where they are, links such as previous or next.
  • 30. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMScontextAlso, organizing links into menus of like topics allows people to see relationships between links and the information behind them, such as breadcrumb navigation* menus. 36/56 USER INTERACTION DESIGN
  • 31. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONNAVIGATION SYSTEMSbreadcrumb navigation | 面包屑导航A textual representation of where and how information is located within a system/ product. It displays how major categories of information are linked along a sequential order. 37/56 USER INTERACTION DESIGN 于网站内部信息定位位置和方式的 有 描述;它展示了各 主要类型 的信息是如何通过一个连续顺序而 链接起来的。
  • 32. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREA very important step of thinking through the structure of your interactive product are the labels* used in the navigation system. 40/56 USER INTERACTION DESIGN
  • 33. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTURElabels | 标签In information architecture, labels are the names used to identify the links, the names of the pages and section headings, or the names of the features of a system. 41/56在信息构架中,指用来识 链接的名 USER INTERACTION DESIGN 称、页面的名字和章节的标题,或 者某一系统各特征的名称。
  • 34. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTURElabels | 标签They help to orient the user and keep them on track, as well as to inform them about the contents of the section they are in.它们可帮助用户定位,使其保持在正 42/56 常状态,通告他们所在章节的内 USER INTERACTION DESIGN 容。
  • 35. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONINFORMATION ARCHITECTUREbuilding a good labeling systemThe most important rule of building a good labeling system is to think like a user.If your Website is designed for the end user, do not include engineering or marketing 43/56 jargon in the copy -- this will only serve to USER INTERACTION DESIGN alienate your users (at best). Labeling must also be clear and consistent throughout the site.
  • 36. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONBUILDING A GOOD LABELING SYSTEMsources of labelingYour Site Create a table of the existing labels and what they represent;Comparable & Competitive Sites 44/56 Find the labeling pattern that is already in USER INTERACTION DESIGN place in the industry/competition;Controlled vocabularies and thesauri Seek out focused vocabularies that help specific audience (e.g.. medical, engineering)
  • 37. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONBUILDING A GOOD LABELING SYSTEMsources of labelingContent Analysis Focus on things like titles, summaries, and abstracts;Content Authors 45/56 Make their own suggestions; USER INTERACTION DESIGNUser Advocates and Subject Matter Experts Work with librarians and the like who can speak on behalf of the user - those who know what the users want;
  • 38. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONBUILDING A GOOD LABELING SYSTEMsources of labelingUsers Learn how the sites users will use the information - card sorting* exercises where users are asked to cluster labels of existing content into their own categories and then 46/56 label the categories or where they are given USER INTERACTION DESIGN existing categories and asked to sort content into those categories
  • 39. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONBUILDING A GOOD LABELING SYSTEMcard sorting | 卡片排序A technique for exploring how people group items, so that you can develop structures that maximize the probability of users being able to find items. 47/56拓展人们如何将项目成组的一 技 USER INTERACTION DESIGN 法,你可以设计各 结构,将用 户找到项目的概率最大化。
  • 40. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONCARD SORTINGbenefitsIs easy and cheap to conduct;Enables you to understand how real people are likely to group items; 48/56Identifies items that are likely to be USER INTERACTION DESIGN difficult to categorize and find;Identifies terminology that is likely to be misunderstood.
  • 41. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONCARD SORTINGhow is it conducted?1. Names of items to be categorized are printed on individual cards: Cards should be large enough to accommodate the names in a font that participants can read easily when 49/56 spread out on a desk or table–at least USER INTERACTION DESIGN 14 point.2. Participants are asked to group items in a way that makes sense to them.
  • 42. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 50/56
  • 43. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONACTIVITY #06card sorting1. Using post-it note cards, write down all the features (特征) of your interactive product (one feature per card);2. Allow another team to group the 51/56 features in a way to make sense to USER INTERACTION DESIGN them;3. Analyze the grouping and create a navigation system based on that organization;
  • 44. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONHOMEWORK [ GROUPS ]navigation system1. In your groups, analyze the grouping of information done during the card-sorting session and devise a complete navigation system. 52/562. The navigation system must contemplate USER INTERACTION DESIGN all issues of information architecture: -Flexibility, Structure & Context; -Good & Consistent Labeling System;
  • 45. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 53/56
  • 46. INFORMATION ARCHITECTURE & CONTENT ORGANIZATIONHOMEWORK [ INDIVIDUAL ]sketchbook1. Choose 5 (five) words marked with asterisks (*) you’ve seen in this class and create 5 (five) posters -- one for each word -- on separate pages of your sketchbook; 55/562. Each poster must include: USER INTERACTION DESIGN -The word chosen, with its English definition; -3 (three) pictures; -2 (two) websites; -Your comments/impressions of the definition.
  • 47. tags HOMEWORK [ INDIVIDUAL ]USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION 56/56