(as I wrote this, I had a realisation, so near the bottom I have changed my original recommendation)
I hear what you are saying above, yet I feel conflicted, and this is why…
On my Page 3, Step #1: Select a Date and Attendees…
Your forms are pretty short, but while you are (correctly!) putting the name of the step at the top, remember that when people see forms, their eyes go straight to the inputs. (I didn’t easily find an online reference to this I can link to, but it’s in my copy of Nielsen’s and Pernice’s “Eyetracking Web Usability”.) This is one reason why I like (sometimes! not every time) some text near the final button. If I were you, I would not assume everyone sees your header (at least not right away). That doesn’t mean you MUST have accessory text; it’s just another reason why I consider adding it to forms like this. I don’t know how many events you’re listing on one page either.
- As such, I can’t have a set of “Choose this Event” buttons AND a “Get ready because here comes a Log-In form!!” button?!
Lawlz, the second one wouldn’t be a button. I am getting confused which method you’ve picked: save-to-cart buttons (who are submits) or checks/radios with a single submit near the bottom (which also takes users to the next step). Though later you said again you prefer the latter in which case, you can have your “Choose Event” buttons (not submits, not real buttons, but indeed form controls… you can dress up a radio button label 
and the real submit at the bottom, again, can be some short obvious text… the “watch out, boring form ahead!” thing would be accessory text near, above or to the side of the actual button. Your button would then be the “Register Events” button or whatever text you’re going with.
- I suppose I could add in a text note, but since there might be a listing of 4-6 Events, each with their own “Choose this Event” button, I’m not sure visually how I would tie in a message like you are suggesting with several buttons…
I wouldn’t have such text repeat on the page. If any of these 4-6 events has their own submit button, then I would stick to Choose Event buttons only. If they are only radios and there’s a single submit near the bottom, that’s when I’ve considered the extra text. Again, only if it’s not really obvious that the next step is filling stuff in.
That Stay-Okay page I showed you? The first step is choosing what kind of room you want. The next step? Ask anyone what the next step is (the button just says “next”). Some people would say “maybe I fill in a form”. But actually, the next step is “choose extras”. Hm, that was unexpected. I didn’t know there were bike rentals or sack lunches available. So I don’t want any extras, so I scroll to the bottom and there’s another “next” button. Now I’m not sure if that takes me to a form (and why is this important? In the Netherlands, you often enter payment information or even pay right there using a system called iDeal… so you need your bank pass or credit card next to you AND your random-reader, which banks use to verify transactions instead of relying on verifying users via passwords… kinda cool system but it means you need a bunch of stuff ready before you buy anything). If that next button told me I was going to be doing the whole “payment” thing, I’d know that it’s time to stop surfing and go get that stuff.
You could argue people already at the choose event page should be ready to buy, but you’d be surprised: an awful lot of “form abandonment” on the web isn’t people deciding not to buy the Thing: it’s people seeing how far they go, how much extra possibilities or information there is (especially when buying actual Things, many people go through forms simply to find out what the shipping costs are so they know the totals… a bad idea for e-commerce to do!). The Baymard Institute did a big e-commerce usability study recently, and it had a [url=http://www.smashingmagazine.com/author/christian-holst/]write-up in Smashing magazine though the Smashing article doesn’t mention people going through forms simply to get more information… it’s in the report though.
Again, though, it’s not a huge deal to leave the computer and go get your payment stuffs (well, unless the user comes across the page while at work, but the cards and PINs and readers are all at home… happens to me a lot, lawlz).
I’d like to think that - even for a light-weight Internet user - “Choose this Event” implies that we are moving towards purchasing a ticket(s) for the Event we just selected, right?!
IF those are submit buttons (not checks or radios), the user certainly expects to be brought to a new page. And that eventually there’ll be a form. The question is, are there more options to be added? More costs? The next page might NOT bring the user to a form, but might bring them to some other step, ask some other information… if the user is browsing then they are definitely interested but not necessarily ready to buy right now. The moment the user hits a form, that’s when the user makes the decision: I have all the information I will get, now do I buy or do I wait or do I leave?
That you have clearly-named steps reduces this a lot. Stay-Okay makes a mistake by not listing the steps on the main page, I think. So there, the extras page was a surprise and the form page came somewhat unexpectedly. Yours lets me know from the beginning how far I’d go before getting to the form.
You might also be planning slight background colours or lots of repetition of the step numbers or something for more “hinting”… this reduces the need for any “watch out” text and makes even ambiguous buttons less ambiguous.
And if I changed “Choose this Event” to “Log-In or Create Account” it would confuse users because the action we want is for the user to choose which Date/Location they want to attend…
I thought you were listing each date as a separate event? Like if the flower show had three dates, you’d have three separate listings of the flower show, each with the separate date?
But even if not, you are free to add a date input next to the event still. I would not add an extra page/step just for choosing the date, when that information looks to be sitting with the Event info.
I could have a re-designed page/form which looks like this…
I like this one. You can always re-arrange the order of your thingies per row until it suits you.
If I use this second approach, it helps out the “Hesitant” users you describe, but my fear is that it will also confuse those same users having to figure out how to navigate Radio Buttons, Drop-Down Lists AND a warning <<Log-In or Create an Account>> button?!
I don’t see the dropdown, but no, so long as the structure is clear (you may need borders or zebra-striping or something), people should have no trouble choosing an event with a radio button and then the number of attendees input (ok I’m assuming that’s a text input? but if it’s a select dropdown, still not a problem). Especially if the dropdowns on the non-selected events become disabled and greyed out, or if the “row” becomes somewhat highlighted in some way once someone chooses their event… It’s choose a thing, select number of people at thing, submit. It’s still pretty simple.
Here’s where I changed my mind…
Aside from this conversation, people like Paul O’ seem to like using Radio Buttons with one “Submit” button at the bottom versus having multiple “Add-to-Cart” buttons next to each Event.
I like this as well, normally, but now I’m thinking more about what your page actually does. And it brings me back to that feeling of weirdness I first felt when you mentioned “add to cart”.
(Obviously I sorta like the idea of an “Add-to-Cart” button next to each item since this is what nearly all e-commerce sites do.)
They (e-commerce) do on pages where you are looking at a single item, on a product page (not a product LIST). There’s only one item to choose (and you only see one item), so clicking add-to-cart can be a button which takes the user to a shopping cart. The cart shows whatever other things they’ve added if any, and at THAT step the user has the ability to change the number of items and whatnot.
When there is a LIST of products, usually clicking on the item, button on the item, or whatever, you first go to the page about that item. The user doesn’t expect the item to plop into their cart. They are choosing a product to learn more about it: they’ve picked it up off the shelf and are reading the label on the back. When they click the back button to go back to the list, they’ve set the item back down on the shelf, and they continue shopping. Their cart never got involved.
You have a sort of mix: you are OFFERING several items (like a product-listing page would), however the user does not have a “shopping cart”. A shopping cart is something you use to gather a bunch of things in. You pick an item, put it in the cart, and then you can continue shopping (or go straight to checkout).
Your “cart” doesn’t do that. There is no cart. It’s Choose One Item, Go Straight To Checkout. So bringing them to a separate page to show them what they’ve chosen is redundant (which is why you don’t have it). Basically, users are actually choosing their item from a cart already. I suspect add-to-cart text makes people assume they HAVE a cart, and you can put multiple things in a cart.
You don’t pick up a book from a shelf, go to the counter to buy it, go back and pick up another book, go buy it, and so on. You gather the books in your cart and at the point where you feel you have everything you want, you go to checkout. A cart is for the possibility of purchasing more than one item at once (even if they do only buy one item).
If a person cannot register for more than one event; if they must choose a single event (and number of attendees) upfront and can see the total price upfront then I wouldn’t say “add to cart”. The very next step is, pay for this event (which may involve registering, but registration information here is the same as needed for payment anyway).
Maybe this is why I was thinking someone could be confused about the next step: when a button says “add to cart” then when you click it, you go to your cart, on a separate page, where you choose number of items and whatnot (and can go back and get M0aR StuFF). That doesn’t happen here; here, you go straight to the counter and start pulling out the benjamins.
So maybe I’m just getting riled up on the text, and maybe the text on the button was confusing me. I keep thinking there’s possibly some other step, when in fact your setup doesn’t need one (no cart page) so of course it makes sense to you that the next step has to be fill-out-the-form-and-pay. Which is normally the step after the shopping cart page if users choose “checkout”.
So, to be absolutely clear: users visiting this page are offered a list of events in different cities and different dates. THEY CAN ONLY SIGN UP FOR ONE EVENT. They can choose multiple attendees though, and they are told immediately what the total cost is. Right?
Then possibly your original setup, with each ITEM being its very own separate form have having its very own submit button, is the better choice. But then the text would not suggest any intermediate cart steps. Your button will be something like “Purchase”. “Buy”. “Attend Event”. In Dutch I’d prolly have “ticket kopen” (buy a ticket).
If the button text suggests directly purchasing stuff, instead of suggesting there’s the possibility of a typical shopping cart with the common shopping cart step, then users are going to expect FORM as the next step. You won’t need accessory label text.
When they’ve clicked “Buy Ticket” or whatever, they will expect above the form some text: the SINGLE event they’ve chosen, the number of attendees they’ve set, and the total price they will be paying. Sort of a substitute for the feedback of a cart page. It’s a single line of text above the form.
I think when Paul saw your original setup, he might have been thinking that page is a sort of cart… that’s how I saw it as well. With a cart, a single button who encompasses all items makes sense. All the items move to the next step (buying).
http://stommepoes.nl/shoppingcart.png
You’re not moving all the other items to the next step. You’re forking to “the payment form for this particular item”. So I am going to say, keep each item a separate, mutually exclusive form, each with their own submit button, with button text that strongly suggests/hints that this item is being chosen for immediate purchase.
Besides, where else can I get the “Bestly” recommendations?!
I like usability testing. Your users will recommend what works best for them.
There’s online stuff you can use that’s fairly cheap (you may have to “sell” your client on it, since it’s unlikely that YOU’D pay for these services) like Bagel Hint (there are many similar sites who do basically the same thing).
I was looking at hotels on booking.com. Booking has a gazillion users per second, so they have the luxury of A/B testing absolutely everything, and they do. They test EVERYTHING. I wouldn’t do this if I were tiny like this might be. But they do other things too. Anyway I was looking for a hotel for one person, and sorted by Price. The top hotels were mostly hostels and dorms since those are the cheapest. I clicked on one that didn’t bill itself as a hostel, prolly because they also have real rooms too. At the top of the page, Booking.com had a little advert: “Help us! Could you answer just one single question about this page?” And Yes and No buttons. This wasn’t intrusive: I could have ignored it, and I did not have to hit No. I hit Yes. The question was, “what kind of hotel room do you think this is?” with a radio list. Apparently, someone wondered if it wasn’t totally clear if this room was a dormatory. Or maybe people were complaining about how that hotel billed itself. That was it: one question.
Sites like Bagel Hint can offer stuff like that: short little questions for your real users, after the site is live.
You can cheaply do paper printouts of your site and just grab random old ladies on the street and ask them: hey, if you were on this web page looking to attend an event, what do you think the next page would be if you clicked one of these buttons?
Grab your mom or someone’s mom and have them go to the main page, and say “You’re interested in attending the Flower Workshop thingie in Boston in October. Go ahead and go through these pages as best you can. Speak out loud your thoughts as you go through things. Don’t ask me questions, since if you were home alone you’d have nobody to ask. But speak what you think, why you’re clicking buttons, etc”. (also the all-important “we’re not testing YOU. We’re testing the web site.”)
You can also read reports on e-commerce usability, which aren’t just about forms but also the other related pages… and those nasty marketing SEO blah blah pages actually have some good stuff too: search for “conversion”, which doesn’t mean only “someone bought the product”. Every page has at least one target. The target might just be, “the user clicked on a link to learn more”. So plenty of people are writing articles about what leads people to do what you’re hoping they’ll do on your pages, and they call it Conversion. Many of the usability reports are not free. However if the type of study they did is close to what you’re building, I would certainly say it’s worth it.
/random stuff/
Here’s an example of two different kinds of user tests (watch the videos): multi-column forms which may be why NewEgg has the login form right on top of the new account form, rather than next to each other.
Your first thought at the guy filling our the parfume.com site is, wow what a moron. But he’s not. He’s just gone into stupid-human-fills-out-form mode. Which most people do.
User testing is awesome: you can see what kind of button text is most clear to users. It might not be what I think is better (buy a ticket, purchase), it might well be the original (add to cart), but you can find out by asking people on each step what they think is going on on the page, where they think they’ll end up if they click a button, etc.
People surprise you about what they expect versus what’s obvious to us developers!
More random form eyetracking stuff… very general
