Dude, looks slick! I have a suggestion. After a user types in a search term, it would be nice to see that term after you hit enter instead of collapsing the search box again.
Those transitions are really slick. Are you taking this approach to save space on the bar (like, say, Apple's site) or to reduce visual noise (like iPhoto)?
Not to rain on your parade, but this kinda requires a bit more discovery on the user's part. It reads as an actionable button, but the result of clicking it requires the user to start a new task (entering the search query.) Feels a little weird.
That said, the transitions are really quite nice, and the aesthetics are, as always, great.
Call me crazy, but I just think it feels weird to click [what presents itself as] a submit button before entering in the data to be submitted. As a user, clicking on it suggests I'm submitting something; but since the input is hidden at that point, it creates a tiny moment of uncertainty, where I have to ask myself, “what am I submitting?”
Perhaps simply the icon, not encased in a button, would be less uncertain…
Not sure why, but I feel pretty strongly about this, otherwise I would have just let it go. Certainly not trying to troll your shot.
It also depends on how often search is used on the site. If people's primary way of getting around is by searching, burying it under a button with a two second animation may be annoying.
30 Responses (page 1 of 2)
Pro
Morgan Allan Knutson
Here's the web search interaction for Ongo's new site. It's all CSS. The icon is an image, however. Check the video out!
over 1 year ago
Slick. Does it send on "enter" (like fb comments) or can you click the magnifying glass to send, too?
over 1 year ago
very nice, great idea. Innovation it appears is everywhere :)
over 1 year ago
Pro
Zachary Burghardt
Dude, looks slick! I have a suggestion. After a user types in a search term, it would be nice to see that term after you hit enter instead of collapsing the search box again.
over 1 year ago
Wow, all CSS, including the transition? Sliiiiiick.
over 1 year ago
Pro
Julien Renvoye
Looks really nice. Man You are killing it !
over 1 year ago
Pro
Joshua Sortino
And the winner of the internet is! ...
over 1 year ago
Pro
Christopher Paul
sexy
over 1 year ago
Pro
Eric Atha
This is really really nice Morgan. I've done a few similar to that (inspired by apple.com's search) but yours is awesome.
over 1 year ago
Pro
Jared Granger
Very slick dude.
over 1 year ago
Pro
Patrick Algrim
Why do we all get that page flash with CSS3 animations? Can anyone figure that out. If you know how to solve it please email me patrick@myze.us
over 1 year ago
Pro
Louie Mantia
Reminds me a lot of the Search in the latest iPhoto. ;)
over 1 year ago
Pro
Morgan Allan Knutson
I hadn't seen that before, Louie. Mine's better though ;)
over 1 year ago
Really nice. Requires more mouse precision though. Maybe something to consider.
over 1 year ago
Pro
Sacha Greif
Really cool, don't be surprised if that pops up in a few designs around Dribbble soon ;)
over 1 year ago
Those transitions are really slick. Are you taking this approach to save space on the bar (like, say, Apple's site) or to reduce visual noise (like iPhoto)?
over 1 year ago
Pro
Andrew Cohen
I need to step my game up.
over 1 year ago
Pro
Brian Benitez
Dude, this is badass.
over 1 year ago
Pro
Jared Fager
Not to rain on your parade, but this kinda requires a bit more discovery on the user's part. It reads as an actionable button, but the result of clicking it requires the user to start a new task (entering the search query.) Feels a little weird.
That said, the transitions are really quite nice, and the aesthetics are, as always, great.
over 1 year ago
Pro
Morgan Allan Knutson
Jared, you have to click into standard search forms anyhow.
over 1 year ago
Pro
Jared Fager
Call me crazy, but I just think it feels weird to click [what presents itself as] a submit button before entering in the data to be submitted. As a user, clicking on it suggests I'm submitting something; but since the input is hidden at that point, it creates a tiny moment of uncertainty, where I have to ask myself, “what am I submitting?”
Perhaps simply the icon, not encased in a button, would be less uncertain…
Not sure why, but I feel pretty strongly about this, otherwise I would have just let it go. Certainly not trying to troll your shot.
over 1 year ago
Valid points, Jared.
I certainly do like the approach, though.
over 1 year ago
Pro
Matthew Farag
It also depends on how often search is used on the site. If people's primary way of getting around is by searching, burying it under a button with a two second animation may be annoying.
over 1 year ago
Cool
over 1 year ago
Pro
Shopaholla
I'm with Jared. Looks awesome but also adds an unnecessary action for the user. Slick stuff either way though!
over 1 year ago