Thinking Things Throught: Part 4

While previous steps depended largely on listening to your client, asking the right questions, and discovering what the client doesn’t always know he needs, it’s time now to synthesize—put it together.

It’s time to anticipate what someone will do when they find the website. Is there a competitor’s website that has features worth borrowing? If so, what is your initial reaction when finding the website? Maybe you

  • Liked the Page Layout and Visual Appearance. That initial impression is important, but it doesn’t do much after the first view. That’s not to say that the color scheme isn’t important; it is very important. There’s a lot of psychology in choosing the right colors that are consistent with the topic, gender of the user, and other audience characteristics. It’s about what appeals to them. You don’t want to lose them before they even see what you’re offering.

  • A Heading or Piece of Text Grabbed Your Attention. We process headings on web pages extremely fast. What did you see in the page that made you think? (If you must think to understand the heading, that’s backward, and it doesn’t work.)

  • A Photo or Graphic Conveyed A Message. A picture can convey an emotional response better than many words. A few words can convey a message better than many graphics.

  • You Knew Almost Instantly What to Do Next. Study the placement of buttons, style and type of menu, and use of whitespace that guide your eyes. Learn from that example of the page layout.

I’m not suggesting that you plagiarize a website—just look for inspiration from others trying to solve a similar design issue.

Organize Your Information

I’m kind of old-school. Outlines make sense—within reason. Putting content into categories makes sense as long as there is some fluidity between categories—some items just don’t always fit one category. Joomla is built around putting content into categories, but it also provides easy flow between categories.

The easiest, cheapest tool is sticky notes. Create a sticky note for each topic. If a topic doesn’t fit, break it into subtopics that do or create a new category of topic. Turn the pile of notes into a hierarchical menu. You can move things around to fit how your users can be led through the website to find the information that is important to them. Create new notes and discard bad ideas. Now, you have a starting point for setting up content categories and menu structures in Joomla. The same process can fit other CMS tools as well.

Calls To Action

The problem with the previous step is that people are really good at putting things into neat categories because they’re logical, or so it seems. What the website users want is to get to the information they need as quickly as possible, a logical path or not. What the website owner wants is for the user to take some action once they find what they’re looking for. Maybe it’s to make a purchase, request more information, download a document or something else you discovered in your requirements analysis.

Chances are, your pile of sticky notes doesn’t lead your users where they want to go in the best way. Now, you have to think about how to build a path that works. Short is best. If it requires multiple clicks, you may have to build a funnel that allows the user to wander about from multiple starting points to lead to the destination you have anticipated.

At the top of your funnel, you should have information or links to information that provide the information your user needs. Not everyone has the same information need or starting point, so your funnel is broad with multiple points of entry. Starting points at the top of the funnel may lead toward multiple destinations for a complex layout; as the user moves down the funnel, the choices quickly narrow.

Don’t be afraid to re-do your sticky notes showing the paths to your calls to action. When your user reaches the destination (trap) you have laid out for them, their response should be unambiguous—easy. Not every link in the funnel needs to lead to the destination; they need ways to back out, back up, detour to another destination, or exit.

Page Layout

Old school page development calls for graphics programs to create prototype pages or wireframes that can be coded later. With the tools of Joomla or WordPress, I think it’s much easier to drag and drop and create menu structures for different pages. You can edit, change, delete, start over, and improve easier than cranking up another tool to do the layout.

More later.