Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Can you filter the items or organize them in anyway ? –  Gildas Frémont May 2 '13 at 11:22
add comment

2 Answers 2

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

share|improve this answer
    
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? –  Paul May 1 '13 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 '13 at 21:05
add comment

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.

share|improve this answer
    
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 –  Paul May 1 '13 at 21:11
add comment

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.