Why Beautiful But Dumb?

Good information architecture balances a lot of competing elements: design, business needs, marketing needs, stuff the CEO wants, things the tech department wants to try out, and user needs. Without IA ,the web, and the world, tends to start drifting towards what looks cool (the beautiful part) in favor of being smart (hence the dumb part).

Wednesday, January 26, 2011

How the TED.com home page ended up with the same problems as a public school's lice flyer

The other day my son's school sent home a flyer that looked like an ad for a service that promised to rid your school-aged-child of lice.  (Yay, large urban public schools.)  I was about to toss the flyer in the garbage when I happened to notice printing on the other side, so I flipped it over.  On the other side of the lice ad was information about a school-wide event to check all the kids for lice.  The school wanted parents to sign the flyer and return it along with a small donation in order to allow them to complete the school-wide check and get rid of the lice situation that has been plaguing some of the classrooms since the beginning of the school year.  Whew, I thought, close one.

Not surprisingly, not all parents noticed the printing on the other side, and the vast majority of them threw it out.  That night an email went out from one of the parents in my son's class informing the other parents that they should retrieve the lice flyer from the garbage, as it was actually a permission slip and a donation form for an important cause.  Two days later, the school sent home another flyer for the lice check, this time without the ad on the other side.  Presumably this was annoying to the school, to parents, and in fact costly, as they ended up having to send the flyer out twice due to bad IA.

Since then, I've been mulling over in my head what could be said to the administrator responsible for sending out the initial flyer - what would be a good basic IA rule that the school could use to make sure they didn't waste paper and resources due to bad design decisions?  What could prevent the person in the office from saying, I know what's a good idea!  I'll just print the lice ad on the back side of the permission slip and save some paper! without thinking that perhaps the flyers might be placed into school folders with the ad side facing out.

In the end I came up with two rules, both of which are obvious IA rules but which need to be applied to the offline world as well:

Don't Skimp
The reason the school used one piece of paper instead of two was probably to save money.  Or maybe to save effort.  Either way, someone thought it would be a good shortcut.  But when it comes to communicating useful information, shortcuts come at a price.  IAs are constantly encountering clients who want to skimp by not doing usability, by starting a sitemap without first determining user goals or personas.  A perfect example comes from quora.com, where someone posted asking for advice on the TED.com home page.  I took a quick look at the home page and saw that no one had done any up front IA on the site.  The home page was a morass of video clips with ambiguous filtering tools on the side.  Is this really why people are coming to the TED site?  To watch a random assortment of video clips?  TED clearly didn't do any gathering of user goals, didn't determine what users might actually be looking for on the home page, and ended up in the same boat as my son's schools' lice flyer.

Get A Second Opinion
The person in the school's office making the flyer should have taken the flyer, walked down the hall to three people and said, hey, what do you think of my lice flyer?  Odds are that at least one of them would have replied, it looks like an ad.  You don't have to conduct a big user test to get feedback, just step outside the office and ask someone.  It doesn't really matter what you're designing, it could be a lice flyer, the TED site, or the Florida ballot - any of these would benefit from even the smallest amount of user testing.

None of this is earth shattering, but it needs to happen.  So we can do things like go to TED conferences.  And eliminate lice.

Monday, January 24, 2011

Parking (un)Structure

Good and bad information design is everywhere. Sometimes, a task as simple as paying to park your car in a garage can expose you to both ends of the spectrum. This week, a couple of business appointments gave me the chance to do just that.

My first appointment was in downtown Boston. As I entered the parking garage, I noticed a large sign hanging overhead, indicating that this was one of those garages where you pay in the building lobby before you get back to your car. Ordinarily, I take my ticket with me anyhow just in case that information is sprung on me later. Call me efficient; call me lazy; but when I’m ready to go, I want to go.

But what if I hadn’t noticed that sign? Clearly, someone had thought of that. In addition:

- There was a sign on the machine where you take your ticket.

- There was a sign on the wall as you wait for the elevator, both in the garage and in the building lobby.

- The payment machines were smack in front of you as you exit the elevator into the lobby, and say something along the lines of “Pay here before you go” in large type.

- As you wait for the elevator to go back down to the parking garage, a computerized voice reminds you to pay before returning to your car, at the machine looming 6 inches behind you.

While I was almost starting to feel assaulted by this information, I noted with gratitude all of the opportunities that had been capitalized on to apprise me of this practice. Normally, I side with the user by default in all circumstances, but if you somehow missed ALL of these hints about paying before you go…truly, you’re in your own world.

Compare this to my experience the very next day, taking the Amtrak Acela to NYC from a suburb south of Boston. As I entered the parking garage, there was no indication of needing to pay before leaving, but as is my practice, I took my ticket along anyhow.

Cut to 14 hours later as I’m dragging my weary self back to my car at 11pm that night. I took my ticket, cash AND my debit card out of my wallet (being a true IA, I had worked out all of the payment “what ifs” in advance) and drove to the gate. It was unmanned, so I put aside the cash and got ready to debit my way to freedom and the road home.

I put my ticket in the slot and received a message on the small screen saying “Unpaid ticket. See cashier”. There’s no cashier in sight and I’m starting to get a little nervous. Then I noticed, down below my line of sight, a small sign saying “Pay at the machine on level 3 before you leave. Thank you!”

Wait…what? There were innumerable ways to provide this information to me before this point, but instead, I’m being informed of the practice NOW, as I sit in front of the unmoving gate? Now I’m That Guy (or Gal, as it were) who has to put her car in reverse and make ALL of the other people in line back up so I can do a thousand-point turn to get out. I sheepishly waved my thanks to the other patrons (none of whom even looked at me; 11pm on a cold winter night is not high time for sympathy) and parked my car to head back into the building.

All of the cashier windows were closed for the night, there was no one else around, and no signage indicated where to pay for parking. I saw a kiosk, but that was to get your train tickets. I vaguely recalled something about level 3 on the sign, so up I went. Lo and behold, there were some payment machines tucked off to the side. From here, my transaction and exit were simple, but I was considerably annoyed.

One interesting thing to note is that I paid $33 to park for two hours when I had my good experience; and $5 to park all day for my lousy experience. Did paying so much money entitle me to a better experience? Maybe – the frustration I would have felt would have been compounded by the high price. That said, I do not think that the bargain rate at the train station makes it acceptable to have to run the gauntlet of aggravation that I did.

What I am sure of, though, is that the whole experience still beat the hell out of most air travel that I’ve done. But that’s a whole different blog post.

Thursday, January 20, 2011

How To Win Arguments and Influence People

IAs tend to spend a lot of time in circuitous arguments over usability issues with clients who don't want to spend money on usability testing.  Or sometimes it's a client who has read just enough about information architecture to be dangerous - you know the one.  He wants everything to be above the fold, insists that everything be "three clicks away" from everything else, and insists it's okay to do something a certain way because "that's how Amazon does it."

Here's a great resource for winning those arguments and others, from Web Designer Depot: Usability Resources to Win Arguments

You're welcome.

Friday, January 14, 2011

Navigation Tricks and Attempted Burglary

I didn’t actually try to break into my neighbor’s apartment the other day, but it might have looked that way.

Here’s what happened. Every day I face this usability nightmare going into and out of my apartment complex:

Apparently, someone ordered the wrong elevator buttons and signage. I live on the fourth floor but several times a day I have to remember to push the fifth floor button instead. So how did this labeling mistake end in a potentially uncomfortable social situation? Let’s look at it step by step and, because this is a blog about information architecture, consider the implications for good interaction design:

1. User Expectations
The first and most obvious problem I faced was bad labeling. I pushed “4” expecting to go to the fourth floor. This is a pretty obvious mistake in the design of my elevator, but labeling that meets user expectations can be a difficult challenge when it comes to interaction design. One of the primary tasks of an information architect is to come up with sensible labels and to group information within those labels in a way that meets user expectations. If simple logic doesn’t work, I usually fall back on industry standards to help solve the problem, which brings us to the next topic.

2. User Conditioning
I know that my elevator buttons are labeled wrong, so why did I push the “4” button anyway despite repeated use of the same elevator? One answer lies in the idea of user conditioning.

In interaction design, industry standards and best practices often exist because they are consistent with user conditioning (see this series for an interesting article on user habits). For example, the L-shaped navigation model is an industry standard because westerners are culturally conditioned to read left to right and top to bottom. Also, because it is used so frequently, users are further conditioned to recognize this pattern.

I’ve navigated thousands of buildings that have elevators in my life. In the vast majority of them the numbers in the elevator are the same as the numbers of the floor. Even though I know the label is wrong, I’m conditioned to push “4” and go to the fourth floor so it is very difficult for me to break out of this mental habit.

Even if it might be theoretically easy for a user to learn a different behavior (I can imagine the construction foreman of my complex shrugging his shoulders and saying “Oh they’ll figure it out”), don’t veer from standards without good reason. If you are being experimental or absolutely must place content in an unexpected place then you are going to have to work hard to shake users out of their conditioning.

3. Zombie Browsing and Banner Blindness
I really love the term “Zombie Browsing Effect” as used by Dawson in his article Human Behavior Theories That Can be Applied to Web Design. To paraphrase, zombie browsing, is the tendency to ignore information that is not directly related to a user’s immediate task or need. This is particularly prevalent after repeated use of a site. Dawson says this is why grocery stores sometimes change their layouts, and I’m sure it is behind Amazon’s thinking when they switch up the organization of their website from time to time.

A related idea is that of banner blindness. This is the tendency of users to ignore things that look like banners or are placed in typical banner positions (top of page, right of page) on a website.

Something like zombie browsing or banner blindness partially explains the next step in my story. I made it out of the elevator and into the hall without noticing a problem. There are at least three signs along the way to tell me I’m on the wrong floor, but these are all such common environmental objects that they were completely invisible to me.

4. Muscle memory
The other explanation for this step in my journey could be chalked up to muscle memory. Muscle memory is most often discussed in relation to athletic training. It’s the idea that a repeated movement will become ingrained and instinctual. I’ve always been fascinated with how easy it is to walk or drive somewhere and suddenly realize that you’ve ended up somewhere else entirely, like the house you used to live in. You’ve traveled that route so many times that once you cross it again your body takes over and guides you down the usual path. This is similar to the zombie browsing effect problem but is much more physical and fundamental in nature.

Muscle memory is an important factor to consider in interaction design. It is one of the key arguments behind making navigational patterns consistent. If you place a “more information” icon at the bottom right hand corner of images in your interface, you should always place it there because once they are used to it, users will automatically seek that position. It is even more important to be aware of standards. Users will have picked up muscle memory from other sites and other interfaces. Even if it is consistent throughout your site, placing a cancel button where a save button usually goes is likely to result in some frustration on the part of the user.

So back to my story, after stepping off the elevator and completely ignoring all signage, my legs took over for a zombie-like march to “my front door”.

5. Visual Clues
Which brings me to the final step. If there were some more obvious visual clues, like, say, the third floor was painted blue and the fourth floor was painted yellow, I probably wouldn’t have ended up at my neighbor’s door without noticing, but the two floors are identical.

The idea of landmarks and creation of physical identity is a keystone in the design of physical wayfinding systems. This idea also has application to virtual navigation systems. (See Mark A. Foltz’s thesis for an excellent discussion.)

While you shouldn’t go overboard and sacrifice consistency for the sake of wayfinding, it is important that different sections of a site have some slight variation. This may be largely a visual designer’s game, but information architects can help in terms of the content selected for highlighting on some pages and possibly with slight variations to layout or space given to content.

Of course, standards like breadcrumbs, and highlighting location on navigational bars can be helpful once the user has snapped out of zombie mode and figured out they are lost.

So where did I end up? Repeatedly jiggling my key in my neighbor's door and a half step away from some angry knocking. Thankfully, I snapped out of my zombie mode in time to see the numbers “308” magically materialize on the door I was assaulting. I was able to slink away quietly before my neighbor came to investigate the disturbance.

By looking at some basic interaction design principals I’ve been able to reassure myself that this incident wasn’t a sign of mental deficiency, I’m just a typical human being. Keep some of these concepts in mind when you are designing and maybe you can save your users from the same concern.

Tuesday, January 11, 2011

Rise Up UX Designers! Enough already with the details

Theresa Neil's article in UX Magazine on designing rich internet applications screens has been getting passed around the internet a bit, and it's a good example of why I wanted to start this blog.  While she does a lovely job explaining screen design in detail, complete with nice illustrations, the entire process of getting to that point is completely glossed over.  Neil says simply that there are three types of application structures (Information Process and Creation - I'm not even sure that that's true, but for now let's suppose it is) and that you should identify the user goals and this will lead to the clear and obvious choice of which structure you are going to use.  The rest of the article focuses on enumerating different screen types.  The problem with the article isn't that it's wrong in any capacity, but that it is yet another article encouraging the world of UX to focus on the details instead of the big picture.

IA is tough because you need to be able to get interested in even the smallest screen detail while still keeping the big picture in mind, stepping back and asking, "Why are we building this?"  In some ways it's easier to focus on the details than the big picture, so that's where the discipline tends to spill the most digital ink.  Yes, this is an article that is focused on screen design, and yes, it has lovely little pictures, which draw in the design crowd and make IAs feel like we're a part of making something concrete, but enough already with the articles on the IA process and the details.

IAs need to start asking the big questions on projects, pushing back on clients and making sure that users really want and need the thing we're building, that the overall structure meets those needs, and that we're focusing on the right areas.

I recently did some work on a site where the number one reason users visited the site was to purchase specialized types of books.  Unfortunately the site owners didn't control the book purchasing part of their company, which actually lived on another site altogether, so the site owners decided to create a content site, which no one wanted, with the idea that users would wander around looking for the books, they could sell some ad space, and then ultimately they would direct users to the site they knew they wanted to get to in the first place.  To which I say, ARE YOU SERIOUS?  

I could have spent a lot of time following the steps Neil mentions in her article and creating lovely, usable pages, but without the big picture in mind (in this case, the idea that the site was being created specifically to keep the user from his or her goal) it would all be for naught.

So to all the IAs out there I say, rise up and say no.  Site owners need to get their shit together.  They should not be allowed to build sites for the express purpose of annoying users.  For the book site, why not integrate content and advertising directly into the site selling the books?  The response to this was, we don't control that site.  To which I say, figure out how you can, and then spend your money.  Don't waste it building a site no one wants and then complain that no one comes to it.  Use an IA to find out what the real issues are in your company, because we can help you do that.  We're not just a group of people who like to figure out where to put the "cancel" button.  We can be big thinkers, that's what we're here for.  So let us do it.  And please, no more articles on how to make a sitemap.

Monday, January 10, 2011

You Know It's Bad When They Start Making IA Comics

As if the world needed any more proof, here's a FANTASTIC take on how bad information architecture is slowly driving the world mad, courtesy of The Oatmeal: How To Make Your Shopping Cart Suck Less.

Friday, January 7, 2011

Bad IA Award: NYC Taxi and Limousine Commission

A few years ago the Taxi & Limousine Commission here in New York decided to install TVs in the back of all cabs.  I typically immediately turn the TV off when I get in a cab because I like to enjoy a few minutes of quiet before I jump back into the madness that is Manhattan, but the other day I was in the cab with my 5-year-old son, and I thought it would be fun for him to watch the cab's progress on the live map the TV has.  So I flipped the live map on and pointed out where we were and where we needed to go.

"And what are those P's?" he asked.

I looked more closely at the map and noticed that there were indeed little P symbols all over the place.  I stared at them for a minute, wondering if perhaps this was some clever function the map designers had implemented where you could look up hotels, restaurants or something else on the map, before I realized I was staring at a map of all the parking garages in the city.

So let me ask: when you're in a cab, what is the only thing you without a doubt DO NOT need?  That would be a parking garage.  Congrats, NYC Taxi and Limousine Commission - well played.

In the event that the TLC decides to do something useful with the map, here are a few things people in cabs might actually need displayed on a map:

- transportation hubs (we were traveling from Grand Central Station, and astonishingly it wasn't indicated on the map)

- major tourist attractions (wouldn't it be nice for tourists to hop into a cab and see all the places they want to visit?)

- the ability to enter an address and see on the map where it is (any GPS can do it, you can too)

- traffic (Google does it, why can't you?)

- estimated time to one's destination

In the mean time, we'll all just wave to parking garages as we pass by.

Thursday, January 6, 2011

Welcome to Beautiful But Dumb!

Have you ever found a website so frustrating that you wanted to scream at the screen, or possibly personally dial up the individual responsible for designing the site and yell something like "Where's the RETURN PURCHASES BUTTON???" or perhaps "WHY WON'T YOUR STUPID SITE ACCEPT MY PERFECTLY FINE AND VALID CREDIT CARD?"

Actually, don't bother answering.  I'm sure you have.  I'm also sure you've had that experience offline.  Maybe you've excused yourself from the table at a restaurant and gone off to find the bathroom only to discover that this particular restaurant has decided to be cutesy with the signs for the men's and women's bathrooms and you now need to spend ten minutes trying to figure out which door is the appropriate one for you to walk into.  Maybe you've tried to follow street signs that made no sense.  Maybe you've spent five minutes staring at your cell phone, the one you use every single day, trying to find which icon is the address book, wondering if it's possibly your fault that you can't remember which icon that particular phone's designer chose to represent the address book.

If any of this sounds like you - welcome!  Come in.  It's okay, it's not your fault.  As the person who is frequently responsible for designing your websites (though naturally never the bad ones), I invite you to pull up a chair and settle in for a look at the world through the lens of an Information Architect.  My job is to advocate for the user - which would be anyone who uses anything - when companies are designing their websites.  Companies need to hire someone to do this because, while there are a lot of people already working on the company website, they are all interested in many things, none of which have to do with making life easy for the people using the site.  The designer is interested in making the site look pretty.  The CEO is interested in selling more widgets and having a generally awesome site.  The CTO is interested in using the latest technology.  The marketing department is interested in telling you the company's mission statement.  The ad sales department wants the site to look like a giant banner ad.  And that is why you can't find anything on a website.

On this blog I'll chronicle information architecture disasters both online and offline, as well as the rare example of good information design that makes me smile, and hopefully we'll all learn something interesting in the process, and help the world be just a little more user-friendly.