When a web site developer, or team, sits down to begin the layout for a new site—they will, of course, have a list of needs from the client or owner of the site. Once they find out what the owner wants the site to accomplish—for instance, sell a set of products or services, or provide entertainment of some kind—they will also want to decide the overall look and design of the site. Things like color palette, graphic content, whether the theme should be contemporary or classical—all these things are discussed and decide upon. Usually as designers and developers we can be counted on, to varying extents, to properly take all this into account when providing a layout and site map. Unfortunately one this that is constantly being overlooked, especially when developing forms that collect input from—or provide interactive content to—users. Often, when we plan the layout for a form, or a page with interactive content, we become so concerned with the logistics, that we overlook one of the most important aspects of web page development—that being “user flow.”

When defining the term “user flow,” we are specifically concerned with anticipating, and if possible manipulating, the user’s “Focus” and their “Movement.” When describing the user’s “Focus,” we are referring to how they view the content on the page, and in what order. That is to say, what catches their eye first; what section they begin their reading from, the order in which they read lists, and so on. Their “Movement” refers to the user’s mouse or cursor use; what sections of the form they fill out first, and other manual movements. After you know what needs to be presented on the page, and what input you require from the user, the following recommendations for laying out the page will help improve the flow.

Guiding The User’s Focus:

It is very important to make sure the user is looking at what you want them to, and in the order that you planned. Assuming that the site’s theme and color palate have already been decided, these tips will help with focus.

  • The largest or brightest graphic will always draw the eye first, so try not to make this the same on every page (eg: The title graphic for the web site) If your title graphic draws the eye first on every page, it may cause confusion.
  • In general, the name of the page or form should draw the eye first. Larger text, black-on-white or white-on-black text will stand out. So will using color opposites on the color wheel from a selected palate color.
  • Label sections accurately for forms and remember to make your instructions stand out from general text.
  • Above all, know how your user reads the page. Jakob Nielsen wrote an excellent article on how people read on the web that should give you some insight: http://www.nngroup.com/articles/how-users-read-on-the-web/

Guiding The User’s Movement:

The way the user moves the mouse and the cursor is vital. Just as is the way you ask for input. Use these tips to make your user’s movement easier for them, and improve the flow.

  • Make sure to use a script entry to place the cursor in the spot you want your user to start their input for the page.
  • Try not to put form entries that require a lot of text input back to back. Separate them with a list-box or drop-down menu entry to keep your user from fatigue. Put your manual entries in a logical order. (eg: Address: Street – City – State )
  • Any time you can save the user from manually typing in an entry, it will reduce their stress and fatigue. For instance use a drop-down list of entries instead of having them type it in. Mozilla has an excellent set of articles on designing HTML forms if you need a refresher on form elements: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms
  • Your last entry on the form should always be the “Continue” button, and you should include a “clear” button so the user can start over—BUT if you use a “clear” button you may want to use a verification dialog box to ask the user if they are sure they want to clear the form. If a user accidently hits “clear” they may wipe out all their input.

These are only a few tips to get you started, but I think you understand the point. Some of this is common sense, but the biggest question to ask yourself is if the page “feels natural” when you read it. When designing forms, break one long form into several smaller ones, so they flow comfortably. In the end, the object is to present your user with as much information as you can, as quickly as you can. Find out the average age of your target audience so you can keep the length of your pages within their attention span. The smoother your site flows, the faster the user goes from page-to-page and the more information you can get to them, and from them.

 

John Adams Jr,

John is a free-lance author and journalist born and raised in upstate New York. He is currently living and writing in Saint Augustine, Florida where the temperature is a bit warmer and the lifestyle more relaxed. The move has allowed John to broaden his range as a writer and he now lends his unique voice to everything from news and review articles in print and on the Web, to a broad range of eBooks and creative pieces. John’s work is beginning to attract attention from a wide variety of readers, in many countries. See John’s Google Plus Profile.<