keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
43,972,828,708 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
16 Responses
OOH love this. So crisp.
about 2 years ago
Pro
Kevin Dees
[ignore this part: and read my comment below]
Love the look! but is it usable? Drop-down might create a strange mouse pattern. Don't mean to be negative.
Otherwise, love it. Digging the selection box design.
about 2 years ago
Pro
Matthew Smith
@Kevin Wha? It's a select menu, and yes it's usable, its a well defined pattern. :)
about 2 years ago
Pro
Trevor May
Heh. Makes sense to me. Looks nice too! :)
about 2 years ago
Pro
Ali Ali
beautiful work as always.
about 2 years ago
Pro
Kevin Dees
[slaps forehead]
Interaction patterns, was saying that when you click the yellow button you might have to move the mouse left then down, for the menu to stay open.
However, I just remembered that selection boxes are different from hover menus, they stay open once you click them.
Sorry for the confusion, not sure what I was thinking, must be having a bad day. (Probably thinking of the drop down like a nav menu for some reason.)
Props Matt, thanks for the response. Love your work.
about 2 years ago
Pro
Matthew Anderson
Groovy. Love how the select options clip the border in the lower left corner.
about 2 years ago
Pro
Dalton Hurd
I do like it in the sense that it's a unique take, but I do think Kevin has a point in terms of usability. Depending on the amount of usage, it could either be left as is, or made wider.
about 2 years ago
Is that on the left a different style?
about 2 years ago
Pro
Matt Johnson
@Kai - It's most likely the none selected state of the same UI.
about 2 years ago
Pro
Matthew Smith
A good select menu, as with dropdowns, shouldn't be hover dependent. Hover with intent is a good option, but click is better IMO.
about 2 years ago
Pro
Kevin Dees
@Matt, I agree, click over point is best.
Though, I haven't come across any user tests on the subject of select menu usability. It would be nice to see how a user responds to select vs. hover menus.
I assume hover menus needs a direct crossover with the mouse anchor point and the dropdown box. However, I don't believe, as in your case, that it is critical for select menus; as the dropdown stays active even after the mouse leaves the selected element.
(I wonder if there is a study that shows whether select menus should expand below the select-arrow/point-of-click. And the use of hover vs select for select-boxes and navigation menus.)
about 2 years ago
Pro
Drew Yeaton
If you checkout how OS X select boxes work, you'll notice that if you click and hold the menu stays open. Then, when you depress the button on an item, a selection is made and the menu closes. So, Kevin is right in wondering if this design will negatively affect the interaction pattern.
I don't personally use select boxes this way, but I'm sure the folks at Apple have done their due diligence to ensure select boxes work this way.
Also, what happens when the select is near the bottom of the screen/page? The arrow is pointing down but the menu would pop up I presume.
These are small niggles, I know. I do love the style of this though–great color and contrast.
about 2 years ago
Pro
Kevin Dees
This is why i love dribbble, Really great work and attention to the details of design and interaction. Loving this community.
about 2 years ago
Pro
Nacho
I don't see anything special in this. Why so serious?
about 2 years ago
The nice thing about having the menu expand to the full width under the arrow is that you can move your mouse straight down after clicking the arrow and it will highlight the option you're hovering over without running the risk of covering the live text area with your cursor. And there's the simple fact that you only have to move the mouse in one direction before clicking to select the item.
Far from the biggest usability problem I've ever encountered, but I must say that I would like to see it full-width.
Really REALLY sharp looking menus, though! Love 'em.
about 2 years ago