Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question

1 Answer

up vote 2 down vote

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
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 at 17:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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