I've worked on a pretty fun project recently, and this is a part of the search experience I came up with.
Problem with the existing product:
Multiple search bars and drop downs to be able to search for categorized values within location.
Unified search bar to handle both values and location where the categories would display within the type ahead search. Click on the globe to change your location (or select from popular searched locations around you).
I'm not usually a big fan of heavy search functionalities, feel like things should be figured out on the backend without risking users to get lost within the interaction, but not every startup have a Google engineering team to handle these things :) Plus, I think this would be (hopefully) straight forward enough for the target audience.
Thoughts and feedback always appreciated.
I will make pancakes for the first person to follow me on twitter.
8 months ago
Thanks for sharing your thought process. Is there not a way to detect the user's location automatically and then have manual input as a fallback?
@Natalie Great question, that was my first design pass. But the client and target audience is on the other side of the world where old browsers that don't support the location services are the majority (unfortunately). But a very simple trick would be to colorize the globe icon to teal if the browser supports the location services and automate it to that, and give the users the opportunity to change it.
love the style in the search typeahead - but wondering about the green counts. they're really bight in comparison to the rest of it yet are secondary info. also wondering if engineering can actually update those in real time? (speaking from experience that can slow things down quite a bit if you're searching through a ton of stuff.)
also would be cool to let people know what location they're searching so they know if they want to change it. is that somewhere that i can't see?
(i already follow you. sad i don't get pancakes.)
I like the approach a lot. One suggestion:
I'd love to see the globe icon change to indicate the location you've chosen to search in. So the whole field might read like a sentence: "Search stuff" and then instead of a globe, "in San Anselmo".
I really like this and definitely agree that searching should be lightweight and get as close to magical as it can. I also ACTUALLY got to design some search stuff with a Google engineering team behind me :)
A few visual comments/questions:
Both result drop downs seem to be a little floaty. One is sort of rubbing against the search bar and one is just floating next to the world icon. It would be nice if these things felt more related to the search bar ( visually ).
What happens to the globe after I pick a specific location?
I am very curious as to why you chose that angle for your drop shadow?
Im currently working on a similar project at my work, I used jquery autosuggest for mine, trouble is even though im using json it still only pulls a static xml file, is yours pulling form a DB matey?
Are you going to make this commercially available? Love to see a realtime demo
@Kerem Suer Lovely as usual :)
Great stuff and thanks for taking the time to share your thought process on it!
Really like it. For implementation, something like Chosen JS might be a good start: http://harvesthq.github.com/chosen/
Like this a lot, be interesting to see how people use it.
This is super nice. The green count takes my eye away from the results, though. What if that area was the same blue as everything else?
Is there a way to view all results too? How do I view all 633 skills? If I can't view them all, is the count necessary?
@Stephanie Hornung You're actually spot on with the bright green, I should probably tone that down a little bit. That green worked so well on other places, I didn't really look at the bigger picture to see if it really works on this screen. As far as the functionality, I've actually consulted with engineering before moving forward with this design, so crossing fingers that would work.
As far as displaying the location, it's a clearer on other screens because you actually have to select your current location when you're signing up for the service, but you're right it would still be pretty useful to see the location while you're searching.
Banana pancakes mmmmm :)
@Henry Modisett You're lucky! :)
I think floaty drop downs and drop shadow angle are just style choices I made, not too much thinking behind them. Globe one is a good question. Ideally globe should light up and location should be there to display I guess. Good point.
And thanks people, love all the comments and feedback!
@Jack Bingham view all results is at the bottom of the drop down, you then go to a search results page with filters as sub navigation. I think count is a good touch, and informative. Do you think it's unnecessary?
@Kerem Suer Hmm, I think only unnecessary if there's no way to view them all — but you can, so I think it works!
This is awesome!
Like a boss! .... Now the fun of having to make it work :( !
....Very slick and intuitive UI, it will require a hell of a work from backend perspective, but it will surely have great impact on search result!
Only bits I personally wouldn't do is to highlight total search result number in the green box, as it's a NON primary information, so it didn't need to be that prominent...
:) Great ui. love it (yep, except for the green over-designed bit...)
More contrast. It's only effective if the user(s) can pick it out of the background color.
@Kerem Suer I'm working on something similar (different dataset though) for a mobile app.
• I was wondering in your case, are both "thing" + "location" a requirement for searches?
• Are the auto-suggest things like people and categories based on the location chosen? e.g. UX only appears in locations equal to Finland. or e.g. Joe Bloggs only appears in San Diego?
Hey Kerem, you've been doing a great job with these animated gifs. Are you just using Photoshop to build these?
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