11 Jun 2003 | Don Schenck said...

I've used the PayPal screen and never had a problem with it. My mindset is that "I'm sending X dollars and ...", so displaying the dollar amount in larger font isn't that big of a deal.

On first glance.

Your mock-up is much better. Here's hoping.

11 Jun 2003 | Ben Langhinrichs said...

I agree completely. I wish that sort of usability redesign was done more frequently on the web, as there are lots of poorly worded/poorly designed screens where a bit of thought about what was really important would make a big difference.

11 Jun 2003 | Joshua Kaufman said...

Nice work, Jason. What about "Amount" vs. "Total Amount" on the original page? If you can only enter one amount on the send money page, why would they be different?

11 Jun 2003 | JF said...

What about "Amount" vs. "Total Amount" on the original page?

I'm not sure what that is all about. Maybe if there's a quantity greater than 1? Or, perhaps its for sales tax or other fees/discounts. Either way, if the numbers were equal, only one should be shown.

11 Jun 2003 | Paul said...

That's rockin'. So much clearer.

11 Jun 2003 | steve said...

Apostrophe police: We separated the email subject and body into it's own data grouping

11 Jun 2003 | said...

"37signals means redefining what works on the web. The 37Better series of sites proves this."

11 Jun 2003 | hurley#1 said...

Apostrophe police: We separated the email subject and body into it's own data grouping

Easiest way (without any grammatical terms) to remember when to use it's versus its:

1. It's means "it is."

2. Its is the equivalent of his and hers. Her car, its motor. His and her don't have apostrophes, neither does its.

11 Jun 2003 | hurley#1 said...

Look at that, I made a typo: in #2, third sentence, should be "His and hers don't have apostrophes..." not "His and her..."

Preview doesn't often work in IE, I just get a blank space so I didn't catch before posting...

11 Jun 2003 | hurley #1 said...

I'm going to stop in a minute, but I see that I goofed even more. The example doesn't even use "hers" it uses "her." Sheesh.

Try this:

His car wasn't running so he tried hers, but its fuel tank was empty.

Okay, I'm going to get a beer now.

11 Jun 2003 | B said...

I was all pumped to see 3 new comments about 37BetterPayPal, but now I see they are just grammar lessons. Sort of.

11 Jun 2003 | Darrel said...

I thinkn it's an improvement, though the yellow box seems to have more going on than the old layout.

I see 7 different type treatments.

It's also all centered, making it harder to read.

Still, it's better.

I'm not sure if I like 'plain-english' talk when formatting data.

I think I still prefer something along the lines of:

--amount you are sending: $37
--you are sending it to: NAME
-- for: description
--source: $37 taken from your PayPal balance

Or maybe a combination of both, with a summary sentence "you are about to send $37 from your paypal balance to NAME for A SERVICE. Please verify below.
(and then have the formatted info below).

Just random end-of-day thoughts.

BTW, does anyone actually care that a page says 'secure transaction' on it? I think for those that actually care, they're going to trust their browser's secure icon...not something put on a web page. But, I suppose, it's comfort for those that don't understand what it's all about (even though it really has no bearing on whether or not it actually is secure).

11 Jun 2003 | kev said...

What's up with the continuing action button on the left-hand side? as a mac-user i look to the right for those... and clicking the right-most button would cancel the transaction instead of confirming like i'd expect the right-most button to do...

11 Jun 2003 | JF said...

I feel like the continuing action button should be the closest button to the last UI widget you had to review or take action on. I go back and forth on this, but if there was only one button I think it would be fine on the right.

11 Jun 2003 | Steve said...

I like making the key function - how much money I'm sending, and to whom - the most prominent feature. I feel like you're kinda slapping me about the face with it, it's so prominent, but it's better than the hide-it-under-a-rock approach the current version takes. Another consideration: if I reduce my window to 800x600, and account for the extra bit of stuff you've got at the top of the page, pretty much all I see is the money box. I don't see that there's more information and, more importantly, stuff for me to do down below.

I like the idea of separating the key action button a bit from other functions in theory. But I'm not so sure I like it in practice. I guess I've gotten accustomed enough to seeing buttons grouped together that the wide gap between them seems visually disorienting.

11 Jun 2003 | Mathew said...

I'm with Kev - having cancel as the right-most button would drive me crazy. I read from left to right, so back becomes left and forward is right.

JF, I can see where you are coming from with the 'closest to last action' placement, but I have had enough experiences accidentally cancelling instead of confirming to last me several incarnations.

Overall the page is much more focused on the key points, more "look at this, it's important" and less "blah blah blah".

12 Jun 2003 | Mal Ross said...

Hmmmm... I'm certainly not as convinced by this redesign as I have been by others. Sure, it's removed a couple of bits of information clutter, but I'm not keen on the layout changes or use (overuse?) of contrast for emphasis. I think it could've been more subtle and kept the scannability of the original's list of 'parameters'. I was also a bit concerned about the fold, too, as I didn't see the pay button until I scrolled (I don't maximise my browser windows).

On a more specific topic, I'm getting a bit tired of Mac users getting upset about confirm / cancel buttons being the wrong way around. Granted, if we're looking at it from an isolated viewpoint of what's the best UI, regardless of what people are used to, having the confirm button as the last page element might make sense. However, we're not working in isolation of the rest of the world. And, for better or for worse, the vast majority of the rest of the world is using Windows, which has the confirm button as the leftmost in its UI. I'd design for the majority of the audience.

Sorry about the rant, but I'm still annoyed at the fact our intranet has confirm / cancel buttons in Mac order despite the the entire company -- except one person in the web team -- using Windows PCs. Despite the loss of usability for its intended audience, the b*stards won't change it. :(

12 Jun 2003 | mike said...

with all the discussion around the placement of the send button...would it make sense to color the button in a similar tone as the confirm box. Visually these two page elements would then group themselves by similarity.

12 Jun 2003 | Trevor Turk said...

I'm going to be honest - I don't think this redesign is 37better. I really like the seperation of the "email" stuff, I think that would make it much clearer to the aveage user what was happening. However, the rest of it just seems to confuse the issue. Sorry!

12 Jun 2003 | Krakow said...

My vote is for 37Better. It's clearer and certainly more obvious. When I see the page I know what I'm being asked to do. The current PayPal page looks like it was just spit out of a database. This one feels like someone thought about it.

12 Jun 2003 | Darrel said...

Mal:

You make an excellent point. For better for worse, often whatever is consistent is the way to go.

That said, in terms of windows interfaces, there isn't always consistency in the button placements either, and on the web, there is no consistency what-so-ever.

The key, just as 37 signals has done, is to make the OK/CONFIRM/YES/GO/DO-IT button significantly more prominant than the others. If that is done, then I find the order less relevant.

12 Jun 2003 | kev said...

>would it make sense to color the button in a similar tone as the confirm box.

It probably would, and i used to do this on intranet/admin interfaces.. however, my OS/browser combination of choice these days (macosx, safari or camino) ignores styles attached to submit buttons, as it uses os-native elements. IE is the only one still changing colors of submit buttons if the css is written to, but that's because it uses macos9 style buttons. so even if they had changed the color, it'd still look like graphite to me. now, if there was a way to make it pulse like the OS does, then thumbs up.

and let's not EVEN get into whose dialog box layout is more intuitive (win vs mac)... as far as i know anyway, i thought windows button placements were totally arbitrary based on whatever the hell the developer thought. I mean come on, "Yes" and 'No" as button labels? Yikes.

12 Jun 2003 | kev said...

shoot. i said let's not get into it and then i got into it. oh well.

12 Jun 2003 | LukeW said...

but I'm not keen on the layout changes or use (overuse?) of contrast for emphasis. I think it could've been more subtle and kept the scannability of the original's list of 'parameters'.

My five cents:

The information presented is all related: Payment Details, Source of Funding, Email, and Shipping Address. In both layouts there is no continous read/presentation of this information. The PayPal layout could be improved by maintaining a continous alignment between all the sections of the form (the shipping information fields break the flow). The 37 version makes it even more scattered. On the Paypal layout I can scan up and down and make sure ALL my information is correct not just the dollars. this is a key step before commiting to the transaction. Here is an image of this process. Here is the same process (double-checking all my info) on the 37 layout.

One of my favorite information design principles is "keep related information adjacent in space". In this case, using visual organization principles such as similiarity and proximity...

We made the dollar amount the most obvious element on the page
I think getting the dollars right is just as important as getting the person you are sending the dollar to right (in the Paypal layout it is first). So why such a huge difference in visual weight? I do agree that contrast is needed in the PayPal layout but...

We used more conversational wording
Nothing wrong with that, but what are the terms that have been used up til that point in the process. If the whole time i am thinking "pay to", i am looking to "pay". In the 37 design the term is now "send". Am i sending or am i paying? A subtle differtence i know, but consistency of terms is key to matching user expectations.

We rearranged the data so the information flows more naturally
this is probably a good idea, and could be applied to the current payPal layout.

That said, I think both layouts have some good things going on. Good work JF.

12 Jun 2003 | Krakow said...

Luke... You bring up some good points, but when PayPal treats everything equally I feel like I'm missing something.

Do I really need to focus as much on "Type: Service" as I do on the price and email address?

And what's up with the "Amount" and then "Total Amount? on the PayPal layout?

Finally, the 37 layout is more consistent with language. It's always "Send" while on the PayPal layout it's "Pay To" and then
"Send" for the action button. On 37's layout, it's always Send.

12 Jun 2003 | Krakow said...

Another thing on PayPal's layout...

PayPal's "Payment Details" section also contains the email information, but not the source of funds information. How is email information a "payment detail" if payment source isn't? I like how 37 moved these bits into the proper groupings.

12 Jun 2003 | LukeW said...

Krakow, good points. I fully agree with the need for heirarchy, but to what extent? 37 might overdo it. (IHMO)
As Steve Krug says: "all redesigns fix some things, and fudge others." -or something like that.

consistent with language
I was more so referring to all the interactions that come before you get to this form.

12 Jun 2003 | Cade Roux said...

The Amount/Total Amount is due to PayPal's historical use for paying for auction transactions. I think out of PayPal's volume, you will find a significant amount used for auction transactions, which often include shipping and insurance charges. My usage for PayPal is about 95% for auction payments (sending and receiving).

The 37better redesign does not accomodate the auction payment features at all (what you are paying for, when the auction closed, etc), which is what I use most.

12 Jun 2003 | Steve said...

The biggest issue with teh original Paypal design is that it's not very scannable, and I believe (and have observed plenty in both controlled and anecdotal environments, enough so that this is becoming something close to dogma) that scannable text is hugely important on the web. One of the strengths of the redesign is that one of the crucial bits of information takes no effort to view. However, I do feel it's too prominent (hence my earlier comment about beling slapped about the face by it) and that there is other information that's equally important, as Luke pointed out.

12 Jun 2003 | JF said...

The 37better redesign does not accomodate the auction payment features at all (what you are paying for, when the auction closed, etc), which is what I use most.

My thinking was that the screen would only show the information that is relevant to that transaction. If it was an eBay transaction, then more data would be displayed. If not, there's no need to clutter the UI with fields that don't add value.

12 Jun 2003 | JF said...

And, BTW, thanks for the great discussion/feedback everyone! This is one of the reasons why we love SvN.

I've actually made some minor changes to the design and will tweak it a bit more if I have extra time. I actually had a few different ideas initially, but I liked this one the best. Maybe I'll flush out the others and share those as well.

12 Jun 2003 | Darrel said...

I agree with Luke in regards to basic data alignment.

I think the ideal solution is somewhere in between Paypal's screen and the 37Better screen.

The biggest issue with teh original Paypal design is that it's not very scannable

Hmm...in terms of scanability, I find the orignal much easier in terms of layout. It lacks in hierachy and grouping, but it's much easier to scan right down the page.

The better version with the 7 different type treatments and centered text makes it much harder. All IMHO, of course.

12 Jun 2003 | Cade Roux said...

JF, I understand that you only handled the one case, I'm just pointing out my most frequent use case.

13 Jun 2003 | Steve said...

I like the PayPal screen better because I can scan down the list easily to confirm all the data fields.

They are neatly lined up in a column. I can read all the data and kind of ignore the headings. I pretty much know what I'm looking for: amount, email, message...

With the redesign, my eyes need to scan all over the page to find the data.

I have to do a lot more READING to understand the labels for the data.

13 Jun 2003 | Krakow said...

I tried the screens with my mother, father, and aunt (in their 50s) and they both liked the new 37 screen. They said it's much easier to understand. They instantly knew what they were being asked to do. I think interface designers might want to draw other conclusions, but from my quick, non-scientific tests, "normal people" feel more comfortable with the 37s screen.

13 Jun 2003 | Darrel said...

"normal people" feel more comfortable with the 37s screen.

Because of the better layout or better wording? Were you able to determine that?

17 Jun 2003 | ryan donahue said...

I don't believe that every web interface needs to be in a huge font and on a yellow background in order to be "useable".
This is a common clich amongst usability professionals who attempt to apply their usability skills to visual design.
Imagine what a lame world it would be if every sign, every website, and every interactive experience conveyed important information in black text on a yellow background. It's a totally oversimplified solution.

18 Jun 2003 | Randy said...

Imagine what a lame world it would be if every sign, every website, and every interactive experience conveyed important information in black text on a yellow background. It's a totally oversimplified solution.

You mean like a street sign? No reason for anything to be as clear as a street sign, right? Oversimplified? How so? What's missing? If something is over simplified, then something important is missing. Please explain.

18 Jun 2003 | Ryan Donahue said...

I concede that in the example of a street sign, extremly high-contrast colors and large font size is appropriate.
It is dangerous for motorists to take their eyes off the road for more than a split second. Road signs must be able to be visually processed in under a second to be useable, and to keep our roads safe. However, I feel that user performance involved in this example of screen reading, allows for a design where one could assume that the user has slightly more time to complete the task of reading the paypal screen, than in the example of a road sign while driving at 65mph. This being the case, I'm not convinced that the 37 signal version approaches the design challenge here in the most elegant way. It might be a cool preference that high-volume PayPal users could turn on, if they were doing hundreds of payments a day for example, and needed a user-experience that was optimized for very high speed use.

23 Jun 2003 | Mal Ross said...

Is it just me, or has the 37better example been tweaked since the last time I was here? Looks a lot better than I remember. Maybe I was just being harsh last time. :)

23 Jun 2003 | JF said...

I've been tweaking it a bit.