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.
@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
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.
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.
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 :)
24 Responses
Pro
Pete Lacey
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?
over 1 year ago
Pro
Pete Lacey
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.
over 1 year ago
What is the behaviour of the button right next to it?
over 1 year ago
Very good!!
over 1 year ago
Pro
Pete Lacey
@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...
over 1 year ago
That's neat @Pete Lacey
over 1 year ago
Pro
Morgan Allan Knutson
I love this interaction, dude. I dribbbled the same thing a while back.
over 1 year ago
Pro
Pete Lacey
@Morgan Allan Knutson Great minds think alike.
over 1 year ago
Digg. Why no placeholder text or can you search everything with this input?
over 1 year ago
Pro
Pete Lacey
@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
over 1 year ago
Pro
Samuel Couto
Start typing when clicked makes all sense.
Also, perfect alignment with the icons below ;)
over 1 year ago
Pro
Casper Klenz-Kitenge
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.
over 1 year ago
Pro
Pete Lacey
@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.
over 1 year ago
Pro
Morgan Allan Knutson
Exactly, but this is way fucking better.
over 1 year ago
Pro
Casper Klenz-Kitenge
Tradeoff perfectly validated then :)
Also, it will work well for small screens – Podio adapts its layout to screen sizes, right?
over 1 year ago
nice guy
over 1 year ago
Pro
Pete Lacey
@Casper Klenz-Kitenge :) - Yeah, it'll be fluid in width depending on screen size.
over 1 year ago
Pro
Evan Dinsmore
This is such a nice interaction.
over 1 year ago
Pro
Jono Mallanyk
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.
over 1 year ago
Pro
Rogie
@Pete Lacey takes balls to design something without all that gradient cruft. Good on ya and nice interaction Pete :)
over 1 year ago
Pro
Clayton Correia
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
Pro
Mariusz Ciesla
Oh this is so freaking awesome.
about 1 year ago
gifs ftw
about 1 year ago