Icon-x-30-white

Search Animated

by Kerem Suer
Sep 6, 2012
Search
112 buckets
Share
8,462 views
Icon-colordrop-2x

Tags

  1. 126
  2. 104
  3. 68
  4. 65
  5. 64
  6. 21
  7. 20
  8. 16
  9. 7
  10. 6
  11. 3
  12. 2
  13. 1
  14. 1
  15. 1

32 Responses (page 1 of 2)

  1. Pro 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

    8 months ago

  2. Ben Sperry Ben Sperry

    super slick!

    likes

    8 months 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

    8 months ago

  4. Pro 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

    8 months 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

    8 months ago

  6. Pro 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

    8 months ago

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

    8 months 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?

    8 months ago

  9. Richard Pearson Richard Pearson

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

    8 months ago

  10. Pro Waseem Arshad Waseem Arshad

    @Kerem Suer Lovely as usual :)

    8 months ago

  11. Ty Martin Ty Martin

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

    8 months 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/

    8 months ago

  13. Pro Dan Lee Dan Lee

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

    8 months ago

  14. Pro 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?

    8 months ago

  15. Pro 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 :)

    8 months ago

  16. Pro 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

    8 months ago

  17. Pro 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?

    8 months ago

  18. Pro 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

    8 months ago

  19. Pro Lewis Braid Lewis Braid

    This is awesome!

    8 months ago

  20. Pro Christian McAdam Christian McAdam

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

    8 months ago

  21. Pro Michal Mervart Michal Mervart

    Cool

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

    8 months ago

  23. Pro Ryan O. Hicks Ryan O. Hicks

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

    8 months ago

  24. Pro 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?

    8 months ago

  25. Pro 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?

    8 months ago

Ads via The Deck

More by Kerem Suer

keyboard shortcuts: ← previous shot → next shot L or F like