3

I am having trouble finding the best solution for the best possible user experience for Mobile. I have done a solution for desktop, but really struggling for a solution for mobile

I have a large list of items, can be displayed inline or block.

I need to be able to select which items i want, also being able to manually add from an input box and remove items

Here is a demo of what i have done: http://jsfiddle.net/w3vvL/75/

Any ideas?

Improve this question
1
  • Can you filter the items or organize them in anyway ?
    – Gildas Frémont
    May 2, 2013 at 11:22

2 Answers 2

Reset to default
1

Just divide your content in 2 columns if possible (longer items can be 1 per row).

For reordering you just tap and drag the item, this is what the hamburger icon is supposed to convey. Have a standard 'Add Item' input field at the top of the list and use a toggle (edit) button to toggle in and out of delete mode. In delete mode just click on item to delete it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • thanks, how would you toggle into delete mode on your mockup? Also how would you reorder? Im kind of thinking the way i have done it in my fiddle - might done be a good idea dragging in a list on a mobile especially if that list is very long, from top to bottom ordering?
    – pab
    May 1, 2013 at 21:01
  • @Paul Forgot to mention the toggling, added that in the answer. For toggling the delete mode, you can have it in the navigation menu if you have nothing there, or have it beside the heading of the section containing the list.
    – rk.
    May 1, 2013 at 21:05
0

Have a look at the Clear app for iOS an OSX.

Tap and hold to drag an item up and down the list.

Swipe to right to delete the item. I think this is more elegant than having an "Edit" or delete mode because that mode breaks the workflow.

You could do swipe to left for adding to the selection, or simply add a checkmark in front of each item.

Pulling two items apart creates a new one in between. This may be hard (or impossible) to do on the web, I haven't seen what JQT does these days. You could also simply have a text box at the top (and/or bottom of the list) to create a new item.

Improve this answer
1
  • Really like that clearApp process, so as i swipe on the item to delete, it could be placed at the bottom of the list with a strikethrough, with the option to add it back into the list. Cant really see how the re-ordering works on that though. To add a new item, i think a textbox will do the job, keep it simple. Thanks
    – pab
    May 1, 2013 at 21:11

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.