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:
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):
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:
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:
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.
Update
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.
Hate to be a stickler, but isn’t Opera free?
I downloaded it for free and use it for free. I’ve never had to pay a dime for it.
I also don’t get the “free” remark. Obviously, it IS free (but as in “beer” only, that’s another thing and why should they say it on this button?)
I liked you breakdown of what was positive and negative about the current /past pages. You did a great job in breaking it down with simplicity. I also agree with Marcin’s comment about the browser cost. There site states that it is free http://www.opera.com/products/desktop/features/
BTW, their current site does not reflect the 2007 screenshots you use in your article.
Another word on Opera not being free. it has always been free (but ad supported), around mid 2005 ad support was dropped and it became completely free. At version 8 I think.
Maybe this misconception is why Opera does not have the market share to so deserves.
I don’t know… it’s a good guess on your part as to what works and what doesn’t, but maybe you’re just being bitchy? Your analysis has no way of being proven right, unless you have access to metrics from within both sites.
A very poor article for Vitamin. Too full of generalisations (e.g. ‘users love to click pictures’) and much of the stuff under ‘bad’ isn’t bad at all - more suggestions of worthy additions.
A very good article for Vitamin. Enjoyable, creatively written, and full of practical pointers.
@Adam / @LSF, what’s wrong with referencing conventional design wisdom? I think it’s probably a pretty safe bet to say “users click on pictures,” “logos should be near the top of the page,” and “brown on purple is hard to read” without having to conduct studies (again) to prove it.
Hey everyone, thanks for the comments. I’ve responded to all of them (phew!):
On the Opera “non-freeness”: The last time I tried to download Opera (admittedly a while ago), it tried to sell me a copy for $30. There may have also been a free version, but I’ll admit I didn’t stick around to find out. It appears they don’t sell it that way any more. You can still “buy” Opera for the same price, although now they pitch it as a support contract.
@Adam & @LSF: There’s tons of “SCIENCE!” behind the “generalisations” I’ve made, in addition to simple anecdotal evidence from my (and many other designers’) years of experience. I figured that readers would be familiar with them, or piqued enough to go check ‘em out for themselves. The math of usability is often covered, the holistic view is not… which is why I wanted to write this article.
If you are completely unaware of the math, however, the UseIt site is one good place since Nielsen’s company does lots of quantitative research.
Nevertheless, quantitative research is never the whole usability / user experience picture. Not everything can be effectively measured, and just because something’s been measured doesn’t mean that you’re getting a true picture of reality because of the vagaries and inaccuracies involved in any kind of statistical endeavor. Basic statistics 101 here, of course.
Oh… and yes, the Opera site has changed in the past 2 or 3 weeks since I submitted the article. Such is the editorial process!
Funnily enough, though, they once again addressed all of the issues I pointed out as not-so-hot, even in my final executive summary (and no, I never sent it to them). (My original list of issues goes back to when the original bad design was current, OSCON 2006. I didn’t write them up post-hoc having seen the redesign. Both redesigns were a surprise to me!)
Cheers,
Amy
I think this article is fantastic. I think Amy found two sites that described what she meant in detail. Any general comments made by Amy reflect her level of skill in UNDERSTANDING people. Its not about what the programmer wants, nor about what the CEO wants. It is all about what the end users of the site need and want. Some of my best designs come together by doing what “feels” right in that situation given the user base and company identity.
We are humans first, then designers, programmers, creative directors, etc. If we would think like _humans_ first, it might make our job a lot easier.
Well done Amy. It was a fun read, and useful too!
Great design review and explanation, Amy. Looking forward to reading more of your work,
Hi Amy,
Thanks for the interesting post.
Opera is indeed 100% free. We went free in September 2005. We do have plenty of free support through our community website. Our premium support is as you write commercial, much like Mozilla.
Now go and give Opera another spin - I’m sure you will find lots of new things you like :)
Jan Standal, Opera Software
Last time I looked at Opera, and it was quite a long time ago, I was under the impression there was a cost, so like Amy I didn’t stick around. If in fact it was free then this proves Amy’s point to some extent.
One problem I have with this type of critical analysis of sites - there are plenty of sites that Amy would probably rip to shreds, but they work well because the content is so compelling.
You can have the best looking site in the world but if the content is crap people won’t stick around and they won’t come back.
Thanks for the article and the praise for our (Opera’s) new site
As mentioned previously in the comments, we are free and were free at the time of the first screenshot.
Is there any chance of removing the red comment about us being deceptive for calling ourselves free though? This is deceptive in of itself, especially as you say it was communicated to a large audience. Sometimes it is quite difficult to communicate to people that we are now free ;)
Opera for Desktop is free of charge (and has been since version 8.5). You can’t buy Opera for Desktop, but you can pay for tech support if you choose to. So it is not merely pitched as a support contract, it is all about access to tech support, and is not tied to the product at all (support purchase is not required).
It is similar to what Mozilla is doing through InfoSpan, but our support is done in-house. And you don’t pay per incident, but rather per year.
I find the squint test is the easiest way to see if your heirachy is working. Luckily for me, I can just take off my glasses.
Thanks, Amy, for the clarifications!
All in all, a great article.
Maybe people are being too critical because of the cowboy hat. (Being from Texas, I get that a lot!)
Oh…and I agree with the Opera guys…not everyone reads comments and could take away from this article that Opera is not free, even though you addressed this in the comments.
As to those of you who haven’t downloaded Opera yet, shame shame!
Woah great read! Amy keep the articles coming !!
Hi Opera people, I put in a request for an addendum to the article. Cheers.
And if I could make a suggestion, the phrase “Free Download” on your download button undermines your “We’re actually free” marketing effort because it sounds like “weasel wording”—the added word “Download” implies non-freeness somewhere, used car sales flier-style. I’m clearly not the only person who has misunderstood (or not noticed the change in) your new(ish) situation. You might even find it effective if you call out the change on your landing page—”You might remember us when…”
@Kevin, it’s true about the content. This article focused on landing pages, which are notoriously about superficial things to answer a user’s preliminary questions and interest them in the product. The content—in the form of experience with the product, site, or whatever—mostly comes later.
However, even sites with great content benefit from good experience design, since good visual/experience design seems to increase the chances that people will stick around, investigate what you’re about, remember you, and take you seriously/find you credible… so sez the research.
Re: Opera being free — The article’s been updated so hopefully there won’t be further confusion about this. It’s really my fault for not catching it during the editorial process, not Amy’s. Sorry about the confusion.
Excellent article. Very interesting to compare two pages with exactly the same purpose. I’ll be sharing this with my colleagues.
“And if I could make a suggestion, the phrase “Free Download” on your download button undermines your “We’re actually free” marketing effort because it sounds like “weasel wording”—the added word “Download” implies non-freeness somewhere, used car sales flier-style.”
To be fair, in 2006 Opera’s free-ness was a new thing. In retrospect it may have been better if it were worded differently, but I don’t think it’s a big issue in any case. I’m not sure I see the informative and tonal difference between ‘Free Download’ (as it is on the old Opera site) and ‘Download … Free’ as it is on the current Firefox site. If one is cheesy, then both are cheesy.
[…] ThinkVitamin published a lengthy article discussing the good and bad of Opera and Firefox’s Web homepages. […]
[…] ThinkVitamin published a lengthy article discussing the good and bad of Opera and Firefox’s Web homepages. […]
Thanks Amy for the great article. I think this is a great example of how user experience really changes from one site to the next and how we need to keep the user in mind at all times.
I LOVE the mom-test, I think that’s a great tool! We (internet professionals) sometimes forget how many many people still don’t use the internet in the extent that we do. User experience needs to take into account unfamiliarity with the web and make sure the user doesn’t have to hunt all over for what they’re looking for.
Again, thanks for the great article! Dugg.
http://www.favbrowser.com/internet-explorer-ie-vs-safari-vs-firefox-vs-opera/
Something like this, just with Microsoft and Safari home pages as well.
The snarky “No deceptive “FREE!” burst here” comment (in the section labeled “Fast Forward to 2007″) is unnecessary now that you know Opera is, in fact, totally free. Thanks.
@BAMAToNE: The “FREE!” burst is deceptive because it leads people to click on it rather than the main download button. And the “FREE!” burst is for Opera Mini, which few web site visitors are going to have an immediate use for. Thanks.
Introduction to usable design - Vitamin…
[…]Using designing pages for people shopping for a web browser to explain good user-focused design.
Saved By: best-of-3 | View Details | Give Thanks[…]…
“When I last actually tried to download it, it tried to sell me a version for $29. But apparently that was optional”
Either you are talking about pre-8.5 versions, in which case you could pay for the browser to get rid of ads. Or you are referring to paying for support, which is not the same as “optionally paying for the browser”.
I must say I love the article, but as you claim with user design: some times it is the little errors that detract from the big picture. Your simple addendum that opera is free, which is really presented in a back-handed-sorry sort of way, is not enough of an edit in my eyes, and people will keep making comments to the fact.
The screen shot should be updated. Your comments should be updated in ALL occurances. “(No deceptive “FREE!” burst here.)” still sounds like you are referencing a pay-for opera. Intention or not, it should be fixed.
Opera always had a free option. Before it was ad supported for the free version, now it is 100% free, no ads. Paying for support should be a non-issue, yet you still feel the need to bring it up.
Disclaimer: I am in no way associated with opera other than being a very satistied user. I find when I develop web pages, I code for opera, and fix for other browsers to generate the best results. I just think the software, which is faster and more secure (main features of any browser IMHO) than any other main stream browser out there, should be given the chance to reach as many users as possible.
Keep in mind, as obvious as it was that paying was NOT the only option, and moreover IS NOT even an option anymore, you didn’t realize it. By leaving your comments as they are, you are propigating the confusion. As a UX expert, that should be somthing you try to avoid.
For the needs of her article, Amy obviously spent a lot more time on the front page of opera.com than the average user would. Yet she was still confused about whether or not Opera was free.
Doesn’t that actually prove her point a lot more than if she had gotten that information right ?
In the end, who lost a customer?
Now that the fact that Opera is free has been clarified could we just stop trolling and get back on topic ?
Meta-comment: using red and green as “contrasting” colours — especially in a design critique context — is a poor choice: a very large proportion of your intended audience (like me) will not be able to see the difference.
[…] Vitamin Features » Product pages: so much suck, so easy to fix (tags: design inspiration usability) […]
@Damien: Argh! You’re right. I took off my Usability Cap when I was making the callouts themselves, focusing entirely on the screenshot. I would redo them now except the originals were lost in a HD crash. I forgot to back up the Skitch history folder. Luckily the article itself was firmly backed up. Time Machine came a month too late for this poor sop.
Sorry about that. I certainly won’t forget such an elementary point the next time around.
@Cody, I appreciate what you’re saying, but if addendums are good enough for The New York Times, they’re good enough for me.
Having spent the last two years leading design efforts on landing pages for products, I think this article is well pointed. We were doing cell phones and the guiding lines (as much as I didn’t like them some days) were simple:
1. Big phone
2. Big free
3. Big call to action
4. Time sensitivity messaging
5. Photo of attractive woman (optional, but not if the CEO saw it)
In testing and in reality, people clicked on the phone image, not the “buy now” button, more often. When these elements were in concert and presented cleanly, we had very high converting pages.
So what is the point of these landing pages? Even though it’s web browsers, it’s still a matter of conversion. Add users. Gain market share. Steal underpants. And in that regard, when a tech person can’t tell what’s free and what’s not and the links are bad, it’s a bad page. Obviously Opera realized this as they redesigned it.
It simply wasn’t converting
Conversion = Profit. Well, generally. I’m not sure of the profit model for Opera, but I think adding users is still something that’s high on their priority list.
In regards to the “Free!!!!” vs not free discussion, Anytime I see the word Free now, I immediately hear “with new service activation after mail-in rebate”. That’s what working in the cell phone industry will get you. But Free has become a word that is generally responded with “well, what’s the catch?” And regardless of if Opera is now free or not, the screenshot illustrates the point: It was too confusing to be able to tell what was and was not free Especially for someone who had known Opera as a paid-software alternative to other browsers.
@Adam, everything on this article is based in standard industry UI assumptions. Things that work and don’t work and have or have not with human factors and user interaction for years. Just because you may disagree or not like the analysis doesn’t mean it’s wrong.
[…] Read more on Vitamin Bookmark to: […]
Tobie Langel said:
“Yet she was still confused about whether or not Opera was free.”
Why be confused? The page clearly stated that it was a free download.
If she refused to believe that, what else could the page designer have done? If someone is that distrusting, then the only thing that would help is to make that person try it out for herself.
You might want to update this because opera have seemed to take your advice. They have updated their design.
Again: redactions are good enough for the NYT, they’re good enough for me.
People, you can say mean things all you like - I don’t care. But if you can’t at least say something *original*…
[…] Amy Hoy: Product pages: so much suck, so easy to fix […]
Rory:
Apparently, Opera updated the design before this article was published:
“Oh… and yes, the Opera site has changed in the past 2 or 3 weeks since I submitted the article. Such is the editorial process!
Funnily enough, though, they once again addressed all of the issues I pointed out as not-so-hot, even in my final executive summary (and no, I never sent it to them). (My original list of issues goes back to when the original bad design was current, OSCON 2006. I didn’t write them up post-hoc having seen the redesign. Both redesigns were a surprise to me!)”
http://home.comcast.net/~stoppestcontrol/site/
stoppestcontrol@yahoo.com
Vitamin Features » Product pages: so much suck, so easy to fix…
[…][…]…
[…] This is a great little article I stumbled across on UX design for product pages by Amy Hoy. Check it out… Product Pages: So Much Suck, So Easy to Fix …it is good stuff… Bookmark to: […]
Nice article, Amy. It seems like it’s easy to start designing a page layout (probably subconsciously) based more on web design trends rather than with solid UX criteria in mind. A refresher like this is always useful.
[…] http://www.thinkvitamin.com/features/design/product-pages-so-much-suck-so-easy-to-fix […]
[…] Now and then we weave the Ajaxian car into the designer fast lane from the developer one as we see something interesting. This time around we have Amy Hoy talking about product pages as an example of how to do good UX(P|D|). […]
“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.)”
Just out of curiosity, where would a click on that image (or the one it replaced) take you? Or would it be the same as the “Download Firefox” button?
I think having it be a link directly to the installer is just as confusing as having it not be clickable in the first place. I guess it all comes down to user expectations, but if I hovered over the image and saw that it was clickable I’d have a hard time guessing where it might lead.
@DMC, I would personally link to a page that exposes the cool functionality of the product… with lots of product screenshots, maybe something fun and splashy (but of course informational above all else). My logic would be: a person who clicks an screenshot almost reflexively is likely looking for more screenshots.
But I would probably also give the image a little something to indicate what happens if you click it.
[…] Just came across this awesome article by Amy Hoy on web User Experiences. The much talked about User Expirence a lot of times either get overly abused or completely missed out. […]
[…] Entertaining stuff with nice visuals, as always. […]
[…] Esta es una de las conclusiones que se extraen del artículo que sobre Experiencia de Usuario se publica en Think Vitamin, acerca de la actitud que los proveedores de diseño Web debemos tener en cuenta a la hora de desarrollar el sitio Web de nuestros clientes. […]
Amy: Again: redactions are good enough for the NYT, they’re good enough for me.
As some one who is supposed to excell in her field, I would not expect that sentiment should apply to any part of your life. Outside of online development, I also love construction. I am building a cabin, and even though it is supposed to be a rustic place, everything in it will be built beyond the quality that I would expect from anyone else. I could say “well contractors wouldn’t worry about this… if it is good enough for them, it is good enough for me.” I have a lot of pride however. If there is work that has been done anywhere and tied to my name, I want it to excell. And if it doesn’t — I would choose accountability over defensiveness.
This isn’t about saying mean things, and I did my best to come off that way, because I knew that by driving you into a defensive position, there would be less of a chance of a proper revision. I don’t think anyone here was mean to you. Perhaps your defensiveness is then more evidence of your knowing you were wrong.
Being wrong isn’t a bad thing. Ignoring the fact is.
Me: This isn’t about saying mean things, and I did my best to come off that way…
Reading this over, I meant to say “I did my best not to come off that way…
haha, speaking of addendums.
@Cody: Yes, I could change the original article, and therefore hide my original mistake—and leave all the comments on the article out of context. I don’t think so.
I do excel in my field. And one of the reason I excel is that I don’t shirk from admitting I’m wrong, nor do I try to hide the fact that I have been wrong.
And your comparison is off. It’d be more like “If is good enough for the Super Awesome Professional Builders Who Everyone Respects, it’s good enough for me.” I didn’t say “If it’s good enough for Fox News, it’s good enough for me” for a reason.
[…] Vitamin Features » Product pages: so much suck, so easy to fix (tags: webdesign ux) November 27th 2007 Posted to Links […]
Haha, I love the fox news comment. I wasn’t meaning you should hide your comments and re-write your article, I am only suggesting that not all instances of the faulty info are explicitly stated to be false, and with the comments that have come through, it is obvious they are missing your addendums.
It actually parallels your statements, about how opera’s website did not properly convey what it was trying to sell.
Also, please don’t take my comments about you excelling in your field in any way as a challenge or anything. After reading your response, I re-read my text again, and I can see how that may have come off as a underhanded sounding comment. Not my intention. I do not know your work, however the way the article was presented, especially considering your intentions, I have a very good first impression.
Hi Amy, very interesting article.
How about a UX review for the Vitamin homepage - I really do think it needs one…
[…] Aus: Product pages: so much suck, so easy to fix […]
[…] http://www.thinkvitamin.com/features/design/product-pages-so-much-suck-so-easy-to-fix […]
[…] Vitamin Features » Product pages: so much suck, so easy to fix […]
The article is fine and understandable. It has been an informative and entertaining read. Some of the comments as well. I know because, I’m not a web guru — yet.
I was going to download Opera not long ago so i could test web pages. Soon as I saw a dollar sign I cursed a bit then went elsewhere, thinking it was a money scam.
As others have mentioned; the association of the word “free” and ‘get ready to get your wallet burned’ sure seems to be the same thing now days. Thats how I understand it anyway. So free to me means, ‘run the other direction quickly.’
Also as someone else mentioned; if someone who excels in the field had a problem with the site after a good hard look, imagine how a person like me, with minimal experience saw it. I wonder how many folks went and downloaded ‘that other browser’ because of it.
Thanks for the article Amy, good information and a little entertainment; and I don’t care if you do wear a cowboy hat.
Will everyone please stop rambling on about the Opera Free thing. Shit happens.
Don’t change anything, the Free thing illustrates a good point. Interestingly, Firefox ‘added’ the word free to their button in the redesign.
Fabulous work on the article. Nice to read through and say: oh! yeah… I’m a designer, not a beautician. And I’m glad to see the world appreciating truth over marketing gimmicks. Your audience is smarter than you think, and the sooner you stop being condescending, the faster you’ll earn their trust.
Cheers.
[…] I was reading a nifty article today on Vitamin and found a nugget worth sharing: The Squint Test. It’s purpose is to determine quality of design layout for a landing page. From Amy Hoy: “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”: […]
Haha, I love the fox news comment. I wasn’t meaning you should hide your comments and re-write your article, I am only suggesting that not all instances of the faulty info are explicitly stated to be false, and with the comments that have come through, it is obvious they are missing your addendums.
Very interesting to read a review of a landing page promoting a software. It’s always hard for us geeks to design such pages :)
This is one of the better vitamin articles, thank you very much. It’s interesting to note the usability of this article in itself, which i find quite refreshing. cheers.
I actually prefer the old Opera homepage!
imo it looks better and is more effective!
The squint test can come in very handy. Thanks Amy.
[…] Product pages: so much suck, so easy to fixAmy Hoy covers a lot in this article — from James Joyce and upchucking, to Firefox, telepathy, and Opera. Through it all she shows you how see through the eyes of a user and an experience designer, and how to use that viewpoint to improve your site. […]
[…] Product pages: so much suck, so easy to fixAmy Hoy covers a lot in this article — from James Joyce and upchucking, to Firefox, telepathy, and Opera. Through it all she shows you how see through the eyes of a user and an experience designer, and how to use that viewpoint to improve your site. […]
[…] Vitamin article by Amy Hoy on the successful design of product pages, with regard to user experience. Comparison of Firefox and Opera websites.read more | digg story […]
Yeah! thanks for eliminating my comment!, this is so pathetic!,
Cheerz! to the “YOU SEE WHAT WE WANT BLOG”!,
Not following your own advice makes me sad… Only some of the screenshots you posted are clickable. (I wanted to see larger the larger version of the new Opera site)
How does one become a UX expert? Does one start using UX jargon and start talking about UX matters and magically become a UX expert? Is this a self-appointed title? How does this happen? Does one get hired into a position of UX expert? “Hmm…I think we need someone who will think about what people want to see on our website…and we’ll call that person a UX expert”. Where is the research to prove any of this UX stuff and who are the people conducting this research? To me it’s mostly based on intuition and anybody can do it if they wanted to. UX expert = website psychic? At this point I don’t think the field is mature enough to be filled with “experts”. I think one becomes a UX expert when they actually conduct studies themselves. Until then one is a practitioner, using insight from an expert’s research.
[…] (RSS) En Vitamin analizan los pros y contras de las anteriores páginas de Firefox y Opera y comparan los arreglos llevados acabo en sus últimas versiones. Acaban con buena nota ambas. […]
[…] Vitamin Features » Product pages: so much suck, so easy to fix - […]