background preloader

Jesse James Garrett: Visual Vocabulary for Information Architecture

Jesse James Garrett: Visual Vocabulary for Information Architecture
Looking for more? My book The Elements of User Experience puts information architecture and interaction design in context for beginners and experts alike. You can now order the book from version 1.1b (6 March 2002) Jesse James Garrett (contact) Translations of this document are available: Chinese (thanks to Arky Tan) Japanese (thanks to Atsushi Hasegawa) Spanish (thanks to Javier Velasco) Italian (thanks to Laura Caprio and Beatrice Ghiglione) French (thanks to Francois Lamotte) German (thanks to Marcus Brinckhoff) Portuguese (thanks to Livia Labate and Laura Cretton Lessa) Table of Contents Summary Diagrams are an essential tool for communicating information architecture and interaction design in Web development teams. Version history 1.1b (6 Mar 2002) Information on built-in support in OmnGraffle 2.0 New shape library for iGrafx Flowcharter 1.1a (17 Sep 2001) New shape libraries for Macromedia FreeHand Posted cheat sheet and PDF shape template 1.1 (31 Jan 2001) 1.0 (17 Oct 2000)

Alertbox: Jakob Nielsen's Newsletter on Web Usability 10 Usability Heuristics for User Interface Design April 24, 1994 | Article: 2 minutes to readJakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines. When to Use Which User-Experience Research Methods October 12, 2014 | Article: 8 minutes to readModern day UX research methods answer a wide range of questions. Information Architecture Tutorial Information architecture is the science of figuring out what you want your site to do and then constructing a blueprint before you dive in and put the thing together. It’s more important than you might think, and John Shiple, aka Squishy, tells you why. Squishy first looks at how to define your site’s goals, shedding light on the all-important art of collecting clients’ or co-workers’ opinions and assembling them in a coherent, weighted order of importance. He also shares his scheme for documenting everything so that all parties can keep up. The next step is figuring out who the heck your audiences are going to be. Next, Squishy gets into creativityland, where you start to build the beast:form a skeleton, pick your metaphors, map out your navigation.

Uncovering and Exploring Usability Issues from Experience Dynamics Founder Jakob Nielsen Biography Jakob Nielsen, Ph.D., is a User Advocate and principal of the Nielsen Norman Group which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer). Dr. Nielsen established the "discount usability engineering" movement for fast and cheap improvements of user interfaces and has invented several usability methods, including heuristic evaluation. Jakob Nielsen has been called: "the king of usability" (Internet Magazine) "the guru of Web page usability" (The New York Times) "the next best thing to a true time machine" (USA Today) "the smartest person on the Web" (ZDNet AnchorDesk) "the world's leading expert on Web usability" (U.S. Usability Articles Since 1995, Dr. Subscribe to the Alertbox newsletter Books Professional Background Jakob Nielsen holds a Ph.D. in human–computer interaction (HCI) from the Technical University of Denmark in Copenhagen. From 1994 to 1998 he was a Sun Microsystems Distinguished Engineer. Dr. In June 2000, Dr. Profiles Parodies See Also

Presenting Information Architecture Site planning with a team is often easier if you base your major structural planning and decisions on a shared master site diagram that all members of the group can work with. The site diagram should evolve as the plan evolves and act as the core planning document as changes are proposed and made in the diagram. Site diagrams are excellent for planning both the broad scope of the site and the details of where each piece of content, navigation, or interactive functionality will appear. For major planning meetings consider printing at least one large diagram of the site organization, so that everyone can see the big picture as it develops from meeting to meeting. The site diagram should dominate the conference table, becoming a tactile, malleable representation of the plan. Site diagrams Figure 3.10 — Jesse James Garrett’s visual vocabulary for site design diagrams. Major elements of a mature site diagram include: Site file and directory structures Wireframes

Subtraction Jesse James Garrett: experience design and information architecture resources Information Archetecture Tutorial - Lesson 1 Why’s Information Architecture So Important? Information architecture (also known as IA) is the foundation for great Web design. It is the blueprint of the site upon which all other aspects are built – form, function, metaphor, navigation and interface, interaction, and visual design. Initiating the IA process is the first thing you should do when designing a site. This series of articles describes specific methods and processes for developing a site’s information architecture. Clients sometimes view the development of an IA to be impractical, both in terms of the time it takes and the skill needed to do it effectively. This series will demonstrate how easy and powerful the IA process can be. Each article presents a portion of a design document. Also, just about everyone these days is a proponent of ease-of-use. Define the Site’s Goals The first step in the IA process is to define the site’s goals. You want everyone in the company – or at least the most important people – to be involved.

What reading Tufte won't tech you :: interface design Edward Tufte’s books do a beautiful job of illustrating how to present huge amounts of information clearly and simply. Well presented information is critical to good interface design, but it’s not the whole story. I’ve just spent two months carrying a terrible, ancient cellular phone and a mediocre non-Apple music player around the planet, and interacting almost exclusively with Windows XP terminals at internet cafes and hostels. Read on for explanations and examples of good and bad design related to each one of these rules. The application interface should be fast and non-blocking. The application interface should be consistent. Don’t interrupt users in the middle of common, nondestructive tasks.The basic, core functionality of the application should be free from confirmations, interruptions, dialog boxes, configuration questions, multiple steps, wizards, and other garbage. Avoid notifying users of success. Avoid giving users information that they cannot use.

Jesse James Garrett: Improve your site maps with page archetypes | Viget Advance Here's a pretty typical site map: boxes and arrows, a decision point, and a conditional section. If you're the person who diagrammed it, you already have a good sense about how the system will work. You know the major interaction paths and what type of content will be present. You know the purpose for each of those pages. Yet those generic little boxes betray that knowledge. Page archetypes help you better express what's going on in your site maps and user flows. Arche-what? A page archetype is a picture. Meet the Archetypes Across all projects, I find that I can generalize to a few common points of interaction. My "kit", shown above, contains just 12 different archetypes–a manageable number. Form: input/output interaction with a system. Occasionally, I'll extend this vocabulary to better describe the system. Gallery: essentially the same as a listing, but represented as a grid. 5 reasons why I use them So, maybe you're thinking, "Why would I use these?" Reason 1: Improve readability

Institut pour l'architecture de l'information Vocabolario Visuale: Strumenti - Il Vocabolario Visuale di Jesse James Garrett è il primo sistema di notazione progettato per descrivere l'Information Architecture e l'Interaction Design di un sito, ed è stato adottato dalla comunità internazionale degli Information Architects come standard per la rappresentazione del Flowchart. Indice Sommario I diagrammi sono uno strumento essenziale per comunicare l'Information Architecture e l'Interaction Design (progettazione dell'interazione) nei team di sviluppo di progetti web. Storico delle versioni 1.1b (6 Marzo 2002) Informazioni sul supporto incorporato in OmniGraffle 2.0 Nuova libreria di forme per iGrafx Flowcharter 1.1a (17 Settembre 2001) Nuova libreria di forme per Macromedia FreeHand Pubblicato il riassunto e i template delle forme in pdf 1.1 (31 Gennaio 2001) Aggiunto l'elemento "gruppo di files" Aggiunto l'elemento "selettore condizionale" Modificato l'elemento "freccia" per permettere terminazioni multiple Numerosi miglioramenti alla libreria di forme 1.0 (17 Ottobre 2000)