INFORMATION ARCHITECTURE MEETS WEB DESIGN

Instructors: Robert and Caris

Where IT Lab Bootcamp fits in the design process

“

Information Architecture

Information architecture (IA) is the art of expressing a model or concept of information used in activities that require explicit details of complex systems.

-Wikipedia

What does that mean? IA is essentially about categorizing and organizing information. •  Like with libraries and archives, web environments need

structure to insure a user can find information easily and efficiently.

• A key element to practicing IA is visualizing information architectures in the form of diagrams.

What does IA look like? Early websites offered a pretty explicit view of their architecture. Home pages served as maps, visibly grouping categories with their sub-categories to reveal the site’s taxonomy.

Yahoo! home page-- November, 1998

What does IA look like? Designers use diagrams to visualize different snapshots of the information environment.

Some of the more common include . . . .

Concept models

Concept model mapping out commercial elements of a website

Flowcharts

Bacon Flow Chart from clusterflock.org

Site Maps

Site map of the Research section of the Victoria University Library homepage

Wireframes

IA in the web design process

Before you start designing you need to . . . • Account for all of your content • Document user and stakeholder needs • Understand the technological parameters

Step 1: Design research (or gathering requirements)

IA in the web design process

All of these details are organized in a design document. With these requirements, an IA can begin designing the structure 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 web architecture through IA diagrams

• A key step is building a site map, or “a visual representation of the relationships between different pages on a web site.” –Brown, Communicating Design

Step 2: Generating design ideas

Site Map Example: Portfolio

Site Map Example: Portfolio

Site map for Rob Yurksaitis’ Portfolio

Site Map Example: Portfolio

Site Map Example: Portfolio

Site map for L. Warren Douglas’ Portfolio

Site Map Example: Sharepoint intranet

Top-level site map for a Sharepoint intranet

Wireframing With the design document and a basic site structure it’s time to wireframe out the site. …which leads us to the second part of this presentation!

Wireframes • Definition (via wikipedia): visual guide that represents the

skeletal framework of a website. Depicts page layout or arrangement of website’s content, including interface elements and navigational systems and how they work together.

• Usually lacks style, color or graphics, since the main focus lies in functionality, behavior and priority of content.

• What a screen does, not what it looks like

Why wireframe? • Wireframes connect information architecture to visual

design • Wireframes help you figure out how your site should work

and relationships between the pages • Wireframes allow you to rapidly prototype pages to try

things out before you commit to a design or layout

Wireframe Examples Tool used: Balsamiq Tool used: Gliffy.com

Wireframe Examples Tool used: Powerpoint Tool used: Adobe Illustrator

Wireframe Examples Tool used: OmniGraffle (Mac only) Tool used: Visio (PC only)

Low Fidelity vs. High Fidelity Tool used: OmniGraffle

Wireframe Examples Many times paper (or whiteboard) is the easiest, fastest and most accessible tool for wireframing. Advantages: fast, cheap, easy to iterate (use pencil, not pen!) Disadvantages: can’t share with teammates via web very easily, issues with interactions are harder to discern when not in an interactive environment.

Tool used: Paper and pencil

Example problem Let’s work this one out together! We’re going to wireframe out what the homepage of your portfolio website might look like, given the requirements below: 1.  You want to include the following links in your global

navigation (which appears on every page of your site): •  Home •  Portfolio •  Resume •  Contact

2.  You want your blog updates to be featured on the homepage.

3.  You have determined that you will install website search functionality so that users can search through your site. Be sure that this function is included in your wireframe!

4.  You want your contact information (name, phone, email) and your photograph or logo to be prominent on the site.

Home

Resume Portfolio Contact

Item 1

Item 2

Item 3

One solution… Tool used: Balsamiq

Example problem

Home

Resume Portfolio Contact

Item 1

Item 2

Item 3

Now try it on your own! On paper, wireframe out what the resume of your portfolio website might look like, given the same requirements: 1.  You want to include the following links in your

global navigation (which appears on every page of your site): •  Home •  Portfolio •  Resume •  Contact

2.  You have determined that you will install website search functionality so that users can search through your site. Be sure that this function is included in your wireframe!

3.  You want your contact information (name, mailing address, email) and your photograph or logo to be prominent on the site.

One solution… Tool used: Balsamiq

Resources

• More web tools: http://mashable.com/2010/07/15/wireframing-tools/