2

I have created a page where users can search for pupils and add them to a group, by moving them from one column to another. This works great on a desktop device, but trying to reduce this page down to make it mobile friendly is becoming rather problematic.

We need to display quite a lot of information as they could be searching on thousands of pupils, therefore we display first name, last name, year group, and registration class. Trying to fit 2 columns displaying all of this information on a mobile width is just not happening.

Does anyone have any suggestions?

I have included a screenshot of the design as it stands currently.

drag and drop design

Improve this question

1 Answer 1

Reset to default
0

Assuming that you're referring to the Pupils list and the Results list as the two columns you're having trouble fitting in, rather than the Pupil information columns (name, year, class, etc...), I'd say that you don't need to be displaying the Pupil list and the Results list side by side at all.

Take the Gmail app as an example. When you select single or multiple emails from any of your inboxes, you get a floating nav bar to allow you to archive, delete, and provide other functionalities like labeling and moving emais.

I'd suggest something similar here. Once the user starts to select pupils from the list, they're presented with options to move the selected pupil(s) to one of the available lists, and/or create a new list for the selected pupil(s).

Quick and dirty wireframe below enter image description here

Sorting and searching options could also be included in the toolbar.

Improve this answer
4
  • Would it be odd for a user if on a desktop they saw the initial design I posted, but on a tablet or mobile device they saw the design above?
    – JacquiDow
    Nov 2, 2016 at 12:56
  • I think there's some level of assumed or expected space constraints from a user standpoint on mobile. There's not enough space to display the same design in the same way, so seeing something that's somewhat different isn't generally surprising.
    – Miles Reiter
    Nov 2, 2016 at 13:05
  • Sorry, didn't realise enter automatically posted that, bit more to say....
    – Miles Reiter
    Nov 2, 2016 at 13:05
  • It's important to keep continuity between your two designs. Labeling, and the general ways in which the data you're displaying is organized are things that are important to keep more or less the same between platforms. Feature continuity also, but obviously limited by the constraints of having less space on mobile. The thing to avoid is to make a mobile design where you lose features and overall continuity. Displaying things slightly differently can be done though. Perhaps some kind of tabbed addition to the interface would allow users to jump between pupils and specific lists.
    – Miles Reiter
    Nov 2, 2016 at 13:10

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.