Content step-by-step

1. Remember your goals, and your users' goals

Let's pretend we've got a portal that incorporates webmail. Typical goals might well include:

• User: Be satisfied that I've dealt with anything that needs dealing with.
• Site: Get 0.5% of users to click on affiliate link to ecommerce partner site
• User: Be aware of what's happening in the world.
• Site: Maintain competitive advantage, by announcing new time-saving feature
  
  

Think in terms of a dialogue between the user and the web page. What does the page need to say to the user to communicate successfully? What does the user need to say to the page in order to communicate successfully?

A quick brainstorm of typical dialogue, for an email portal:

• Who are you? I'm Ben. Hi Ben.
• Do I have mail? Yes/No
• Did you know, you can do this..?
• Might you want to buy this..? Yes/No. (OK, I'll remember that)
• Maybe you want to log in to a different account.. you can do that here.
• Here's the latest news on the categories you're interested in.
• Oh, there's a new feature!
• Get me out of here. I want to know no-one else can see my mail.

Very often, the most important screen elements are those that answer the questions:

• Where am I?
• What can I find / get / do here?
• Where can I get from here?
• How can I find what I'm looking for?

3. What features, functions and content will best express the dialogue?

This is a very complex question, with loads of different answers. Working out the best approach to each situation depends on common sense, trial-and-error, testing and experience. Factors include: economy and simplicity, recognition and familiarity, impact and tone-of-voice.

Here are just a few possible features, functions and content that might express a few different dialogues:

"Who are you?" "I'm Ben."... could be said with

• Login box
• Login page that requires valid login
• Cookie, and login box with default value
• 'Click here if you're not Ben'

"Do I have mail?" "Yes/No"... could be said with

• 'You have mail' message
• Mail icon showing the number of new messages
• Show the headers of new messages on the home page

"Did you know, you can do this?"... could be said with

• Random banner ad on every page
• Side ad panel on certain pages that remembers which ads the user has seen already
• Popup page
• Tip in context on certain function pages

etc. etc. There are loads of ways that sites can communicate with users, and users with sites.

4. Prioritise those messages and dialogs

Working out which messages are most important helps you to organise the features on screen.

Factors involved in prioritisation:

• How relevant a feature is likely to be to the current user
• How beneficial a feature is likely to be to the current user
• Relative importance of site's goals
• Relative importance of user's goal (a goal could be common and trivial, or relatively uncommon but critically important)
• Clutter and noise: what else is on the page

Example: In my online banking application, the "Log in" link is central and pretty obvious, because I always need to click it when I go to the home page. It has primary importance (Of course, it would be better if I didn't have to click a "Log in" link every time I visit the site!) By contrast the "Log out" link, also quite important, is much smaller. This is quite correct. I might click "Log out" once per session, and I need to be able to find it easily. My online banking helps me do that.

Example of bad prioritisation

This is an excerpt of a hotel booking form from netbooker.com. Notice the two form buttons: "Reserve now" and "Reset Form". Which is most prominent? Does that match the user's, or the site's, needs?

5. Organise your features, functions and content in a meaningful way

There are numerous factors involved in laying out a page. A lot of them are discussed in later tutorials on this site.

It can be helpful to think again in terms of a conversation. Your page communicates using its features and content. The user communicates in her own conscious/subconscious mental commentary, through making selections, and entering data.

A well-designed and well-written web page is like a concierge or shop assistant, who anticipates your needs and helps you in the simplest and most discreet way. In what order will your page bring items to your attention?

"If you're here, you're probably looking for this"

If your page features something so relevant that a user is almost certainly going to use it, how do you present it? In a conversation, you'd say it at the earliest suitable opportunity, and you'd say it loud and clear. Web pages need to do the same - through their visual language, using things like structure, contrast, and motion.

"You probably need to know where this is, because it might be useful"

The thing in question might be something like a login box, or the ability to delete the message - something that may be required to achieve a task, but not essential enough to warrant a very strong statement.

Let's consider softer elements as well...

"You should know what this page is about. This will tell you if this section is the one you're looking for."

or

"You may find you need this tool. You'll find it here, with some other tools."

Softer still...

"This will give you an impression of the kind of site this is."

And really low-grade elements...

"If you're interested enough to be looking for these things, you can dig for them over there."

A useful next step is to put your prioritisation on paper, using an Attention map.