UI designers: it's ok to use the words "yes" and "no"

Miscellaneous and Personal Stuff I Must Share
1

One my pet peeves with UI design is when the UI asks the user a yes/no question, and then gives the user a choice of answers which are not “yes” and “no”. Often they are “OK” and “Cancel” or something like that. It’s usually possible to deduce which one is supposed to be “yes” and which one is supposed to be “no”, but it’s just an unnecessary opportunity for confusion.

A particularly egregious example is on Wikipedia, where, if you’re on a discussion page and start to enter a response to a post, and then change your mind, you can press a button labeled “Cancel” to abort your response. You are then presented with a dialog box that says “Are you sure you want to close the form?” and given the choices “Cancel” and “OK”. WTF? So I press “Cancel” and then to confirm that choice I have to AVOID pressing “Cancel” again. Two consecutive screens where “Cancel” means the exact opposite on the second screen as it meant on the first. Grrr…

2

Yep, that’s an annoyingly common mistake. I used to see that kind of thing in UI reviews all the time. Popup dialogs are often very bad.

A favorite of mine is a dialog that makes instant changes when you flip some controls, but others require you to confirm the dialog. Cancelling leaves some stuff changed and not others. I saw that one a few times as well.

Other common mistakes include flipping ok/cancel button positions to be non-standard, using ok/ cancel when it’s a dialog that is either informational and ok and cancel do the same thing (should be ‘Close’), or a dialog that triggers a real-time action like running a motor when ‘ok’ is pressed instead of adding a ‘start’ or ‘run’ button instead. Another is not tying a ‘dirty’ flag to the ‘ok’ button so that it’s disabled when no changes have been made.

Another one is offering a checkbox for an item where the unchecked state is not clear.

This is ok:
Auto-save

The opposite of that is clearly ‘don’t auto save’. So it’s good,

This is not okay:
Write to port 4.

What’s the opposite of that? Write to another port? Don’t write at all? Bring up a dialog for me to choose a port? Never use a single state button for a binary choice where the opposite state is not intuitively clear to the user.

3

Other annoying UI things.

  1. A button that says ON or OFF but it’s not clear if it says it’s current state or if says what you are changing the state to. If I click “ON” am I turning it on or is it already on?

  2. UIs that use a highlight / colour change to indicate which item in a list is selected but the list only has two items and there’s no way to know which colour or button presentation is the standard and which is the highlight.

4

Another example of bad web design:
A page asking for donations to a cause, with a form to fill out to indicate which project your donation should go to, ending with “please submit your donation to aid our cause” … but there is no “Submit” button to click!

Turns out that the big colored box saying “Make a difference!” that looks like a banner is actually the clickable ‘Submit’ button, which actually makes the donation.

The first time I encountered this, it took 4 or 5 back-and-forth emails with them to get it cleared up. They thought my browser was not displaying that banner, and were trying to figure out why, when it was being displayed but I was not recognizing it as the clickable ‘Submit’ button.

As it was their donation page, they were quite concerned. Especially as they were showing a sizeable number of people filling out the form but then abandoning the webpage without submitting. They contacted their web designer quickly, and that webpage was revised within a day!

5

I seem to remember a UI guide that said the opposite, and that it was something Apple did. Granted, it also said not to use “OK” and “Cancel” either. You were to use specific verbs for the situation, for example, a Save button when it’s asking if you want to save.

6

That describes too many DVD/Bluray menus.

7

Using the verb would normally be fine, although probably not clearer than “Yes” and “No”. However when the verb is “cancel” as in my original Wikipedia example, it could potentially be confusing because users have been exposed to too many poor UIs where “cancel” means “no”.

8

Oh my god, yes! Hate it.

9

And “UI” means?

10

@discobot quote

11

:left_speech_bubble: The exercise of an extraordinary gift is the supremest pleasure in life. — Mark Twain

12

Well, it was worth a try. User Interface. UI = User Interface.

13

Hi! To find out what I can do, say @discobot display help.

14

@discobot Have we met?

15

I strongly prefer the verb style. I don’t want to read a story about the buttons. I know it already from context – I just want to know which button is which.

I agree with this, but want to add that standard is OS-dependent. I think this is the source of many of these errors.

This is my #1 complaint as well. It’s even worse when the color scheme does not make it clear which one is highlighted.

16

Yes, I see that a lot in Google Chrome when a website wants to be able to send you push notations. Sometimes the buttons are “Allow” / “Block” and sometimes they’re “Block” / “Allow”. I always want to Block but still have to pay attention to make sure I’m clicking the right one. And that looks as though they’re all sent by Chome, so should be completely consistent…

A new one that has started to annoy me is in the newer style of pop-ups (originating with mobile behaviour I think, but now they’re everywhere), that close if you click somewhere away from the pop-up. Fine in itself but I use several tools where you can click to edit a field, it opens a tiny pop-up field like that with no “Save” buttons or anything, you fill in a value, click away and the value disappears. You have to physically press “Enter” on the keyboard to save it, but there’s no indication of that anywhere. Maybe it makes sense if you’re using a mobile device but it does not make sense on a laptop or desktop screen. And these aren’t apps that you’d ever run on a phone…

17

I was using an application that had a major upgrade that moved everything around for no obvious reason. In addition, I needed to edit the initial results, which previously was done by selecting the EDIT button, which now no longer existed. After a long period of puzzlement I finally figured out that the EDIT button had been renamed to COMPOSE, which as far as I can tell makes no sense.

18

No one has mentioned* the current fad for using gray text on a white background, rendering it harder to read, especially if you’re older. Good design specifies a high contrast between letters and background, but style ignores that.

I blame Apple, which pioneered the type of design.

*I searched for it.

19

I recently bought an excellent book scanner, the CZUR ET24Pro. This hardware is close to perfect and is a joy to use–it’s an overhead camera scanner with foot pedal that uses a laser beam to determine page contour to automatically de-skew the scanned pages.

The software, however, suffers from many UI issues and drives me batty. To be fair, the developers very clearly prioritized core functionality over finesse, and that is fine with me–the app is annoying, but it does its job correctly.

For starters, there are dozens of pointless confirmation dialogs that require you to click through. One particularly egregious example: when I am done scanning a hundred-page book, I have to manually delete the 100 pages (thankfully as one lot)–I just generated my PDF, why do I need to delete these pages now? At this point the software asks me “Are you sure?”, I click “Confirm.” then it pops up an absolutely useless dialog saying “Deleted 100 pages” with another “Confirm” button. Never mind that all of the dialog buttons say “Confirm” and not a more standard word.

This product is designed around efficiency and speed. No-one buys one of these to scan a single magazine–users are going to be scanning hundreds of magazines, books, and documents. Nobody needs the baby-steps hand-holding of dozens of extra confirmation dialogs after their 40th book.

One feature of dialog boxes that good developers implement, and this application doesn’t implement: a good dialog box should go away in a “safe” manner if you hit the ESC key. When in doubt about Yes/No or OK/Cancel, just hit ESC and you should be safe. Sadly, that doesn’t work here.

If you scan out of order for some reason, there is no drag-and-drop way to reorder things until way downstream when you are generating the PDF output, and it is a painful tool to use.

They provide dozens of batch-mode customizations, but almost all of the settings are forgotten with each run. This means when I am scanning sheet music, I have to go in and select “150dpi”, “US Letter”, and “Portrait” every single time, without making a mistake. A tool like this should really remember its last-used settings at the very least. Named-sets of user-defined customizations would be spectacular.

I believe the developers of this application never actually used it for a day of book scanning to see how tedious it is.

20

The online textbook for one of my classes, once you’re on the course website, if you click the button for “View Textbook”, it opens up another tab, and the entire content of that tab is a button that says “Open in new tab”, and it’s not until you click THAT that you get the actual textbook.

The online textbook for my other class, has two different login screens. And if you use the wrong one, it just forwards you to the other one, where you need to enter your username and password again.

Also, not a computer, but still a UI: The temperature control in my refrigerator isn’t in degrees, just a dial with the numbers 1 through 9. As well a a helpful label: “1: Min - 9: Max”. Well, yes, I could see that part, but what do “min” and “max” mean? If I want to make it colder, do I want the minimum temperature, or the maximum amount of cooling?