Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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
add comment

4 Answers

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
1  
I doubt this suggestion will work on mobile (the question is about mobile), but I agree with the basic idea. –  L. Möller 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
add comment

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|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
add comment

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.

share|improve this answer
1  
Just so you're aware, UX.SE includes a copy of Balsamiq for producing simple wireframes in the browser. Just click the little icon next to the image icon in the editor. –  Kit Grose Nov 28 '13 at 22:57
add comment
  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.
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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