1

We are developing an application where user can search for the info about their first and last name. We have two search fields, one for first name and one for last name. The reasoning is this:

1) Some names are also last names. So one search field would confuse people about what's what.

2)The user can compare two names, so mixing it with last names would be confusing.

The search is dynamic. when the user selects the first name it generates the info. It also does the same for the last name. If the users enters both, it also shows info for first name & last name combinations.

This is how the search looks:

enter image description here

When a name is selected it looks like this: enter image description here

The problem we are having:

The users don't understand they can compare two names (it says that in the text above the search), which looks like this:

enter image description here

There's also a thing ... where to put the search icon? Currently it only "refreshes" the already displayed content.

Is the location OK? should the icon be inside the search bars (both)- however the clear all is in the way? Or should the search bar be in the "suggestions"? Like this? or both?

enter image description here

Also, when the user searches for the last name (which is generates under the name info (if there's a name already in). It's waaaay down. How do we tell the user there's more content below?

Thank you for all your help!

2
  • Could you add more context, like how important is the comparison function and how often do users use first AND last name?
    – Big_Chair
    Apr 11, 2019 at 9:42
  • They use it to to see how many people have the same first and last name.
    – Phantom
    Apr 11, 2019 at 10:48

2 Answers 2

1

Not sure if I understand the problem clearly, but it looks like your input field tags are the reason behind the confusion. You could try making the tag more prominent or add a button/icon so as to let the user know that additional fields can be added. Here's an example from Housing.com

enter image description here

Also, adding a search icon beside all the names looks very repetitive and adds to the visual noise. You should place it on just the search bar.

3
  • Hello, yeah, the search is actually a filter, where you pick a name from the database of _ALL_names in my country, or two to compare. . I was thinking I should include more specific labels to what the user can do. also, your example sounds like an interesting idea
    – Phantom
    Apr 12, 2019 at 11:51
  • @Phantom Does that mean you're comparing Miha to Janez in the example above? Is the first search box on the left only for first names and the one on the right only for last names? Apr 12, 2019 at 12:15
  • Yes, that is correct. For both. The second search box is only for last name, with no comparison. If both boxes have content, you also get info about number of people with the same first and last name. (for both names in this example).
    – Phantom
    Apr 12, 2019 at 12:54
1

As you can see from my comment before and the answer above, it needed like 3 extra questions after your initial explanation to understand the logic of the interface. That's a good demonstration of it's complexity.

I think the biggest source of confusion is having two search bars that work together but then also having a functionality inside one that compares items against each other.
The first logical thought when seeing this UI is that the comparison functionality works with the two searches, e.g. name in search1 is compared vs. name in search2.
Because having two items in the same search box representing comptetitors is simply against all logic.


The common norm you see in search UIs is this:

email interface

The selected items in a search bar (called Chips by the way) work togeher to filter the results or similar. They never work against each other.


Solution Advice:
I would suggest you think about the user flow again. The most straight-forward solution I can see it simply changing the functionality in such a way, that first and last name are selected in the first search bar as chips and the name to be compared to is selected from the other search bar.

This way you would have a clearly distinguished logic that the user can follow:

"One name in this search bar and the other one in the other"
vs. the previously
"Uhh, one part of the name here...and uhh another part there. Now to compare another part in the first one again...."

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.