3

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

enter image description here

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

enter image description here

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?

enter image description here

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

enter image description here

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

1
  • 1
    A very well written first question. +1 – musefan Sep 18 '20 at 13:31
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)

enter image description here

3
  • I would agree this is a good approach, but if there is scope to add other actions later then it can become problematic trying to fit all options directly in the data row. Just something to think about, rather than a criticism of the answer. – musefan Sep 18 '20 at 13:29
  • 1
    @musefan totally valid point. The way I've seen (and designed for that), is to move to icons (for very specific and well understood and tested actions), or a ellipses menu with a dropdown – Mike M Sep 18 '20 at 13:37
  • 1
    Thanks so much for your feedback to both of you. That is a great idea. The ADD button can stay at the bottom, as it is really an action that does not require selection of a record, whereas the update button can appear when a record is selected right IN the selected record. – pxmose Sep 18 '20 at 14:37

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.