1

I have a drag and drop question that looks good on full-screen but I can't shrink it down for phone screens so well. The page is navigating from top to bottom and has various knowledge checks as you go.

drag and drop - full screen

This is the full screen image. It has four columns and they snap to three, two and one as the size of the window is reduced. But if you have the question on a phone it'll be on one column and look something like this

drag and drop - one column

This means that if you want to drag one of the answers from the bottom to one of the spaces at the top you'd have to scroll up a long way.

What alternatives to this layout would work on a smaller screen. I am currently considering making the answers section horizontally scrollable as the screen size changes. Something like the image below.

enter image description here

Where the grey area can scroll left and right and the white area can scroll up and down. Are there any more intuitive ways to layout/interact with this?

Improve this question
2
  • How many drop here blocks do you have? Also besides the block you probably have some info, point it here, please. And could the questions be asked in sequence (one then other) or you need to display all of them.
    – Alexey Kolchenko
    Sep 30, 2013 at 10:03
  • I wouldn't have any more than 8. but they would all need to be on here at the same time. As at times they are used for dragging into a specific category of drop zones (i.e. two categories with four drop zones for each) There would be a question before it but I wouldn't necessarily need it on the screen at the same time on smaller screens.
    – firefields
    Sep 30, 2013 at 13:13

1 Answer 1

Reset to default
2

I think of something like this:

enter image description here enter image description here enter image description here

Which is inspired by pie (curcular or radial) menu.
enter image description here

Improve this answer
5
  • To take up the entire space for the drop zones when dragging is a good idea. The solution may lack one feature though - to cancel the drag (if that is desirable). Just add a Cancel drop zone at the bottom - or a robust undo feature.
    – Henrik Ekblom
    Oct 1, 2013 at 7:42
  • @HenrikEkblom thank you for the note on cancelling. My solution was almost the same, though I didn't visualize it. Any movenents close to screen borders in the outside direction mean cancelling. So you have four huge cancelling zones (targets in Fitt's law terms) instead of one! Although you proposition is more obvious for a user. Anyway, this is only sketch which showes drag and drop alternative for a small screen ).
    – Alexey Kolchenko
    Oct 1, 2013 at 8:01
  • @Alexey -- What did you use to make that animation?
    – Alex Feinman
    Oct 1, 2013 at 13:52
  • 1
    Hi, @Alex! I use Xara Designer.
    – Alexey Kolchenko
    Oct 1, 2013 at 14:52
  • Thanks for the suggestion. Sounds great. I am using this for the project!
    – firefields
    Oct 1, 2013 at 15:55

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.