1

As a user I'm able to donate money in two different ways: by choosing the amount from the given items, OR in alterative, by typing my custom amount.

How would you better visualize these two options, in order to make it crystal clear for the user one choice precludes the other?

Thanks!

Screenshot

Improve this question
4
  • what exactly is the issue with the current design shown above? It looks OK to me
    – Sooraj MV
    Feb 26, 2020 at 9:59
  • From User perspective this looks clear to me. If you want to have more "compact" UI, you could go with placing dropdown with values in right column, and input field for custom in right column.
    – xul
    Feb 26, 2020 at 10:18
  • Thank you for your comments. What I'm trying to achieve is having different solutions and visualizations.
    – Lara.Orrico
    Feb 26, 2020 at 11:00
  • How many payment choices are there? Does this also have to work on mobile?
    – Mike M
    Feb 26, 2020 at 14:24

1 Answer 1

Reset to default
1

Try using radio buttons / selectable lozenges to make clear only one choice is available. You can reorder the choices by testing what increases the average donation level.

By separating out the selection process, users will see the result of their choice.

You have an opportunity to surface a vertical list, which works on more constrained viewports, and gives you an opportunity in the final area some positive reinforcement (test this as well)

enter image description here

If they enter the custom amount, you can calculate an average of how much food their donation amount will buy as well:

enter image description here

Improve this answer
1
  • Thank you very much, this is such a good visualization.
    – Lara.Orrico
    Mar 2, 2020 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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