In your opinion, which drop-down select is better designed?

2 points by jase_coop 14 years ago | 4 comments

Interested to hear what the consensus is here at HN.

http://cl.ly/062W1G1t331N190C3h3T

Apologies, but I think until I can use them I can't really tell about the overall "design". The two examples seem to serve different purpose: one to enter a pair of related pieces of data (Expiration month and year) vs the other to enter data that seems more loosely coupled (Event Category and Event Age Limit). This, for instance, means that the placement (on the same horizontal line) of the two dropdowns on the left may be appropriate but would not be as appropriate for the data on the right.

Anyways, I suspect you were wondering about the aesthetics aspect (but my point above is: design is not simply about the aesthetics).

Personally, I like the use of color on the left (assuming it doesn't clash with the surrounding page), but I'd like the dropdowns to provide a larger target area for the user clicks (like those on the right). I'd also be curious to see the two examples once they are expanded to form a complete opinion, and I wouldn't include the code used to generate each one (unless we're talking about the design of the code)

HTH

jase_coop 14 years ago | |

I'm focusing on the fact that I think the one on the right is style over function. Based on the jquery hiding the select box and displaying a list of spans (or something similar, depending how you go about it). Either way, the original select box is mutated all for a simple change of aesthetic.

So my question is focused on the designed/engineered implementation of the select box. I was interested if anyone would bring this up or agree/disagree.

On principal, I see this as the equivalent of printing a white piece of paper with a black background. Thoughts?

FrancescoRizzi 14 years ago | | |

Thanks for clarifying your question. So, if I get it right this time, we're talking about the design of the behind-the-scene stuff (code), regardless of the appearance. Definitely, the code on the left appears to be a better solution. At least, since "your code is my hell", I'd rather be presented with the code on the left. But, as you know, there are ways to encapsulate the code on the right so that it is exposed just like (or pretty close to) the one on the left if you really need to.

samarudge 14 years ago |

I'd say the right, it looks nicer and fits the style of the other elements better.

Also remember, the styling of the left dropdown is based on what Mac OS/X shows a dropdown to be, if you look at it on Windows/Gnome/KDE etc. it will most likely look different (Unless the images of the Mac default select are hard coded in, which would be a lot of extra effort, if you were going to do that you might as well do a custom dropdown)

Post; If you're interested in doing something like the right hand one on your own site check out https://github.com/harvesthq/chosen