980px

Download: Barbacoa Information Architecture | Premium Design Works

The “How To” of Information Architecture comes down to the ability to organize and present information into a usable format.

There are three main components of Information Architecture that we as website designers must master:

1) Meaningful Groups

Groups should correspond to how the user thinks about the subject matter. These groups should be broken down into standard categories and subcategories—main navigational links and sub-navigational links.

2) Functional Sequence

The goal of organizing a website hierarchy is to devise a sequence that best suits the users’ needs. Pages may be sequenced in order of importance or chronological order.

3) Naming Conventions

Names of your pages should be “generally specific”—meaning the names should be concise, yet broad enough to be meaningful to the user.

See Also:

So… What does the User Want to Know?

Barbacoa Storefront

Barbacoa Storefront

When starting out with an architecture we need to ask… “What do our users want to know?” about this business, organization or artist:

Let’s take a look at some sample questions that may influence whether someone would visit this restaurant:

questions

“What do You Want to Know?” White Board Exercise, by Mike Sinkula

Once we figure out what our users want to know, we then need to create an architecture document that will lead them to the answer of their question by grouping these topics into categories and subcategories that will become our navigation scheme:

architecture

“What do You Want to Know?” White Board Exercise, by Mike Sinkula

If the user can find the answer to their question on the website, they will be more likely to buy the business’s products or services.

 

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

  1. celine says:

    Resourceful book find: Universal Methods of Design, 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions by Bella Martin & Bruce Hanington, publisher Rockport. See Research Method 46 Heuristic Evaluation – relates to Web 200 lecture, MON 1/8/13 7P

  2. Tim Garret says:

    Mike briefly discussed Card Sorting in his lecture on Monday. In case you would like to learn more about Card Sorting, I put together a resource of links that you might find useful.

    • Websort and OptimalSort let you run online Card Sorts. Small studies with less than 10 participants are free.
    • Here’s a video for instructing study participants that shows Websort in action.
    • This tutorial explains how to do open and closed Card Sorts using index cards. Offline studies provide the opportunity to ask why participants grouped items the way they did. Download PDF (85 KB)
    • In my brief experience doing Card Sorts last summer, I found that analyzing them was challenging. This Wiki has tips for analyzing Card Sort results.
    • Sam Ng’s article Mistakes Made and Lessons Learned discusses the limitations of Card Sorting.
  3. Karen Ducey says:

    If its on the front page, make sure its a good picture.

    It should be professionally lit, well composed, and sharp.

    If it doesn’t look appetizing, or informative as to what the food dish actually is, it will bring down the whole feel of the site.

  4. Jessica Clark says:

    The subject came up in class, that some of these “questions” we brainstormed may be answered on the website through non-textual means like images and color schemes. I want to propose that all restaurant websites should have at least one photograph of the type of food that they serve on the main page. It conveys so much information (and answers so many questions) without having to use words, besides looking professional and appetizing. Just a thought.

Trackbacks:

Leave a Comment to A Website Project Workflow that Works | Premium Design Works | Seattle, WA

Don't forget to get your Globally Recognized Avatar.

css.php