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 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?

share|improve this question
    
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 '13 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 '13 at 13:13
add comment

1 Answer 1

up vote 2 down vote accepted

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

share|improve this answer
    
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 '13 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 '13 at 8:01
    
@Alexey -- What did you use to make that animation? –  Alex Feinman Oct 1 '13 at 13:52
1  
Hi, @Alex! I use Xara Designer. –  Alexey Kolchenko Oct 1 '13 at 14:52
    
Thanks for the suggestion. Sounds great. I am using this for the project! –  firefields Oct 1 '13 at 15:55
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.