Here’s an Easy Way to Envision Web Site User Experience Design

This article is meant for business owners as an intro-level primer on how to envision a web design that accomplishes two oft-desired goals: (1) it looks professional (attractive, mobile-friendly, etc.), and (2) it’s also simple / easy to maintain. There are many ways to envision any web site, of course. But, again, if you’re interested in one that looks great and is extremely easy to maintain (which often translates into $$$ savings in terms of administration and configuration), then this may interest you.

One trap that non web developers fall into is that they tend to approach each web page as though it were its own mini web site. We hear questions quite commonly like, “Why should the newsletter signup box also be on the ‘About Us’ page when it’s already on the home page?” Well, instead of explaining that, let’s just start in with our recommendations.

Envisioning a *Simple, Easily-Maintainable* Web Site

To begin: Instead of trying to imagine what each page of your new web site will look like as individually designed pages, think of your web site like this:

  • It has a home page that probably looks somewhat different from the rest. For example, it may have a slideshow that only appears on this page. Or it may contain boxes that point to featured service or product areas. But, don’t worry — if you don’t have or want a home page that needs to differ much from the rest of the web site, you can just ignore this bullet completely! But, in terms of the home page, it’s fine if you do want to envision it as its own wholly designed experience.
  • For the rest of the site, though, imagine it like this:
  • A. First, imagine some content. What I mean by this is the content of an individual page — a description of a service, a team member bio page, a contact form, a blog article, a list of FAQs, etc. Whatever it is, alone, is what I’m referring to here. Of course, even the content has some considerations like typeface and headline fonts. But, for now just ignore those and imagine just a lonely newspaper clipping — a headline and some copy, completely floating alone in space without anything else on the page, like it’s in Word or an email.
  • B. Then, there is everything else that appears around that content. This, we refer to as (and suggest that you think of as) the “template”. So, this would be all of the things that will appear on pretty much every single page of the site (although maybe not on the home page), that will surround whatever the content is.
  • The goal of this entire model is to standardize, to the extent possible, everything in this template item. For example, atop your site on every page, there will likely be a logo and a standard menu. On the sidebar of every page might be a search engine, a newsletter signup box, and maybe some Google ads. In the copyright area at the bottom, you might have a copyright notice, company contact info, a little button that scrolls the user back to the top of the page, etc. Furthermore, all of these things, in such a standardized template, would appear in the same order on all pages.
  • C. Exceptions. Just as the goal, above, was to standardize the template aspect of your site as much as possible, the goal here is to minimize the number of exceptions to that standard template. There are two general examples of such things: First, there could be additional information that you would want to appear in a sidebar only on specific pages. Second, there could be template-type information that, for whatever reason, you do not wish to see on specific pages.

So, let’s take a look at a couple such exceptions. Imagine that you’re a CPA firm, and you have a page on auditing services. So, the copy for that page is item A — the content. And the rest of the page (menu, sidebar, bottom) is the “template”. However, in this case you’d also like a box to appear on the sidebar that says, “How Does an Audit Work?” Maybe it’s a graphic or something that links to a popular blog article on the site about this. So, clearly, that makes sense to appear on the Audit services page, but not on the entire template. So, can we setup special items to appear only on specific pages and nowhere else??? … well sure! No problem at all. :-)

Another example. Let’s say you have a search engine box on the template’s sidebar that gives an “advanced search” option and, whenever people go to the advanced search area, that loads up a new page with the advanced search form in the content area. Well, if this is the case, you may not want the normal search engine box also showing on the template sidebar when people are already on the advanced search engine page. So, can we setup special items to appear everywhere except on one specific page? … well sure! No problem at all. :-)

The key message here, though, is not to extol the benefits of being able to assign items (called modules) to the template at will. Yes, that IS definitely possible. But, rather, my recommendation is that these types of things should be thought of as exceptions. In other words, think of what you could live with on your template if it were on every page in the same place. Get that step done first. Then, see if you have any exceptions to this, and try to keep them as few as possible. This, my friend, will get you to that magic goal of a web site that’s very easy to maintain.

Ergo… Yes, you can complicate your site as much as you’d like. You could come up with a different menu for each page, a different color logo for each page, different sidebar info for each page, different footers and messages and orderings for all of those things. BUT, to the extend that you do not standardize such things, you then have to both configure and then manage them all going forward.

Jim Dee heads up Array Web Development, LLC in Portland, OR. He’s the editor of “Web Designer | Web Developer” magazine and a contributor to many online publications. You can reach him at: Jim [at] Photo atop piece is Keep It Simple Stupid by Hey Paul Studios (Flickr, Creative Commons) .