Saturday, September 9, 2017

What is a small screen alternative for drag and drop?


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?



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...