Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Morville, Peter: Information Architecture for the world wide web, Chapter 12

Blueprints, Wire-frames, Site content, Content models, Controlled vocabularies, Style guides

Jeffrey Ray

on 23 March 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Morville, Peter: Information Architecture for the world wide web, Chapter 12

Contents Chapter 12 Jeff Ray &
Carmelle Hopaluk Content models and controlled vocabularies Design collaborations Diagrams, blueprints and wireframes How to map and inventory
your site's content Information Architecture for the World Wide Web 4 2 1 3 Diagrams blueprints and wireframes How to map and inventory
your site's content Information architecture is
conceptual and abstract Information architecture is multi-
dimensional and difficult to
express in a two-dimensional space Guidelines to follow as you
document your architecture: 1. Provide multiple "views"
of an information architecture 2. Develop those views for
specific audiences and needs Try to present diagrams in person
as they are not self explanatory Focus on the structure of the site's
content rather than its semantic
content Diagrams are effective at depicting: Structure Flow Movement Relationships between content But not: Conveying the semantic nature of content or labels The role of diagrams in the design phase Diagrams Define: Content components What constitutes a unit of content, and how those components should be grouped and sequenced Connections between content components How components are linked to enable navigation between them Goal: To communicate content components Blueprints Show relationships between
pages and other content components Can be used to portray organization, navigation, and labelling systems Often referred to as "site maps" High-level architecture blueprints Often created by information architects as part of a top-down information architecture process Iterative approach Flesh out the blueprint by adding increasing levels of complexity

Useful for exploring primary organization schemes Maps out the organization and labelling of major areas Subsites Building block of information architecture A directory of subsite records acts as a "card catalog" that provides easy access to the subsites Wireframes Content mapping During research and strategy you are focused on the top-down approach of defining information As you move into design and production, i.e.: content mapping, you move top-down where information architecture meets bottom-up Content mapping is breaking information down or combining existing information into content chunks. (It is important to remember that rather than chunks be sentences or paragraphs, rather finely grained portions of content, requires individual treatment) Content is then drawn from a variety of sources and in a multitude of formats, must be mapped into information architecture so that it will be clear what goes where during the production process The subjective process of defining chunks should be determined by asking the following questions: 1. Should this content be divided into smaller chunks that the user might want to access separately?

2. What is the smallest section of content that needs to be individually indexed?

3. Will this content need to be repurposed across multiple documents or as part of multiple processes? Once the content chunks have been defined, they can be mapped to their destinations, which can be web pages, PDAs, or some other medium. *You will need a systematic means of documenting the source and destination of all content. A unique identification code to each content chunk is important (e.g.: a legend can be used) *a biproduct of the content inventory describing available content and where it can be found Content models Content models are "micro" information architectures made up of small chunks of interconnected content They support the critical missing pieces in so many sites: contextual navigation that works deep within the site (e.g.: connecting the chunks) Content models are important to understand because we experience them all the time on the web and in the media A great example is a recipe, which contains a list of ingredients, directions, a title, and so on. If you mess up the logic behind a recipe by putting steps before the ingredients, the model suddenly collapses. Content models rely on the consistent steps of objects and logical connections between them to work. Another example is a clothing website. When looking at a blazer, the web designer will also have other items that will interest the user. Content mapping also supports contextual navigation, when your movement is based more on your needs as a user Horizontal hopping across the hierarchy is a form of contextual navigation. Links are a way in which content models can sort and connect large amounts of information. Content models and
controlled vocabularies The final stage in which everything comes together, once the blueprints, wireframes, content analysis, and vocabularies have been formed. Design collaboration Other people involved in developing the site will come together Visual designers, developers, content authors, or managers, howver this is problematic in that everyone want their own idea to play a major role, and this is where design sketches and web prototypes come in handy. Visual designers, developers, content authors, or managers, howver this is problematic in that everyone want their own idea to play a major role, and this is where design sketches and web prototypes come in handy. Design sketches Happens in the early stages, such as the research phase, where the design team developed a sense of the desired graphic identity or look and feel. Design sketches are a great way to pool the collective knowledge of the technical team, design team, and architect. The design team uses the wireframes as a guideline and sketches now begin to bring out ideas and questions that must be discussed before everything is complete These sketches allow rapid iteration and intense collaboration Web-based prototypes The next step beyond design sketches. Digital renditions which show how the site will look and function They are concrete and often aesthetically compelling, as you can actually see how your work will really come together This part focuses on the aesthetic aspects, such as page layout and graphic identity Fine details are focused on when conceptual design officially ends At the point of production Consider these questions? 1. Are these chunks small enough that we can group them together on one page? 2. Should we add navigation to this section of the site? 3. Can we shorten the label of this page? When answering these questions you need to make sure that the request of your client doesn't come at the cost of the sanity of the design team, the budget and timeline, and your vision for the information architecture of the web site You shouldn't have to make major decisions about the architecture during production because hopefully these have already been made Controlled vocabularies Two primary types of work products associated with the development of controlled vocabularies: 1. Metadata matrixes that fascillitate discussion about the prioritization of vocabilaries 2. An application that enables you to manage the vocabulary terms and relationships The information architects job is to help define which vocabularies should be developed, considering priorites and time and budget constraints Database solutions should be chosen to help manage the terms and term relationships For a sophisticated thesaurus with equivalence, hierarchical, and associative relationships, you should consider investing in thesaurus management software Wireframes can represent any type of content Wireframes depict how an individual page or template should look from an architectural perspective Forces architects to consider such issues as where the navigation systems might be located on a page Wireframes describe the content and information architecture to be included on the relatively confined two-dimensional spaces known as pages Wireframes help the information architect decide how to group content components, how to order them, and which groups of components have priority Types of wireframes Wireframes are typically created for the site's most important pages - main pages, major category pages, and interfaces to search Wireframes represent a degree of look and feel, and straddle the realms of visual design and interaction design Sketches Created with HTML or with a publishing tool like adobe Illustrator Low/ High fidelity High fidelity simulates the actual page layout, showing you constraints of an HTML version High fidelity takes much greater effort Wireframe guidelines Consistency Visio and other standard charting tools Callouts (side notes) Useful and professionally developed Establish procedures for developing, sharing, and maintaining common templates and stencils
Full transcript