“Tidiest Drop-Downs” – Part 1, The Best Compromise?

There’s no perfect solution when it comes to enabling users to select an item from a value list.   Usually it comes down to a choice between a drop-down list,or a pop-up menu.  These are similar, but crucially different.  These are the pros and cons of each, as I see it.

POP-UP MENU

Pros:

  • Easy to implement,
  • Easy to use – IF there are only a few items in the value list,
  • If the Value List is made up of 2 fields, it’s easy to show the resulting text value (field 2) but store the key value (field 1).

Cons:

  • No type-ahead functionality, at least on Windows – so, to go from A to Z, user has to scroll,
  • The menu will fill the available space – this can look really ugly.

DROP-DOWN LIST

Pros:

  • Look tidy, as only some values are displayed (about 15?),
  • User can type one or more characters to go the required part of the list.

Cons:

  • If the Value List is made up of 2 fields, it’s not possible to say “show the text value, but store the key value” (as you can with the pop-up).

Until now, I’ve gone for the tried and tested technique of using a drop-down menu to display the available values, with another field, holding the key value, UNDERNEATH the displayed field showing the text value.  (I documented the technique here.)  By setting the hidden key field to allow data entry, and setting the text field NOT to allow data entry, you get the best of both worlds … to a point.  One shortcoming of this technique is that, if you want the user to see an arrowhead as an indication that this is a drop-down, you have to make the text field on top a bit less wide than the key field beneath in order to show Filemaker’s native arrowhead.  In the wonderful world of FM12’s layout themes, this all gets a bit a bit messy, and has always been fiddly.

I’ve now realised there’s a better option, and this is the approach that I plan to use in future (i.e. until something better turns up!):

  1. Define the key field “underneath”, based, as before, on the 2-field value list.  As before, this is a DROP-DOWN menu, allowing field entry (in Browse and/or Find modes, according to the circumstances), but don’t enable the “arrow to show and hide list”.
  2. Add the same field on top of the key field.  This one, however, is a POP-UP list, with NO field entry.  The 2 stacked fields should be exactly the same size.

The result is that the text value is displayed, thanks to the behaviour of the pop-up menu, whilst the type-ahead selection behaviour of the drop-down list underneath makes things more user-friendly.  The added bonus is that the arrowhead of the “on top” pop-up menu appears to belong to the drop-down menu, completing the “best of both worlds” solution.

Note, however, there’s still a drawback with this, and it’s a big one – the user is able to double-click in the key field, potentially typing an invalid key value in the “underneath field” – more about this in the next post.

Advertisements

One Comment on ““Tidiest Drop-Downs” – Part 1, The Best Compromise?”

  1. […] Drop-downs and pop-ups – the best compromise? → […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s