One button with Multiple States that Change Label and Functionality

Question

I am redesigning a site right now and have the following question.

Currently the user is presented with a list of Workstations. They have the option of:

1. Adding additional workstation(s) to the list

2. Selecting an existing workstation from the list and updating that existing workstation's information

As you can see, the ADD button changes to UPDATE button when they select a workstation in the list (IE the label AND the functionality change.)

Is this something that could confuse the user? Would it be better to show both buttons at all times?

In other words, when the user is presented with the list of workstations, but has NOT selected one from the list, only the ADD button would be active?

Conversely, once the user HAS selected a workstation in the list by clicking on it, only the UPDATE button would be active?

I would welcome any and all feedback on this issue, including any good links for future use in determining best practices.

Answer 1

Try to keep actions in proximity whenever possible.

In your mock, if you go with a single button (or even a second button below), users have to perform several steps:

• Select a row
• Move the mouse down to the now changing button ('update'). The more workstations added, the further this button change appears from the selected row. They also have to notice this change, assuming it hasn't been pushed down below the viewport.
• Click the button

You can try a common pattern, where you can surface actions on hover. This allows you to keep an uncluttered UI, and keep the Add button separate from Update (two very different actions)