7

I am looking for help editing a list of text items (names) in a table in iOS.

I am using a simple table that displays the name of an item (first mockup). Currently, I allow the user to enter Edit mode, where they can reorder items and delete items (the default mechanism on iOS presents a red minus button on the left of the item, and a move symbol on the right of the item) (second mockup).

My problem is with adding new items, and editing the text of existing items.

I like editing the item's text in place, and this is easy to do. When the user clicks the text, I replace the text with a text edit box, and remove the edit box when they click away (third mockup).

Currently I have a dedicated row with the text "New Item...". Clicking on the row inserts a new row at the end of list and presents a text edit box in that row with default text "Item #3" or whatever item number is current. This gets complicated in Edit mode (clicking Edit button). Should I put a circled plus on the "New Item" row?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I am not confident that the "New Item..." mechanism gives the best experience.

Any suggestions on how to handle this?

Improve this question
3
  • Have a look at Clear app, they have editing, removing and adding items in list and absolutely no buttons, just gestures: realmacsoftware.com/clear
    – alexeypegov
    Apr 7, 2014 at 13:16
  • 1
    thanks for the tip. I have heard of Clear, but not used it. My concern about a pure gesture-based UI is that for an application that is not used multiple times every day (such as the one that I am building), that users will not know how to do things and get frustrated. For a ToDo manager like Clear, this is less of a concern.
    – Mark Lummus
    Apr 9, 2014 at 20:01
  • still, they have editing done right in the list and it seems like you may do the same
    – alexeypegov
    Apr 10, 2014 at 5:41

6 Answers 6

Reset to default
1

I would look to implement a similar UI pattern to Apple Mail / Messages. This involves keeping the edit button in the top right hand side of the header, but moving the add new into the footer.

list with field keyboard up

This pattern would work if you have just a simple list, however if your list-items are buttons that relate to more information (like in mail) you should consider placing a button in the footer opposed to an input.

This would try and maintain some consistency with iOS interface patterns.

Saying that as mentioned by @alexeypegov apps like Clear gained huge popularity due to their gesture based interfaces, and iOS is far from consistent with apps like Reminders breaking my suggested mould. However I think that my suggestion is both simple, and consistent with the ecosystem.

Improve this answer
0

I'm thinking about two options, but first I would like to ask myself do I need add new item besides editing mode? Why editing and adding new item are connected, is there any value for the user, or maybe users are likely to add new items besides editing mode?

If "add item" function is hide under editing mode, there a slightly possibility that not every user would figured out how to add item. If "add item" would be placed as the last item on the list, users won't notice it, if the list is long. Even if they notice button, they would be forced to scroll down each time they want to add new item.

I don't know the context of use of your app, but I'll check these two options:

1 option:

enter image description here

2 option:

enter image description here

I've added multiple deletion option, I don't know if your users need this, but sometimes is quite usefull.

Improve this answer
1
  • I know that I can add a toolbar at the bottom of the screen and add buttons there. I was actually trying to avoid that if possible, especially just for one button. BUT, your point is valid that having the add option in the end of the list may pose a problem for long lists.
    – Mark Lummus
    Apr 2, 2014 at 19:47
0

I agree with Steppenwolf above that we need to know more about your use cases and context to make a truly informed recommendation. But I am not sure I agree about hiding the "add new item" feature.

From my perspective, you are displaying a list for the user. The user can view that list, and perhaps look at individual line items on the list by touching one. But clicking edit from this view says to me "I am going to edit this list." Therefore, I would expect that all list-altering manipulations - add, delete, reorder, edit - would occur in this mode, and it would be perfectly acceptable to put "add item" under the Edit mode.

With the caveat that I'm not sure having a full-page edit mode is necessary - you could do it all on page with various controls:

enter image description here

Perhaps touch and hold rather than an edit control to edit the name, reordering doesn't need to be hidden, use standard swipe to delete, have an Add control at the bottom of the list or in a tab bar at the bottom.

That said, I also agree with alexypegov that for a phone interface, Clear does a really nice job of allowing list manipulations and editing without ever entering an edit mode. I use that app all the freakin' time!

Just some thoughts... good luck!

Improve this answer
1
  • thanks for the thoughtful feedback. for this particular use case, the user will not perform it very often, so I am leery of using lots of gestures or long presses to perform rudimentary actions. I would prefer to have them fully exposed in the UI.
    – Mark Lummus
    Jun 26, 2014 at 23:11
0

As mentioned before, the "swipe and get contextual actions" makes perfect sense to me.

What Android did in the transition phase to make users learn the "long press" is introducing the "three horizontal dots" icon:

https://thenounproject.com/search/?q=dots&i=10554

by pressing this button, users get the same action as with long press. With this, you will always have the "see more behind this icon" appearance, while still providing native behavior.

Improve this answer
0

There are more than one way to go about this but if you want to follow the more recent design convention, there is not a distinct separation between view and edit mode in mobile. As you seen in @Mattynabib example, you can swipe to delete, hold and drag to re-order and simply tap on the title to edit. And the only visible indicator I recommend for all these interaction is an icon that shows items are gradable.

Improve this answer
0

Make the Add New Item text clearly separate from the rest of the table, so that it doesn't look like another item in the list.

Here is a screenshot of Trello which implements its list functionality in the same way enter image description here

Improve this answer

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.