The unexpected danger of a dialog confirmation
Of all the interface components I’ve worked with, dialogs are the most intimidating. They might look like a simple box, but they are hard to get right.
For the uninitiated, dialogs are UI components meant to make sure users mean to do what the system thinks they want to do. It’s a layer of confirmation. You can use them to collect inputs as well. See this example from Balzamiq:
Dialog screenshot from Balzamiq. Action is renaming wireframe.
What a dialog is made of:
Title
Some content or more components/inputs.
Secondary button. This one’s the “I made a mistake, please go away,” command.
Primary button. This one will confirm the action you started with. You’re basically agreeing to something that you set in motion. “Yeah, I really want to do this. Let’s take that red pill.”
Close button. Another way to make the dialog go away if you feel uncertain about what the buttons actually do.
Now that you’ve had the crash course, I’m curious to see what you think about a dialog I encountered in the wild…
I’ve started to play Civilization VI for the first time. Naturally, I don’t know the law of the land. So when I try to move my unit into a strangely colored field, I trip up over this:
Screenshot from Civilization VI
Umm, what now?
I knew I didn’t want to declare war, but I was confused as to what to do next. What I wanted to do was cancel. My thinking was:
Blue button reads: “Never mind, I can start the war”
Don’t want to start a war by accident.
I couldn’t rely on button position as different systems place secondary and primary buttons in a different spot.
I could not exit the dialog without making the choice (no close button).
Is the question asked about declaring a war or about making a move?
Relying on colors was tricky. Due to my work in UX I read red as danger.
Is the red button here really dangerous or is it just, you know… the color of war?
Basically I was overthinking it. That just shows you how easy it is for a dialog to surprise you.
Holding my breath, I clicked the “Never mind” button and it behaved like a normal “Cancel”. What a relief.
To improve the dialog, I’d use “Cancel” for the secondary button in this particular case. Another option would be to add context (maybe “Cancel the move”). That would feel safe.
I love creative button labels, especially in games. Definitely wrote a lot of those myself. But there is more leeway to be creative with button labels when you’re writing a game where choice is a dialog mechanic (visual novels, RPGs…) or in general UI when only a single button is displayed so nothing is left unclear, there’s no actual choice to make.
Anyways, the game is awesome, I’m really enjoying it. I've established a religion called The Church of the Witch so you know I’m having fun battling the Spanish Inquisition.
