• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
 
Designing a website

Step 2 - Designing your site

Structuring your site

Although different sites face different structural challenges, their designers go through similar steps to create an information architecture.

 

The particular process might vary from person to person and project to project. You might use different tools, try different tactics, and produce different documents, but the essential steps are the same.

 

4 steps to structuring your site:

  1. Take stock of what you have. The first step toward organizing a site is figuring out what exactly it will include.

  2. Decide what's most important. You can't organize (much less design) your site until you know which elements are the most important. What are most users looking for? What do you want them to use?

  3. Choose an organizing principle. Most sites are structured around one or more organization systems. Some are organized by date, for example. Others by category or the type of user.

  4. Categorize the content. The final essential step is to actually organize all your content in a way that will make sense to your users.

1. Take stock of what you have

The first step toward organizing your site (after you've defined your site goals) is getting your arms around what you're dealing with. What exactly will your site include?

 

For many sites a simple list summarizing site content will suffice. But some require a full inventory to account for all their existing content.

 

Lesson from the trenches: your site shouldn't mirror your company

"If your site becomes a territorial map to your company, that's not going to give you the results you want."

—Wendy Owen

One of the most common mistakes designers make is to model their website after their company structure, giving each department a section and front-door link.

 

It's a "classic error," says Michael Twidale, library and information science professor at the University of Illinois, Urbana-Champaign. "It's fine if you're producing a corporate intranet, because you can assume everyone knows what the organization hierarchy is. But if it's a public web page, you've got a problem."

 

The problem is that your internal structure is irrelevant to your users. Their goals rarely map on to your org chart, and your department names will likely confuse them. It can be hard to explain this to co-workers who want a prominent place on the site.

 

"We have to acknowledge that there's a lot of internal politics in web design," Twidale says. "Everyone naturally believes the job they do is crucial to the organization. That means you think your department should be on the front page. You want to be on the top of the front page!"

 

You'll have to educate your co-workers if you're going to produce a successful site. "You shouldn't structure your site like your org chart," says designer Wendy Owen. "If your site becomes a territorial map of your company, that's not going to get the results you want."


2 ways to take stock:

  1. Make an outline. A basic outline covering the types of content or services that will appear on your site is often all you need when you're launching a new site, especially if it's relatively small in scale.

  2. Take a content inventory. If you're redesigning an existing site, or launching one that's large in scale, you'll want to list, in painstaking detail, every single piece of content (articles, product listings, images) available for the site. These are the lists you'll work from as you begin categorizing and organizing the content.

2. Decide what's most important

As you organize your site—and before you arrive at a final structure—it's important to decide which elements in your site are the most important. What will most users be looking for? What does your financial success depend on?

 

"One of the biggest mistakes I see on sites is a lack of clear hierarchy," says Wendy Owen, a principal with Giant Ant Design. "Making clear decisions about what's most important really helps the user understand the experience."

 

But many organizations find it easier to duck these decisions. They prioritize what the boss wants to prioritize, or—perhaps worse—give everything on the site equal weight.

 

"Too many sites shirk their obligation to organize materials based on user needs," says designer Jeffrey Zeldman (www.zeldman.com). "When committees (instead of user needs) drive the architecture, we get sites that give us one-click access to everything instead of guiding us through a carefully planned experience."

 

"One-click access to everything sounds good, but is bad because it overwhelms the visitor," he explains. "If you visit a New York diner with a 25-page menu, you'll end up ordering coffee and eggs because you just can't cope with the endless array of choices."

 

This is one thing on a menu, but quite another on the web. "People have to eat, but they don't have to linger at your website," Zeldman says. "If you overwhelm them with too many choices, they'll go elsewhere."

 

You should remember, too, that not all visitors are equal. "There are usually different people in the audience, but every user group doesn't deserve the same importance," Owen says. "For instance, if you're selling shampoo on your site, and that's 90% of your business, then you're going to focus on your shampoo users. You're not going to give equal play to your razor blades, which account for only 5% of your business."

3. Choose an organizing principle

As you organize your site, you'll need to choose an organizing principle around which the site will be structured. Stores, for example, are usually organized by product category, and online diaries are usually organized by the date of the entry.

 

Although each site presents a unique structural challenge, most can be organized one of six ways: by category, by task, by user, by language or location, by date, or by corporate department (which isn't recommended).

4. Categorize the content

The final organizational step is the most important. You have to break up the site's content into meaningful categories or sections.

 

In some ways it's a simple process. All you do is arrange things into logical groups—similar things go together, dissimilar things don't. But the actual process isn't so easy. You have to consider user needs, business needs, and classification systems inherent in the content itself. There are many ways to approach the problem, and there's often more than one viable solution.

 

It's a task both satisfying and frustrating, because an elegant solution will often seem obvious once crafted. But there are many paths to the elegant solution, and each designer has to find the right one for herself.

 

Lesson from the trenches: how to create the information architecture

"At some point, you almost feel a gravitational pull toward a certain solution."

—Jesse James Garrett

It's not hard to understand what an information architect does: They organize a site's content in a way that makes sense, giving the site a meaningful structure. But it's a little harder to picture how they do it.

 

"When you hear people talk about information architecture methodology, they'll talk about every part of it except for the part where they actually construct the architecture," laughs Jesse James Garrett, a prominent information architect and author of The Elements of User Experience.

 

"They'll talk about all the research, and all the thinking, and all the planning that happens up until the point that they create the architecture. Then they might talk about all of the things they do to validate the architecture after it's been built. But the actual creation of the architecture is kind of a mystery to us."

 

The mystery lies in the brain's ability to sift through information until it falls into a neat structure. There are a lot of different ways to facilitate this process, and different techniques seem to work for different people.

 

But most of the time you'll start with an outline that lists all the content on your site. Then you'll rearrange the outline, trying different organization schemes and different groupings, until a workable solution reveals itself.

 

"My process typically will involve making lists," Garrett says. "I'll make lists. Sometimes I'll make outlines on the computer, sometimes I'll doodle on my white board."

 

His preferred method makes use of unused business cards. "I'll take a stack of my business cards, flip them over, and write the names of elements on the back. Then I sort of slide them around on a table and get a feel for how they're fitting together."

 

This exercise helps him picture the natural groupings, or recognize when certain things need to be clustered more closely together. The physicality of it appeals to him: "That exercise—pushing business cards around on the table—has been really good," he said. "There's something about working in a tactile fashion that engages the brain, in a kindergarten activity hour kind of way."

 

It's also not a bad way to get rid of excess business cards. "If they came in boxes smaller than 500, I'd have to come up with some other way to do it," he laughs.

 

Like most information architects, Garrett says he works through a number of possible directions, before the best solution reveals itself.

 

"I'll usually toy around with a few different ideas before settling on a particular architectural approach," he says. And the determining factors always come back to site strategy: What does the business need the site to accomplish? What do the users want to get out of the site?

 

"There's a sort of co-evolution kind of process," he says. "I'm usually working on both levels at once. As I'm working through the content, and pushing those business cards around, part of my brain is thinking about the content and part of my brain is working out the strategic issues at the same time."

 

"At some point, you almost feel a gravitational pull toward a certain solution. Then you know that the conceptual model is starting to come together, and the content elements just start falling into place."


6 ways to organize your site

1. By category

Use this when all your visitors have the same basic task in mind—whether that task is to research a topic, buy a product, or discuss an issue.

 

Category-divided sites are probably the most common on the web today. These systems divide a site by the topics or categories of information they offer.

 

Content sites, for instance, might be divided by the types of articles they offer, commerce sites by the type of product, and community sites by the discussion topic.

BlackPlanet Forums give users a place to discuss issues and interests. Because everyone is there for the same basic purpose, the forums are organized by topic.

2. By task

Use this when your site allows users to accomplish several distinct tasks which may or may not be related to each other.

 

Task-organized sites attempt to identify the various goals a user might have in mind, and point the user speedily in the direction of accomplishing them.

 

One reason this works well is that it correlates with the mentality of web users, who are usually focused on what they can do next.

Nerve organizes its personals site according to the different things users can do to find their perfect match.

3. By user

Use this when your site serves two or more distinct groups of users with different (though often related) goals and interests.

 

User-organized sites group together tasks and topics that are of interest to a specific type of person, and they funnel users into the appropriate area. This organization system works well for matchmaking sites, which bring together "buyers" and "sellers" (or employers and job-seekers, as the case might be).

 

User-based systems are also effective on content, commerce, and corporate sites that focus on different types of customers. Babycenter, for example, divides its site by pregnancy stage and baby age; National Geographic has special areas for kids, parents, and teachers; the clothing company Levi's sorts users by country; and the furniture company Herman Miller has distinct site areas for customers, designers, and investors.

Guru matches companies with consultants, and vice versa. So the site is organized by user—funneling employers and job seekers in different directions to get specialized services intended for them.

4. By language or location

Use this when your visitors speak different languages or live in different geographic regions requiring different content or services.

 

Many sites are organized by language or location, to meet the needs of a far-flung, or linguistically diverse user base. However, this is less an organization system and more a way of funneling users into different sites, each of which will then be organized by different criteria that are appropriate to the content.

Levi's funnels different users to different sites, based on their geographic region. Each site offers content based on the language, culture, and available products in the region.

The Guggenheim Museum in Berlin welcomes users in English or German ("Welcome" vs. "Wilkommen").

5. By date or order

Use this if either the date or order of elements is essential to user understanding—as in timelines, journals, event calendars, or step-by-step instructions.

 

Generally speaking, websites are less dependent on dates than other media. Print publications rely on dates, because they publish discrete, complete issues that correspond with a publication date. Most websites are more fluid, updated without ceremony multiple times per day or a few time each year.

 

There are exceptions, however. Web logs (called "blogs" for short) are online journals that are organized by date, beginning with the most recent entry and going back through time. And other types of sites—timelines, event calendars, etc.—are obviously well-served by a date-dependent structure.

Zeldman is the personal site of designer Jeffrey Zeldman. Like all blogs, it's organized by date, with the most recent entry appearing first.

6. By corporate department

Use this only when you're designing an intranet, when your departmental structure is relevant to your audience (as in a university site), or when the company's political climate leaves you absolutely no other choice.

 

One of the most common—and understandable—mistakes designers make is to model their websites after company structure, giving each department a section and front-door link. This solution serves a political purpose within the company, but it doesn't serve the user.

 

The problem with this approach is that your internal structure is irrelevant to your users. Their needs rarely map on to your internal hierarchy. Let's say, for example, that you visit the site for your local art museum, because you read about an upcoming lecture on Picasso, and you want to find out when it is.

 

Would that lecture be listed under "Education," "Events," or "Programs?" Hard to say. Unless, of course, you work in the museum, and then you'd know that the modern art lecture series is organized by Marilyn in the Programs department.

Like most schools, Brown University organizes its site by department, with different site sections for the admissions office, the athletic department, the Alumni Association, and so on.

Creating fun categories

A site's organization should be intuitive, but it needn't be boring. Sites—stores especially—that sort their wares into creative categories serve a real user need: They help people find things they didn't know they wanted. And let them have fun in the process.

RedEnvelope focuses on (last-minute) gift-giving. Rather than asking what you want, RedEnvelope asks who you're shopping for. By sorting their products into creative categories, they created perhaps the most enjoyable shopping experience online.

NetFlix is a video-rental service that solves two of the big problems inherent in renting videos: People can never remember the movies they want to see once they get to the store, and they never remember to return videos on time. NetFlix helps customers choose by offering interesting, imaginative categories (and letting them keep a list).

Combined organization systems

Only rarely can an entire site be structured using a single organization system. Usually, sites need several systems—presented simultaneously or in sequence—to categorize all its content and guide its users toward what they need.

 

The Guggenheim Museum has several branches in different cities, each of which has different exhibits and serves different local and international audiences.

  1. Front door organized by location.

    The front door of guggenheim.org sorts users by which museum location they're interested in. (Mousing over each image reveals the city in which the distinctive building is located).

  2. Local site organized by language.

    The front door of each individual Guggenheim site (including the collection in Venice, pictured) initially sorts users based on language—in this case, English or Italiano.

  3. Local site organized by department.

    The front door of the New York Guggenheim offers six sections (organized roughly by department) which are repeated throughout the site on a page-top nav bar. Departmental organization is rarely ideal, but it works, in this case, because the departments correspond with user tasks.

  4. Site section organized by category.

    When users enter "The Collection," they're presented with six different ways to view the artwork.

The Guggenheim Museum uses different organization systems sequentially to move users toward the information they need.

 

Herman Miller is a furniture company, known for both its sleek office systems (including the Aeron chair, pictured) and classic home furnishings by well-known designers, like Eames.

  1. By product category.

    Most of Herman Miller's front door is dedicated to their products. They organize their furniture into two main categories (Work Environments and Modern Classics) and offer entry points for both.

  2. By task.

    The front door also offers quick links for other tasks (aside from looking at the furniture): reading about Herman Miller, looking for jobs, and so on.

  3. By user.

    The front door is designed primarily for customers, so it offers other clear entry points for users in other categories (designers, investors).

Hewlett Packard is a technology company, known for its printers, computers, and other high-tech products.

  1. By user.

    Visitors can identify themselves by the kind of company or office they're buying products for (home & home office, small & medium business, enterprise, etc.).

  2. By product category.

    Users can also choose the particular product they're looking for (printers, PCs, handheld devices, etc.).

  3. By task.

    The front door also offers quick links to other tasks, such as reading about HP or looking for jobs there.

 

Back
to Top