Information Architect Manifesto

TABLE DES MATIÈRES

Manifeste des Architectes de l’information de SidLee.com............................... 4 Vision Commune .................................................................................................................... 4 Notre Rôle ................................................................................................................................ 6 DÉMARCHE ET MÉTHODES................................................................................................ 9 1. Expliquer et définir...................................................................................................... 10 2. Détecter et Filtrer ......................................................................................................... 10 3. Structurer et Capturer ................................................................................................ 10

PROCESSES, WORKFLOWS (OH! AND HUMAN INSTINCTS) ........................ 11 Process Map............................................................................................................................. 12 Story Maps & Concept Models ........................................................................................ 13 Site Maps ( Page Tree) ........................................................................................................ 16 Personaes - Profiling........................................................................................................... 17 Personaes - Relationships to Business Objectives.................................................... 18 Topic Maps............................................................................................................................. 19 Processes Maps & Flow Charts ....................................................................................... 20 WireFrames............................................................................................................................ 21

An Integral user Experience Planning Framework ............................................. 25 Transforming data into information is to explore its organization.............................................. 26 Container Issues (thinking about Interface).................................................................................. 27 Content Issues (thinking about Data) ............................................................................................ 29 Application Issues (Thinking about users).................................................................................... 30 UX Audit Issues (Thinking about Strategy) .................................................................................. 31

Prototypes.............................................................................................................................. 32 i. What is a prototype ? ............................................................................................................. 32 2. What can be prototyped ? ..................................................................................................... 32 3. Why and How to present a prototype? ................................................................................ 32 4. How to access a prototype?.................................................................................................. 32

Content Inventory Management Lifecycles................................................................... 33 Topic Mapping – Planning Phase .................................................................................................. 33 Annotated WireFrame – Development Phase ............................................................................. 34 CRP (Content Requirement Plan) – Validation Phase ............................................................... 35 Plan de gouvernance – Management Phase ............................................................................... 36 Content Collection Documents – Deployment Phase................................................................. 37 Document Management Strategy – Preservation Phase ........................................................... 38 Personaes Mapping – Content Audit Grid – Evaluate Phase.................................................... 39

Business Logics Inventory – Interaction Design......................................................... 40 Conceptual VS Physical Design ..................................................................................... 41 Reference: SitePoint............................................................................................................... 41

TRAINING INTERNAL RESSOURCES IN IA ................................................................... 44 RISQUES ET CONTRAINTES............................................................................................. 45

Asumptions & Misconceptions ....................................................................................................... 45 Expertise Clash ................................................................................................................................ 45 Anti-Intellectual Practices................................................................................................................ 45 Expectations Management ............................................................................................................. 45 Pitch Mode ........................................................................................................................................ 45 Unmanaged Chaos and Creative Chaos ...................................................................................... 45 Clarity of Brief : ................................................................................................................................. 45 Effects of Acceleration..................................................................................................................... 45 The Curve/Body Fallacy .................................................................................................................. 45 TimeFrame & Duration of Tasks .................................................................................................... 45 Missing, Incomplete, Invalid or Unverified Data .......................................................................... 45 Updating and Versionning............................................................................................................... 45 Content Validation Nightmares ...................................................................................................... 45 Reverse Engineering ....................................................................................................................... 45 User Testing...................................................................................................................................... 45 Communicating Recommendations............................................................................................... 45 ROI ..................................................................................................................................................... 45

RESSOURCES ADDITIONNELLES................................................................................... 46

Manifeste des Architectes de l’information de SidLee.com 1. Vision Commune Nous utilisons tous certaine forme d’architecture de l’information mais nous ne sommes pas tous des architectes de l’information.

Infographics Source: Nathan Shedroff


Notre Rôle Faciliter la communication, capturer les décisions, inventorier l’information, scénariser les interactions, communiquer et stimuler l’innovation. Mission

Valoriser et communiquer une culture d’entreprise intégrant les principes d’architecture d’information.

Concevoir la meilleure expérience usager possible en gardant en tête la possibilité de changer rapidement les mockups (Screen Design) en restant dans les limites des technologies actuelles.

Maintenir l’abilité de conceptualiser des plans de production multigénérationels et multiplateformes.

Être le plus effectif des avocats des usagers et défendre l’implantation des caractéristiques clés garantissant la meilleure expérience pour le consommateur.

Responsabilités spécifiques:

Créer des diagrammes conceptuels, dessiner des cartes de site, établir les hiéarchies des pages, Identifier les libelés, documenter les interactions, inventorier tous les éléments de contenus devant se trouver sur les pages, schématiser le positionnement des contenus sur les pages (wireframes), transformer les wireframes en prototypes (démo), dresser des inventaires de contenus, créer des modèle de données et préciser les spécifications fonctionnelles.

Opérer des analyses d’audiences, de fonctionnalités et de tâches pour déterminer et prioriser les comportement usagers anticipés et les processus d’affaires appropriés. Superviser les tests d’utilisabilité et opérer des évaluations ad hoc.

Collaborer avec les designer visuels, les développeurs techniques et les gestionnaires de projet pour produire des Design qui optimise l’interface usager. Collaborer avec l’équipe du QA pour définir les cas d’utilisation.

Instaurer des standards d’architecture d’information pour SidLee incluant documents, processus et stratégies de communication.

a. Les données, les usagers et les Interfaces

Les 3 éléments d’une expérience usager• Données • Usagers • Interface

Une méthode de conception en 2 étapes • Sélection des modèles de page (LAYOUT) • Sélection ou création des gabarits de contenu (WIDGETS / PATTERNS)

• Déterminer ce que les usagers veulent faire • Déterminer ce que les applications doivent faire

Une stratégie pour produire, à partir d’un fichier, tous les autres documents nécessaires à la réalisation d’un projet Mode de présentation et d’utilisation de la documentation Documents Word

• Inventaire des contenus • Spécifications techniques • Mise à plat des interactions

(plusieurs types d’utilisateurs – plusieurs types d’annotations) • Perspectives visuelles (WireFrames) • Prototype navigable (HTML)

Inventorier

Scénariser

Communiquer

b.Les Flux et le Flow


DÉMARCHE ET MÉTHODES

c. La scénarisation collective

1. Expliquer et définir Utiliser les vocabulaires favorisant la collaboration – Définir les mots à utiliser dans divers contexte et régler les conflits sémantiques avec sagesse.


2. Détecter et Filtrer Identifier les éléments de contenus uniques et cerner les contenus qui se répètent et qui peuvent être réutilisés, liés, associés ou assemblés avec d’autres.

3. Structurer et Capturer Structurer la documentation afin de permettre l’organisation en phase de la production des livrables d’un projet Web. Afin de maintenir une consistance dans la vision d’un projet, de comprendre l’implication des décisions prises tout au long d’un projet, de capturer ces décisions par écrit ou sous forme de concepts visuels et d’offrir une forme de traçabilité pour retourner dans le temps et rappeler quand telle ou telle décision a été prise.


PROCESSES, WORKFLOWS (OH! AND HUMAN INSTINCTS)

Cartographie de l’ensemble des processus et interactions humaines liées aux livrables

Process Map: Jonathan Bélisle

Story Maps & Concept Models A concept map is a special form of a web diagram for exploring knowledge and gathering and sharing information. Concept mapping is the strategy employed to develop a concept map. A concept map consists of nodes or cells that contain a concept, item or question and links. The links are labeled and denote direction with an arrow symbol. The labeled links explain the relationship between the nodes. The arrow describes the direction of the relationship and reads like a sentence. Exemple 1

Exemple 2

Exemple 3

Concept Map Source: EGR

Exemple 4

Concept Map Source: Yahoo Flickr

Site Maps ( Page Tree)

Personaes - Profiling

Personaes Map Source: Jonathan Bélisle

Personaes - Relationships to Business Objectives

Personaes Map Source: Jonathan Bélisle

Topic Maps

Topic Map: Jonathan Bélisle

Processes Maps & Flow Charts

WireFrames

Capturer les décisions au même endroit

Permettre de créer un document durant la progression d’un projet Web pour faciliter la communication, capturer les décisions et stimuler l’innovation. Un tel livrable permet de maintenir une consistance dans la vision d'un projet et de comprendre l'implication des décisions prises tout au long du projet. Il offre une forme de traçabilité pour retourner dans le temps afin de se rappeler quelle décision a été prise à quel moment. En quelque sorte, il matérialise une histoire collective autour d'un projet.

Patterns Objects used to create WireFrames

Low-Fidelity Sketching

Low Fidelity WireFrame

High Fidelity WireFrame

An Integral user Experience Planning Framework

To produce the appropriate Proof of Concepts, Optimize Production and Correctly Evaluate the Duration attached to every tasks accomplished by the Information Architecture Team during any phases or stages of a project.

Integral User Experience Planning Framework : Jonathan Bélisle

Transforming data into information is to explore its organization

Alphabets

Most books have alphabetical indexes because, while we may know exactly what we are looking for, we often do not know where to find it. Though the alphabet is an arbitrary sequence of symbols, indexes work well because we have been taught alphabetical sequence from an early age. It is not universally useful, as you will find if you ever try to use a phone directory in a language that uses a different alphabet than your own. Many indexes are organized alphabetically, but few products are (primarily dictionaries, encyclopedias, and other reference works). This is because few data have any great meaning based on the first letter of their labels. The alphabet actually is a continuum (from A to Z) but it is a special one for the reasons stated above.

Locations

Locations are natural ways of organizing data with important relationships with or connections to other data. How easy would it be to find the exits to an airplane if they were listed and described in text with no diagram? Many projects can benefit by locational organizations but seldom are, simply because their designers never experimented with the idea. Producing maps and diagrams is not as easy as writing text, but if you have ever used an atlas or ACCESS travel guide, you know how much better a sense of a place can be achieved when things are oriented by geographical relationships. Consider a subway map that simply lists all station stops in sequence versus one that arranges them in a representation of the city they serve. This may sound obvious (and it should be), but why do not car manuals organize parts by their location in the car, or medical books by location in the body (the one thing you are sure of when you know you aren't feeling well)?

Time

Organizing things by time or sequence may sound obvious for bus and train schedules or historic timelines but it can be just as effective for instructions such as cooking, driving, or building. Time need not be addressed only in minutes and hours but also in days, months, years, centuries, processes, or milestones.

Continuums

Any qualitative comparison can be described with a continuum. All ratings systems, whether numbers of stars or the number of RBIs of a professional baseball player, indicate a value scale. Arranging items in a continuum indicates that this value scale is the most important aspect of the data. As with any organization of data, the primary organization expresses a different message and importance than other organizations.

Numbers

I categorize number systems as a separate way of arranging things. Much like alphabets, numbers are merely an arbitrary continuum (usually Base-10, since our species has ten fingers). But unlike alphabets, Base-10 numbers are much more universal because they combine in different forms due to mathematical relationships. It is common but not necessary for number organizations to be continuums. For example, the Dewey Decimal System, used for organizing books in many libraries, is not a continuum because it is a number system that does not represent any magnitude or attribute; it simply assigns numbers to categories and sub-categories.

Categories

Categories are a common organization and a reliable one, since they allow similar things to be grouped together by attributes that are considered important in some way. Defining the specific categories is crucial, as they will communicate the designer's prejudices and understandings more easily than any other organization. As with all organizations, these control the perceptions of the information.

Randomness

While random or arbitrary organizations might not seem a useful way to organize things and "add value" to them, it is sometimes the best way if a challenge of some kind is involved. Consider a game where all of the pieces are arranged already or one where its sequence is already determined and carefully, logically laid out. Such a game would not be very fun to play. There may be other times where random organizations present a better experience than an orderly one and it is up to the designer to explore these possibilities and employ good judgment.

Container Issues (thinking about Interface)

1- Navigation Models

1. External search engine People will use a general search engine to broadly search for specific content within a site when they are not sure which site(s) to search, or when they know which site to search but they are not familiar with it and prefer to search it by keyword. Often this means when they find content, they end up having to backtrack through the site or click through the site to further narrow down their choices. Many people don’t know that you can use advance search features on search engines to restrict your search query to that site alone. Also, many sites are indexed more thoroughly by external search engines than by their own internal site search engine. 2. Internal site search People will use site search (a search tool provided by the site itself) when they are broadly searching for specific content within a site. Some people simply prefer to enter a keyword and search for results, hoping the content they want will appear in the top 10 pages returned by the engine. Others use the site search because the navigation on the site’s homepage is: • unavailable/not offered on the homepage • available, but past user experience with it was negative/unsuccessful • unclear/ambiguous/complicated • lacks “information scent” or “intuitive” labelling • not offered as a dropdown/flyout/rollover menu(s) • offered as a menu but users don’t realize it is a menu • cluttered with too much information 3. Global Static Navigation People use global (or ‘persistent’) static or fixed navigation (links that don’t dropdown or rollout or slideout into menus) when they are looking for general areas of information or high level categories on a site and are willing to go deeper into the site to explore the second level content, scan their navigation options, and gradually narrow their search. 4. Sitemap Navigation Sitemaps are usually a global static navigation page that provides a high level structural view (usually using text links and very few graphics) of all of the major categories and subcategories found within a single, or even its subsites as well. People will often look for a Sitemap link on a site when they want to quickly get a sense of what a site contains and how it is structured, especially when the site’s overall structure is not clear, apparent or detailed enough on the homepage or the global menus. Search engines often look for sitemap pages to help them accurately index a site, which is another reason why sitemaps should be kept current and accurate either by manual methods or by a system that updates them dynamically. 5. Global Interactive Navigation People use global (or ‘persistent’) interactive navigation (e.g. dropdown or flyout menus) when they want to view high level categories on a site and see what kind of content those areas contain before making a selection and exploring them further at the second level. 6. Organizational-view Navigation People use organizational-based navigation links (e.g. links to specific departments, divisions or other formal organization units) when they think that they can find information they are seeking within a particular part of the organization offers. They will also use organizational navigation when they are seeking help from someone in the organization on something relating to a particular product or service, i.e. they are navigating by area of responsibility. 7. Service-view Navigation People use service-based navigational links when they are seeking content related to a particular service or product, but are either uncertain which part of the organization offers it, or are simply unfamiliar with the organization’s products or services and want to find information that is written or structured in a way that they will understand. 8. Graphical Navigation People use graphical navigation (e.g. ads, buttons, icons and other images) when these navigation aids are bright, distinctive, eye-catching and intuitive; also, when text links on a page are confusing, ambiguous, poorly labelled, hard to read or otherwise. However, usability studies have found that text links are still more popular in terms of usage than graphical links, probably because people have a tendency to read text and understand it quickly, while many graphical navigation links can be ambiguous or unclear. 9. Breadcrumb Navigation People use forms of breadcrumb navigation when navigation structure on a site is deep and complex, or when they reach a page using another navigation method and realize that they have to go up or down one or more levels to find the content they want. Breadcrumbs do not show as much of a high-level view as sitemaps because they are contextual to where the user is on a site when hey are viewing the chain of breadcrumb links.

10. Contextual Navigation People use contextual or local navigation (which can be either static or fixed links or menus or a combination of both) when they reach within a section of a site or within a subsite and want to restrict their continuing navigate efforts to that specific pat of the site to the exclusion of other parts. If this narrowed navigation attempt fails, they will return to broader navigation methods or bailout (abandon their efforts).

2-Interaction Modes, States, Interactions and Relationships How the user invoke actions (Activity-Based, Object Based, Process Oriented, Product Oriented) ?

3-Layout Patterns

4-Page types identification

5-Information Design – Establishing Priorities of Content Elements

6- Forms

Content Issues (thinking about Data)

1-Content Inventory

2- Data Modelization / Relationships Diagrams / Usage Type 3-Semantics / Taxonomy / Markup / Labeling / Links

4-Information Design Widgets / Mashups / Display

5-Ontology / Semiotics

6-Content Assessment – Notes

Application Issues (Thinking about users)

1-Site Objectives

2-Interface Metaphors / Tools Using flowcharts for time-related issues and Block Diagrams for functional components. Understand system functionality; Identify potential problem or complicated/critical areas; generate metaphors that help the users understand the product.

3-Functional Specifications – Notes

4-Interaction Design Coherent Collection of Interaction Methods, Addresses environmental requirements, Desktop Paradigm, Ubiquitous Computing, Pervasive Computing, Wearable Computing, Mobile Devices.

5-Knowledge Visualization

6-Experience Design

UX Audit Issues (Thinking about Strategy)

1-User Needs

2-Content Requirements

3-Process Architecture

4-Concept Mapping-Sketching Symbols indicate tasks, activities and objects. Defining Functionnality Task Allocation Relationship of Subtasks Categorization Temporal Associations (Sequential or Parallel) Information Data required to perform the task Transformation of the data by the system

5-Visual Communications – Usability Review

6-Recommendations – Benchmarking – Elicitations Methods - Training

Prototypes

i. What is a prototype ? For users to effectively evaluate the Design of an Interactive product, designers must produce an Interactive Version of their Ideas. This activity is called prototyping and can be delivered in Low or High Fidelity rendering. For an Interaction Designer or an Information Architect that could mean:

1- A series of Screen Sketches 2- A CardBoard MockUp 3- A video simulating the Use of a System 4- An Interactive WireFrame 5- A piece of software with limited functionality

2. What can be prototyped ?

i. Technical Issues ii. WorkFlow and Task Design iii. Screen Layout and Information Display iv. Difficult, controversial and Critical areas

3. Why and How to present a prototype? The advantages and dangers of simulation

i. Evaluation and Feedback Allow stakeholder to interact with an envisioned product, to gain some experience of using it in realistic settings and explore imagined uses

ii. Communication among team members Clarify vague requirements

iii. Validation of Design Ideas iv. Choosing between alternatives

4. How to access a prototype? See Chafik Email.

Content Inventory Management Lifecycles Topic Mapping – Planning Phase 1-Content Inventory Elements Alignment and Analysis

assess & inventory >

ID # ID Name Description k (URL)/Location Type (format) Content Type

.0 .1.1

o 2-DataBase Modelization & Design

Annotated WireFrame – Development Phase Create and Capture elements and objects of Information in order to accelerate their position in the WireFrame or the Final Mockups.

Source: Axure Document

CRP (Content Requirement Plan) – Validation Phase Collect, Categorize, Edit

> Track Development

sts, Planned, Wished

Redundancy and Outdated - Trivial Responsible Status Date due Date delivered Comments

Plan de gouvernance – Management Phase Classify, Store, Search, Secure

Content Collection Documents – Deployment Phase Assemble, Syndicate, Personnalize, Localize, Publish

Document Management Strategy – Preservation Phase Archive, Destroy, Backup, Migrate, Reuse

Personaes Mapping – Content Audit Grid - Evaluate Measure, Audit, Research, Adapt

Business Logics Inventory – Interaction Design Documentation of Objects, Relationships, States, Modes and Behaviors

Conceptual VS Physical Design The fundamental differences between the preoccupations of an Information Designer and a Graphic Designer

Reference: SitePoint

Menu Design

a. Arrangement a. Number b. Lenght c. Order of items b. Grouping a. Categorization b. Visual Division (Colours, dividing lines) c. Structure and Terminology d. Constraints a. Screen Size b. Input Method c. Number of functions e. Usability a. Frequency of use b. Importance c. Consequences f. Context a. Applicability of entries

Icon Design

Screen Design

a. Splitting functions across screens a. Moving around within and between screens b. How much Interaction per screen b. Individual Screen Design a. White Space / Balance between information / Interaction and Clarity b. Grouping of items / Separation with boxes, lines, colors c. Task Analysis a. Each screen should contain a single simple step b. User frustration / Avoid too many simple screens d. Context a. All pertinent information must be made available at relevant time e. User Attention a. Directed to salient point b. Via colour, motion, etc c. Consequences f. Organization a. Grouping (Physical proximity, colour, shape) b. Structure (connections between related items) g. Information Display a. Context (relevant information is avalailable at all times in the most efficient format for the specific task b. Types of Information (Different kinds of display – Alphanumerical, charts, graphs) c. Consistency (Paper Display and Screen Data Entry

TRAINING INTERNAL RESSOURCES IN IA Provide Entry-level IA skills through peer mentoring and education Draw and sketch with them to develop generative skills. • In group or one-on-one sessions sit at a table and draw • Reproduce other's work whether IA docs or actual sites (on paper first, then with software) • Look at other people's IA deliverables and practice using them • Have them riff on (reinterpret) existing sites or assignments to accentuate or exploit a characteristic Discuss interfaces, interaction, and organization schemes (whatever format of IA work they'll do) to develop critical and analytical skills. • Openly discuss interfaces, interaction, and IA to get them thinking about it in new ways • Assign them a perspective from which to present a document (closed discussion) • Have them generate questions to probe designs and structures • Get them to critique their own work and discuss their work respectfully Get them using the tools you have/use now to develop working habits and executional skills. • Get them to reproduce work (like above) using your standard tool • Have them show you the tools they use now to discover overlap and distinctions. they'll really need to understand the distinctions. Get them to read and explore to develop curiosity and discovery. • Share short excerpts at first. This will let you see what appeals to them and how they learn. Assigning whole books sets them up for failure and you up for disappointment • Show them the foundational works - IA for the WWW, etc - and talk about why those books are so important • Have them find good and bad examples from the web, applications, or physical structures Talk to them and visit with them to develop a sense of team and community. • Ask them what they like, care about, and want to accomplish • Share your work with them • Listen to them

RISQUES ET CONTRAINTES

Asumptions & Misconceptions Expertise Clash Personnalities, Experiences and Unauthentic Emotions Anti-Intellectual Practices How to face the common Shadows that emerges from a Creative Practices that surf over structuralism instead of embracing it. Expectations Management State of Mind vs Status of the Web. Appearance VS Functionnality. Branding VS Usability. Pitch Mode To be a true Information Design Magician you need Authentic Prestige

Unmanaged Chaos and Creative Chaos Clarity of Brief : How to deal with Thin Air Concepts

Effects of Acceleration The Curve/Body Fallacy Distinguishing a Learning Curve from a Body of Knowledge and Apply the right Methodology

TimeFrame & Duration of Tasks

Missing, Incomplete, Invalid or Unverified Data Updating and Versionning The Secretary Syndrome Content Validation Nightmares Just how far can an Information Architect bend best practices and Insert Real Text in his WireFrames to satisfy a wrongfully guided Client? Reverse Engineering Why create WireFrames when the Mockups are done and how to produce them so they cannot be considered lost energy and wasted time. User Testing ClickStream Analysis and its practical value

Communicating Recommendations ROI Anticipation, Measurement & Comparison a. Benchmarking b. SEO c. Site Metrics d. Factors of Success (Site Goals vs User Needs Ratio vs SidLee Requirements)

RESSOURCES ADDITIONNELLES 1. Cartographie des éléments d’une expérience usager 2. Dimensions d’une expérience usager 3. Planification du Design d’une expérience usager 4. Cartographie des quatres cadrans (Branding, Content, Usability, Functionnality) 5. Map of the 7 layers of Usability 6. Analyse d’affaire globale – Carte des flux de travail entre les départements 7. Glossaire du département 8. Unified Field Theory of Design 9. Context, Story, Process

Information Architect Manifesto

Self Improvement

Transcript of Information Architect Manifesto