We are currently working for online food order system. This is how our site looks like


download bmml source – Wireframes created with Balsamiq Mockups

When user select an item from menu for the first time it asks user for address and validate whether it can be deliverable or not. Now we want to ask user whether he want to add some tips. Currently we are thinking of two options

  • Show a pop up when user clicks order and ask him whether he wants to add some tips or not.

  • Move it the next page when user enter his payment information.

I am wondering which one from the above two would be the better approach. Or if there any other approach we can follow?

closed as off-topic by DA01, JohnGB Sep 14 '15 at 13:00

  • This question does not appear to be about user experience within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • will your system work on mobile as well? if so then you can automatically eliminate the pop up option as pop ups dont work well/at all on the mobile platforms. why not just add a text field below the tax and before total where user can input the tip....and then click order....also....if delivery is being made then the tip could be added after on the actual receipt just like it works in restaurants and bars... – Stanley VM Sep 11 '15 at 17:14
  • Is this for delivery? If so, I'd argue the best UX is to simply state 'tips are included in the price'. – DA01 Sep 11 '15 at 17:49
  • 1
    Is your goal to encourage tips or just to provide a feature for those who might wish to use it? – Kimberley Dietemann Sep 12 '15 at 0:14
  • I'm voting to close this question as off-topic because you're not posing a UX problem. You're posting a design problem where UX is a consideration, which is essentially a variant on "review this for me". – JohnGB Sep 14 '15 at 13:00

I think your second option is the best. Despite the implementation considerations of using pop-ups or dialog boxes that interrupt the flow, the tip is part of the payment process, so why would it be BEFORE payment screen? Users need to see the costs associated to the service so they know what are they paying and think how much they'll tip. I did a quick mockup to explain this:

enter image description here

Of course there's room for improvement. For example, not everybody tips the same, so if you want to have some consistency, you could show a recommended value in place of the your tip field and then add the option to use that value or modify it. This will increase usability and provide a consistent expectation in terms of money (there are financial considerations as well). You may also consider tipping option is something you need to have, yet you'd rather have people not use it (there are scenarios for this, like delivery people being disgruntled for not getting tips, or your intermediate users -eg restaurants or whatever- not willing to take the financial cost associated to the tip as well).

Anyways, those are posterior considerations, but I hope this is helps you to get things rolling

  • nice mockup, question: why have a whole separate screen/extra step for a tip...why not just make a text field in first screen where user can input tip amount or leave it blank if they dont want to tip, seems unnecessary to create an extra screen for a tip...just a thought... – Stanley VM Sep 11 '15 at 18:41
  • 1
    @StanleyVM nice catch, I forgot to add the implied part of the process as I did on 3rd screen. I fixed the image, and obviously, it's like you say, not a different image. Blame it to do it things quick! – Devin Sep 11 '15 at 18:57

I would take a look at Grubhub and how they have approached a similar process. I would think you want the tip coming at the end of the process - because you want them tipping off the final amount.

Take a look at how Grubhub handles the mini-cart:

enter image description here

When an item is added, a blue bar displays across the interface indicating the action was successful. Hiding the cart gives you the ability to make it larger when it's exposed, giving you more room for functions (like applying coupons, etc...).

They also do a good job with a tip calculator:

enter image description here

Providing a percentage-based calculator probably has a serious impact on the driver's tip. On a regular delivery I seldom take the order value into account - but this user experience puts me in a restaurant mode where percentages are more common vs flat tips.

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