Design Choices and User Testing

There was an interesting article on A List Apart recently about how design choices can drastically affect the way that users react to a site’s messaging. They took a page that contained a critical call to action and tested two variations on the design and minor copy tweaks.

The results were really surprising.

One of the designs that appeared to improve readability and usability actually resulted in a 53% drop in measured reaction. Wow!

When we build sites, we make so many decisions based on our past experience, training and hunches… This article suggests that “testing” is an important addition to that list.

“One way or another, it’s important to accept that none of us—neither designers nor writers—know what the “best” page design or copy is until we test”.

The article also mentions the importance of integration of writers within the process. I’d be surprised if many Web builders, designers, architects, etc. spend a lot of time—right from the beginning of the project—with their writers, ensuring a good fit of copy to display.

Good stuff from ALA.

Greasemonkey script to fix Audible's bad UI

Audible.com did a crummy thing with their recent site redesign. They made all links into javascript actions.

This poses various usability issues (right-o – if you’ve turned off javascript, you’re out of luck). The biggest issue for me, though, is that this keeps me from opening links on the site into new tabs/windows. If you experience the Web in a single window, sans tabs, you might not even notice that there’s a problem. When I’m browsing a commerce site, I like to open links to products I may be interested in into a new tab. This lets me keep one tab open to the product list, avoiding excessive back-button usage. It also helps me zip through a product list opening products into new tabs so that I can use the tabs as a sort of “browse queue” of things that looked interesting.

Apparently I wasn’t the only one that found this to be a pain. Paul Roub has created a nice little Greasemonkey script that turns the links into tabable (and permalinkable) links. Nifty.

If you’re unfamiliar with Greasemonkey, it’s a Firefox extension that lets you manipulate the behavior of any site. Here’s a brief tutorial

RoboForm is my friend

I keep meaning to post something about Roboform. It’s a nice little utility that keeps track of your personal info – credit card stuff, online passwords, notes – and secures it for you behind a single password. It integrates with IE and Firefox (it’s PC-only, though) and presents itself as a toolbar.

I used to be guilty of keeping a very small number of passwords that were pretty easy to guess at. This made me uncomfortable when it came to sites such as Paypal or my bank’s site, where someone could do some damage if they logged in to my account. Now I use Roboform to create *random* paswords for me, then remember them. If this random-ness makes you uncomfortable, remember that you’ve usually got an “I’ve forgotten my password and I can’t get up” option on most sites. Roboform has a search box that I can type a partial login title into to find saved information. Opening a login takes you to the site *and* logs you in, so it acts as a bookmark manager of sorts as well.

Roboform is also smart about entering your info into Web-based order forms. It can usually figure out which fields on a form it can fill for you and does so quickly. If you don’t feel comfortable entering in your credit card info, even allowing Roboform to manage your address info is a big timesaver. Roboform allows you to maintain multiple identities (work/home/spouse/etc) as well.

Roboform keeps its info encrypted in individual files in a folder of your choosing. This makes it easy to backup your data or synchronize between two computers (laptop/desktop). The folks that make Roboform offer a free-for-personal-use file-sync utility. Roboform can sync with a Palm or run from a USB drive (both are separate non-free products, though). It’s even easy to securely email logins.

Roboform encrypts all of this info with a password, so you’re secure even if someone gets access to your machine. It can even handle multiple-password encryption schemes (like blowfish) to handle employee/supervisor scenarios.

Roboform is one of my must-haves.

Note: the first thing I recommend to folks installing Roboform for the first time is to open the options, go to the general tab, and de-select “Offer to save logins from web(HTML) forms”. This makes it so Roboform isn’t so eager and in your face all of the time. If you want it to save a form, you can hold “shift” when you submit the form (via submit button or “enter”) and Roboform will offer to save the login info.

Don't go there, friend… of meta refreshes and status codes.

I know I’ve been guilty of this one in the past, but I want you to make this pledge along here with me: “No more abuse of the meta refresh!”

I know — it’s a handy in so many ways. I used it most often as a way to create short URLs for my visitors that would redirect to a page with a longer, more complicated URL. I’d create a directory off of the root of a site and pop an index.html in the directory that would include a meta refresh to send visitors on to another page.

“So, what’s the deal?”

While the meta refresh appears to do the job, it’s not the best method to acheive this result. Two problems spring to mind… Firstly, it mucks up your visitor’s browser history. If they try to hit “back” from the page you redirected to, they’ll quickly find themselves back on the page, since the meta refresh will do it’s thing and redirect them again. The other issue is that most reputable search engines typically ignore meta refreshes. They have long been abused by search engine spammers and the search indexers have adapted.

The answer?

Use the 301 “Moved Permanently” status code. The 301 status code tells browsers and search indexers that the content they are looking for can be found in another location. It’s Google-friendly and preserves your users’ browser history.

But how?

If you’re using Apache, it’s a matter of updating your .htaccess file. I’m a ColdFusion guy, myself and the following code works for me:


<cfheader statuscode="301" statustext="Moved Permanently">
<cfheader name="Location" value="http://www.yoururl.com/here/">

Reason to Believe: Why C–levels Should Care About Web Standards

I’ve been known to throw around a lot of technical terms in casual conversation … XHTML, CSS, W3C. I go on and on about how the separation of content from design and adherence to Web standards are The Right Thing To Do. Then I pause. I notice that my audience looks markedly disinterested. No quickened pulse. No zealous grin. Just glazed-over stares.

I’m coming to terms with the fact that most people — from my mom to my client’s CFO — are not going to be won over by The Beauty of the Code and the Joy of Web Standards. So instead, I’ve put together a list of five reasons why Web standards matter. They’ll make believers out of anyone.

1. You can re–use your content.

You worked hard to develop your content; now your content can work hard for you. Since the content and design of a standards–compliant site are separate, you can easily deploy that content to mediums other than a Web browser: mobile phones, kiosks, PDAs.

2. Everyone can read your site.

Section 508 of the Rehabilitation Act is a growing concern for organizations maintaining a Web presence, and accessibility is the buzzword. In a nutshell, section 508 says that access to your information by individuals with disabilities should be comparable to access by individuals without disabilities. Separating your content from its visual presentation makes your site more accessible by users of screen–readers or other assistive technologies.

3. Your site will be future-ready.

New browsers pop up every day, as do new technologies for displaying Web content. These new technologies are going to be built to work according to Web standards. The trick that worked last week — even though it looks great in Internet Explorer — probably isn’t going to work on that new cell phone that came out last week.

4. Your site will be search–friendly.

Did your pulse just pick up a bit? If you’re like many of my clients, the thorny topic of search engine optimization (SEO) is one that keeps you up at night. I’m here to tell you it’s time to stop worrying about how Google’s page-ranking might change next week. A standards-compliant site fares much better with the search engines than one that is not. In many ways, the same things that make your site accessible also make it easily digestible by search engine indexers. In the long run, standards compliancy will outpace the latest trick to boost search engine rankings. You’ll sleep better, to boot.

5. You’ll save money.

You knew I had a ringer, right? Sticking with Web standards is cheaper. Let me be clear here: when I speak of dollars, I speak of total cost of ownership. Up front, you may find building to Web standards to be a bit more costly than building plain–Jane HTML that will look just fine to the untrained eye. But your benefits from that upfront cost will start the first time you make a change, from correcting a typo to adding a new product or a service. When properly implemented, code that adheres to Web standards separates the business logic from design and the design from content, making it possible to change one without disrupting the others. The look of your site can be changed drastically without making a single change to your site’s content or any of the processes that deliver that content. Without standards compliancy, it is common to find the Web programming that delivers content to be littered with information describing how that content should look. Sticking to standards can make it simple to treat them and update them separately.

Where to start?

Make sure your site validates. Validation means that the code for your site confirms to the rules. The litmus test for validation is http://validator.w3.org/.

Your site should also be section 508 compliant. There are several tools for testing for letter–of–the–law compliancy; the most popular are http://www.contentquality.com/ and http://bobby.watchfire.com. Even if your site passes muster with these sites, the only surefire way to guarantee that your site is accessible is to use an accessibility consultant.

I’ve covered only a few of the many benefits of standards compliancy, but you’ll find the payoff is immediate. Talk to your Web development team. Make sure they care as much about standards as you do.