0

I'm designing an order listing UI for a delivery person to fulfill their orders. I need to add a cancel button for ad-hoc cancellation in certain situations.

between the 2 options below I'd like your opinion on which would be the better choice

enter image description here

the above UI is on a tablet portrait screen.

Improve this question
3
  • 1
    For what it's worth, I would go with the second option. Move it out the way so it's less likely to be clicked by mistake (i.e. too close to edge of screen where user holds it)
    – musefan
    Sep 23, 2020 at 13:19
  • 2
    Is the "Delivered" a button? Because it seems like a status, but it looks like a clickable button. If it is a button to mark the order as delivered, I'd strongly suggest making the text "Mark Delivered", or "Set as Delivered". Something with a verb.
    – Andy Mercer
    Sep 23, 2020 at 14:02
  • I'm curious as to the flow, Is the intent to navigate to this screen specifically to mark as delivered? Or it it marking status ? Secondly, especially for touch I dislike the buttons without a border. It doesn't look like an actionable item next to an actual button.
    – Austin French
    Sep 23, 2020 at 15:10

1 Answer 1

Reset to default
1

In Option 1: It feels like delivered button is associated with the content on its left & cancel with its respectively. This is because the extended spacing. They dont feel grouped together. You can refer Gestalt Principles to understand grouping similar items better

In Option 2: The problems that could arise are when the content is too long, lets say the title is more than 50 character, then you will have to double row titles. It is not scalable. Also you are placing the important action on the right end & cancel to its left. But when you read from left - cancel comes first. There is a conflict of intent.

I would suggest you bring both delivered & cancel below the whole content i.e., below "1 x item, 1 x item". With delivered on the left & cancel on the right. This way the whole content reads left to right. And you dont have to worry about scalability.

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.