LearnProduct pages: so much suck, so easy to fix


Amy Hoy
writes on November 20, 2007

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.

First Experiences Last a Lifetime

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.

User Experience Basics

We’ll get to the practicum in just a moment but first, let’s talk — very briefly — about some super basic UX tenets:

  • Be nice to your users and customers (and potential customers).
  • Design as if your main goal is to inform and educate.
  • Be honest and forthcoming, while you’re at it.
  • Help your users and customers to do what they want, not what you want them to do.
  • Be consistent with your message and quality of service (and I’m including software design here, folks).
  • Scientific, measurable “usability” doesn’t necessarily make for a good experience.
  • Good design makes people feel good.

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.

Practicing Unlicensed Telepathy

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!

Browser Sites Deconstructed, or, An Object Lesson

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:

Old Firefox

Old Opera

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.)

Firefox 2006: Deconstructed

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):

Click to see big version

The good:

  • the branding is clear
  • you can’t possibly wonder which version is currently on offer, or which browser
  • the navigation at the top is there, but fades into the background until the user wants it (thanks to its light, neutral color scheme)
  • the page is segmented into two main portions, and the one with the most visual weight is also the most relevant one
  • it passes the “squint test” (described later)
  • the big, fat download button can’t be missed
  • there’s a screenshot, which is always a good idea (many people will completely ignore a product without screenshots)
  • the screenshot includes the Info window for the app itself, for an added tasty nugget of context
  • the screenshot and download button are contextualized for the user’s platform — in my case, OS X
  • once the download button captures the user’s attention, there are further links below it to information they might need before clicking the big, tempting button itself
  • there’s plenty more info below the blue banner for users who are more inquisitive than us hair-trigger downloader types
  • and they didn’t slap those award icons all over the top part of the page, which would muddy the waters (or possibly the screenshot)

The page works, pretty much. And it exudes trustworthiness and respectability (and rightfully so).

The bad:

  • you can’t tell from my screenshot of the product site, but the screenshot of Firefox can’t be clicked — and that’s a bad idea because users love to click pictures
  • the product description text above the big fat button is, as my scratchings indicate, mostly marketing drivel
  • the big green button wasn’t a button: you couldn’t click anywhere on it (at least you couldn’t at the time in Safari) and it didn’t change on mouse-over
  • they could have exploited browser detection to suggest why I might want to switch (as I was using Safari), or to tell current Firefox users if their current browser is the most current
  • there’s no search box handy
  • they could have also pushed the community more

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.

Opera 2006: Deconstructed

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:

Click to see big version

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:

  • big green target button means the page half-passes the squint test
  • the button informs you which platform’s version you’ll be getting if you click it
  • links are provided for potential customers to find out more about the product before downloading, and they’re not buried
  • there’s a search box readily available
  • overall, the impression is fairly attractive

The bad:

  • the banner heading with all the people, names, and the need to “choose” a person to find out more about the browser is not only distracting but also confusing
  • it’s also mushed together out of disparate bits of stock art (and it’s obvious that this is the case)
  • the whole “choose your style” thing with a bunch of painfully young/painfully hip people just screams we’re trying really hard to be relevant! look at us, we get it!
  • and people are becoming savvy about the whole “add faces! that’ll give you instant interest and impact!” marketing maneuvers
  • the overly boxy/clever design elements draw the eye away from the main area of the page
  • the download button says “Free Download” but, in fact, Opera is not free (but hey! the download itself doesn’t cost!) — people don’t appreciate this kind of sneakiness (Update: Please see the addendum at the end of the article. Thanks.)
  • there’s no written product information about their main product — the web browser for computers (as opposed to portable devices) — anywhere on this page
  • right below the big banner area, there’s a big distracting “Free!” picture which will draw a lot of people’s clicks, but if you read the small text you’ll see that this is actually for an entirely different product (Opera Mini)
  • the icons for the links to the right of the download button are visually redundant and half of them don’t really make sense for the link
  • there’s no link to download versions for other operating systems than the one it identified you as having
  • the top nav bar/logo area is too large and has too many tabs (but this is a lesser sin)

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.

Fast Forward to 2007

Time for a little time travel. Here are Firefox’s and Opera’s respective sites circa right now:

Firefox today

Opera today

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 …

The Squint Test

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.

The Case is Rested

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.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

0 Responses to “Product pages: so much suck, so easy to fix”

  1. I always get my grandma to test my user interfaces, if she can use it anyone can 🙂 Nice article many thanks.

  2. thanks admin good post

  3. You have really imparted useful tips/ knowledge

  4. They both have a logo in the top left and some navigation buttons up there as well, for good measure.

  5. The graphics need to be replaced as Opera is free since Version 8.5.
    Prior to that it was an adware (not much annoying text ads taking a line space)

    Anyways there is no deception in that screenshot, it is free.

  6. The graphics need to be replaced as Opera is free since Version 8.5.Prior to that it was an adware (not much annoying text ads taking a line space)Anyways there is no deception in that screenshot, it is free.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop