1

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: enter image description here

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

2
  • What does the 'Select category' dropdown button do?
    – Michael Lai
    Jul 27, 2014 at 22:53
  • @MichaelLai for now this is a sample dropdown, in final version it will allow to specify departament of employee. Sometimes You know someone face, but not always his name, so after leaving blank search term and selecting only department You'll see all employees of selected department. I think this will be helpful.
    – Misiu
    Jul 28, 2014 at 7:53

2 Answers 2

2

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.

3
  • Thanks for those comments, I'll try to modify my design and then I'll ask again. For now I changed border color and shadow. I've also tried joining search box and results box, but it looks weird. Besides I will try to stick search box to top, this way when list is long user will be able to modify criteria easily.
    – Misiu
    Jul 28, 2014 at 9:37
  • @Misiu do you mind updating the screenshot so we can see the changes?
    – Michael Lai
    Jul 28, 2014 at 23:47
  • @MichaelLai sorry for delay, I don't have access to computer on which I was working on this, tomorrow I'll update screenshot and jsfiddle :)
    – Misiu
    Jul 29, 2014 at 20:09
0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.