1

I have a form with 5 select boxes with 5-20 items in each one. I need to explain each option a bit better, to make it easier for the user to decide which option to choose. In doing so, I've created a select box replacement that displays a title, image and short description of each option. The user can click the one they want. This causes each list to be fairly long.

The lists work very nicely on a mobile interface, where, I think, users are used to scrolling and can flick up and down at will. However, on a desktop is this pattern acceptable?

Imagine the screenshot below but with all the destinations details filled in - similar to "Morzine" and "Meribel". This particular list is a multi select, and the "read more" links expand the area to load in even more info about that option.

Example interface

Possible alternative would be a list of titles on the left with checkboxes, with more info showing up on the right on roll over.

The goal of the form is to get people to select the right options, when they often wouldn't know from the title of the option alone.

The issues with this style is the height of each select box becomes huge, and skilled, fast scrolling is needed - i.e. two finger mousepad scroll, or mouse wheel scroll means it's pretty easy to use, but I'm not so sure about those people who drag scroll bars...

2 Answers 2

1

I like your approach, some thoughts are:

  • Provide enough information to make decision or trigger action, don't push users to additional mouse over interaction. This means title + photo + some additional information (pros/cons) is a good format. To make interface more clear you could display Read more... links on mouse hover.
  • Fast scrolling is not crucial. Fast scrolling (and other tools for quick access) is needed for the scan tasks, when user:
    ▪ knows what he searches for
    ▪ processes information fast (grasping images or titles)
    You have different interaction style, when users read and explore the items in more careful way. Consider your items like highly structured text.
  • Try to minimize scrolling. Reaching the goal more faster minimizes scrolling. Currently the items are in alphabetical order. If the order will consider some decision-making points, users will reach the needed items faster, with minimal scroll. The tools for this are search, filtering and ordering by some parameters.

Also it is good to use standard abbreviations, now Meribel in 50 meters from Geneva, not minutes ).

1
  • Thanks for that - good point re: standard abbreviations ! And yep - cut off from that screen shot is a standard select control to filter the list - hopefully by things that the end user will want - "Most popular" / "In France" / "Best for families" etc. Which will cut the list down considerably. Read more on rollover is also on the cards.
    – Guy Bowden
    Aug 21, 2013 at 7:47
1

If you're going to provide a lot of supplemental information inside that drop-down, you're kinda breaking that pattern. As you say, scrolling becomes a problem, and those menus have a tendency to close inadvertently. You're also cramped for space.

I would suggest moving away a bit further from the selectbox pattern, but without going all the way into modal-dialog-land.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.