HOW Interactive Speaker Brian Miller on Information Architecture

Posted inFeatured
Thumbnail for HOW Interactive Speaker Brian Miller on Information Architecture

Debbie Millman isn’t the only addition to the HOW Interactive Design Conference series. We’ve also added designer/developer, teacher and writer Brain Miller to the list of heavy-hitters this fall.

group-HIDC

HOW has a knack for pinpointing the best and brightest in the design industry, and we have the track record to prove it. In a matter of weeks, Brian Miller will take the HOW Interactive Design Conference stage among other big industry names like Andy Fitzgerald, Alexa Curtis and Dan Hon, to name a few.

In preparation for Brian Miller’s talk on Information Architecture at HIDC, we’re sharing a peek at his latest book, Above The Fold: Revised Edition

HOW Interactive Speaker Brian Miller on Information Architecture

AI_F

In order to understand what information architecture (also known as IA) is, it’s important to unlearn what most designers think IA is. It is a mistake to think of IA as simply a means of sketching a design—boxes and shapes that represent the “underpainting” of a layout. While this may be useful to some designers and may also be how IA got its start, it’s only a sliver of the IA field, which extends well beyond simple design planning.

In the infancy of the Internet, Web sites were predominantly “information spaces”—news sites, medical sites, marketing brochure sites, etc. Therefore, there was a need to “architect” these spaces, which meant designing effective ways to a) organize the content, and b) navigate through it so users could easily find what they were looking for. If you look at the deliverables an information architect (also known as an IA) created, that becomes clear, below.

information architecture

Site maps: An illustration or map of the pages of a site and their relationship to one another

Taxonomies: The classification of content into a hierarchical structure

Labeling systems: The process of naming buttons and links to make it clear what content they will reveal

Wireframes: A means of organizing the content of an individual page as well as illustrating any technical requirements needed

These tools illustrate the navigation structure and provide context as well as the details of the various information components shared across the different pages/screens of the site.

Sitemap

The information architecture phase of a Web site project starts with thedevelopment of a comprehensive sitemap. A sitemap is a schematic for a site showing the pages and the linked relationships among them. Traditionally, pages are represented by outlined

boxes, and links are represented by lines connecting the boxes. This document gives a design team an overview of the site and allows designers to understand the breadth of the navigational needs and the full scope of the project: What pages are most important? What pages need to be reached from every page? Is there a target page that the client wants to lead people to? All of these questions can be answered by examining a site map.

A sitemap, like the one shown here for GolfersMD.com, shows the pages of a site and their relationship to one another. Pages are laid out and grouped by the information architect, showing various pathways and connections that a design team uses when laying out the navigation and sub-navigation. In this case, the items in the main navigation are shaded in blue, pages that require the user to log in are shaded in gray, and pop-up windows are slanted boxes.

The sitemap on the next page illustrates that even a very large and seemingly unwieldy site becomes more manageable when neatly organized by an information architect.


HIDC090514-120x240

It’s not too late to register for HOW Interactive Design Conference in Washington D.C., September 3-5!

Can’t get away for three days? Check out the one-day pass option!

Get more on the web design process in the new book, Above The Fold: Revised Edition, available now at MyDesignShop.com!