4

I have a table view which may have several items (rows), which in turn have more information that I want to be displayed in another view by tapping the row (common scenario). The point is, I'd like to allow users to edit the table content by adding/deleting items, and also to edit the details of a selected item.

I've thought about two options:

1) Display a button to enable the table view editing mode for its rows, and enable a kind of "Save changes" button in the item's view for editing its details:

view1view2view3

2) Instead of displaying the edit button in the view with the table, display a button to just add items and then allowing to edit item details as well as deleting the item in the details view (similar to Contacts app or Twitter/Facebook accounts in Settings app)

What should be the best way from the UX perspective? (Assuming that both meet Apple's guidelines...)

Thanks!

Improve this question

1 Answer 1

Reset to default
3

The first interaction pattern that you show is very close to the way that apple handle it in their built-in apps. The difference being that they don't have an "add new row" item. They use a clear + button in the navbar to achieve that - which is the right way to go.

If you use an item at the end of the list to add new items, you are not only breaking user expectation of what a list item is, but you are also going to run into problems when you have long lists, as the button will not be visible.

In your second pattern you are also breaking user expectation by making them select 'add' when they want to 'edit'. This is almost certain to cause major confusion.

For iOS the pattern of needing to add and edit items is common and has already been solved in one of two ways:

  1. Have a + and an edit button in the navbar.
  2. Use a 'detail disclosure' button on the left of each item in the list, which takes you to an alternate (often edit) view.
    enter image description here

I have done usability testing both these methods, and have found that the second method has large usability problems. Despite it being a standard iOS approach, most people tested didn't realise what a 'detail disclosure' button was despite being long time iOS users.

As a result, I would recommend my option 1 (having a + and an edit button in the navbar) on iOS.

Improve this answer
4
  • Thanks! I think that what I wanted to describe in my second approach is what you are describing as your first, the pattern found in Contacts: the "All Contacts" view has a + button in the nav bar, showing a modal view to perform the addition of a new item, and selecting a contact from the table leads to a view with this details that allows both editing such details and deleting the whole contact entry
    – AppsDev
    May 9, 2013 at 20:08
  • I have a secondary question: if you already have two buttons in the nav bar, where should be better to put the +/edit button, within the nav bar as well, or in the view as a standard button? Maybe having 3 buttons crows the nav bar, but users usually expect this kind of buttons to appear there...
    – AppsDev
    May 9, 2013 at 20:27
  • @AppsDev Maybe my answer wasn't clear. It's not a +/edit button, it's two buttons: a + AND an edit button. I can't answer what to do with a third button as it depends on what the button is. Maybe you need to use a different app structure to handle it, maybe you don't need the third button. If you want to just discuss it, you're welcome to do that in chat.
    – JohnGB ♦
    May 9, 2013 at 20:30
  • Yes, sorry, I understood you, I meant one of those buttons or the other, not a button with + and 'edit' at the same time
    – AppsDev
    May 9, 2013 at 20:40

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.