0

I started thinking today about where should I place the [x] button on web modals. Users usually look at the top-right side, but what happens with OS X users? I've been using Mac for the last 5 years and I use (sometimes) to look at the top-left corner.

I've been researching a little bit and most opinions say the better is top-right corner, even for Mac users.

My question is: Should I detect the users' OS and place the close button depending on it? Would it improve the users experience?

4
  • Does the modal require an action, or is it just informative? Generally, you shouldn't move the 'x' - my experience with your "web app" should be consistent no matter how I visit it. Jul 2, 2014 at 17:15
  • May have actions. e.g: cl.ly/image/3d2S1p412z3e. @EvilClosetMonkey what you just said, "my experience with your 'web app' should be consistent no matter how I visit it.", is right, because if the users changes their devices twice a day it would be difficult for them to get used to the change every time, making them leave the app soon. Jul 2, 2014 at 17:20
  • "May have" or "will have"? See the linked question/answer below on why I ask. If it "will have" actions, you may not want to have an 'x' at all. ux.stackexchange.com/questions/1389/closing-modal-dialogs Jul 2, 2014 at 17:24
  • Actually, I would suggest that most Mac users will be more familiar with a dialog box without any [X] buttons. (This is as opposed to 'regular' windows, which does have the three traffic-lights buttons.) The expected way to dismiss a dialog box is to click on the "OK", "Cancel" or "Close" button, or the keyboard shortcuts "Enter" or "Cancel." Jul 3, 2014 at 5:45

3 Answers 3

0

Is this for web usage or for a modal on a native app? Reason I ask is because I believe the context, "I'm looking at content on a web browser", may influence the user's thoughts as to where the X to close the modal ought to be.

My gut feeling is that all modal/lightboxes plugins on the web by default have the X on the top right corner, to have a web app and place the X to the right goes against web standards.

That's just my feelings... you should probably do a screenshot A/B hallway test on Mac users showing your modal within a page on a browser and ask them which feels right.

0

No.

Your heart is in the right place, but, idealistically, one of the points of creating a web application rather than a native application is for cross-platform portability.

But even if that's not a relevant factor for you, think about this:

  1. What percentage of your user base uses Macs?
  2. How much increase in effort is required for them to understand that the position of the modal's close button is different than that of their browser window?
  3. What does this represent in lost business?

vs.

  1. What is the cost of implementing OS detection?
  2. What is the cost of implementing two different layouts/stylesheets?
  3. What is the ongoing cost of supporting this technical debt?

Respectively, I expect the answers are: basically none, and possibly quite a lot.

1
  • 1
    "one of the points of creating a web application rather than a native application is for cross-platform portability" - I see where you're coming from but this is a dangerous argument. Following this logic, a Save keyboard shortcut on a web application should always be CTRL-S even for Mac users who use CMD-S. Portability should follow usability, not the other way around.
    – Izhaki
    Jul 2, 2014 at 21:10
0

Your question can be read like so:

Should I make an effort to provide my users with an interface that follows the conventions they are accustomed to?

The answer to this is a resounding yes. Mac users look for close buttons on the left, Windows on the right. For most users this is a system 1 process - they don't spare a fraction of consciousness, it's automatic.

Would it improve the users experience?

Again, a resounding yes. Part of user experience is usability, often defined as the amount of effort (both cognitive and physical) a user has to expand while performing a task. So if the users cannot find the close button where accustomed to, now whether consciously or not (in the peripheral view) they expand more effort, ultimately costing the greatest user resource - time.

Does it really matter?

A surprising answer here - a little. Point is that so long users can perform the task with ease, they are likely to be little bothered about it, if at all. I doubt any user not seeing the button where expected will fail to immediately notice it on the other side. I've seen in user testing far worse conventions broken, and so long users can quickly find the correct action, it seems as if they ignore the mistake altogether.

Perhaps a good examples for this is the collapse pattern offered by bootstrap (which has a famous usability issue). Users clicking on the header area to collapse/expand will quickly (while nearly always being unfazed) move on to click on the text.

A screengrab of Bootstrap's collapse panels

Having said that, and as I know the programmatic cost is often very low, I would provide the button where it should be on the host OS.

1
  • What a great answer! This is totally true. Apps should give the users the usability they are used to and do not force them to use the dev wanted them to use. Jul 2, 2014 at 21:16

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.