Placement of Buy now/Download buttons

Question

Hello respected UX community,

I am working on a new website which will be used to sell a software application, but will also have a free limited version of it (not time limited, but feature limited). I need to place two buttons in a way to achieve as many purchases as possible. The buttons are Download, which is used to download the free limited version of the application, and Buy now, which is used to purchase the full version.

So, my question is: should the download button be placed more towards the center of the page (to the left) and the buy now button to the side of the page (to the right), or vice versa? In order to help you visualize this, I have created a .gif animation which shows both states, 2 seconds each (don't mind the template sample, please focus only on button placement):

Now, I have read many UX analysis about OK/Cancel, Yes/No and other similar button placements, but I think the semantics are different here. Should the users first spot the download button (scanning from left to right), meaning that they can easily download the free version and later have the non-forced option of buying it (like a scanning conclusion), or should they first spot the buy now button in an attempt to make them purchase the app early?

Another minor question which I have is about button colors. I know that orange/yellow/red button variants have proven to bring more call-to-action attention and much more conversions, but this website will be completely white-blue oriented, so I think there is no room for orange colors and it would make the button ugly. Also, I feel an urge to have different colors for Download and Buy now buttons, because when they are both blue, I think it's somehow confusing. But, which color should I choose then and for which button?

Answer 1

In my opinion you first have figure out what the scenarios are for a user that visits the site, and then pick the user up depending on their individual intent. I would suppose, though I don't know about your audience, the following:

• Group A: Most users will get to the site out of general interest, and maybe want to try the software

• Some (but significantly less) users will already know that they want to buy the software

  • Group B: some of whom will be users of the free version who decided to make the conversion

  • Group C: some because they already saw the full version or got a personal recommendation strong enough to encourage immediate buying of the product

Beware that these numbers are solely based on my gut feeling, so you might want to do some research amongst your specific target audience to make sure you're steering in the right direction:

• Group A ~80%
• Group B ~15%
• Group C ~5%

Assuming that group B will to a high degree be directed to a specific landing page out of the free product version, that would leave you with about a 94% with download intent and 6% with buying intent on the home page. Pure guessing in numbers just to illustrate the thought process, this needs to be verified!

Now, depending on the real numbers you get out of your research it will be pretty clear what action should be more prominent. Since you're really not offering "various plans", I don't think the analogy to feature tables is applicable in your case. Instead, look at products that do the exact same thing as your client's: Offer a free, restricted version.

• MAMP offers download free & buy pro at the exact same weight
• FontExplorer hides both, download & buy, away in the depths of the site
• Balsamiq also doesn't promote either option, yet they have the special advantage to offer a live-demo launch, which – in this case – is similar to a free version
• Things refers to the AppStore and offers a free download at about the same priority
• OmniFocus goes with a slightly stronger download-button, yet both – download & buy – are surprisingly small in the header. Further down the download-button is clearly more important than the AppStore-button.

Now, we don't know how many, if any at all, of these have been tested against other options. My personal feeling – again, beware – is that if someone wants to buy the product they will invest the 3 seconds to look for a buying option. One of the most elegant solutions for this is, in my opinion, the way apple is doing it, e.g. here: iMac Page with buying option. The buy button is very easy to find, yet doesn't try to draw attention away from the content.

So the question is: What does the user want? Assuming from what I learned during my own projects, the answers will most likely be along those lines:

• The user wants to know that the trial version comes free
• The user wants to know what limitations there are before downloading it
• The user wants to know what the full version will cost
• The user wants to be assured that he can use the application to a relevant degree to form an opinion

Long story short, my feeling is that a solution like this would work great for you:

If this were my project, I would use a version like this and a version like your original for some qualitative user testing and then run A/B tests in the live version. As has been stated already, it is inevitable to do those tests on the live system, because only then will you get data relevant to your specific scenario.

Furthermore the goal of the site, in your case, has te be made clear. It can be confusing if downloads go up and, thus, direct buying-conversions go down in relation, while really – through the conversions through the trial version – absolute conversions numbers are going up.

Answer 2

IMHO, the "Free - Buy" looks more natural.

I think this is because I expect such a "table" to be read from left to right, with more features as you move from left to right, and thus more "expensive" deals.

Just Google for images of "feature tables", and you'll see lits of such examples...

Answer 3

I would suggest trying them out with an A/B test and seeing which converts better. Because the answer, to some extent, will depend on your market and how the up-selling in your application operates.

(e.g. if your user community regularly recommends solutions to each other, you may make more money by focussing on growing the free market than you would by focussing on immediate sales).

Also, setting up A/B testing for this means that you'll be familiar with the concept and can start A/B testing copy, etc. in other areas to see what you can improve.

In my experience you can never design the best possible conversion pages for sales on a first attempt. You need to try stuff and tweak. Doing it in a structured way with A/B testing is the way to go.