Need help on mobile interface (space issues)

Hey everybody,

I am struggling with finding a way on how to implement this drag&drop exercise on small-screen devices: On desktops, it pretty much works as I want it to: users can rearrange the text/dialog by dragging the fragments from the right box into the left.

How could one achieve the same functionality (testing the users ability to reconstruct texts/dialogs) on mobile devices, where there isn’t enough space for two boxes next to each other?

Thanks in advance,

richard

Have you tried anything so far? What were your results?

1 Like

I have to admit that I did not. We have rather limited resources, so I figured I’d get some advice before having the exercise recoded for mobile devices.
On another occasion, where horizontal layout was an issue (dragging & dropping words in order to reconstruct a sentence) we switched to a vertical layout (top-to-bottom instead of left-to-right).
I considered the same thing for this exercise: Just one box with the shuffled elements, which could then be dragged into the right order. I guess that could work for the exercise with the text coherence, if there were - let’s say - a maximum of 5 elements to be dragged around.
But the dialog usually consists of 8 to 14 elements, some of which span over more than one line. This would mean, that the user has to scroll vertically and drag at the same time, which I wanted to avoid.
As the exercise itself is rather tough, I figured it shouldn’t be made more complicate by not displaying all the necessary information on one screen.

##First Thoughts

I’m totally kidding, of course :slight_smile:

A few thoughts:

  • Your solutions should not be reliant on drag-and-drop, which is a bad mobile experience.
  • Your solution should reflect a traditional messaging app, which is an existing and familiar paradigm.

##A Very Rough Solution…

##…That May Not Be the Right One

It sounds like you’re likely not coming from a background of UX experience, but you’re beginning to understand the value of usability, especially for a new app. I know your resources are limited, but it would be very well worth your time to look into hiring a UX professional (either as a full team member or paid consultant) to help you along the way.

This design likely works, in a vacuum. The biggest problem, however, is that applications are never used in a vacuum. Your users will come with their own set of biases, accessibility issues, preferences, and experience that could drastically influence the design.

I don’t know enough about your architecture, development skills, environment, users, personas, use cases, and journeys to say whether or not this is a viable (or even useful) design. This is where a UX professional with research skills would come in tremendously handy-- in both helping you set your target audience and key metrics that will guide your overall design strategy. From there you’ll need someone with experience designing for those groups and metrics, or at least an understanding of the core concepts necessary to optimize the design to these needs.

If you can’t afford a paid UXer, ask around here, consider making the project open-source.

Keep in mind, though, that you get what you pay for. While I’m always quick to suggest that new UXers get experience by working on open-source projects, I always caution them against giving away their work for free. We are professionals with a very specific skill set, and deserve to compensated as such. While your project is in its open-source infancy, it’s not likely to attract more skilled pros looking for a challenge.

I hope that’s helpful. As always, please let me know if you have any questions.

4 Likes

Thank you so much. Your diagnosis was correct, I am not trained in UX, so I figured, I try to get some help from the pros.
I understand the value of a smooth UX, however the “text coherence” and “dialog reconstruction” exercises just form a very small part of an overall language placement test.
Depending on the students level, the test will take between 30 and 45 minutes, 5 to 7 of which they will spend on these two exercises, this is why I was looking for a pragmatic (cheap :slight_smile: ) approach.
Yours looks really good - the only thing I would add is the possibility to erase an element by double tapping, just in case the suggested swapping doesn’t work when there are multiple elements. By “erasing” I mean putting an element back in the lower panel for later use.

Thank you so much again!

1 Like