Some improvements to the search input on Podio.
Animation is a bit rough 'n ready (can't honestly say I've made many .gifs in my life). Would most likely be a lot faster and smoother in real life. But you get the idea.
over 1 year ago
Oooh, very nice. I especially like the fact it gets darker to show the boundaries of the box :)
Would this happen when you click on the magnifying glass then?
Yeah, clicking would be involved.
Perhaps even a keyboard shortcut.
Not sure how I feel about it all yet. I feel a little uneasy moving away from an always displayed open text field. But times, they are a'changing.
What is the behaviour of the button right next to it?
@Jens Nikolaus It dispenses bananas.
But really, it's a "global settings" drop down - So isn't really tied to search like it looks here. I'm playing about with moving it right now...
That's neat @Pete Lacey
I love this interaction, dude. I dribbbled the same thing a while back.
@Morgan Allan Knutson Great minds think alike.
Digg. Why no placeholder text or can you search everything with this input?
@Luke Beard - Cheers. This is a global search, but also the field is focussed as soon as you click the button - I'm not a massive fan of placeholder text that only disappears when you start typing
Start typing when clicked makes all sense.
Also, perfect alignment with the icons below ;)
By removing the always open text field, I think you remove an immediate, obvious affordance. Upon seeing this screen for the first time, I wouldn't be able to instantly locate the search "area" – I'd have to actively look for it, spot the magnifier and then activate it. That seems like unnecessary effort on my part.
However, I'd like to see the full screen - if it's a busy page, the somewhat hidden search field might be justified.
@Casper Klenz-Kitenge - This was my immediate hesitation, and is still a concern in the back of my mind. The reasoning is that this page is **extremely** busy.
I tried to find examples of other interfaces doing this. Then I realised it is like this in the very interface I use every day - OSX.
Exactly, but this is way fucking better.
Tradeoff perfectly validated then :)
Also, it will work well for small screens – Podio adapts its layout to screen sizes, right?
@Casper Klenz-Kitenge :) - Yeah, it'll be fluid in width depending on screen size.
This is such a nice interaction.
Love the banana dispenser comment... reminded me of Monkey News.
Beautiful interaction Pete. Obvious affordance is nice, taking a (small) risk to create a new paradigm is better. I guess it all depends on how important search is to the user. If it's the most accessed element on the page then that changes things, but otherwise I think you've made a great choice.
@Pete Lacey takes balls to design something without all that gradient cruft. Good on ya and nice interaction Pete :)
This is very cool.
Good UX discussion on this post too. I designed a similar experience recently but was overruled in favor of always showing the search input...some of our users are old and scared of new things :)
Really like yours though.
about 1 year ago
Oh this is so freaking awesome.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter