Placing a donation – modal or a separate screen?

Question

I am currently working on improving a donation task flow which is similar to the ones of the major crowd-sourcing platforms, however, there are no donation tiers involved, just dollar amounts.

As always, the user gets to browse the project page and then decides to donate or not. Now, modal or single screen after the user has clicked the call-to-action donation button?

To me, the modal has an edge because the donation itself has strong context to the project, which is underneath the modal. Also, I do not want to take the user away from the project page making him feel isolated and insecure. A modal also feels lighter and quicker to me, making it faster and seemingly more uncomplicated to donate.

I think Facebook has done a really great job with their modal donation approach for the Philippines campaign, in case someone has seen this.

I have not done any usability testing with the two different approaches I have yet, however, planing to do so.

I would definitely be interested to hear your take on this.

Answer 1

User triggered modals are great for visually and hierarchically mapping content to context. As you already pointed out, the view is opened within the context the user wants to make a donation, creating a clearer perception of origin. The problem occurs when modal windows are used for system triggered events, such as "Subscribe for more!", "Did you know..?!", etc... But for user triggered events they work great.

One thing though, which I assume is already in your design draft but I want to mention it just in case, is to not have a generic donation window for all the projects. Like:

^{download bmml source – Wireframes created with Balsamiq Mockups}

But also in the modal view make reference back to the project that the user was viewing to further increase coupling.

^{download bmml source}

Because even though the modal was triggered from the project specific page a user would still appreciate further confirmation that the donation will go to the project they intend to donate to.

Answer 2

I would suggest a separate screen with a clear reference to the project + an easy way back to the project description page.

A lot of "heavy" internet users love tabbed browsing when discovering new things, especially on content-heavy sites (think reddit, but also kickstarter, and for my example: bandcamp). In a typical scenario, users like this open a couple of tabs, read about some projects, and open the donate/buy/support links on the projects they like in a new tab, and then read on. If the donate link opened a modal, they end up with a bunch of dead tabs, and forget about it. I know I do.

Simple example: I'm listening to some new music that I found on bandcamp. I like it so I want to support/buy the album, but I'm afraid my listening/reading experience will be interrupted by clicking buy, going to paypal etc, so I open the Buy Now link in a new tab.

Half an hour later I find this:

And I never end up spending money...