1

We currently have a web app that has the following interface:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

List items can be reordered within a list and can also be dragged from 1 list to another list. Items can also be removed. Clicking an icon on a list item opens a small popover to edit the item.

We are currently investigating ways to update our layout so that it's responsive. It's currently fixed width.

How can the above interface be translated in such a way that it can also fit on phone and tablet screens?

  • 1
    Dragging from List 1 to List 3 seems to be a rather painful thing to do, especially on mobile. Is there a particular reason why it is needed? Also, reordering by dragging is probably not that fun, so what about buttons to move up and down the list instead (if the lists are not that long)? – Michael Lai Jul 11 '14 at 0:31
1

You could use multiple screens, much like how you'd drag an icon on the home screen from one area to the one next to it.

Here's a quick mockup.

enter image description here

  • Have you got an image or visual of how this would work? – F21 Jul 10 '14 at 23:40
  • In the system he's talking about, you'd drag the item to the side of the screen, the screen would then transition to the next list after a brief pause, and you can then drop the item into that list. – Nick Coad Jul 10 '14 at 23:46
  • Yeah, was working on the visual. Try it on your mobile phone. Click and drag an icon on the home screen to the very edge of the screen. How big the transitional area is depends on the operating system, but you could tweak that for your own application. – Dirk v B Jul 10 '14 at 23:51
  • @DirkvB unrelated, but what did you use to make the graphic? – Nick Coad Jul 10 '14 at 23:58
  • Photoshop. I find it faster and more versatile compared to most mockup apps. Personal preference I guess. – Dirk v B Jul 11 '14 at 0:10
0

I would suggest a region that swells at the bottom of the screen upon selecting a list item. Further I would suggest combining this with Dirk's answer:

  • In a portrait orientation on a phone or tablet, you can show one list at a time but allow the user to drag near the edges to drag objects between lists, or otherwise swipe between lists like pages. Upon selecting an object, a previously zero-height space, containing your editing controls, swells up to size from the bottom to occupy, say, 40% of the screen. Once editing is complete or "scroll/swipe mode" takes back over, this space contracts to disappear into the bottom of the screen.
  • In a landscape orientation, you may be able to show the lists side by side and use the "swelling" and "contracting" space at the bottom for editing.
    • Alternatively, you might show one list at a time in a narrow section to one side, exactly like you do in a portrait orientation, leaving the rest of the horizontal real estate for a static editing pane, or show the lists side by side as above and have the editing pane "swoop" in from one side upon entering edit mode.
0

Maybe you can try something as illustrated,

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Put lists as tabs
  • Provide buttons on list items for sorting and moving

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.