0

For instance, in this image I am using a line for both dividers and inputs.

enter image description here

Could there be any kind of confusion?

Maybe it's a better idea showing coloured lines, like this

enter image description here

Or to change the shape of inputs to a rectangle?

enter image description here

Thanks!

EDIT:

Here is how it is looking after some of your answers.

Also wanted to know if now, that I changed from the default image to another image, a border is still necessary? I can't seem to make a border/shadow there look good. Again, thanks.

enter image description here

2

This is a design review, I believe that is not the right type of question that people expect to find here.

Anyway, if you came here with theses you have a reason and you did not find help anywhere and I will help you with some UX tips.

At first, I do not see a big UX difference in your templates. Everyone looks the same.

From my viewpoint I suggest you to completely rethink the filters.

Why?

  • Should look obvious that you can filter something and that you have a filter bar on the side. At the moment look like just more info about the profile.
  • Select should look like a select
  • Input should look like an input
  • Instead of an input date, you can use some icon of the calendar and use a date input that shows a calendar when you click like on the attached image.
  • The location you can use a map or pin or world or target icon and do an autocomplete field. Or you can show a map under the field to navigate and select. You can use a Google API for this.

And maybe, you should have a clear division between the profile items on the list. You can give more white space or add a line or make some shadow effect.

See some suggestions:

PS.: Some of then is not the best design but all of them look like a filter.

enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

And of course, this is not right or wrong, it's just my personal opinion based on my experience. You should test every alternative that you think is valid for YOUR USER.

  • Hey, thanks for all your comments. If you want to see how it is looking after your recommendations, I edited my post. – Levon Sep 20 at 17:34
1

Generally I think that every element or component should satisfy the principle of affordance. Meaning it should be obvious what they can do and how they should be used on the first sighting.

In your case you should come up with a style for your input fields that makes it obvious that they are input fields. My suggestion is to have a look at design guides and/or frameworks like material.io or primeng(https://www.primefaces.org/primeng/#/inputtext). They both have good Sortiment of styled components and elements to start with.

Also note that style for the user interaction with elements is just as important as the initial style of elements. By that I mean dealing with hover effects, click events, pop ups, tooltips, etc.

Also I think that you use too much grey for semantical important components. Theming is important, don't get me wrong but your prototype could a bit more contrast.

Hope that helps.

  • Thanks for answering. I actually found primeng components really useful. I used them in my new design, which I edited into the post, if you want to look at it. – Levon Sep 20 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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