Offer an answer before the question gets asked

I'm going to give Bank of America a thumbs up and a thumbs down for two recent changes that raised my curiosity.

First, the positive. Bank of America (and a few other accounting/banking sites I've seen) seem to be switching to sign-in process that involves entering your username on one screen, and then your password on the next screen, rather than doing both at once. I don't know the research behind this, but my assumption is that this must be a more secure way of managing the login.

However, the first time I noticed that I wasn't being asked for a password, I got concerned. Did that mean that now someone only needed my username to access my account? It raised an alarm. However, right below the username field I noticed a link that said "Where do I enter my passcode?" Even without clicking the link, my concerns were relieved, because it was clear just by providing the link that I would, indeed, enter my passcode at some point to sign in. This is an example of smartly predicting a user's question and providing an answer without them having to ask. It saves the company time and money by reducing customer service requests, and it reinforces the user's confidence by being transparent and anticipating their questions.

Now the negative. I recently deposited a somewhat large check in my account. The pending deposit showed up immediately on my online banking. A few days later, however, a negative "deposit hold" for a slightly different amount appeared. Had it been the identical amount to my deposit I would have been less worried, but the fact that it was a different number, and that it was showing as a separate debit to my account rather than just a note on my original deposit, had me concerned that someone had somehow erroneously withdrawn that money from my account. There was no additional information, and even a search through customer support gave no explanation of a "deposit hold." I suspected things were probably fine and it was just an odd line-item while waiting for my deposit to clear, but to be sure I sent a message to customer service. They eventually confirmed that it was just a note until my deposit fully cleared and not to be worried.

However, they missed two key opportunities to provide information in advance, left a customer worried for a few hours, and ended up expending the time/cost involved in responding to an individual customer request. Had they included a clearer note with the "deposit hold," or even at least had an easily searchable answer in their customer support, they would have saved money and prevented any cause for concern.

I've seen similar examples of anticipating questions/concerns online, such as ING Direct adding a simple disclaimer to accompany a slight site redesign: "We gave our site a minor facelift. So if you notice anything different after you sign in, don't freak out. You're in the right place." Another smart move.

Anytime you are designing for the web, it's smart to brainstorm what questions your users might have, and to make sure the answers are provided or easily findable in advance. It's a win-win addition.

The road sign metaphor

I've mentioned before how I think road and highway signs are a really interesting example of usability in action -- they have to be extremely clear, concise, and informative, and it is literally a matter of life or death in some cases (consider a world without "stop" signs).

I've begun using them as a metaphor for web design in the hopes of making it easier for clients to get in the mindset of their site visitors. We'd all like to believe that people coming to our website are deeply interested in our materials and want to read everything we have to say about them. Unfortunately, it's much more accurate to think of your site visitors as ruthless hunters with non-existent attention spans who are scanning for relevant content rapidly, and are willing to toss you aside if they don't see what they want in 2-3 seconds (note, that 2-3 seconds is actually borne out in testing -- that's about how much time you have before someone hits the back button and leaves your site altogether if they don't see what they want).

So that's all well and good to get that in your head -- your visitors want everything fast and easy, and want to do as little reading as possible -- but I think you need to add a little more to the equation in order to figure out how to deliver that content.

That's where road signs come into play.

When you are driving down a highway at 65 MPH, it's generally not that hard to read road signs. They typically do simple things like list the name of a place with an arrow, or they indicate with symbols and short words whether there is food, gas, lodging, or other amenities available at this exit. A road sign wouldn't say "Turn right at the next exit if you're heading toward the greater metropolitan Toledo area, where we have a number of fine hotels and dining options for the whole family." It might simply say "Toledo" with an arrow, as well as "FOOD" and "LODGING" icons. Those thirty words have been boiled down to three words and an arrow. Was any valuable information really lost? And furthermore, if you were flying down the highway, would you have even gotten past the first few words before the sign was gone behind you?

This is a good way to think as you construct your site, particularly when it comes to navigation and basic site structure. You want to pick "content-heavy" words -- typically short words that clearly indicate the content they will lead to. And just as a signpost with 25 signs is going to be harder to parse than one with 5 signs, you want to keep the number of options to a minimum.

This is not to say that you should avoid writing sentences at all -- it's important to keep prose available, but make sure it's where it counts. You don't need to describe in detail how great your parking garage is, but you do need to provide directions that tell you how to get there. Conversely, if someone is trying to pick your next book to buy online, a simple title, author, star rating, and genre is not going to be enough -- a brief prose description of the plot, potentially with quotes from reviewers, is probably going to do a lot more to sell the book than just providing the bare bones. That said, providing a quick look at the genre and rating information on a previous page may be all you need in terms of navigation to get that visitor to the full product page.

If you're not sure how to set up the text and navigation for your site, it may be helpful to stop and thinking of your visitor cruising down the freeway, looking for a particular destination. What would they be able to quickly read on a road sign that would make them turn in your direction?

michaelhisten.com 3.0

It wasn't that long ago that I did a redesign of my portfolio website, www.michaelhisten.com. It was not a very dramatic change, it mostly focused on enhancing the content and involved adding my beloved color switcher. But as I started writing more in this blog, I realized I wasn't listening to a lot of my own advice when it came to my own site.

I was concerned about a few things -- one, the level of simplicity of the old site was so extreme that I was worried people would assume that's all I could do. To make up for that, I've ditched the "no graphics" concept and used some imagery and gradients, including using the font FD Helwoodica, an all-lowercase distressed take on my favorite font, Helvetica.

But perhaps my biggest issue with my site was that I was falling victim to that perennial trap -- thinking my content was more interesting than it was. Some site statistics bore this out, but basically, people didn't bother reading much of any of the content pages and just went straight for the portfolio section. To top it off, my portfolio examples did not have thumbnail imagery to give you a preview until you clicked on the name of a project. This, combined with some research into how other designers out there are presenting their profiles, led me to embrace the idea of a one-page website.

Yup, just one page, there's nothing more than what you see when you land there. Of course, clicking thumbnails gives you larger views (much larger than before -- more than twice as large, in fact) of each project, but now all those projects are front and center. I think the end result is that people will get a quick glimpse of what I can do, and they can then read a little bit in the area at the bottom of the page, and then I encourage them to contact me for more. If they want to read more about me and my design philosophy, the blog is right here. All in all, I'm very happy with the update.

Oh, and that color switcher is still there -- I still love the idea of giving visitors a little interactivity!

Designing for failure

It only takes going through a handful of creative projects to realize that virtually every tiny thing is done purposefully. Very little happens by accident, and because of this, one of my mini-pastimes is looking at common designs and trying to figure out how they came to be (or, in contrast, why antiquated designs went out of style). Last night I was pondering how the anthropomorphizing of food -- a smiley face on a popcorn box or a cup of soda -- became a successful marketing technique. And I've been wondering for months about the process that led to the creation of traffic signs -- perhaps the most vital instance of usability in action, as a failure to communicate properly could be fatal.

But I'd like to focus right now on the concept of designing for failure. Of course, an ideal system would make it virtually impossible for someone to fail, but even the most simplistic and clear designs are going to stump a few people, and sometimes failure can occur due to other complexities in the system. My shining example? Copy machines.



(Okay I know that's not a copy machine but at least it involves a cat.)

Jams in the copy machine are obscenely commonplace, as anyone who has worked in an office knows, and they can be extremely frustrating. But they're unavoidable; the mechanics of these machines are so complex that the smallest problems can trigger a jam. I imagine that early copying machines broke down so frequently that calling for a repairman became an untenable situation, and the "fix it yourself" process for un-jamming a copier became a standard for the industry. You know the drill, open the side of the machine, pull out tray 3a, take out the jammed paper from some spinny thingy labeled 5c, etc. It's annoying, but it usually works, and you can get back to copying. The time and cost savings of not having to call a repairman is well worth the minor inconvenience of having to fix it yourself.

This same concept can be applied to just about any design, including a website. You can have what you think is the most sensible site structure and design possible, with a big clearly labeled button for some key task, only to find that sometimes your visitors just miss it entirely or click the wrong thing or otherwise end up lost and confused.

The keys to anticipating error involve eliminating opportunities to make a mistake (ahem), and offering alternative paths to get to the desired result if the visitor misses or doesn't understand the primary path. While a lot of web visitors will resort to the back button and try again, you have to remember that the back button may be taking them off your site altogether. For example, let's say they search on Google for something in your industry and use the word "compare" -- this may take them to a page on your site which compares your various products. But if the visitor was looking for comparisons across a variety of brands, rather than just within one brand, the page won't be what they want, and they may end up at another site altogether. But if you have a prominent link that says "Compare to the Competition," well they just may click on that and stay with you on your site.

Other suggestions to keep visitors on the right path: use logical naming conventions (e.g., "About Us" is much more intuitive than something like "Our Way of Thinking"), provide alternative paths (e.g., include a search option, and highlight relevant contextual links on key pages, etc.), and remove anything that does not hold a lot of value to the user (a page full of marketing copy may show up high on search results but will likely not actually provide the hard info the user is looking for).

Plan for the copy jam. If you do, your visitor will be able to get back on track to find what they want rather than abandoning you entirely.