4

in my Android app, I have a simple list which should provide add, edit and delete functionality. I have designed the layout like this:

Screenshot

The edit/create dialog looks like this:

Screenshot

What is the material design standard for doing something like this. I don't like having two action buttons on every list item. Any suggestions on how this could be improved?

For some context, if you click on the list item (not on the edit or delete button), nothing happens (there is no detail view). Edit and add open a dialog which allows you to create or edit a new category.

Improve this question
4
  • What is the primary action for the list item? What happens what user taps on the item?
    – Jurijs Kovzels
    Nov 21, 2017 at 15:37
  • Nothing, there is no primary action
    – Simon Schiller
    Nov 21, 2017 at 16:58
  • In the current mockup, how do you save if you were to hit edit? This will affect the UX. (for my answer anyway)
    – Destructo
    Nov 21, 2017 at 20:47
  • If you hit edit, a dialog pops up. I have added the dialog to the question.
    – Simon Schiller
    Nov 22, 2017 at 13:03

5 Answers 5

Reset to default
1

I would make Edit, with the pencil, the primary action in this list-view and the you give 2 options:

  1. Use swipe gestures to delete the category, with leave-behinds, as stated by @zach.

  2. Add a contextual menu in the top navigation bar (3 vertical dots), with the menu-item: "Remove categories", after which you can select the categories you want to delete as a user. This way users can also remove multiple categories at once & they are not prone to accidentally removing categories.

Improve this answer
1

I would hide the delete in the edit state.

So, viewstate is just the category name and the edit pencil.

Tapping edit enables the "edit mode"
Edit mode is cursor in the string ready to edit with keyboard up.
Pencil changes to trash for delete.

You can type and hit enter/done on the keyboard to save, or hit trash to delete. Up to you whether you want a "are you sure" toast. I guess that would depend on how important the categories are or if they are linked to other items.

Improve this answer
4
  • Be careful about replacing the pencil with a trash icon in edit mode — it could lead to accidental deletes if one taps twice. Also, rather than an "Are you sure?" dialog, which has been shown to generally be dismissed by users by reflex, consider showing a toast with an "Undo" button for a few seconds.
    – Tin Man
    Nov 21, 2017 at 21:20
  • I have added a screenshot of the edit dialog, inline editing would not work because of the color imo.
    – Simon Schiller
    Nov 22, 2017 at 13:04
  • I didn't know about the edit dialog. :) If this is where you are going, I would still do the same. The only difference is I would move save/cancel to the left and delete in red on the right.
    – Destructo
    Nov 22, 2017 at 19:36
  • Adding a delete button to the edit dialog sounds like a good idea. Note that it should be shown only when editing, it doesn't make sense when creating. As for placement, I'd recommend keeping Save and cancel on the right, as per Android standards, and adding delete above in its own row.
    – Tin Man
    Nov 22, 2017 at 22:31
0

If this is a purely mobile application, you could utilize swipe gestures (swipe the row to the left to show leave-behind actions, revealing an edit or delete).

Apple utilizes this in a number of apps, and Material Design also utilizes leave-behinds (scroll down on this link):

https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls

Another option is a combination of actions, so selecting a row would enable the edit of the name and a swipe to the left could reveal a delete leave-behind action.

Improve this answer
2
  • 2
    If using swipe gestures, make sure they are easily discoverable and consistent. Generally, adding non-standard gestures to your UI can unnecessarily task the user—they have to remember what motion does what in your app—so use them sparingly. In this case, I don't think it's an appropriate use of gestures.
    – Tin Man
    Nov 21, 2017 at 21:19
  • It is a purely mobile application, however I want to avoid swipe gestures if possible because my audience is not so tech-savy and I fear they would take some time to discover gestures.
    – Simon Schiller
    Nov 22, 2017 at 13:31
0

Taking into account that this is Categories management view consider making edit a primary action. Users expect list items to have some sort of action happening on tap of the main area of the list item.

Edit is a reasonable candidate for primary action. In response to tap you can show dialog or expandable panel to enable editing. In case of expandable panel you can also move remove inside the panel. See Alarms tab in Clock application for example.

Improve this answer
0

According to the material design specs, your list title should be your primary action which I'm assuming would trigger the edit dialog, the delete would be the secondary action. As other recommend you could swipe the row to delete it, but that probably would need some kind of training on the first time

Improve this answer

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.