Composition and Usability

In: Articles

By Rick Cecil

Published on March 25, 2000

Since the advent of the Web, we've seen a myriad of design schemas evolve--from the simple navigation/content style of site to the cluttered portal. And as this evolution has progressed, so did the war between UI designers and usability experts. On one side, there are usability experts who want to make every website look exactly like Yahoo because users know Yahoo and so they will automatically know how to use the site. On the other side, there are UI designers who want to design entire sites in Flash and Shockwave just because it's cool.

Overly dramatic? Well, yes, maybe a little--but it's not entirely a false analysis. Many UI designers that work with usability folk complain that their creativity is hampered, whereas many usability gurus complain that designers are confusing a site's user with their visual semantics.

But are the goals of UI designers and the usability folk that far apart? They're both trying to build a site that will be used (successfully used, hopefully) by hundreds, thousands, and potentially millions of people. After all, large numbers of people visiting the site shows some level of success, right?

What if there was a set time when designers and usability advocates could get together and talk about particular issues--like which elements need to go on the homepage, and which elements need the most emphasis? What if.

Website UI Composition
Enter website UI composition. The idea of composing a website is a lot like Twenty Questions: if you start answering some general questions, you're eventually going to get to some more and more specific questions, which will, in turn, lead you to the correct answer.

There's a certain order to asking these questions, however, and during each round of questioning you're also building layers of the UI. By asking questions and accomplishing tasks in the appropriate order, you can ensure that the site achieves its goals and serves its target audience while not putting them to sleep with boring visuals.

I hear a lot of designer's cringing, "A process?" Their voices raised to the sharp shrill of a four-year-old just told to eat her vegetables. Yes, it's a process. But not a convoluted process.

In a nutshell, the process involves identifying the elements that need to fit into the UI; assigning levels of importance to those various elements; making rough, grayscale sketches of any ideas you have; fleshing those sketches out into grayscale site designs; and then adding color.

Identifying the Elements
Many of the questions needing answers in the Identification phase are asked in the information architecture. You should review and analyze the IA thoroughly. Did they leave any important questions relating to visual structure unanswered? For example, what items in the IA relate to each other the most? Are there any items in the IA that are buried that still need emphasis? What are the most important sections of the site? What will the content be: marketing text, news items, or something else? How much content will go on the homepage? What will the different types of navigation be? Will there be a search box? Will there be a logo? What about a tagline?

To find the answers to many of these questions, you may need to ask the information architect or your local usability expert. By answering questions like these, you ensure that you will have every element accounted for when it comes time to start sketching, allowing you to develop a UI that most appropriately fits the information.

Ranking the Elements
After you've identified the elements, you need to assign each element a rank so that you will know which elements need the most emphasis. (Note that this would also be a good phase to consult either the usability expert or information architect.)

Examples can include: How important is the logo? Is identifying the site more important than the site's content? What about the navigation? How important is that compared to the logo? What about in comparison to the content? If you have different types of content (news items versus flavor text), you should also associate rankings to these. Are the news items more important than the marketing text?

Notice that these questions are little more detailed than the identification questions. These questions you ask yourself should be pressing, not easily answerable by one or two words-well, they could be answered by a simple yes or no, but that would defeat the purpose of this phase of process: uncovering the UI's goals. So, to give you some example answers to a couple of the questions asked above:

How important is the logo? Fairly important. People like knowing where they are and, perhaps even slightly more important, the site owners like branding their site.

Is identifying the site more important than the site's content? Well, no. Again, though, branding is an important element of the site. While the logo may not be the entirety of branding, it's still an important piece. So, the logo, then, is not as important as content, but it is not less important either.

I've established some type of ranking-albeit the rank I just assigned is rather obtuse, but it is still there and will still help me when I go to sketch and design the final UI. Sometimes, even, you're able to get real rankings assigned to elements. Who wouldn't deny that the copyright is less important than anything else on the site? Sure, it needs to be on there; but it has its place tucked nicely at the bottom of the page.

Ranking the elements, then, allows you to determine how each item will fit into the site later. You will know how big the item needs to be, how it needs to contrast with other elements, and what it's shape will be. If an item is more important, then you need to make it stand out more; if it is less important, it needs to be less visible.

Rough Sketches

Most Web site UI designers I know, when told to design a website, will pull out a pad and paper and start sketching. They'll draw a box here, a box there, a squiggle here and a circle there. Nothing specific, mind you. Very, very rough drafts. And that's exactly what needs to be done here.

Before beginning, though, look at how many elements you have and the rank you've assigned each element. This ensures that you place enough boxes and squiggles on the page and that you weight the elements properly. After all, you wouldn't want the logo relegated to the bottom of the page (unless, of course, you had some way of drawing more attention to it).

After sketching a few ideas, don't open Photoshop just yet. Take your time. Pick one of the sketches you like. Start thinking about what elements should go where. Re-sketch it, thinking of how different compositions might work. Repeat this process with two or three of the sketches you've done. What might the sketch look like once the user has advanced beyond the homepage? On these secondary pages is there enough room for all the necessary elements?

After you've answered these questions, and you think you have a few really good ideas, go ahead, open Photoshop.

Design
After you've chosen an appropriate sketch, start laying it out in Photoshop, Illustrator, Freehand or whatever tool you prefer. Just make sure you're laying it out in grayscale so that you can fully appreciate how the composition of the piece works without the annoyance of color. Yes, color does affect composition, but we'll get to that later.

You're not just throwing pretty pictures around, though; you're designing the UI based on the knowledge garnered from the first two steps and the sketches from the last step. When designing the UI, you need to consider five attributes: position, size, shape, contrast, and weight.

Sounds fairly antiseptic doesn't it? Like I'm suggesting that you remove creativity-the magic-from art of design, right? Well, I'm not. Look at it this way. If you dive right into the design of the site after giving the IA a glance, you're trying to solve a problem without fully understanding it. If you've followed these steps, though, you know what the problem is; in fact, you should know the problem in some detail and now you just need to provide a creative solution.

Position. Where are you placing the element? A top-left placement usually gives the element more weight than if you placed it in the bottom right. You can, though, enhance any positions weight by using some of the techniques described below.

Size. How big is the element? Do not fall into the trap of thinking that bigger elements have more weight than smaller elements. It's more a matter of size in relation to the size of the other elements on the screen.

Shape. Is the element a circle? A square? Rounded on one corner? Logos can have a variety of shapes whereas content areas on sites are usually some form of square or rectangle.

Contrast. The difference in the colors brightness. When you're working in grayscale, the contrast is shown by using dark grays for darker colors and lighter grays for lighter colors.

Weight. How the different elements relate to each other. Weight is really a conglomerate of all the other attributes. For example, how does a small circular logo in the top right corner of the screen relate to the big, square image of the CEO in the middle of the screen? And how do these two elements compare to the bright, bold textual navigation on the right?

Color
Now for the finishing touches: selecting the site's colors.

While selecting the site's colors, keep in mind that you have given the various elements these weights for specific reasons. Your color choices should enhance these decisions. Use the elements' contrast as a guide and do not be afraid to reserve a nice color combination for use on another site. Like the infamous ole Kenny said, "You've got to know when to hold 'em, know when to fold 'em, know when to walk away, and know when to run."

You might also find yourself unable to select an appropriate color palette for the layout. Keep trying, you might just surprise yourself. But if you find yourself completely unable to choose a palette-and you've consulted others on this-look at the different elements on the screen. Are you trying to squeeze too many elements into the UI? Go back and rework the composition a bit if you need to.

The most important thing to remember when choosing colors, though: Be Consistent. Find a link color and stick with it. Decide on a color for different headlines and stick with it.

All about Opportunity
By looking at UI development as a process in which design is but a stage, you allow time for yourself to fully understand the goals of the UI. During the first two steps, you are identifying the UI's goals: what elements will the UI consist of and how important are those elements? By identifying the goals, you allow yourself to more effectively focus on a design that will most appropriately fit the information.

When it's all said and done, following the process is not a panacea; it will not, by itself, solve the problems of usability nor will it give you a great looking UI. But by emphasizing the importance of preparation before design, the site composition process does give you plenty of opportunity to design a UI that is both usable and visually appealing.

---

Suggested Reading
Information Architecture for the World Wide Web by Louis Rosenfeld, Peter Morville

About Face: The Essentials of User Interface Design by Alan Cooper

The Web Design Wow! Book: Showcasing the Best of On-Screen Communication by Jack Davis, Susan Merritt

The Design of Everyday Things by Donald A. Norman

Understanding Comics by Scott McCloud

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Usability, Web Design