0

In a web app I have a grid with rows that can have an optional property with 3 states:

  1. property is not set, no need of button C
  2. property is set, button C "edit"
  3. property is set, button C "view"
+---------+----------------+
| title   | property       |
+---------+----------------+
|row1     |                |
+--------------------------+
|row2     |                |
+--------------------------+
|row2     |                |
+--------------------------+

+-----------------------+
| A  |  B  |  C  |   D  |
+----+-----+-----+------+

The "C" button should appear/disappear or it should be always present but not active when property is not set?

0

From a UX perspective, you should have a separate button for each action. Changing the action of a button confuses the user, because they have to understand what action it will perform at that point in time.

And with a single button, they have no way of knowing that a mode is disabled.

For example, if the user wants to Edit, but the button reads View, they might start looking for an Edit button not knowing it's disabled. However, if a separate Edit button is visible but greyed out, they know it's possible to Edit, but the current state of the application doesn't allow editing.

These are described by Don Norman in the Design of Everyday Things as mode errors:

Mode errors occur when devices have different modes of operation, and the action appropriate for one mode has different meanings in other modes.

And more specifically:

Mode errors are especially likely where the equipment does not make the mode visible.

3
  • I can't understand from your answer if it's correct that the button can change "label" or should I try to find a unique "label" that fits every status. Thanks.
    – sgargel
    Jun 16 '17 at 10:10
  • 1
    From a UX perspective, you should have a separate button for each action. Changing the action of a button confuses the user, because they have to understand what action it will perform at that point in time. And with a single button, they have no way of knowing that a mode is disabled. For example, if the user wants to Edit, but the button reads View, they might start looking for an Edit button not knowing it's disabled. However, if a separate Edit button is visible but greyed out, they know it's possible to Edit, but the current state of the application doesn't allow editing. Jun 16 '17 at 11:23
  • I've edited my answer with the above comment to be more concise :) Jun 16 '17 at 11:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.