background preloader

Presenting Information Architecture

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. Everyone should be free to make notes and suggest improvements on the printed plan, and the revised diagram becomes the official result of the meeting. Site diagrams Major elements of a mature site diagram include: Related:  Architecture de l'information #archinfo

Jesse James Garrett: Visual Vocabulary for Information Architecture (French) 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 mars 2002) Jesse James Garrett (contact) Original English version Traduction libre de Francois Lamotte Table des matières Sommaire Le diagramme est un outil essentiel pour communiquer l’architecture d’information et la conception d'interaction entre les équipes de développement web. Historique des versions 1.1b (6 mars 2002) L'information intégrée pour le support OmniGraffle 2.0 Nouvelle bibliothèque de formes pour iGrafx Flowcharter 2000 1.1a (17 sept 2001) Nouvelles bibliothèques de formes pour Macromedia FreeHand Feuille PDF de synthèse 1.1 (31 janv 2001) Ajout de l'élément de pile de fichiers Ajout de l'élément de sélecteur conditionnel Modification l'élément de flèche pour permettre les flèche multiples Nombreuses améliorations aux bibliothèques de formes 1.0 (17 oct 2000) Conclusion

Site Structure When confronted with a new and complex information system, users build mental models. They use these models to assess relations among topics and to guess where to find things they haven’t seen before. The success of the organization of your web site will be determined largely by how well your site’s information architecture matches your users’ expectations. Figure 3.1 — Don’t make a confusing web of links. The browse functionality of your site Once you have created your site in outline form, analyze its ability to support browsing by testing it interactively, both within the site development team and with small groups of real users. Web sites with too shallow an information hierarchy depend on massive menu pages that can degenerate into a confusing laundry list of unrelated information. Figure 3.2 — Examples of the “Goldilocks problem” in getting the site structure “just right.” If your web site is actively growing, the proper balance of menus and content pages is a moving target. Webs

Greasemonkey "grease monkey" Slang. A mechanic, especially one who works on motor vehicles or aircraft. The American Heritage Dictionary of the English Language: Fourth Edition. 2000. "Greasemonkey" Greasemonkey is a Firefox extension which lets you to add bits of DHTML ("user scripts") to any Web page to change its behavior. Gist: Web readers use scripts to change Web pages Implication: No bad Web pages! A user script is a set of JavaScript instructions that your Web browser runs just before it shows you a Web page. Isn't a Web page a pre-set document that my browser simply shows me? Why do that? Give Me An Example The 9-year old son of Prakash Kailasa, a Greasemonkey developer, was preparing for a spelling bee. But JavaScript? Since most people have neither the time or desire to complicate their lives with JavaScript, you should browse the Greasemonkey script repository. Book Burro Facilitates shopping for books by listing prices from competitors. Other Initiatives Date: June 2005

Information Architecture 101: Techniques and Best Practices By Cameron Chapman Information architecture (IA) is an often-overlooked area of website design. Too often, as designers, we just let the CMS we’re using dictate how content for a site is organized. But too often, a website’s content breaks the boundaries of most CMSs. This guide covers the fundamentals of information architecture for organizing website content. Information Architecture Design Patterns There are a number of different IA design patterns[1] for effective organization of website content. Single Page The first pattern is the single page model. Flat Structure This information structure puts all the pages on the same level. Index Page A main page with subpages is probably the most commonly seen website IA pattern. Strict Hierarchy Pattern Some websites use a strict hierarchy of pages for their information design. Co-Existing Hierarchies Pattern As an alternative to the strict hierarchy, there’s also the option of co-existing hierarchies. Image by Al Abut You are not your user. L.L.

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)

Classification Schemes (and When to Use Them) This post was part of a series of posts written by the speakers of UX Lx, a UX conference in Lisbon, Portugal. When you do information architecture work, you’ll realize that most sets of content can be organized in more than one way. One of the challenges for an IA project is figuring out what way works best for your audience, your content, and your project’s goals. In this article, I’ll talk about a few different classification schemes you can use to organize your content and offer tips on when and how to use each. Alphabetic Alphabetic schemes can be used for practically any type of information—as long as you can give an item a name, you can include it in an A-Z scheme. There are only a couple of situations where you’d use alphabetic as the main way of organizing your content—dictionaries and glossaries come to mind. When people ask me about using A-Z indexes, three questions always come up. Should I list things twice? The BBC A–Z index is a great way to jump straight to a program. Format

Pricing How long are your contracts? Squarespace plans are paid monthly or yearly. We make it simple to start — and stop — your service at any time. Is there a discount for yearly service? Yes, we offer discounts on up-front long-term commitments. Do I need another web host? No. Can I download Squarespace? No. How do I accept payments with Squarespace commerce? Squarespace is tightly integrated with Stripe for accepting payments directly to your bank account. How much does it cost to process payments through Squarespace Commerce? While Squarespace does not charge transaction fees on purchases through our commerce products, Stripe, the payment processor integrated with Commerce, charges a low, market rate for processing charges. Do you offer student pricing? You can learn more about our education program here. How do I sign up? You start with a free trial. How do I cancel service? Canceling Squarespace is an easy and no-questions-asked process. Can I switch plans? What is meant by unlimited? Yes. Yes.

Kamu Kurumları İnternet Sitesi Kılavuzu e-Dönüşüm Türkiye Projesi 2005 Eylem Planı’nda 38 nolu “Kamu Kurumları İnternet Sitesi Kılavuzunun Hazırlanması” eylemine yer verilmiştir. TÜBİTAK Marmara Araştırma Merkezi sorumluluğunda Ağustos 2005’te başlayan çalışmalar tamamlanarak 2006 yılının ilk yarısında bu kılavuz hazırlanmıştır. Kılavuzun temel amacı, kamu kurumları internet sitelerinde sunulması gereken asgari içeriğin ve sunum şekillerinin belirlenmesidir. Ortaya çıkan kılavuz kamu kurumları internet sitelerinin sağlaması gereken asgari içeriği tanımlamakta, bunun yanında bu sitelerin en geniş kitlelerce erişilebilir olması amacıyla site tasarımına dönük öneriler içermektedir. Herhangi bir kamu kurumu, özel sektörden farklı olarak, genelde ilgili olduğu alanda hizmetin alınabileceği yegane kurumdur. Kamu kurumlarının internet siteleri için de durum farklı değildir. Geniş erişilebilirlik düzeyini sağlamak bazı noktalardan ödün vermeyi gerektirebilecektir. 1.1. Kılavuz sekiz ana başlık altında toplanmıştır. 1.2. 1.3. 2.1. 2.2.

How I Structure Site Content For the last few weeks we’ve been looking at information architecture. First with 8 principles of usability and then with some thoughts about setting up your site structure so search engines could find and understand your content. When I started I promised I would offer my own process for setting up the content structure on a site. First here are those other posts about information architecture to get you caught up in case you missed any. Bear in mind that much of what follows is the process I use when I have complete control over the information on a site. My process with structuring a client’s site will end up being a little different than what’s described here, though I’ll follow as much of the process below as the client allows. My Process When it’s entirely up to me what content will be included on a site and how that content will be organized I run through the same process. BrainstormOrganizePruneReviseCreate files and folder structureThink about navigation Brainstorming Organizing

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. Once that’s out of the way, you can start organizing your future site into pages of content and functions that the site will need to have. Next, Squishy gets into creativityland, where you start to build the beast:form a skeleton, pick your metaphors, map out your navigation.

User Experience Basics User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. It also takes into account the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services. Factors that Influence UX At the core of UX is ensuring that users find value in what you are providing to them. He notes that in order for there to be a meaningful and valuable user experience, information must be: Useful: Your content should be original and fulfill a need Usable: Site must be easy to use Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation Findable: Content needs to be navigable and locatable onsite and offsite Accessible: Content needs to be accessible to people with disabilities Credible: Users must trust and believe what you tell them

Examples of Successful Website Layouts Updated September 23, 2007 Successful website layouts depend on many variables including consistent navigation, proper balance, use of space, and clear delivery of content. Below are examples of successful layouts in a variety of industries. Mini USA The U.S. site for the Mini Cooper cars is a great example of well-executed flash work, mainly because the flash doesn’t get in the way of the goal of the site. With the main area of the home page dedicated to one feature, the user isn’t overwhelmed with content. Well-named consistent navigation, drop-down menus and quick links to the mini models make the site easy to navigate. Veerle’s Blog The blog for this graphic designer and illustrator, focused on XHTML, CSS, and design tips, is an attractive example of web 2.0 design. Lightroom Architecture and New Media The layout for this architecture and design firm does a good job of breaking out of the column and box design of many websites.

Web Accessibility Initiative (WAI) WCAG 2.1 in Chinese: Authorized Translation Published Web内容无障碍指南 (WCAG) 2.1, the Chinese Authorized Translation of Web Content Accessibility Guidelines (WCAG) 2.1, is now available, following completion of the W3C Authorized Translations process. WAI encourages translating WAI documents in all languages. See: Accessible Name and Description Computation (Accname) is a W3C Recommendation Accessible Name and Description Computation 1.1 (“Accname”) was published today as a “W3C Recommendation” web standard. Pronunciation Task Force: Seeking Participation The Pronunciation Task Force is seeking contributors who would like to help the Web do a better job pronouncing content through text to speech (TTS), including screen readers. New Resource: Developing an Accessibility Statement Developing an Accessibility Statement helps you create an accessibility statement for your website, mobile app, or other digital content. New Resource: The Business Case for Digital Accessibility

Information Architecture: Enhancing the User Experience | Webdes Defined as ‘the structural design of shared information environments’, information architecture focuses on bringing the principles of architectural design to the online world. Just like the blueprints of a dream home or the outline of a well-written article, good website structure organizes information in a way that enhances the user experience and delivers pertinent information as quickly as possible. In fact, most website visitors only become aware of information architecture when it is poor and stops them from finding the information they require. Read on for more details and a case study. Why Is It Important? Even an optimized site with sleek design and compelling copy can fall flat without sound information architecture. For example, Starbucks offers two free hours of Wi-Fi in their cafes with your registered Starbucks card, but the actual process of registering and getting online is so confusing, it’s enough to send you to the competition. Case Study – Vancouver Bike Repair 1. 2. 3.