10

I am working on the design for a large food shopping chain who is holding a contest. One of the requirements was that users can vote for their favorite item online or in the stores. My initial design was to provide something like this to show the voting options

enter image description here

A feedback was given that instead of showing the stores it might be better to use a dropdown instead. I am not a fan of the suggestion since I dont think this would be an effective applicable case for using a dropdown and dropdowns should be only used if you are providing single values and not cases like this which convey a lot of information like store location and photos.

So my question is , what are the use cases where we can use dropdowns and if they would be applicable in the case mentioned above

Edit: I updated my wireframe to convert the initial text based call to action to a distinctive call to action button based upon Roberto De Vivo's excellent feedback

| improve this question | |
  • 2
    Hmm, my concern comes from the "A feedback was given that instead of showing the stores it might be better to use a dropdown instead." comment. I could also say that it 'might be better to show the list of stores painted on the side of an Elephant', but it's the because that's missing there to rationalise the suggestion. Did they leave any reasoning as to why they feel it might be better? – JonW♦ Aug 16 '12 at 9:46
  • Sorry Jon, All I heard was that they felt that it would be more intuitive. Space is not a constraint – Mervin Aug 16 '12 at 9:52
  • @mervinj It might be intuitive to them, but that doesn't mean it's intuitive to their audience. You should really pin point that out. However I don't get the mock-up completely. Why is there a store list? Can I click on a store and vote then? Or is it just an adress list, so I have to physically go there and make an X on a sheet or something in the store? – Alexej Froehlich Aug 16 '12 at 10:06
  • @AlexejFroehlich the store list is to just highlight the physical stores where the user can go and vote. If he visits the stores , he can vote manually there too. – Mervin Aug 16 '12 at 10:13
  • 1
    My rule of thumb is to avoid dropdowns (<select> boxes specifically, not necessarily dropdown menus or any other sort of pop-in) They add too many steps, are ugly, and make it easy for the user to pick the wrong option. – zzzzBov Aug 16 '12 at 13:55
3

How many stores are there? (ball park figure). I usually let it depend on the number of choices and the information that needs to be supplied to make said choice.

When I have less then say 4 items then a drop-down is not used as it will reduce the scanability/readability of the choices because of lack of overview.

When there are more items I tend to weigh in different factors: context of the items, scrolling in large lists (which breaks the flow of a page) and also unclear sorting could be an issue regarding usability. When you add it all up it will lessen the experience, which is key IMHO in these contest type of cases. Let me say that drop-downs don't win much ;)

I'd go with your original option.

| improve this answer | |
  • The choices are the ones highlighted in the image above,just 5 – Mervin Aug 16 '12 at 9:25
  • Then I'd definitely won't go for the drop down list. Although I'd also try and look at your conversion. What is the primary action you'd want the user to take? The online vote or the "analogue" route? The brick and mortar stores get more attention in your current mock-up. – Roberto De Vivo Aug 16 '12 at 9:30
  • The voting button is there on the candidates page and its a distinctive call to action button there. however this is just a way to tell them to direct them to the correct page. However thats a valid point considering I am using images to highlight the brick and mortar stores – Mervin Aug 16 '12 at 9:33
  • You could opt to make "the candidates page" into a button. That would stimulate more and take some of the attention away from the list of stores. – Roberto De Vivo Aug 16 '12 at 9:40
1

Ok, now the updated mock-up makes it clearer :)

The following might be a good argument againts a dropdrown or combobox (what's actually the standart term for this interaction device, never found out g)

Nielson/Pearce write in "Eye Tracking Usability" about the phenomenon of input field dominance that they observed during their studies. I remember this very well because I observed the same behavior in my own eye tracking study for my bachelor. To make it short: There seem to be nothing more dominant than any kind of input field on a page. Even if you write above "don't look at the input field", you'll mostly observe, that people first look at the input field and then at everything around it.

To get the connection to your issue: Providing a dropdown might get the users away from voting online, because they're going to interact with the dropdown instead, that is only there for... well, what actually? Displaying adresses of the five (!) stores? IMHO that's not even the best practice, because your present mock-up allows to scan the adresses much faster and with less interaction then via a drop down. And the adress is presented completely at one glance. The only interaction required is to open up this list; via a mouse hover I guess? In that case I would work a little bit on the wording to make clear that you have to hover (or even more "below threshold" like presenting it as a link and once the user hovers over it, it already shows the list).

Sorry for not quotating the book exactly, I don't have it. I read it when I was working on my study, so I don't know which page the phenomenon is described.

Edit

One more argument against dropdown: What items should the dropdown contain? The names of the five stores? So the user will have to choose a store first and see the adress then, just to realise the store isn't anywhere near her, making the interaction a trial and error trip?

Hope this can help when you meet the HiPPO again.

| improve this answer | |
1

I agree with Alex that it is not obvious how to use the store list. "Vote at our stores" implies the user can "Vote at our stores" via the online form. I prefer to communicate to the user, "vote at our stores."

For example, something like this:

[Button: Vote Online] or vote in person at one of [Hyperlink:our stores].

"Our stores" can either cause the stores list to pop out or take the user to a stores list.

| improve this answer | |
0

Try this nice jquery plugin solution, which allows you to put images into an attractively styled dropdown:

http://dl.dropbox.com/u/40036711/Images/Plugins/custom-drop-down-with-images.png

look at examples 6, 7, 8 here: http://designwithpc.com/Plugins/ddSlick#?

... do something like replace the social icons in the image below with unique store location icons and addresses:

| improve this answer | |
  • I think this doesn't answer the question "When should a dropdown be used?" Instead you answer how to implement it, and that's a different thing. – Benny Skogberg Sep 24 '12 at 6:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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