2

In the case of two actions such as Cancel and Done, I would usually place Done on top-right and Cancel on the left. In the case of a single action such as Done, I would usually place it on the top-right as well.

But where should the Cancel action be placed when it is the only action on a modal view? Should it be placed on top left or top right?

Improve this question
2

1 Answer 1

Reset to default
4

UX Guidelines suggest that the primary action for every page/activity should be placed at the right-most corner (top or bottom, depending upon design language).

In your case it seems like it is an alert modal with the only action being Cancel. By the UX rule, Cancel here is the primary action. So it goes in the rightmost corner.

Example :- Example of iOS navigation modal with only Cancel as the action. It is placed on the rightmost corner

UPDATE

I realized that I hadn't provided a source for my answer. Unfortunately, I am unable to find the exact source of the image above so I am adding a few references (including that from the Apple Developer Guide)

Cancel button placement in temporary screens in iOS. Top-right for search

Sources

Apple Developer Guide

UXPlanet reference

Improve this answer
5
  • Can you please provide a link to your "UX guidelines"? I could find nothing in the Apple iOS Human Interface Guidelines about this. Other references I found on the web often said to avoid using the top right because it is outside the reachable thumb zone (even though it is used by Apple apps?). Citation needed ;-)
    – robocat
    Aug 14, 2018 at 4:27
  • @robocat - Updated my answer
    – Shreyas Tripathy
    Aug 14, 2018 at 5:29
  • Your answer relates to search bars, which is not relevant to the question which is about a navigation bar. Here is an article suggesting to avoid navbar buttons due to reachability. There is a detailed article on alistapart about device reachability with references to research - other articles sometimes make up their facts!
    – robocat
    Aug 15, 2018 at 4:38
  • @robocat - I completely agree on the reach-ability issue. But it's sometimes unavoidable on a phone that doesn't have any physical or on-screen buttons. The reason I picked the Search Bar example was because it tackled the issue of having two actions on the navigation bar. We don't have that in most cases and especially in modals. I am just quoting Apple's standards here -> developer.apple.com/design/human-interface-guidelines/ios/bars/… This still mentions that actions should be placed on the top-left when there's a Back button on the top-left
    – Shreyas Tripathy
    Aug 16, 2018 at 6:10
  • And personally, I would avoid putting actions on the navigation bar but with the current phone sizes, single-handed use has gone for a toss. Also, the double-tap to lower the top section is the current solution on iOS devices
    – Shreyas Tripathy
    Aug 16, 2018 at 6:12

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.