Tweaking search results page

Question

I'm trying to build new UI for user search page, nothing too fancy - simple input, one drop-down and search button.
I'm using bootstrap to speed thing up and after some time I've created something that looks like so:

http://jsfiddle.net/Misiu/c2u42/

I would like to make it more interesting and functional,
I've read some articles about best practices when crating page like this (1, 2, 3), but I didn't found anything that helped me with designing my single-page "app".

How can/should I improve this so the results would be more readable. What style is now the best choice?

P.S. I'm not asking for code rewrite, I will be grateful for suggestions, samples, but code is also welcome :)

Answer 1

A few things that caught my eye:

• Make your drop shadow a little more pronounced. It's very light and you can barely see it. The same goes for the border radius... as it is it looks a little rough
• Add a little more padding around the search terms as it looks choppy with the images almost touching the corners.
• Make the emails clickable so, if an email client is configured on your client's machine, they can just click that to send an email. It also makes it easier to find information as the blue link catches your eye. I find it nice just to associate a color with a specific item so it's easy to scan a list and tell what's the email without reading it. Not all users will respond this way, but it's done almost always.
• Reduce the margin for the sides on smaller displays. I'd do col-md-10 and col-xl-8 to give it plenty of space, but I can't test that out. My main thing is the search bar text area is generally 75%+ of the width of it's parent, but it's small here. Perhaps make the search button a magnifying glass? That would help a lot.
• Make sure your items don't go off their parents on small screens!
• Make the grey rows on the table darker so it looks good on a screen that's mis-calibrated
• Color! I'd make both the dropdown for the search bar and the titles for the table a blue color so it's easy to spot where important things are. It just seems like a ton of white with random text.
• A logo and a title for "employee search" (or similar) would make it look more professional.
• You have room to make the font size bigger for the table. Make important things bold, too.

I might even advise you to combine the search bar area and the content into one chuck (visually). Try that out and see if it looks better.

Answer 2

You might want 1. Get rid of SEARCH button (make up ways for auto search initiation on input) 2. Use suggestions based on some rules of yours (search Smashingmagazine for autosuggest patterns)