Designing Websites for "Mature" Visitors

I'm meeting with a new client tomorrow to discuss a redesign of their old and busted website. The client is an association of cardiac surgeons and their website is, frankly, horrible (which they readily admit). It's out of date, hard to navigate and has as its recurring theme tiny animated flashing hearts that make you think more of the Valentine from Hell than of a professional medical team offering state-of-the-art heart surgery and related services. Someone apparently mistook ownership of a copy of FrontPage for website design credentials.

One of the questions I ask new clients is who they want to target with their website. That's always a good way to begin to lay a foundation for the site. For this new client, I anticipate that many visitors to the website will be what we'll euphemistically call "senior citizens." After all, while heart surgery on younger patients isn't unheard of, it's far more frequently performed on older people. Also, studies show that one of the primary uses for the web by people ages 65 and older is for researching health and medical issues.

With that in mind, I've done a little site hopping on my own to see if there are any new recommendations by "the experts" on designing websites for seniors. Here's a short list of the primary issues to consider, culled from a variety of sources, not the least of which is this article from UseIt.com:

• Differentiate between unvisited and visited links - This will help visitors who have problems with short term memory keep track of where they've been on the site.


• Don't set a font-size - Text that is too small and difficult to read seems to be the biggest complaint from seniors participating in usability studies. By not specifying a font-size, their default browser setting will display the text in the way that they presumably prefer, and they'll be able to more easily change the setting if it doesn't. An extension of this recommendation is the use of a style-sheet switcher button that allows the visitor to increase the text size without going to the browser's menu.


• Underline links - Poor eyesight makes the use of color alone to differentiate linked text from unlinked a bad practice.


• Omit animations - They're distracting and often confusing.


• Use shorter lines of text and increase line-height (the space between lines of text) slightly - Both of these techniques improve readability.


• Use link titles even when you think the linked text is self-explanatory - Many seniors are "cautious clickers," meaning that they hesitate to click on links for fear of where they'll be sent. Using the popup link title feature will help to reassure them of exactly what that link will do.


• Avoid dropdown/flyout menus - Besides being potentially confusing, they can also be quite difficult for someone with less-than-perfect motor skills to use.

Most, if not all of these recommendations fall into the category of common sense, and would probably make all websites more useful, not just those designed for seniors. And we bloggers, as a group, tend to routinely ignore many of them, in the interest of "cool design." (The Gazette, for example, does not follow the advice for font-size, link underlining and visited link differentiation.)

If you're a blogger, have you consciously considered the age demographic of your visitors? Are these issues important to you? And, if you're a non-blogging visitor, have you noticed examples of poor design (here or other places) that have kept you from using a website in the manner you'd like? Feel free to weigh in via the comments.

Technorati tags: Website Design | Website Usability | Website Accessibility

New Eyetracking Study: How do visitors really see your website?

CyberJournalist.net has a good summary of the results of the Eyetrack III study designed to measure what visitors actually look at when they come to a website.

Eyetracking is a relatively new technique of recording where on the screen a subject's eyes are focused at any given time. According to someone who admittedly makes a living selling the service, eyetracking is accurate to within 1 centimeter, which is probably close enough for the types of conclusions drawn from the studies that utilize it.

If you have any interest in website design (and all bloggers should fall into this category, by the way), you should find the results of this study quite interesting. It's not a "deep" study -- only 46 subjects were tested -- but it covers a wide range of variables.

I found the following to be the most thought-provoking of the conclusions (my observations are in parentheses):

• The eyes most often fixated first in the upper left of the page, then hovered in that area before going left to right. Only after perusing the top portion of the page for some time did their eyes explore further down the page. (This is not surprising, given that the test subjects were visiting English language pages and that the universal standard for such pages is to place the identity of the page at the top, and usually top left. Conditioning drives behavior.)


• Most people looked at text, not images, first. Dominant headlines -- not photographs -- most often draw the eye first upon entering the page. (This provides some vindication for those designers who insist that content and not eye candy are what bring people to websites. Nevertheless, I'm surprised that the eye isn't naturally drawn initially to images, even if only to quickly discard them as irrelevant.)


• Navigation placed at the top of a homepage performed best. (This is where I take small exception to the measurement standard: "eye fixations and viewing duration," with more/longer being judged better. I might draw just the opposite conclusion. If someone is fixated on your navigation scheme, it's non-intuitive and faulty. The nav tools should be easy to find, but otherwise they should be operable on an almost unconscious basis.)


• Smaller type encourages focused viewing behavior (that is, reading the words), while larger type promotes lighter scanning. (Here again, I'm not sure that this is a good thing. Your goal as a designer is to provide the visitor with the information she seeks in the shortest time possible. If she can get that information via "light scanning" vs. reading every word, then I think that's a good thing. The fact that the smaller type meant spending more time focused on the text seems to indicate that comprehension was hard to come by. I think that's a bad thing. [Writers who cherish their every word will no doubt disagree. You know who you are.])


• When people look at blurbs under headlines on news homepages, they often only look at the left one-third of the blurb. In other words, most people just look at the first couple of words -- and only read on if they are engaged by those words. On average, a headline has less than a second of a site visitor's attention. (This seems intuitive, and I know that Dawn Eden, headline writer extraordinaire, will confirm it. The fascinating aspect of this finding is that even when we're presented with only a half dozen words or so, we'll still try to get by with reading only one-third of them in order to save time. We are busy, busy people.)

There's a lot more along these lines in this study. Read the whole thing...or at least scan it. ;-)

HTML in Comments? Okey-doke...

Now that I've heeded Scott's unfathomable wisdom and implemented MT-Blacklist, comment spam is scarcer than John Kerry's joke-telling skills. Thus, I've reactivated HTML tags in the Gazette's comments.

Link away, amigos; Blacklist will let me know if you're being naughty!

Well, that's ONE approach, I guess...

I stumbled onto a new blog today, one with the amazingly descriptive title of "Weblog." Actually, it's the Rocky Mountain Progressive Network and with that link, it will now have a total of 1 incoming link, bumping it up from the coveted third-from-the-bottom spot in the TTLB Ecosystem.

I didn't read much on the blog, because I was too captivated by the very first sentence of the very first post (that's 2 links):

OK, two sentences then. Anyway.

I admit that I don't understand why you would devote part of a post to telling people how to fix a problem that is obviously a common problem, otherwise you wouldn't feel the need to tell people how to fix it. Why don't you just fix it?

And, yes...the font on the site is much too small. Thanks for noticing.

Common Home Page Design Mistakes

Website usability expert Jakob Neilsen has a new Alertbox article entitled "The Ten Most Violated Homepage Design Guidelines." He lists ten common problems found on the home pages of large corporate clients whom, he says, have "demonstrated commitments" to usability (interpretation: "they pay me $10,000 to tell them what's wrong with their websites"). His point is that if these big-budget guys make these mistakes, just think how bad the rest of us schmoes must be.

Here, without comment, are the top 3. Read the article to get the other seven, plus Neilsen's comments.

1. Failing to emphasize what your site offers that's of value to users and how your services differ from those of key competitors
2. Failing to use a liquid layout that lets users adjust the homepage size
3. Failing to use color to distinguish visited and unvisited links

I don't agree completely with all of his observations; at least, I don't share his perception of how serious some of these things are. But, directionally, I think he's right.

I especially agree with #1, above. In my experience with commercial clients, the hardest thing to get them to do is to provide meaningful, descriptive content in place of marketing babble on the home page. It's hard to convince them that customers don't like marketing babble, and neither do search engines.

This list should be somewhat instructive to blog design, as well. Many of us tend to dismiss things like using different colors for visited and unvisited links as pandering to newbies, and some of us probably do things such as having links to the main page on the main page without even realizing it. It's not a bad idea to stop and take a fresh look at your blog to see if you can make it easier to read and navigate.

OTOH, I'm not as dogmatic about these issues as I was when I started blogging. In a way, these are our own personal playgrounds, and we ought to be able to make 'em look like we want. The point is to make sure you're making an informed, conscious decision about certain design elements.

BUToW: Rearranging Furniture

Summary: Be sure you have a good reason before creating links on your blog that open new browser windows.

OK, let's pretend I'm a traveling salesman and you're the farmer's daughter. No, wait...that's another allegory altogether. Let's say that I'm a door-to-door salesman and you're a homeowner. I've got some intriguing merchandise so you invite me in.

Suppose, then, that while you're looking at my product line, out of the corner of your eye you see me rearranging your furniture. Then, I whip out a cordless screwdriver and start replacing the hammered brass faceplates on the electrical outlets in your stylish Southwestern-themed room with a nice gingham plaid number. You'd be pretty ticked-off, wouldn't you? You probably wouldn't care to have me stop by again, regardless of how cool my stuff looks.

This is an overdramatization, but it still touches on a couple of issues related to blogging. The primary issue is that of creating links that open by default in new browser windows. If you think of your computer desktop as your home, you probably don't like the idea of a website telling you what it should contain. But, isn't that what a blog is doing when it causes new windows to open in response to your clicking on a link?

In effect, your reader has invited you (via your blog) into her home (her computer desktop). Certain standards of propriety are expected (like, no rearranging of the furniture). If you violate those standards, you might not be invited back.

Why is this a big deal? Besides the principle of desktop sanctity, consider these issues:

• The creation of multiple windows can be confusing to navigate, especially to some disabled users of assistive technology.
• Depending on how you accomplish it, the new window may not contain URL information that tells the reader where he is.
• Your reader probably has her own preferred method of navigating links. For example, on some sites I prefer links to open in new windows, but in others I prefer them to open in new tabs...and in others, I just want to use the current window to view the new link. I'm old enough to make those decisions for myself.
• The code necessary to open a new window takes up bandwidth. It's not much for a single link, but consider the blogroll with 150 links, each of which has that extra coding. It adds up.
• And, last but not least, if you've been using the target attribute of the <a> tag to open new windows, you need to understand that this approach is no longer supported by the HTML 4.0 Strict and XHTML 1.0 Strict recommendations of the W3C. The code will validate under Transitional rules, but it's just a matter of time before browsers stop supporting it (well, if browsers behave like they're supposed to... which is a whole other topic).

I challenge you to think about why you want to open new windows anyway. Is it because you believe that your reader won't return to your blog once they "escape"? Is it because you want to improve your SiteMeter "stickiness" statistics, running the meter on your page while your reader is actually off consuming content elsewhere? If either of these describe your motivations, I respectfully suggest that you may have deeper needs than BUToW can address. (I'm not even sure that you're accomplishing the latter, depending on how SiteMeter measures "Average Visit Length.")

Now. If, in the face of such overwhelming evidence to the contrary, you continue to believe that your links should open in a new window, at least do your reader the favor of announcing how you handle those links. Put a notice in a prominent place: "Links open in new windows." Put that same notice in the title attribute of the href tag. That way, your reader can know upfront whether he needs to override your site's attempt to jack with his desktop.

In closing, you may be wondering, "what's up with the faceplate thing in the lame metaphor above?" Well, actually, that touches on a related issue that was raised by one of the Gazette's esteemed readers, who pointed out the annoying (to her) habit that some blogs have of playing with your cursor, causing it to change into unnatural and unexpected shapes. Does it do any harm (other than possibly crashing your machine if the underlying script isn't palatable to your OS)? Not really, but it's another example of violating the sanctity of your reader's home. And you thought it was just a cool effect.

In the end, regardless of what you do with your links, if you have compelling content, you'll still have the readers. But why introduce any difficulty or potential aggravation, when you can avoid it so easily?

BUToW: MT Comments Window Tweaks

Most higher-end blog publishing systems provide an option whereby visitors can post comments regarding a specific entry. An unscientific survey indicates that most bloggers choose to activate that option, which enhances the interactivity of the site. It is, however, equally obvious that many blog owners either don't know or don't care that they can make the process of leaving comments more visitor-friendly with a couple of simple template tweaks.

Movable Type uses a simple Javascript to open a new window in which comments are to be input by the visitor. I assume that other blogging systems do likewise, but you'll need to verify this for yourself. If you open your MT blog's "Main Index" template in the "Manage Templates" window, you should see the following code:

<script language="javascript" type="text/javascript">
function OpenComments (c) {
window.open(c,
'comments',
'width=480,height=480,scrollbars=yes,status=yes');
}
</script>

This little Javascript instructs the visitor's browser to open a new window when the "Leave a Comment" link is clicked. It also gives some basic instructions on how that window should look: the size will be a 480 pixel square, there will be scrollbars (usually only vertical), and the status bar will be present. This is a simple, barebones window; surely it's good enough for everyone?

Well, yes and no. It is workable, but is it optimal? It's a matter of personal preference, but I like to have more control over my desktop...I like to be able to re-size my browser windows, and this script creates a new window that cannot be re-sized.

Why allow re-sizing of the blog comment window? For one thing, it can make it easier to see more of the previous comments, which is important if the visitor is replying to one of them. Also, if your reader increases text size to improve readability, the ability to proportionately increase window size is helpful. Finally, don't discount the subtle goodwill gained from the fact that you took the time to provide the reader with a little more control over her browsing environment than she might otherwise enjoy.

So, to add resize capability to your MT comment window, insert one additional parameter, so the line of coding looks like this:

'width=480,height=480,scrollbars=yes,status=yes,resizable=yes'

If you like this approach, be sure to implement it on all the pages where popup comment windows appear. In MT, that means making the same changes to your Date Based and Category Based Archive templates, in addition to your main Index template.

And, finally, note that you can add the identical feature to the popup TrackBack window if you wish. Just look for a similar Javascript that refers to OpenTrackBack instead of OpenComments. A resizable TrackBack window is probably less useful -- I don't use it, for example -- but it's a detail worth noting.

BUToW: Mysterious Links

Here's a little test. Which of the following links are you more likely to follow, being the busy little blog-reader I know you to be:

• Heh.
  
  
• Heh.
  
  
• Life sometimes imitates art, and other times it just takes it to the dumpster.

If you let your cursor linger momentarily over each link, you should have noticed that the second two had little popup descriptions of what you will find at the other end. I'm sure you know that these descriptions come from the title attribute of the anchor (link) HTML tag. The question is, are you using the title attribute on your links?

I suggest that you consider doing so, even though it is more work. (It's not all about you...you do know that, right?) It gives your visitor an extra clue about where you're about to send her. That clue might be the reason someone decides not to follow it, and you've just saved him a few seconds, thereby earning his eternal gratitude and possible a place in his will.

The title attribute is also useful for expressing an editorial opinion about the link, or in adding humor (see Anil's Daily Links for multiple examples of both).

As icing on the cake, the link title attribute is also included by some search engines in computing keyword relevancy scores. Anyone not interested in improving their SE rankings?

Is there a situation where the title attribute is not necessary? A purist would say "no," but I'm no purist, so I'll say "maybe." If you are quite diligent in providing a strong descriptive context for your link, you can probably get away with not using a title. In the example above, such a context might be this: "Here's a story about a janitor who mistakes an art exhibit for trash, and trashes it." But most of us want to provide a little more mystery to our posts. My advice is to keep the mystery to a moderate level, for your reader's sake.

Blog Usability - Pt 2

I want to follow-up on my earlier post about improving the "visitor-friendliness" of blogs. In hindsight, I don't think I made a very good case as to why, philosophically, usability issues should matter to the average Jo/e Blogger.

In a way, it's an issue of responsibility. This "personal publishing revolution" that many of us are participating in has created new opportunities for expression, but it's also created new problems that authors and journalists never before had to deal with.

How many mainstream journalists, for example, ever question what typeface and size will be used when the newspaper publishes their reports? How many novelists get to weigh in on details such as page color and width, or line-height? These things are generally beyond their control, and thus beyond their caring. And, in any event, every copy of the newspaper or book is going to look like every other copy, so why sweat it?

That's no longer the case with blogging. Bloggers are writers and technicians, whether they like it or not. They are responsible for both the creation and the delivery of content. Trouble is, every visitor sees a potentially different version of that content, depending on their choices of operating system, platform, browser, monitor settings, etc.

Oh, sure, it's possible to blog without knowing a whit about web design principles; that's the beauty of the beast. But it's irresponsible to be unaware of the consequences of bad design...if you care about your readers, anyway.

Interestingly, web design standards and web browser technology have progressed to the point where you can shift much of the burden of meeting reader expectations back to the reader. You no longer have to tell her what font to use, at what size, for example. You can leave those choices up to her. But this means that you relinquish control. It might mean that you provide suggestions for how your blog will be presented, instead of requirements. And that implies that you're comfortable letting other people see your blog in a different light than the one you see when you browse it.

People visit and read blogs for their content, not their cosmetics. A poorly-designed blog with good content will still attract readers...but perhaps not as many and not as often as it otherwise might. And, as high quality blogs — in terms of both content and layout — continue to proliferate, bloggers ignore usability issues at their own peril.