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?

  • What is the amount for? You mention donate in point 2 - is that what this form is? Have you got a current mockup of what you're thinking of going with as it's easier to visualize your issue if we can see a representation of it. – JonW Nov 27 '13 at 9:21

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

| improve this answer | |
  • 1
    I doubt this suggestion will work on mobile (the question is about mobile), but I agree with the basic idea. – Lovis Nov 27 '13 at 10:05
  • +1 for the nice smiley concept :) and for updating after receiving comments – greenforest Nov 27 '13 at 15:54

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

| improve this answer | |
  • 3
    Maybe it should start the other way round: The smilie goes "oooh" when you slide down. – kaiser Nov 27 '13 at 13:28
  • Slider will make user to donate more than a regular button. +1 for that – Abektes Nov 27 '13 at 23:53

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:

enter image description here (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.

| improve this answer | |
  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.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.