Best practice for choosing an amount for donation on a mobile form

Question

What would be (from a UX perspective) better solution:

1. Use radiobuttons to choose an amount (eg: 2,5/5/7,5/10) and use a large submit button or
2. Use 4 buttons with the amounts on it (eg donate 2,5/donate 5/donate 7,5/donate 10) as a submit button in itself and remove the large submit button

What are your thoughts?

Answer 1

If it is about a donation, the more "friendly" it is the better donation you will get. I suggest to make big clickable areas (so 1 button each time) and find a funny way to make the users want to give more >> Insist on how happy you will be instead of the ammount

Edit : My fault, i didn't see it's about mobile form. I updated my mockup whith a mobile version

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

Answer 2

I like the Renaud's answer very much. However I'd do it in a bit different way.

I'd fill the whole screen with large smiley face, and on the bottom put scrollbar with amount one wants to donate, and the donate button. The scrollbar should be 'discrete' (with only four values you allow users to donate). When someone swipes the scrollbar, the smiley should change accordingly. Even better if you create some pretty transitions between the faces.

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

Answer 3

I really liked the ideas mentioned by Renaud, but it seemed his idea wouldn't suit mobile use. I simplified it a bit towards mobile use:

(note: i'm a utter newbie using wireframes atm :) ).

I would suggest a simple slider bar, sliding per fixed points. I suggest smaller white dots along the scrollbar.

It might be an idea to increase the circle with the $ sign to increase with the amount donated.

Answer 4

1. Display four buttons in a vertical list, each with large clickable areas, for both desktop and mobile.
2. Use "Donate [amount]" labels for each button to prevent ambiguity.
3. List the smallest amount first as a courtesy to the user.