INFORMATION ARCHITECTURE MEETS WEBDESIGNInstructors: Robert and Caris
Where IT Lab Bootcamp fits in the designprocess
“Information ArchitectureInformation architecture (IA) isthe art of expressing a modelor concept of information usedin activities that require explicitdetails of complex systems.-Wikipedia
What does that mean?IA is essentially about categorizing and organizinginformation.• Like with libraries and archives, web environments needstructure to insure a user can find information easily andefficiently.• A key element to practicing IA is visualizinginformation architectures in the form of diagrams.
What does IA look like?Early websites offered apretty explicit view of theirarchitecture.Home pages served asmaps, visibly groupingcategories with their sub-categories to revealthe site’s taxonomy.Yahoo! home page-- November, 1998
What does IA look like?Designers use diagrams to visualize different snapshots ofthe information environment.Some of the more common include . . . .
Concept modelsConcept model mapping out commercial elements of a website
FlowchartsBacon Flow Chart from clusterflock.org
Site MapsSite map of the Research section of the Victoria University Library homepage
IA in the web design processBefore you start designing you need to . . .• Account for all of your content• Document user and stakeholder needs• Understand the technological parametersStep 1: Design research (or gatheringrequirements)
IA in the web design processAll of these details are organized in a design document.With these requirements, an IA can begin designing thestructure of the site.The design document is a combination of what and how.Step 1: Design research
IA in the web design process• With the design document as a guide, visualize the webarchitecture through IA diagrams• A key step is building a site map, or “a visualrepresentation of the relationships between differentpages on a web site.” –Brown, Communicating DesignStep 2: Generating design ideas
Site Map Example: PortfolioSite map for L. Warren Douglas’ Portfolio
Site Map Example: Sharepoint intranetTop-level site map for a Sharepoint intranet
WireframingWith the design document and a basic site structure it’stime to wireframe out the site.…which leads us to the second part of this presentation!
Wireframes• Definition (via wikipedia): visual guide that represents theskeletal framework of a website. Depicts page layout orarrangement of website’s content, including interfaceelements and navigational systems and how they worktogether.• Usually lacks style, color or graphics, since the main focuslies in functionality, behavior and priority of content.• What a screen does, not what it looks like
Why wireframe?• Wireframes connect information architecture to visualdesign• Wireframes help you figure out how your site should workand relationships between the pages• Wireframes allow you to rapidly prototype pages to trythings out before you commit to a design or layout
Low Fidelity vs. High FidelityTool used: OmniGraffle
Wireframe ExamplesMany times paper (or whiteboard) isthe easiest, fastest and mostaccessible tool for wireframing.Advantages: fast, cheap, easy toiterate (use pencil, not pen!)Disadvantages: can’t share withteammates via web very easily, issueswith interactions are harder to discernwhen not in an interactiveenvironment.Tool used: Paper and pencil
Example problemLet’s work this one out together!We’re going to wireframe out what the homepage of yourportfolio website might look like, given the requirementsbelow:1. You want to include the following links in your globalnavigation (which appears on every page of your site):• Home• Portfolio• Resume• Contact2. You want your blog updates to be featured on thehomepage.3. You have determined that you will install websitesearch functionality so that users can search throughyour site. Be sure that this function is included in yourwireframe!4. You want your contact information (name, phone,email) and your photograph or logo to be prominenton the site.HomeResume Portfolio ContactItem 1Item 2Item 3
Example problemHomeResume Portfolio ContactItem 1Item 2Item 3Now try it on your own!On paper, wireframe out what the resume of yourportfolio website might look like, given the samerequirements:1. You want to include the following links in yourglobal navigation (which appears on every pageof your site):• Home• Portfolio• Resume• Contact2. You have determined that you will install websitesearch functionality so that users can searchthrough your site. Be sure that this function isincluded in your wireframe!3. You want your contact information (name,mailing address, email) and your photograph orlogo to be prominent on the site.