Information Architecture & Content Organization (User Interaction Design at Raffles Design Institute)
•
0 j'aime•16 vues
This is part II of principles of creating a sensible, comprehensible, memorable and convenient organization of the content and the tasks to be performed on their interactive product.
Recommandé
Recommandé
Contenu connexe
Similaire à Information Architecture & Content Organization (User Interaction Design at Raffles Design Institute)
Similaire à Information Architecture & Content Organization (User Interaction Design at Raffles Design Institute) (20)
Plus de Itamar Medeiros
Plus de Itamar Medeiros (20)
Dernier
Dernier (20)
Information Architecture & Content Organization (User Interaction Design at Raffles Design Institute)
- 1. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 welcometo USERINTERACTIONDESIGN Lecturer Itamar Medeiros (Brazil) BA in Industrial Design; PgDip in Information Design; Expertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction. 1
- 2. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 CLASSROOMRULES itamarmedeiros Answer to commands promptly; No food, no drinks, no games in class; Always keep your mobile in silent mode; No electronic devices during class-time; Bring only class related material to class; 2
- 3. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 LESSON05: INFORMATIONARCHITECTURE &CONTENTORGANIZATION learningoutcome 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. 3
- 4. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 LESSON05: INFORMATIONARCHITECTURE &CONTENTORGANIZATION content Introduction to Information Architecture principles; Introduction to Content Organization techniques; 4
- 5. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE &CONTENTORGANIZATION Organizing functionality and content into a structure that people are able to navigate intuitively doesn’t happen by chance. Organizations must recognize the importance of information architecture* or else they run the risk of creating great content and functionality that no one can ever find. 5
- 6. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE &CONTENTORGANIZATION informationarchitecture | 信息构架 The design and structure of an interactive system/product. 一个交互系统或者产品的设计和结 构。 6
- 7. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE &CONTENTORGANIZATION informationarchitecture | 信息构架 Good information architecture ensures that data is structured so that information can be easily found by the user. 好的信息构架确保数据结构化，致使 用户可以轻易地找到信息。 7
- 8. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE &CONTENTORGANIZATION The 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 information on offer, so they can successfully find the information they want and thus find value in the system? 8
- 9. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE whatisit? Information architecture helps us describe the structure of a system: The way information is grouped; Its navigation system; The terminology* used within the system. 9
- 10. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE terminology | 术语 The technical or specialized words and expressions of a subject or system. 一门学科或者系统的技术或者专业单 词和表达。 10
- 11. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE whatisit? 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
- 12. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE context | 背景 The set of facts or circumstances that surround a situation or event. 围绕某一情况或者事件的一系列情况 或者环境。 12
- 13. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE context | 背景 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
- 15. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE helpingpeoplefindinformation Information 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
- 16. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE navigationsystems | 导航系统 The navigation system is the physical manifestation of an organizational structure. It determines how information is actually going to be interconnected. 一个组织结构的物理性表述。它决定 了信息究竟是如何相互链接的。 16
- 17. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS A 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
- 18. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS mostcommonelements The 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 connections between documents that can be though of. 18
- 19. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS menu | 菜单 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
- 21. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS links | 链接 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
- 23. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS tableofcontents | 目录 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
- 26. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS searchengines | 搜索引擎 Web services which help search through Internet addresses for user-defined terms or topics in which users are interested. 通过互联网地址针对用户感兴趣的用 户定义的术语或者主题，提供的网 络搜索服务。 26
- 29. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS sitemap | 网站地图 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
- 30. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS purpose The 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: • Structure • Flexibility • Context 30
- 31. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS structure Interactive products with a good navigation system allows the user to understand its structure in a way that facilitates navigation. This is why the navigation system should grow 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. 31
- 33. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS flexibility As 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
- 34. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS flexibility The 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 designed navigation system can actually reinforce the site structure by effectively working around it. 34
- 35. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS context Context 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. For instance, page and section titles tell the user where they are, links such as previous or next. 35
- 36. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS context Also, 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
- 37. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 NAVIGATIONSYSTEMS breadcrumbnavigation | 面包屑导航 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
- 40. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE A very important step of thinking through the structure of your interactive product are the labels* used in the navigation system. 40
- 41. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE labels | 标签 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
- 42. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE labels | 标签 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
- 43. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 INFORMATIONARCHITECTURE buildingagoodlabelingsystem The 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 jargon in the copy -- this will only serve to alienate your users (at best). Labeling must also be clear and consistent throughout the site. 43
- 44. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 BUILDINGAGOODLABELINGSYSTEM sourcesoflabeling Your Site Create a table of the existing labels and what they represent; Comparable & Competitive Sites Find the labeling pattern that is already in place in the industry/competition; Controlled vocabularies and thesauri Seek out focused vocabularies that help specific audience (e.g.. medical, engineering) 44
- 45. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 BUILDINGAGOODLABELINGSYSTEM sourcesoflabeling Content Analysis Focus on things like titles, summaries, and abstracts; Content Authors Make their own suggestions; User 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; 45
- 46. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 BUILDINGAGOODLABELINGSYSTEM sourcesoflabeling Users Learn how the site's users will use the information - card sorting* exercises where users are asked to cluster labels of existing content into their own categories and then label the categories or where they are given existing categories and asked to sort content into those categories 46
- 47. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 BUILDINGAGOODLABELINGSYSTEM cardsorting | 卡片排序 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
- 48. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 CARDSORTING benefits Is easy and cheap to conduct; Enables you to understand how real people are likely to group items; Identifies items that are likely to be difficult to categorize and find; Identifies terminology that is likely to be misunderstood. 48
- 49. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 CARDSORTING howisitconducted? 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 spread out on a desk or table–at least 14 point. 2. Participants are asked to group items in a way that makes sense to them. 49
- 51. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 ACTIVITY#06 cardsorting 1. 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 features in a way to make sense to them; 3. Analyze the grouping and create a navigation system based on that organization; 51
- 52. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 HOMEWORK[GROUPS] navigationsystem 1. In your groups, analyze the grouping of information done during the card-sorting session and devise a complete navigation system. 2. The navigation system must contemplate all issues of information architecture: -Flexibility, Structure & Context; -Good & Consistent Labeling System; 52
- 55. USER INTERACTION DESIGN INFORMATION ARCHITECTURE & CONTENT ORGANIZATION /56 HOMEWORK[INDIVIDUAL] sketchbook 1. 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; 2. Each poster must include: -The word chosen, with its English definition; -3 (three) pictures; -2 (two) websites; -Your comments/impressions of the definition. 55