Can we improve dropdowns?

14 Oct 2010 - 1:18pm
4 years ago
13 replies
1130 reads
bojcampbell
2010

Obviously it's documented that dropdowns (select boxes) are difficult to use because they hide the selections from the user and unless the information that will be exposed is extremely intuitive, they will not click on the control to expand it. I'm wondering if anyone has employed a hover technique to a dropdown to show the hidden selections?

The reason I ask is that during user testing I noticed that users will mouse over the appropriate dropdown that contains the information they are looking for, but they won't click on it unless the exposed element is intuitive. In other words, if they are looking to select a color and the one item selected is currently "Ice Cream" and contains red, green, and blue when expanded (extreme and poor real-world example, but proves my point) they will not click.

The answer, "Make sure you put the intuitive information in the dropdown" doesn't work in this situation because we are using industry terminology that can be confusing (different issue). Exposing all the options would be the obvious choice if I have room, which I don't. I am considering the idea of a type of hover technique that exposed the selections. It feels very usable and I don't want to go down a road that has already been travelled without success.

Anyone tried/seen this technique?

Comments

14 Oct 2010 - 2:48pm
Yvonnia Martin
2009

Maybe this just requires better labeling and better "chunking" of information to help them learn? The "hover" is exactly the same as the old dropdown navigation scheme--which is not really usable either (if Im understanding your solution correctly)

Just my observations and two cents.Laughing

--Yvonnia

14 Oct 2010 - 3:26pm
bojcampbell
2010

Couldn't it also be considered a sort of tooltip? They'd still have to click the control to use it but would ghost the contents when moused-over. I do agree is it creating a control much like dropdown navigation lists.

14 Oct 2010 - 7:05pm
Christian Snodgrass
2008

Since drop-downs are a bit fumble-y at times, I often use check boxes or radio buttons instead, that way all the choices are readily visible.

Of course, if you had 1000 things, that could be a bit messy. Though, if you that many things, it's likely a drill-down would be better anyways.

- Christian

On Thu, Oct 14, 2010 at 7:12 PM, bojcampbell <bo.campbell@verizon.net> wrote:

Couldn't it also be considered a sort of tooltip? They'd still have to click the control to use it but would ghost the contents when moused-over. I do agree is it creating a control much like dropdown navigation lists.

15 Oct 2010 - 11:05am
bojcampbell
2010

There are 3 items in my dropdown that contain terms that are only related to each other if you know the industry. An absolute beginner will have an issue until they learn the terminology, which is requisite for success. I don't believe that once the dropdown is clicked one time, maybe twice, by a novice, that they will forget or unlearn that process. I thought maybe I could make it easier but the risks of trying something "new" or different seem too great, as well as the expense of testing.

15 Oct 2010 - 12:05pm
Diana Wynne
2008

With three items, they can be radio buttons, with enough space next to them to provide explanations of what they mean.
You can make the help text subtle enough that it doesn't distract regular users who already know those terms.

Diana
On Fri, Oct 15, 2010 at 9:18 AM, bojcampbell <bo.campbell@verizon.net> wrote:

There are 3 items in my dropdown that contain terms that are only related to each other if you know the industry. An absolute beginner will have an issue until they learn the terminology, which is requisite for success. I don't believe that once the dropdown is clicked one time, maybe twice, by a novice, that they will forget or unlearn that process. I thought maybe I could make it easier but the risks of trying something "new" or different seem too great, as well as the expense of testing.

15 Oct 2010 - 9:48pm
bojcampbell
2010

They should be radio buttons for ultimate usability, I agree. Does usability for one easily-learnable item constitute a sacrifice in general aesthetics and the flow of similar controls? That's the question I'm trying to answer. I am sure that testing will show that the radio buttons will perform better. But on an application screen where users spend hours each day, I feel the visual emotion and sleekness of the screen play a big role. That also brings up the question of whether a user will FEEL better about a screen that is clean and beautiful even if a control is hard to use for the first couple of times? Since I have to represent this person as her advocate, which makes her the most happy?

16 Oct 2010 - 9:05am
Christian Snodgrass
2008

The problem with aesthetics is that it is very personal, and differs from person to person. For example, I generally find the look of radio buttons more pleasing then the boxy appearance of drop-downs.

On Fri, Oct 15, 2010 at 11:19 PM, bojcampbell <bo.campbell@verizon.net> wrote:

They should be radio buttons for ultimate usability, I agree. Does usability for one easily-learnable item constitute a sacrifice in general aesthetics and the flow of similar controls? That's the question I'm trying to answer. I am sure that testing will show that the radio buttons will perform better. But on an application screen where users spend hours each day, I feel the visual emotion and sleekness of the screen play a big role. That also brings up the question of whether a user will FEEL better about a screen that is clean and beautiful even if a control is hard to use for the first couple of times? Since I have to represent this person as her advocate, which makes her the most happy?

16 Oct 2010 - 8:05am
Chauncey Wilson
2007

I had a few questions and comments here.   1.  How many items are on your drop-down? 2.  If you use the "hover and show technique" will that generalize to all other drop-downs in your interface (consistency within and across-pages)?  If you have drop-downs with many items it probably won't be generalizable?

3.  If you have a limited number of items, the radio button approach would work, but if your list will grow in the future, then the drop-down design is more evolvable and would accommodate new items in the next update/version. 

4.  Is your list dynamic or static.  Drop-downs are useful for dynamic lists. 5.  Do you have a good label for the dropdown or are you using drop-downs where the label is part of the dropdown? To me, the title of a control is the first level of product documentation and the clarity of the label is important for invoking clicking behavior.

  Chauncey

On Thu, Oct 14, 2010 at 5:10 PM, bojcampbell <bo.campbell@verizon.net> wrote:

Obviously it's documented that dropdowns (select boxes) are difficult to use because they hide the selections from the user and unless the information that will be exposed is extremely intuitive, they will not click on the control to expand it. I'm wondering if anyone has employed a hover technique to a dropdown to show the hidden selections?

The reason I ask is that during user testing I noticed that users will mouse over the appropriate dropdown that contains the information they are looking for, but they won't click on it unless the exposed element is intuitive. In other words, if they are looking to select a color and the one item selected is currently "Ice Cream" and contains red, green, and blue when expanded (extreme and poor real-world example, but proves my point) they will not click.

The answer, "Make sure you put the intuitive information in the dropdown" doesn't work in this situation because we are using industry terminology that can be confusing (different issue). Exposing all the options would be the obvious choice if I have room, which I don't. I am considering the idea of a type of hover technique that exposed the selections. It feels very usable and I don't want to go down a road that has already been travelled without success.

Anyone tried/seen this technique?

(((Please le
16 Oct 2010 - 12:05pm
achung
2010

Drop down menu is more dynamic and it does not affect the layout when the list grows longer.
Another advantage is the sub-menu option from the drop down menu.

Here an example of "hover and show" example:
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Alex

17 Oct 2010 - 12:05pm
Navid
2010


I'm involved in a project trying hover instead of drop downs.  The key is employing this technique repeatedly and consistently in your interface.  I think for frequent use applications/enterprise sotware it is the way to go.
If you have a lot of one-time users on a website, hover may not be apparent to them, so you may want to have a small visual symbol that "suggests" there is more (not a drop down arrow but something like that).   

On Thu, Oct 14, 2010 at 3:03 PM, bojcampbell <bo.campbell@verizon.net> wrote:

Obviously it's documented that dropdowns (select boxes) are difficult to use because they hide the selections from the user and unless the information that will be exposed is extremely intuitive, they will not click on the control to expand it. I'm wondering if anyone has employed a hover technique to a dropdown to show the hidden selections?
...
(((P
17 Oct 2010 - 4:40pm
mattmcclendon
2010

Let's open the platform can of worms here as well.  Hover and iPad (connected devices) don't really work together, so what would the experience be for those who aren't using a traditional platform?  

I use istockphoto.com all the time, and in the primary search bar there is embedded dropdown functionality.  The dropdown let's you filter your search across particular forms of media.  While embedding tools within other tools can be troublesome, I think this is worth discussion.  Grouping of tools to give context to what might be found in a dropdown might be enough to help educate the user.

17 Oct 2010 - 5:05pm
Navid
2010

The default browser experience for touch devices like an iPad is that hover becomes single click, and click becomes double click.It is not a bad default experience, for example if you wanted to have a button that does something (like "Save") and the default options of the save button would be in the hover panel. Obviously designing for the iPad or whatever specifically is better.

On Sun, Oct 17, 2010 at 4:52 PM, mattmcclendon <matt.mcclendon@gmail.com> wrote:

... so what would the experience be for those who aren't using a traditional platform?  
...

(
18 Oct 2010 - 1:05pm
bojcampbell
2010

Thank you for the replies and helpful information. There are many questions in the posts but I think I have my direction from what is being said. The dropdown should have a label or be a radio button for better usability. If I implement a hover, I'll have to do this across the 7 other areas of the application, and this is not possible considering the agile development process and rollout schedule unless the functionality is unveiled in 18 months. The dropdown content is static and contains 3 items, and could possibly grow by one or two items in the future but no more than that.

The reactions to my question remind me to be true to the science of Interaction Design and not succumb to the pressures of the existing application's resistance to change and the speed of the agile development cycle. Something that is good for all of us to remember.

 

Syndicate content Get the feed