User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am working on app that has payment process. I'm thinking of two options, since it will be mobile:
The user taps on a 'Buy' button, and a modal pops up with a payment form. ( /offers/:id ) After purchase, the modal pops back out and a notification alert is given.
The user taps on a 'Buy' button, and he is redirected to another page for payment ( /offers/:id/purchase ). After purchase, a notification alerts the user and goes back to the offers list.
Which is more user-friendly?
The main UX differences between pages and dialogs are:
A dialog can have fixed dimensions, whereas a page has to scale. I'd suggest sketching the screens in your payment process for both a tablet and a smartphone in this case.
In a person's mind, a page is a new place, whereas a dialog is the same place. Consider how the page looks and whether it's clear what it belongs to. If a person switches to another app and then switches back, will it be immediately clear what the page is for?
Dialogs can be transient. It's not as disorienting when a dialog disappears as when a page disappears.
Personally, I'd recommend going with a modal. It works on a number of screen sizes out of the box and it's not disorienting. Android Pay uses a dialog, Stripe uses a dialog, and you can be sure that they've done some user testing to make sure that it works well.
That said, it doesn't necessarily mean a page is the wrong way to go. If you want to be thorough, make a prototype with a page and with a dialog and test it. Or do an AB test in your app.
Leave alone for payments, generally users don't like modal boxes and find them annoying. From sheer bad experiences like newsletter sign ups the reflex reaction is to close even without reading them (i've personally seen this in user testing sessions). So I've not go with option 1 just that reason.
