I am working on a data driven, mobile web app. I am not sure which way is the best for working with lists.

  • The data is organised in a hierarchical structure with two levels (categories and entries).
  • For both categories and entries I need functions for "add new", "edit" and "delete".

The "add new" function isn't a problem. I plan to place this always on the first row in the list, maybe with a different background color.

But the biggest question is, how to work with "select a category" (and show the entries in a new page) with controls to "edit" and "delete" this item.

For technical reasons, my framework will not support "long tap" on an item.

The users are not really familiar with touch-based devices, so I don't think it is good to design with heavy use of icons.

Category list
+ Add new category
> Category 1    
> Category 2    
> Category 3
> Category n

2 Solutions I have come up with, so far:

a. By Clicking on a row, an overlay will open with the 3 commands

 Show Items of category
 Edit category
 Delete category

Pro: Command in Words, really understandable for all Con: One click more for all actions

b. Divide the list in 2 regions

Category list
+ Add new category
> Category 1     btn    
> Category 2     btn
> Category 3     btn
> Category n     btn

ca. 25% col right is an icon with an "edit" symbol, click on it opens a detail-page where you can edit the data or delete the entry

ca. 75% col left with the category-name, click on it opens a new page with all items of the category

Do you know any example websites, design patterns or tips for this?

1 Answer 1


Ideally, I would have gone for the long press to open up the action menu {edit, delete} but since you took that off the board, I went with a standard drop down hierarchy. Like the one used by wikipedia in its mobile site.

  • When you click on category, you expand all the entries in that category.
  • You have the add category button on the top of all categories and similar case for entries inside a category.
  • For editing and deleting, it is too cumbersome to have the icons always present on a mobile screen, so you can have a toggle mode in the navigation bar 'Edit/Delete' or something appropriate which allows the user to edit and delete items in a single view. In the toggled mode you should still be able to expand/contract the categories.


download bmml source – Wireframes created with Balsamiq Mockups

  • thanks for your idea. this would be great, if the list is a combination of adminsitration and working with the data. but the main task of this part of the app is the administration of the categories and entries. i think it´s not the best way to switch always in edit-mode.
    – Eric
    May 3, 2013 at 17:28

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.