Should a "Close" button on a dialog message modal always be in the same position and style?

Question

Here are two examples of a current message dialog we have in the application I'm working on. The close button is the primary and only button in the left dialog. It's one of two options in the right dialog, so it's given the secondary button position/styling. This feels a bit awkward. Is it best practice to always keep it in the same place and same style? Or to treat it differently when there are other options available?

We also have messages that have "Cancel" which always sits in the bottom left position with the secondary button styling. Not sure if that impacts the answer to this at all.

Answer 1

Typically we put separation/distance between two buttons (in your example on the right) when one of the buttons does something destructive (like deletion) and we don't want the user to accidentally tap it when trying to perform the non-destructive action. In this case, it's probably fine to move the "Close" button next to the "View order history" button.

If your customers are choosing "Close" far more than "View order history" (which you can track through analytics), it would be better to make "Close" the primary button; consider removing "View order history" since there is already a link to it in the dialog text.

Answer 2

For each application I design, on every dialog, I keep the most important button on the same side with the same design in every popup. Sometimes this does mean placing a button that has the same name and does the same thing in different locations on different popup dialogs. In your case this would be "Close", as it has the same name and performs the same action on both dialogs.

In your case, "Close" is most important on the first dialog and "View Order History" on the second dialog. You've used the more prominent theme on the more important button and also kept that button on the right side both times.

So, I believe both your popups are okay as-is. You don't need to change them.

Answer 3

There isn't an exact science or right answer regarding placement since every platform or application is different. There are a few things to consider that can help guide your decision.

1. Consistency - Thinking about the platform as whole versus looking just at the use cases of these solitary elements will increase the usability. Is CANCEL always in the right-most position, or is the MOST IMPORTANT action (call-to-action) always on the right?

2. Visual styling - If there are two buttons - one is the intended use case, the other is a fallback - you could do exactly what you did and make the secondary action seem less bold and attention-drawing via a stroke treatment. That visually separates into "DO THIS" and "this is here if you need".

3. Scalability - If you always have a single button on the right, what happens when you add another one or two buttons? This is scalability and applies well beyond buttons. I'd recommend against using a left and right justify. I would instead recommend sticking with one (left/center/or right), in your case right, and using visual styling to differentiate.

Also, no need to reinvent the wheel. Users learn to expect things to be in certain places for certain uses. Do some light research on what others do, especially the big dogs (Google/Facebook/Apple/etc.) since they are the most used. For buttons on modals, the norm is usually centered or left-justified on the bottom.