Button labels: Select versus Selected? or Deselect?

Question

I was recently request to change all our action button labels from 'Add' to 'Select', simply because the action happens after clicking “Done” on the screen footer.

So, I was wondering… while “Select” is very clear, how should we label the button after selection was made?

I have 3 options:

Negate the label, so the label still calling for action:

1. Select/Unselect or,
2. Select/Deselect

Change the label to indicate the selected items:

3. Select/Selected

While between option 1 and 2, 2 is clearly the better one (according dictionary, Ngram viewer comparing the usage, or Google trends), what is the better option between 2 &3?

Use label for call to action (I find ‘Deselect’ awkward), or use the check-box Equivalence, which is ‘Selected’?

Answer 1

(Select/Deselect) is the well established standard. You'll see it both in many interfaces and the Microsoft Manual of Style, which is the style guide used by technical writers in many companies, and many interfaces.

https://www.amazon.ca/Microsoft-Manual-Style-4th-Corporation/dp/0735648719

"Remove" and "Clear" are generally discouraged. "Unselect" has undo history connotations that you may not intend, and I've never seen it used.

That said, you may want to talk to the people who are documenting your product. It's rather tortuous and redundant-sounding to write well when the button labels break sentences:

"Select an option, then click Select..." groan

When you consider the whole product UX -- the people who have to describe it in support calls, the documentation people read, etc. -- you may want to come up with some different verbiage like:

Add to Bucket/Empty Bucket

"Select an option, then click Add to Bucket..."

Answer 2

Without some more information on the design around the select button, it's hard to say. I assume you have a set of items from which your users can select a few. But is it in list form (i.e., rows of items) or in a grid (with cards for items)?

I think in general one has to separate the two functions you mention: Some design aspect indicates the selection status, and some other design aspect allows to toggle it.

E.g., in a table, there is usually a selection control in the first column (with some select-all function in the header). This serves the toggle function. The indication function is served by the presence or absence of the checkmark, and background color on the entire row.

Your question sounds like your concerned only with how to toggle status, and if that's true, I would go for (2), because the indication function of (3) is probably cared for elsewhere already. If not, this combination of toogle and indicator is why you can't decide. Maybe the design decision should then be to separate the two functions into different aspects of the design, so your button can be labelled as (2) for toggling, and status is indicated differently (e.g., as a checkmark on the top right of cards in a grid).

Answer 3

If its a list of items then SELECT would fit the case. Use CLEAR or REMOVE would make more sense than DESELECT. Now it would still depend how you layout or design the interactivity. A simple arrow icons would also do if the idea is to move items between columns.