1

We need to allow a user to select a project as primary and quick action, he should also be able to add a new project, edit and delete projects (as secondary actions) this is all done in the faceted menu, since selection is the most common action, we decided that a dropdown would be best:

enter image description here

Now we are trying to figure out where we should place edit and delete, one option is to place it inside the dropdown.

Project selection

The issue is, it doesn't feel right to place buttons inside a dropdown, it is both unexpected and might confuse a user that is used to clicking the entire button in a dropdown. so I tried to find similar behaviors in other products:

I found a similar example of such behavior in trello

enter image description here

Do you know any other products that has such behavior? Do you find this behavior usable and useful or can you suggest a better way to perform these tasks?

Improve this question

6 Answers 6

Reset to default
4

Why not just display the "Edit" Option below after the user has chosen the project?

enter image description here

Improve this answer
7
  • Thats an option we thought about, the problem is that you have to select a project in order to delete it, so, more steps in order to perform your action.
    – Eran Bar
    May 8, 2018 at 11:00
  • Also, we have a new project button below the dropdown, and this action is different then the edit and delete, since it refers to a different project.
    – Eran Bar
    May 8, 2018 at 11:24
  • When one action is the most common, it makes more sense for alternatives to require an additional click than to make the common action more difficult or confusing.
    – Kamil Drakari
    May 8, 2018 at 20:35
  • I agree, in this system there is another problem with the solution you offered: The dropdown is inside a faceted menu, when you select a project the content on the right side will change to display the project's content, but not it's settings, the space below it contains other facets, but no settings that are directly related to the project selection. So I think it could be confusing if the edit and delete buttons are placed in the faceted menu.
    – Eran Bar
    May 9, 2018 at 7:26
  • 2
    @EranBar sometimes it's better to add an extra step than to make the interface cluttered / confusing. It makes sense to put the Project actions together as suggested in this answer.
    – Luciano
    May 9, 2018 at 12:31
1

Adding actions within a dropdown is not a feasible option in my opinion as the whole surface of the selection will be clickable. Hence, adding actions within that area might confuse users.

Alternative suggestion can be to use radiolist in order to show projects and upon selection actions related to a particular project will become enabled.

Following is the wire-frame of the illustrated concept

enter image description here

Improve this answer
1
  • I totally agree with your first comment, and I added it to my original question. however, the solution you offered is not very conventional, and it takes a lot of vertical space in our faceted menu (what if we have 10 projects). Can you think of an example of a system where this type of solution?
    – Eran Bar
    May 9, 2018 at 7:39
0

Whether the user is going to make the whole CRUD operation here alone?

If not, You can make the selection in a modal dialog, where user can launch edit from there. In this way it would be clean. If the project deletion is not a costly/disruptive operation, It can delete from the modal too. If disruptive, it wouldn't be recommended as user may accidentally delete it.

Sample Screen

Improve this answer
1
  • Thank you for your answer @symbiote_sam, since selecting a project in the faceted menu is the primary action, we want the user to be able to perform it quickly, and thats why we avoid using a modal window. we can create a modal window for edit, where delete can be placed, since its an advanced functionality, the question remains how do we get to the modal window? where do we place the edit button.
    – Eran Bar
    May 9, 2018 at 7:54
0

I would say that including those options in a dropdown is, at the least, an unexpected and uncommon behaviour - and how would the user know those options are within the dropdown anyway?

Regardless of the solution, one thing I would say generally is don't conflate extra clicks/taps with a worse user experience. If the actions are clearer with an extra interaction or two, that's a worthwhile tradeoff.

Improve this answer
1
  • Thanks, I totally agree with everything you said above, I added some more information in the question, can you think of an answer or an example from another system?
    – Eran Bar
    May 9, 2018 at 7:58
0

why not display all projects at once without the dropdown. Make the top project most relevant and underneath in an expandable elements the remaining projects with the edit options to the right side of the project name

Improve this answer
1
  • Hi Boris, It will take too much vertical space in the faceted menu, while the main action that is done 97% of the time is to select a project, the rest of the actions are secondary.
    – Eran Bar
    May 9, 2018 at 8:05
0

I see 2 options ahead:

  1. The one you provided - Trello's solution seems more convincing since they redesigned the classic dropdown into an actionable panel by widening its dimension, adding actions and information. The principle is the same but the optics give the affordance.

  2. Adding an "edit" button to the whole component which opens a modal with all the project and actions related to them. This way the user is in a state of "edit mode" and can focus on the task of managing his projects in one place: a. clicking manage projects b. deleting/duplicating etc. any project he'd like, and not going back an forth by a. clicking the dropdown b. clicking the "delete" for each project resulting in a loop.

Manage projects flow

Consider adding an actions dropdown if the number of actions is greater than 3.

  • Of course you can the "New Project" button as well to the modal.
Improve this answer
1
  • Thank you, 1. Trello solution, as written above: unexpected, unconventional, the dropdown usually has a full width to click. 2. The modal, as I answered above in detail, does not provide the user with a quick project selection.
    – Eran Bar
    May 9, 2018 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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