1

I'm currently working on a solution for adapting a modal window form on desktop to mobile. Problem is, the form within the modal window contains a dropdown. The solution I currently have is as such:

enter image description here

enter image description here

Here, the dropdown summons an off-canvas window that contains all the selectable options. It requires some scrolling since there are 12 options.

I don't necessarily think this looks bad, but I feel like there is a better way to handle this kind of issue. I want the user to be fully focused on filling the form, but I am mostly concerned that it won't be immediately clear that the dropdown features more options than the viewport might support. I am also not sure if it's user friendly to use multiple overlays at once since I don't recall ever seeing this in the 'wild'.

Thanks for your time.

Improve this question
2
  • Once users select a number of items from your dropdown and close the dialog, do you show them hints of what or how many they selected before submitting their changes?
    – Mike M
    Commented Jun 27, 2017 at 18:09
  • It's a dropdown with business types, so only one is applicable. Once they click on a business type, it'd show it being selected, and then it would automatically close the off-canvas and have the selection displayed in the dropdown on the form. If they change their minds (which is unlikely since they're vastly different business types), they can open the dropdown the same way as before.
    – Wendy Wojenka
    Commented Jun 28, 2017 at 6:02

1 Answer 1

Reset to default
1

Provide affordances and feedback

Currently you have a checklist, but as a user I cannot see:

  • Which items are outside the viewport
  • How many items there are in total
  • How many have I selected?

You can provide hints and context:

![mockup](h

mockup

download bmml source – Wireframes created with Balsamiq Mockups

ttp://i.sstatic.net/OTZtF.png)

This will allow users to work with long lists in most viewports. This is just a rough sketch, and I can't read the language in your current screenshot, so there may be some context I'm missing, but the principles remain the same.

I haven't included the cancel button in here (actually just a 'x' is fine), just wanting to focus on the idea of hinting at the long list.

Improve this answer
1
  • I definitely want to use the cut-off part affordance, but depending on viewport, it might be visible or not. I think it's possible in theory to adapt it based on viewport, but we're also dealing with a rather restrictive CMS (it generates html for the front-end to style only). Since the dropdown features only types of businesses, users can only select one out of 12. I put the list on alphabetical order as well to signify it's longer than it seems. Thanks for your input :)
    – Wendy Wojenka
    Commented Jun 28, 2017 at 6:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.