I've termed the question "File manager" because it most closely relates to what I am looking for. This question is for a mobile web application but as it is a UX/UI design question any native app solution would be great as well.

I have a collection of cards which are grouped into chapters. The chapters in turn are grouped into decks. So the hierarchy is: deck > chapter > card

Now I would like to implement the following functions (including a way to select multiple objects), namely:

  • create new
  • edit
  • delete
  • browse
  • move

The challenge being that I also need to keep navigation on the page, so there is a title on the top and to the left of that the navigation button (back or home). Practically that leaves space on the top right of the navigation bar for a button, a function when clicking on the item itself (most likely drill down), a checkbox on the left for multiple select and something on the right of an item (maybe edit). Although I think that it would make more sense to have an arrow on the right to indicate that clicking on the item drills down.

That leaves no easy way to delete, move and edit.

enter image description here

I could use another toolbar with icons for delete and move, but that doesn't seem very elegant.

enter image description here

Another option is to have a dropdown item on the navbar instead of add (+) which would then have add, move and delete on it.

Another option could be to make to arrow the active area for drilling down and make a radial menu pop up when clicking on the item with options for edit, move, and delete.

enter image description here

Any feedback or suggestions are welcome.

  • Could you try formulating your question as an actual question? – Rahul Aug 23 '11 at 14:42
  • Sorry, the question part is essentially: What is the "best" way to do this? – JohnGB Aug 24 '11 at 8:21

If you need to do multiple cards at once, I wouldn't worry about using the toolbar; it's how Photos on the iPhone does it:

enter image description here

  • For selection that looks like a good solution, only it would then make drilling down a challenge for which I don't see any clear solution – JohnGB Aug 24 '11 at 8:24
  • You mean you want to be able to select files across folders? This could still be done. The button in the top right would enter select mode, showing the move/edit/delete toolbar. Each card would have a checkbox to select. If you traverse back, the decks and chapters would have three checkbox states: none, all selected (a check), and some selected (a horizontal line). – Stuart Aug 24 '11 at 15:05

Would you need to move / delete / edit in batches, or would this be done individually one item at a time?

If it's for individual items then you can possibly bring up a contextual option for each item by swiping that item to the left / right, or bring the menu up with a press-and-hold over that item. (if the mobile device is capable of such actions of course).

If the items need to be moved / edited in batches then your original idea of the checkboxes with the dropdown option in the top corner which reveals the list of options is how I'd probably go for it. Having a toolbar onscreen would reduce your available options in the future if any new features are required for each item (rename, new, reorder etc) so with a dropdown you can add more items into that task list.

  • Press and hold is an interesting option. Any ideas about how to deal with discovery on that? – JohnGB Aug 24 '11 at 8:26
  • Why do you think that the dropdown menu is a better option that the radial menu? – JohnGB Aug 24 '11 at 8:36
  • Press and Hold would need an indicator of some kind to start to display as soon as a downpress is detected. (Such as a bar starting to fill up, or a clock hand rotating). This would indicate that there is more available than just a single press. – JonW Aug 24 '11 at 9:12
  • As for the dropdown being better than the radial: keeping the dropdown icon away from the items themselves shows it's not directly linked to a specific item. To have it as a radial menu means it will open while you're currently selecting a single item so it's not clear that your action will be for all items selected or limited to the one that is currently selected. – JonW Aug 24 '11 at 9:13
  • the argument for a dropdown makes sense then, but one of the buttons will likely be used a lot more than any others, so hiding it behind a menu seems counter-productive. As it's not strictly speaking the same question, I've asked this as a new question which I would appreciate your feedback on. – JohnGB Aug 26 '11 at 9:20

I think Stuart is on the right track. Also, if you have access to an iPad, check out GoodReader or Zen Reader, which, though not beautifully, do manage to deal with various functions applied to one or more items in a list.

If you choose to stick with the button in the top right, I'd use a gear icon to represent a menu of different functions, but ensure that items on that menu are disabled when no items in the list are selected, and see if you can work in a hint that one must select items on the list before using the function menu to choose an action to perform on them.

Good luck, and bonus points for including your sketches!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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