0

First time poster here, and seeking UI design advice. Feel free to ask me any follow up questions for clarification.

This is for a web-application. Requirements for this UI component are that the user can edit item and sub-item names, delete sub-item only, and have a shortcut to resources regarding that section. In addition to the sub-item, there is a second input field for its numbers.

These items are predetermined and we'll be linking them to its resources. To maintain continuity for interactions, to edit you click on the input fields. We considered gesture swipes to trigger delete, but from my research, gesture swipes are feasible, but not recommended because of it a bit funky on mobile browsers. Because there will be multiple items, I have this UI component be collapsable.

With that, do you have suggestions for implementing a delete function in a way where it feels intuitive and not cluttered? I considered the triple dot menu, but I'm not sure if it's "correct" with the placement. And I feel like I'm overthinking/overcomplicating this. I would like to maintain this structure to have similar design languages as the other UI components, but I'm open for suggestions.

Here is are some quick wireframes:

enter image description here

image of UI components

2 Answers 2

0

The problem I see with your solution is that it requires more effort and cognitive load. For example, users have to click an additional element to discover the hidden functionality, and it's not clear which item they are going to delete.

Destructive actions such as this must be clear and should include a confirmation and an UNDO option whenever possible (see rules #6 and #7 here).

With this in mind, I suggest using the word "delete" on each item or an icon, such as a trash bin. That would be sufficient for the use case you are showing here. It is simple and recognizable by almost anyone.

However...

There's a caveat to my previous answer. In the scenario you're showing, where you display only a few elements, my answer remains true.

But what if you have many elements?

In that case, you can use checkboxes for each element and then provide a button to delete all selected items. This approach also has an advantage: assuming you want to manipulate elements in bulk, it allows you to use a button with actions, as you show in your question, offering different actions. For example, take a look at how WordPress allows bulk editing of posts:

enter image description here

On a side note, this is what WordPress does when you hover over a single element, it might be of help for you (obviously it works only on desktop, you'll need to click on mobile)

enter image description here

1
  • Thank you so so much @ Kitanga Nday and @Devin! I will share your feedbacks to our team :D
    – Ashley
    Jun 30, 2023 at 2:19
0

First of all, the ellipses is in a dangerous position, given that there are 2 other actions flanking it and that the "item collapse" button is so close, it will definitely make the UI look a bit cluttered (especially on mobile).

Showing spacing issues

So, please refrain from using ellipses, especially in their current position.

Now, given that you said the following

...delete sub-item only,...

We can add delete icons to the design. Like so:

design with redefined sub item styling (delete)

You can also add the edit button next to the delete button to make it clearer that you can edit the item.

design with redefined sub item styling (delete and edit)

Forgive the way the designs look, they are meant to convey the idea and not the look pretty, in truth.

But yes, that should do. If you want you can allow users to select multiple items and clicking on the delete button will delete all the selected items.

A quick warning, if this is for user generated content and the user isn't expected to (or you don't want them to) easily delete the sub-items. Then place an ellipsis on the sub item and place the delete button there. I need to find the name for this type of design. I know it as negative design, but I can't find the text talking about this form of design.

Your Answer

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

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