Fog Creek Software
Discussion Board




Creating online order pages that rock

What features and attributes do you all think it takes to make an online order page that rocks?  (By "rocks" I mean a page that converts well, is laid out well, finding the right colors that make visitors *feel* like purchasing more stuff, etc.)

Have you heard or read (or better yet, have you experimented!) about how splitting the order process up into multiple pages affects conversion?  Is this generally a Bad Thing (TM)?  It could provide the benefit of the first page loading faster because a lot of the html would be held off for subsequent pages.  Though I'm sure if you take it *too* far (splitting it into way too many steps) the overall complexity that you've added would surely negate any of those benefits.

So splitting up into multiple pages could be one feature (maybe not even a good one, since I've no data on that :-).  Any other features or attributes that you think (or know!) work well on your order pages?

Also, anybody know of any links to studies or whitepapers relating to order pages, or the order process in general?

Edward
Wednesday, April 28, 2004

Generally speaking, the load time of the HTML is not an issue, unless you're using hideously marked up HTML. There's little reason any page should be more than about 10K of HTML.

Brad Wilson (dotnetguy.techieswithcats.com)
Wednesday, April 28, 2004

Check out the Information Architecture community. Wodtke's "Information Architecture, Blueprints for the Web'" is a pretty good book. She does a detailed comparison of web shopping at, IIRC, Land's End and Nordstrom's to illustrate the types of  design issues you bring up.  www.boxesandarrows.com often has good articles and discussions.

Jim S.
Wednesday, April 28, 2004

Not to brag, (ok a little :) but I think our shop order page is pretty spiffy.  The only thing I don't like is that it doesn't show you your total on the first page, and it doesn't remember your info from order to order (address, name, etc.).

But it's designed to prevent you from ever submitting your order twice (refresh on any page won't resubmit your order, even if the browser asks you to post again and you do).  Also, if you make an error we surround the error parts with a big red box so you can see immediately what you did wrong.  And there is little help text around the fields to explain what went wrong.  I guess these are more traits associated with any web form than a shop in particular.
Since a lot of our visitors are from non-US countries, we have a link next to our prices which converts them into other currencies.

In our particular case we can avoid the whole shopping cart thing which greatly reduces the complexity of the whole thing.

Any feedback about the functionality of the pages is welcomed.  I'm sure there's probably a few things we could streamline.

Michael H. Pryor
Fog Creek Software
Thursday, April 29, 2004

For me the worst thing you can do is ask for unecessary information, the Dell order page does this and several times I have just abandoned an order because I couldn't be bothered to jump the hoops they were presenting.

Keep it minimal and simple.

Tony Edgecombe (www.frogmorecs.com)
Thursday, April 29, 2004

Make it as easy as possible for me to buy stuff. Simple.

John Topley (www.johntopley.com)
Thursday, April 29, 2004

Don't focus too much on the page itself, but rather on what happens afterwards.

I've "ordered" things online where after I click "submit", nothing happens.  No email confirmation, nothing.

I've "ordered" things online where a week after the order I get an email to the effect that "your order has been received for processing."  WTF??? You validate my credit card, and if it's good, send a packer out to your warehouse to get the stuff.  Are you so popular that it takes a whole friggin' week?

I've "ordered" things online where after getting the requisite acknowledgements, three months later I get an email stating "since we are unable to fulfil your order in the timely manner expected of our high standards of customer satisfaction, we are cancelling your order".  No further explanation.  The product in that case?  "Peopleware", ordered through chapters.ca.  bn.com had it to me within a week.

Get the back end right and I don't give a hoot about how the front end looks.

David Jones
Thursday, April 29, 2004

My only comment would be on shipping and handling charges.  I never buy from a web site that doesn't tell me what those are up front.  By extension, I guess I want you to give me all the information (full disclosure) before I give you any personal information.  I've abandoned orders several times because they wanted the credit card number before they'd tell me the shipping cost.

JT
Thursday, April 29, 2004

Michael, I've always been confused by the FogCreek order pages.  Though I've never used them to buy anything (I participated in a beta of fogbugz), just for upgrades.  When trying to download upgrades, etc. I found that there wasn't enough visibility.

It just asked for my customer number and email, with no indication on what was on the page behind it, if this was a one-time enter this and download no retries thing, or what.

Maybe I didn't read the directions enough, but thought I'd share.

Andrew Hurst
Thursday, April 29, 2004

You can leverage the time, experience, and research performed by others in this matter.  Try out the ordering process for major consumer Web sites such as Amazon, Barnes & Noble, LL Bean, Kitchen Etc. or other similar sites that aren't targeted at a computer savvy audience.

Their designs will reflect the experience and feedback of thousands of end users.  Even better, they will reflect the experience of thousands of NOT VERY COMPUTER LITERATE end-users, the best kind for exposing usability flaws.

Model your ordering process on several high-volume, consumer-oriented sites, and you will have a high probability that your ordering process will have a high user acceptance rate.

Dave

Dave
Thursday, April 29, 2004

(And, by extension, more sales!)

Dave
Thursday, April 29, 2004

Basically copy everything that Amazon has done.

Anonymous
Thursday, April 29, 2004

Umm, actually I second the Amazon thing. I find it absolutely amazing how many terrible ordering systems still exist. Just last night I tried to buy from 2 sites who kept giving me errors.

You HAVE to catch your errors. Trust nothing. Expect nothing to work, verify, verify verify, and have a plan if it fails. Trust nothing.

DO NOT USE javascript for anything mission critical. I use firefox on debian/kde3.3 and a lot of sites won't work at all for me even though yes I have javascript turned on.  Use javascript to make it easier for the user but OF COURSE don't use it to validate your data, duh, but apparently many people do.

Of course you avoid completely the "don't hit submit more than once or you will buy x times", that is plain moronic.

Allow for the usual: multiple shipping destinations. Save my credit card, be secure or give me the option to have you save it or not and then just have me select which one to use,  ..... heck, just do all the right things which you can see from Amazon.

But I repeat, when you write your code, plan for failure and react accordingly. One thing I do is have a mywarn and mydie function which will email me with the current state of the system in either case. A mywarn is when something I did not expect to happen happens and a mydie is when I know this value is set and it's an integer, but I check it anyhow, and it's not an integer and I have no recourse (no one ever thought this could happen so we have no alternative path) and I must die. I have a file with all error messages I pull one in case someone who ought to care ever finds out that yes this error can and has happened.

Expect the unexpected.  Save my data, send me an email to allow me to come back to the site to recreated where I was in case something fails (my connection could go dead).

Personally most of all of this is obvious but if you are a programmer like me no one above you will consider any of this. They will just say make it like Amazon and we'll test it next week.

must remain anonymous
Thursday, April 29, 2004

If you use a shopping-cart type system, make sure there's a page that lists exactly what was in the shopping cart, any charges you're adding (shipping, tax), and the total, BEFORE you ask the customer for any credit card information. Then, after you've asked for the payment info and the customer has clicked "submit" (or whatever), repeat the list in some sort of order confirmation, preferrably one that's easy to print; and keep the order confirmation available for later viewing.

Yes, it seems obvious, but just a few months ago I bought stuff from a site which didn't do either. When I emailed them about it, they asked "why do you need anything like that? You'll get a packing list with your shipment, isn't that enough?" Talk about missing the point.

Martha
Thursday, April 29, 2004

I agree with the Amazon thing. Just follow the UI Mantra....

I always know where I am.

I always know what I can (and am expected) do here.

I always know how much further I have to go.

I've talked against the Inductive UI before, but here it seems is a perfectly suitable place to use it. (Look it up, Microsoft published something on it...)

www.MarkTAW.com
Thursday, April 29, 2004

Microsoft User Interface Site
http://www.msdn.microsoft.com/library/default.asp?url=/nhp/default.asp?contentid=28000443

Microsoft Inductive User Interface Guidelines
http://www.msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/iuiguidelines.asp

Dave
Friday, April 30, 2004

*  Recent Topics

*  Fog Creek Home