Search Animated

Search

32 Responses (page 1 of 2)

  1. Kerem Suer Kerem Suer

    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.

    Solution:
    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.

    likes

    over 1 year ago

  2. Ben Sperry Ben Sperry

    super slick!

    likes

    over 1 year ago

  3. Natalie Doud Natalie Doud

    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?

    likes

    over 1 year ago

  4. Kerem Suer Kerem Suer

    @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.

    likes

    over 1 year ago

  5. Stephanie Hornung Stephanie Hornung

    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.)

    likes

    over 1 year ago

  6. Ljuba Miljkovic Ljuba Miljkovic

    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".

    likes

    over 1 year ago

  7. Henry Modisett Henry Modisett

    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?

    likes

    over 1 year ago

  8. Richard Pearson Richard Pearson

    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?

    over 1 year ago

  9. Richard Pearson Richard Pearson

    Are you going to make this commercially available? Love to see a realtime demo

    over 1 year ago

  10. Waseem Arshad Waseem Arshad

    @Kerem Suer Lovely as usual :)

    over 1 year ago

  11. Ty Martin Ty Martin

    Great stuff and thanks for taking the time to share your thought process on it!

    over 1 year ago

  12. Mariusz Woźniak Mariusz Woźniak

    Really like it. For implementation, something like Chosen JS might be a good start: http://harvesthq.github.com/chosen/

    over 1 year ago

  13. Dan Lee Dan Lee

    Like this a lot, be interesting to see how people use it.

    over 1 year ago

  14. Jack Bingham Jack Bingham

    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?

    over 1 year ago

  15. Kerem Suer Kerem Suer

    @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 :)

    over 1 year ago

  16. Kerem Suer Kerem Suer

    @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!

    likes

    over 1 year ago

  17. Kerem Suer Kerem Suer

    @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?

    over 1 year ago

  18. Jack Bingham Jack Bingham

    @Kerem Suer Hmm, I think only unnecessary if there's no way to view them all — but you can, so I think it works!

    xxx

    over 1 year ago

  19. Lewis Braid Lewis Braid

    This is awesome!

    over 1 year ago

  20. Christian McAdam Christian McAdam

    Like a boss! .... Now the fun of having to make it work :( !

    over 1 year ago

  21. Michal Mervart Michal Mervart

    Cool

    over 1 year ago

  22. Gilberto Lenzi Gilberto Lenzi

    ....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...)

    over 1 year ago

  23. Ryan O. Hicks Ryan O. Hicks

    More contrast. It's only effective if the user(s) can pick it out of the background color.

    over 1 year ago

  24. Ed Lea Ed Lea

    @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?

    over 1 year ago

  25. Philip Clark Philip Clark

    Hey Kerem, you've been doing a great job with these animated gifs. Are you just using Photoshop to build these?

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like