Ryan Boudreaux offers tips and tools to help you with Information Architecture — a planning strategy for website design that ensures a well-organized and usable website.
Are you working on a new website, a redesign, or maybe you have a complete website overhaul project with a looming milestone? Many new websites get built and existing ones get updated and go live without much thought given to concept, design, or how the information should be organized and accessed. This post will get you and your team on the right track, help you sharpen up the vision, and get your information architecture (IA) on track with the stakeholders.
Let's first take a quick look at what IA means. The definition as it applies in this instance is the art and science of organizing and labeling websites, intranets, online communities, and software to support find-ability and usability. It is also the combination of organizing search and navigation systems within websites and intranets.
Tips for achieving good IAPick a design pattern
IA models are a toolkit of basic patterns that describe several solutions to common IA puzzles. You may find that one or more of these patterns could naturally apply to your specific website project; some serve as off the shelf solutions, or can provide a starting point or shortcut to the design process. Several models are briefly described below:
- All in one model: This puts all of your content on a single home page. This approach seems to be taking on some traction especially with websites that utilize the Parallax scrolling effect.
- Flat model: The pattern that positions web pages as straight peers of the other, each page has navigation linking to the other, and there are no sub or child pages.
- Index model: A system where web pages are listed in a set of indexing, similar to a phone book or dictionary, where data is ordered in a particular fashion. And example of an index model is displayed in Figure A below.
- Strict hierarchy model: A structure where sub pages or child pages are only accessed from its parent page. A strict parent to child relationship exists for example on forums, message board threads, and blog comments.
- Multi-dimensional hierarchy model: This model provides many ways of accessing and browsing for content. Several hierarchies will exist and overlap so that the content may appear in various forms depending on how the search was initiated. This type of organization can be found on sites like Amazon.com where searches can be organized by topic, author, subject, title, genre, or keyword.
Before you set one finger on editing the index page of your website you should create a visual sitemap featuring the core structure of the content your website will provide.
- PowerMapper offers a trial online version that will map up to 10 pages of your existing website for free. The full version has a 30-day trial download, and a single license is $149. While PowerMapper only works for live sites, it is a good starting point for existing sites that are under redesign. The sample visual sitemap in Figure B below shows a typical eCommerce website with the index page, sub-pages, and child pages of each sub page.
- Another option is to use Microsoft Visio or even Excel to build a web sitemap. Stephen Turbek has a short tutorial, "The Lazy IA's Guide to Making Sitemaps," where he includes step-by-step instructions on how to make sitemaps with Excel and Visio on Windows PC's only, and Word and Inspiration for Mac OS and Windows. While the screen captures may be a bit outdated, the techniques are still useful in current applications.
- Concept Sketches: Maybe you get that amazing idea for the major website redesign project, and all you have on you are a pencil or pen and a dinner napkin. No problem, be sure to sketch out the major points, then when you get back to the office or your laptop, expand and build on your initial idea. Always document those random thoughts and ideas as they pop up in your mind's eye; you might forget them later if you don't at least put down something to jog your memory later. A quick napkin concept sketch sample is displayed in Figure C. Or, better yet, if you happen to have a smart phone then you can turn your iPhone or Android into a sketching pad with the My Sketch app or Sketch Book Express app.
- Wireframe it: One of the most underused techniques for planning and outlining a website, creating a basic shape of the typical webpage template and its sub-pages can jumpstart the project and help map out the site structure. And along with the wireframe, create several mock-up pages with the same template outline and set up a prototype location so that the team can view it and bounce off ideas, exposing any potential flaws, or bugs early on in the design.Several options for creating wireframes include PhotoShop, Visio, or any graphics design software or application. This tutorial, "The basics: Design a website wireframe in Photoshop," gives you a step-by-step process of creating a website wireframe utilizing Photoshop. Figure D shows a sample wireframe created in that tutorial.
What IA techniques do you utilize in your organization? What IA methods helped get your website to a well thought-out structure?