Click here to print.
Click here to print.
Posted By Amy Hoy On 20th November 2007 @ 17:53 | 78 Comments
The phrase “user experience” is quite a mouthful. Even the acronym is kinda scary: UX, UXP, or sometimes UXD (D for “design”). It pretty much looks and sounds like the noise you make when you puke. Paradoxically, this means that “user experience” actually has a negative user experience — because, you see, the very premise behind the discipline is to make people’s lives better, happier, and easier, and thinking about puking generally does none of these things (UXP! Hello again, dinner!). The idea goes, if you make your users’ lives better, they’ll make your life better in return. Sometimes even with money! Even aside from the acronym/upchuck problem, UX(P/D) is indeed a discipline with a bit of an identity crisis. Is it design? Is it marketing? Is it user interface? Is it business analysis? Is it sitting around a campfire, holding hands and singing kumbaya?
The short answer is: Yes.
The long answer is a bit more complicated, and reads much like the ultimate chapter of Ulysses.
But I assume you’re not on Vitamin because you’re in the mood for Joyce, so this is a practical article, with a real, honest-to-god purpose. Real world applicability, even! And also commas.
In the next 20 or so minutes, you’re going to jog, climb, and tire-hop through a UX boot-camp that will leave you with some practical new knowledge that you can immediately put to use. (And hopefully not thinking about puking, even a little bit.) Even better, you’ll be learning through the time-honored tradition of ripping apart other people’s work as an object lesson.
Programmers, marketers and biz folk: pause before you run away. You may find that these ideas are useful to you, too.
Your mother always told you first impressions count, and the same is true of web sites. You don’t get a lot of time to sell yourself to a potential customer who loads your page; most people are lazy, and more importantly, impatient. You have to go the extra mile, because they won’t (and that is the natural and proper order of things). All the research seems to indicate that you have mere seconds to convince a shopper that he or she just has to have what you’re selling (or offering for download), to hook ’em and leave ’em wanting more, but not too much more.
Thanks to their huge relative importance, first-load experiences are so easy to get wrong. On the other hand, they’re easy to improve, too. You can extract a lot of value from just a few simple changes. And that’s what we’ll be focusing on today.
We’ll get to the practicum in just a moment but first, let’s talk — very briefly — about some super basic UX tenets:
Keep these ideas in mind as we move through the rest of the article (in other words, now’s the time for the obstacle course: look alive!).
Time to get our hands dirty.
If you come from a design background, you probably don’t go to Photoshop or HTML/CSS first thing. In fact, the actual designery stuff — colors, type, layout, image selection, etc. — probably comes last in your process. So much of a designer’s role is not to dictate visual choices, but to ensure that the thing is functional, after all.
Me, I always start by trying to read minds.
Whenever I’m going to design the user interface for something — it really doesn’t matter how simple — I do a few little exercises to get inside the user’s head. One of these actually involves flowcharts. I try to figure out what the user is thinking as she attempts to complete some kind of task, rather than what she’s clicking or doing or where she’s going. I try to go for the internal state rather than the external one.
Here’s an example. Let’s take a simple case: shopping for a new web browser. Web browsers are something that most people understand already, or at least most people who are shopping for them do (and the rest insist on calling their web browser Microsoft or Earthlink and thus are easily identified). So, according to my best guess, a user’s thought and decision-making process might look something like this:
If it helps, you can imagine somebody (somebody who’s less savvy about the topic than you) sitting next to you, pointing at the screen and asking you questions. (Be sure to also imagine yourself equipped with a Buddha-like patience.) Or call your Mom. Many of us designer folks tend to find the “Mom test” to be quite effective. (Your mileage may vary — it depends on the make and model year of your unit, of course.)
And then, once you have your rough thought process sketched out, you can just turn it around when you get to the design process itself. Our visitor wants to know if it costs, and if so, how much. Our visitor wants to know if it’s safe. He wants to know if he can even run the thing before he bothers to expend any more mental effort. He wants shiny, pretty things.
That’s almost like a spec!
Let’s take this to its logical conclusion and dissect some browser maker’s web sites. I just so happen to be in possession of some year-old screenshots taken of the landing pages for two popular web browsers, Firefox and Opera. I used them quite successfully for UX talk I gave at OSCON 2006. I started by talking about the flowchart above, and then the browser sites and the things they did right and the things they got very, very wrong. The audience really got into it. We actually had a discussion. It was great.
Since that was such a success I figured I’d try for a two-fer.
So here, for your viewing pleasure, are screenshots of Firefox and Opera’s sites circa OSCON 2006:
Superficially, they look fairly similar. They’ve both got big, bold sections up top. They both have green download buttons. They both have links for more information about the browser. They both have a logo in the top left and some navigation buttons up there as well, for good measure.
But in terms of user experience, they really couldn’t be more different. I was delighted to find such perfectly polarized examples so easily when I was working on my talk. (And in case you’re wondering why I’m using such stale screenshots, there’s a reason. We’ll look at the modern versions, too.)
So how does Firefox’s old site design stack up to our list of tenets?
Check out the green to red ratio (click for a larger version):
1
The good:
The page works, pretty much. And it exudes trustworthiness and respectability (and rightfully so).
The bad:
All in all, though, my feedback for this landing page is almost overwhelmingly positive.
The negatives only stand out because they’re surrounded by so much awesome.
Now that we’ve checked out the model child, it’s time to move on to the one with the messy room, angry music and seditious haircut:
2
Oh, Opera from the past … where can I even start? You could go so far if only you’d focus and apply yourself.
You probably noticed that the green to red ink ratio is quite different for the Opera site. Somebody made a lot of elementary mistakes when they put this page together. The good news is, such mistakes are also easy to avoid and you can usually fix them without too much trouble, too.
The good:
The bad:
There’s a lot of red ink there, but almost all of the individual mistakes fall under one single root problem: lack of focus.
Failing to define and then rigorously defend a single focal point is the easiest — and worst — thing you can do when designing a landing page for a product or company. You can try to be all things to all people but what you’ll end up with is not a delicious goulash but a nasty concoction you really, really won’t want to put in your mouth. Or near your mouth. Or in the vicinity of your body—say, a 100 mile radius.
Time for a little time travel. Here are Firefox’s and Opera’s respective sites circa right now:
As you can see, Firefox’s effective page has remained much the same. I personally would advise the designer to resist the urge to replace the screenshot with the trendy, swoopy image of people using computers, but that’s a minor issue for sure. (Although I will say, it should still be clickable! And it’s not.)
And somebody has given Opera’s site an amazing, almost Apple-esque facelift. I don’t know who you are, Ms. or Mr. Makeover Artist, but allow me to be the first to congratulate you creepily in a Vitamin article: you done good.
Opera’s designer has trimmed down the competing influences, reduced the noise, and given the page a coherence that it completely lacked before. The Lifestyle and Creativity stuff is still kinda weird but at least it’s not really distracting and the Nintendo block isn’t going to accidentally steal clicks from the star of the show because it’s clear, now, what it is. (No deceptive “FREE!” burst here.)
Both pages now pass the squint test rather handily. Speaking of which …
I always use the Squint Test to evaluate landing pages. It’s as easy as saying “if the wind changes, it’ll stick that way”:
Close one eye and make the other go all fuzzy. Can you still identify the key parts of the design? Give special consideration to important areas of focus and the download/call to action button.
It’s much less fun to try to rip apart things which largely work, so this seems like a good a place as any to wrap up this article. If I can leave you with a parting suggestion, it’s to become an anthropologist of web experiences. When you find them in the wild, study them. Approach them with fresh eyes and take notes. What works for you? What doesn’t? That’s one of the very best ways to learn.
As the many comments will point out, Opera is now free. When I last actually tried to download it, it tried to sell me a version for $29. But apparently that was optional — which I never found out because the moment I saw dollar signs, I quit the process.
Article printed from Vitamin Features: http://www.thinkvitamin.com/features
URL to article: http://www.thinkvitamin.com/features/design/product-pages-so-much-suck-so-easy-to-fix
Click here to print.