The user experience is everything

You can spend thousands of dollars on a shiny new brand, but that brand won’t be successful without a good user experience. The user experience is everything. It can either make or break the brand. And whether or not you’re creating a brand for the web or a brand for a product or both, and no matter how much money you spend and which marketing agency you choose, without a good user experience at the front of the charging army, your brand will fail.

Think for a moment about your favorite brands. What makes them your favorites? It probably isn’t the way the brand looks. No. How the brand works however, is another story. It’s the way products work, the way we’re left feeling after using the product (or website), that makes the brand memorable and successful.

Have you ever eaten at a little hole-in-the-wall restaurant and come out wondering why it wasn’t more well-known because the food was incredible? The name of the restaurant, or the brand, isn’t what’s going to keep you coming back or recommending it to others. It’s the experience you had while there.

Got a favorite toothpaste? Why? Is it because the logo is really well done? Or is it because it leaves your teeth feeling clean and your breath fresh?

What about a favorite antiperspirant/deodorant? How well it works – your experience with it – makes it your favorite.

Ladies, do you have a favorite brand of panties and bra? Is it because of the look of the brand, or the experienced comfort while wearing them?

Maybe you’re like me and have a favorite pen? While I love the simple “PILOT” logo, it’s the way the pen writes that keeps me buying them.

If you do a lot of typing, maybe you’ve got a favorite brand of keyboard/mouse hardware? I like Logitech because the keys have that perfect responsiveness and the mouse clicks are solid. Overall I feel that Logitech hardware is more durable too. But I have no idea what their logo is. All I know is the name and my experience with it.

You see, the way a brand looks doesn’t matter. Sure, it’s always nice to have a pleasant looking brand (and website) but what’s more important is the user experience behind it. It’s sad when the user experience gets the back seat. The user experience is what makes brands successful. Without the user experience the brand is nothing more than a design. It’s meaningless and pointless. It’s nothing.

The user experience is everything.

Marketing and the user experience: Black and white, not yin and yang

If you’re an information architect or someone who’s into usability and the user experience as much as I am, you’ll likely have had situations where user interface designers were forced to cave to terrible ideas insisted on by their clients. And in all likelihood you grew incredibly frustrated and wanted to pull your hair out. After all, we are the builders and organizers of the Web; we architect the user experience, and we don’t like when poor decisions are made that detract from a perfect user experience.

One of my growing frustrations lately has been marketing and branding agencies that dip their toes in the online pool. What ends up happening is that brand and the way the site “looks” takes more importance than how the site actually works. (Or some sort of “balance” is found. Balance means compromise. Compromise means giving up some of the good stuff. I believe there should be absolutely no compromise for a solid user experience. Period. End of story.) Client and designer preferences and tastes trump and the users goals take a back seat. When this happens we end up with a less than perfect user experience, and in my opinion, a failed website.

I’m all about a solid brand and I’ve seen some fantastic work coming from some fantastic branding agencies, but there’s a time and a place for everything. Truthfully, when it comes to the Web, marketing agencies just don’t get it. I’m talking about the agencies that “do it all”. There are, of course, larger marketing agencies that hire smaller web firms to do the web work. And why? Because they’re leaving the web work for the web professionals (just like we leave the branding and marketing work for the branding and marketing professionals).

Marketing and the user experience will never see eye-to-eye. They’ll never get along. They’ll never marry. Why? Because the goals don’t align.

Marketing goals

• Sell, win, gain mentality
• Dollar driven, selfish;  “How can we (the firm and the client) make the most money?”
• Fits the site to the brand
• Loves words like “catchy”, “pop”, “engaging”, “exciting” and “cool”
• Uses animations and loud, “catchy” things abundantly
• Rarely understands the beauty of simplicity and subtlety

User experience goals

• Usable mentality
• Goal driven; “How can I help the user accomplish their task?”
• Fits the brand to the function of the site
• Hates words like “catchy”, “pop”, “engaging”, “exciting” and “cool”
• Uses animations when necessary (which isn’t often)
• Appreciates simplicity and all it has to offer to the experience

As you can see the two are complete opposites.

Now, I do think it’s important to bring brands to the online world, especially since that’s where everyone’s at. But unlike television commercials, ad placement, and just any ole’ interruption, people don’t have time for the bullshit online. They’re task-oriented and goal-driven. It’s 2010 and “surfing the web” was something people did a decade ago. Now we pay bills, look for answers or jobs or information, we engage in social networking, and we communicate. Doesn’t it make sense then that websites should cater toward these goals first and foremost?

Now, I know there are a lot of ad and marketing agencies that hire in-house user experience designers. They hire them for that mental affirmation; that “lookie what we’ve got” attitude, without any real intent to utilize the skills they’ve just brought to the table. These firms, unlike other marketing agencies, have a privileged ability to put out pretty good work. If they don’t get stuck in the “design by committee” headlock. More often than not, in-house user experience designers that work for marketing agencies don’t get to make the final decisions. Those instead are usually left up to the committee (or worse, the client), and that user experience designer gets “demoted” to just designer doing nothing more than monkey work.

I’m not saying marketing agencies can’t do good work, they just choose not to because they don’t want to break free of their marketing mentality. They don’t want to step outside the cave. There is a point where ignorance becomes stupidity. In the goals above I stated the two could never get along. They can, it just never happens. If only marketing and ad agencies would grow a pair, make use of the excellent resource that are user experience designers (whether in-house or not), and let them make the web decisions, work coming from marketing agencies would look a lot less like marketing and a lot more like a usable website. If only, the web could get better one site at a time.

To put it plainly, when it comes to the Web, a brand is only as strong as the user experience it hosts. It doesn’t matter how great and “exciting” (or “cool” or “engaging”) a brand is, if the user experience sucks, the brand will undoubtedly take a hit. There is no excuse for a compromised user experience.

A few cases in point:

• Coke or Pepsi? I feel Pepsi is a bit too sweet, thus resulting in a dissatisfied user experience, thus tainting my like of the brand.
• Twitter and the incessant “fail whale”. I’m not the only one that wishes Twitter would improve. They’re image is hurt (even if just slightly) by the constant downtimes.
• Toyota. The brand is great. The “build your own” section of the site is not, making me feel less encouraged about buying a Toyota.

You see? Even great, internationally known brands can seem less great when the user experience sucks. The user experience should be considered first and foremost if you want a successful brand.

And to be quite frank, the only people who get satisfaction of a “cool” looking website is the client and the marketing firm who designed it. In most cases, users just don’t care what it looks like as long as it lets them do what they want to do and do it quickly.

Walk before you run: Why simplicity is (and always will be) the answer

JavaScript is ubiquitous on homepages all over the web. Images slide in all directions, things fade in and out and mouse clicks prompt color changes and other cool visual effects.

Despite all the Flash-like features, I’m all about simplicity. I believe that most people (myself included) use the web as a tool, whether it’s to pay bills or to find certain information. When you simplify what users do online, it almost always boils down to something with an end goal.

My task as an Information Architect is to create user interfaces that people can actually use. Having only the user’s end goal, I then try to reverse engineer the design by finding where the user starts. Simply put, how does a user get to where they’re going?

When it comes to user interface design, the simpler the better. Do those drop shadows really help your user achieve their goals? Maybe or maybe not. Do those gradients help or hinder your user from getting around the site?

My tip is to start designing with either wireframes or grayscale versions of the interface. Use intelligently placed and intuitive “paths-to-actions” that are clear, both visually and contextually. Our job as User Experience (UX) designers is to make our user’s task as simple and enjoyable as possible.

In many cases, it’s smart to evaluate whether gradients, drop shadows, whiz-bangs and other gizmos are needed. This might add extra visual appeal, but if those additional features slows a user down from getting to their goal, then it definitely takes away from the user experience.

Case in point: Google. According to a study released by comScore, 66.8% of the global search market is owned by Google. So why does most of the world use Google? Google’s homepage has nothing more than a search box and a few modest links. Bing, one of Google’s rival search engines, has moved towards a similar direction, albeit with a few more visuals. With their plain white background, minimalist layout and intuitive search functions, it’s easy to see that simplicity is one of the main reasons Google has captured a 58% increase in search query volume over the past year.

Simplicity, it seems, is a winner no matter how you look at it.

Don’t Make Me Think

In a digital age where videos are on demand and where information is merely a Google search away, we’ve grown to expect that access to content is a quick, instantaneous one-step process. Nowadays, if it takes too many clicks to get somewhere on a website, users simply click out of your site.

In a usability guidebook called Don’t Make Me Think, author Steve Krug focuses on designing for the web with an intuitive, as-little-clicks-as-possible approach. Simply put, the more time it takes to get to content, the less time a user will want to spend on your site.

With this in mind, it’s always good to remember that the first rule of usability is: “Don’t make me think.”

The second rule? “Please. Don’t make me think.”

Sure, there are a lot of in-depth studies about web usability and designing for a better user experience. In a growing genre of usability advice, case studies, books, reports, and presentations, one common theme is apparent: users shouldn’t strain their cognitive muscles to figure things out.

It’s all about maximizing the efficiency of your website and minimizing effort on the user’s end. Ultimately, it all boils down to how much time it takes for a user to think about the actions they perform online. Some things to consider:

• How many clicks did it take you to get to a specific page?
• Are the major sections of the site apparent on the navigation?
• Do you have to “muddle” through content to find specific information?
• How often are you using the back button?
• Can you tell what page you’re on and what the site is called?
• Does the homepage easily convey what the site’s about?

A successfully designed website is one that aligns with your intuition. Small steps like designing with ample white space will amplify calls to action tenfold. Whether it’s buttons, text, navigation, content or Flash animation, all elements of your site should be logically placed where a user can expect to find them. And, most importantly, whatever it is that you design shouldn’t force users to think about how to use it. As Krug notes, websites should be “self-evident, obvious and self-explanatory.”

If all sites were designed using this principle, we’d all be one step closer to a one-click society.

Think like a child; design like a pro

Recently I had a client send a mockup/wireframe of her idea of what her new site should be like. Most of the time I get offended when clients send me stuff like this because I feel it’s my job to do, not theirs. I came from the school of thought that we the designers were here to solve the problems of our clients – problems being anything from needing a website to increasing the usability and experience of one that already exists. And I enjoy solving these types of problems. However, this particular mockup I received wasn’t like the others. Unlike others, this one wasn’t trying to do anything but express an idea (as opposed to dictating or setting a baseline). I appreciated the mockup so much that it, instead of filing it away in the client folder I actually sat down and examined it a bit.

I’d consider myself an advanced web user. I know the ins and outs, the ups and downs and the insides and outsides of how it works. I can plan, prototype, design and develop so I feel I have a fairly well-rounded understanding of the web. I’m also a user. I use sites, navigation, I explore images, make payments, send messages, update content… write blogs… You get the picture. But this mockup opened my eyes to something new. And here’s why: this client, as brilliant as she is, doesn’t have the same technical knowledge of the web. She just knows if something works or not and how easy it is to use or conversely how confusing something is. Her mockup wasn’t done by a professional; it was done by someone with the mind of an innocent child – with a fresh, open, user-focused approach. And it was refreshing.

We all have instincts and we all listen to them on some level. When it comes to the web and usability, it’s our instinct that is usually the thing we should listen to. In this case, my client sent me a mockup of a site based solely on her instincts of where things should be. While it was far from perfect, it was interesting to see how she was thinking. She placed buttons where she thought they should be based on how she would use the application. She placed the navigation where she thought it would be most beneficial to her. And so on.

I believe that as one who practices best usability practices, it’s good to cater not only to our trained, experienced and honed instincts, we should also consider and cater to the instincts of our users. The innocent, child-like approach they take just might surprise you.

What if usability pros were president

If I were president of the United States of America there are some issues I’d address first and foremost. Here’s a just a few of those issues:

Building number consistency
Have you ever been looking for a specific building number only to end up passing it, then wondering how you passed it? We all know that the left side of the road hosts the even numbered establishments and the right side of the road has the odd numbered ones. None of that matters though when you can’t see the numbers you’re looking for. I’d require businesses and homes to ensure their building number is easily viewable from the road. To help lower the country’s debt, I’d fine those who did not follow this rule.

Road/Sign accuracy
The same thing goes for road signs. Luckily a good bit of the population has GPS devices in their car now, but for those of us who don’t, having inaccurate or missing road signs can be extremely frustrating. For example, as I was coming home from IKEA in Atlanta I was needing to get on I-85. There were plenty of signs for I-85 but one of them in particular was poorly placed. Rather than being placed more near the exit I needed to take, it was placed almost to early. As a result I ended up taking the exit before and going the wrong way.

In both of these above cases I’ll admit I’m not great with directions, but as Donald Norman said in his book The Design of Everyday Things, mistakes such as these aren’t the fault of the user, rather they’re the fault of the designer. Meaning, designers should consider all factors before making final decisions. The proper placement of road signs is just common sense, especially in a big city such as Atlanta which not only has the worlds’ busiest airport, but also has a a plethora of connecting interstates, highways, and roads. And locals will know that taking a wrong turn in Atlanta can quickly place you in an area of town that is questionable.

Consistent government websites
Have you ever seen any of the government websites? Have you seen the official website for the United States of America? Surprisingly both ‘usa.com’ and ‘america.com’ are parked domains. If I were foreign looking for information I’d probably start with one of those two URLs so why are they not what people might expect? Then we have ‘usa.gov’ which is painfully dated. Out of them all, ‘whitehouse.gov’ is probably the best. Unfortunately it’s not a site foreigners would likely search for when researching our country.

With so much pressure on Obama to fix and maintain America’s face to the world, why do we have websites that do a terrible job and representing how fantastic this country is? Let’s bring some consistency to our internet face too. There are tons of highly skilled designers and developers out there who would love to get their hands on some of these sites (myself included) and give them a much needed (and deserved) facelift.

Way-finding signage
Having traveled and lived in foreign countries I know how daunting it can be to navigate unfamiliar territory. Signage is something I think most people take for granted, yet it’s some of the most powerful form of communicating easily and clearly. My design class back in college had a project once where we each had to find a system of signage then redesign it making it better. Most of us, I’m assuming, know our ways around nearly all of the places we visit on a day to day basis so well that we don’t use the way-finding signage. It becomes part of the space, something we barely see. But what if it’s your first time to the mall, to a certain part of town, or even to this country? If our country is supposed to be welcoming everyone with open arms, then why are we luring them in only to let them get devoured by the impossible and inconsistent signage?

If I were president, rather than mucking around with healthcare, taxes, and other complicated and uninteresting stuff, I’d focus on the things that actually increase the quality of life for Americans and foreigners alike. A new healthcare system won’t please everyone and the gov’ment will never find a tax solution that satisfies everyone, but I’ll bet that nobody would complain if the above things were addressed.

Design inconsistency can hurt usability

Part of the user experience is how well the site or application works and how easy it is to perform tasks. The design of the web site or application helps visually guide you in performing those tasks. So when then design throughout the site is inconsistent, you’d likely assume the usability would take a big hit. In most cases this is true but in rare cases, such as the case with American Express, my user experience didn’t suffer despite the handful of design variations.

The American Express homepage is probably the biggest culprit. I counted five different design styles alone, including multiple font usage and a disconnected footer. There are also little superfluous design elements that really don’t add to the experience. Luckily though they don’t really take away from it either. Flash is used for the brunt of the content, but it’s content they could do just fine with Javascript. Despite this, navigation is clear and logging in to pay bills (which is what I do from the homepage) is easy and clear.

Clicking Personal Cards in the primary navigation will take you to the following page. You’ll notice the design style changes almost completely and the page is centered, whereas the homepage is flush left. The only two elements that hold the site together visually is the logo and the top navigation, which is consistent throughout. The Personal Cards page looks like it was done more recently. In fact, it’s apparent that American Express updates parts of their site independent of each other.

Next up is the Travel page. It bounces back to flush left alignment and takes on a new visual design. Functionality between these pages is really well done and finding information is easy. The Travel page actually looks and works a lot like the section of the site where credit card bills are paid, which was just recently redesigned, so I’m assuming that this portion of the site is fairly new too.

Then we move on to the Small Business portion of the site. I give this section a bit of slack because American Express does advertise OPEN apart from their normal line of cards, so in a way they’re allowed to be separate entities. Out of all the visible sections the OPEN section, I feel, lacks the most.

The other two pages of the top level navigation on the American Express site are different from each other as well as from the previously mentioned pages. Typically, this type of inconsistency is frowned upon, however, American Express manages to maintain the user experience and still provide functional, well thought out means of accessing information and performing tasks. However, American Express should still work on design consistency.

Proper form design and validation

With the arrival of “Web 2.0″, proper form validation has become increasingly more important. Rather than just reading websites we are actively helping create them. We’ve become a community who shares information and contributes to our social networks on a daily basis. Sites like Twitter, Facebook and Myspace are entirely user-driven, meaning all of the content comes from the users. How much more important is it then to make doubly sure your forms check the information entered?

Form design

Designers can take steps to minimize form errors prior to validation by designing usable forms. A usable form guides the user through effortlessly both visually and contextually. Most users don’t like to read and they tend to skim through forms very quickly. Keep this in mind when creating your form.

Forms should be easy to digest, easy to scan, and simple enough to allow the user to enter information and quickly proceed to the next field. If you’re like me you use you Tab button to navigate between fields, so make sure your ‘tabindex’ is correct and intuitive on each field. Most of us assume what the next field will be and mentally prepare to enter the requested data ahead of time. It’s bad form (pun intended) to have the Tab key take me to a field that I wasn’t expecting. Forms should be laid out intuitively. Keep the fields linear and put them where users would expect to find them.

Finally, use short, common descriptions for the data being requested and clearly mark required fields. Part of scanability is the ability to quickly see what’s being asked and what’s required. There’s nothing more frustrating than not being able to distinguish required fields from optional fields only to be slowed down and surprised upon submitting.

Form validation

Once the user has entered data and submits the form, it’s necessary to check the data for correctness and cleanliness. Most of the time data are stored in a database for retrieval later. Anytime data are being stored, it’s imperative that it’s kept safe and secure. The likelihood of anyone obtaining access to the database is slim, however code can be entered into forms that can wreck havoc from the outside in. Because if this, it’s important to make sure the data is clean, meaning it doesn’t contain malicious code. In short, you want the data entered to be very specific. We use validation for this reason.

There are two types of validation: client-side and server-side. Client-side validation uses software in the browser such as Javascript to check the data before it’s sent to the server to be processed. Nine times out of ten client-side validation ensures properly formatted data. With it you can make sure phone numbers are formatted properly, email addresses and website URLs are in the proper format, and that no erroneous data was used. Then, once data fits the specified format, it’s sent to the server to be processed.

Once the data gets to the server you can perform server-side validation. This uses code such as ASP or PHP to double-check the code before entering it into a database or sending an email or what have you. While the two methods can be used apart from each other, it’s always smart to use them both together.

Proper form design and validation is incredibly important to get right in a world where the Web is made up of information we create. And since the Web is so personal now, it’s important the information is kept safe and secure.

Open, says me

I’ve been reading Don Norman’s The Design of Everyday Things and I must say I am thoroughly enjoying it. It was written a few decades ago so some of the stuff to the reader might seem funny. For example, Norman makes a big deal about computers – because they were relatively new at the time of the book – and VCRs, which were also fairly new. The underlying principles of usability and the cognitive approaches to memory and mappings are still very valid today.

My favorite example thus far has been the example of door handles. When it comes to doors, you can push them open, pull them open, or slide them open, but take away the handle and you have no idea how to open the door. Handles are very indicative of function and as a result should be designed to clearly describe how the door opens, otherwise you slam your face into it, or, in the case of Mr. Norman’s friend, get stuck between two sets of glass doors.

Good design doesn’t need instruction. A door should be easy to use without having to use the words “PUSH”, “PULL”, or “SLIDE”, and handles should be designed obviously. Consider the following examples:

These doors are clearly made to be pushed open.

Without the words PUSH, you'd probably pull these doors.

These handles signify pulling. The PUSH label only makes it confusing. This company chose asthetics over functionality. These labels were probably added after the doors were installed because people were having trouble opening the doors.

This could be the Nielsen/Norman coming out in me, but notice the first set of doors is the least attractive but the most usable? It’s nice to make something look attractive, but if you take away the usability in the process, you’ve only made the product worse. Part of usability is reducing or eliminating the requirement for users to think. Essentially it’s dumbing things down for the lowest common denominator of users. Good designers can create things that are not only very attractive, but also very usable.

Usabilty means living up to users’ expectations

In any given situation, whether online or off, we all form models of how things are supposed to work based on our understanding of the objects we are manipulating. When our mental conceptual model differs from the system model, we misunderstand how to use the object or system and become confused.

For example, when we come across a button on a web page, we expect it to visibly react and provide immediate feedback by either depressing or illuminating. If we don’t get a reaction from the button as expected, we might assume it’s inactive – or broken – and we pause for a moment to double check our mental model.