My registration is bid complex for not advanced users. So basically how it works to register user need to choose country, city, club/studio, trainer/dancer All fields except countries are autocomplete fields + they contain option to create item if not found then user need to press option "add city/club/trainer".

Challenge is that sometimes we've seen that users are stopping registration because after they typed cities they dont know what to do because form is blocked until user click "add city" and they just simply ignore that.

City not found user should click new

So my question is how to clearly show to user that item does not exist and they need to take action by pressing option add city

  • what is exactly your question? – Mike Apr 17 '18 at 8:10
  • @mike how to clearly show to user that item does not exist and they need to take action by pressing option add city – Vova Bilyachat Apr 17 '18 at 8:11
  • I've added my answer below. – Mike Apr 17 '18 at 8:39

I think the "add city" action is not recognisable as a CTA. There are two reasons: it is not expected to find a CTA in a dropdownlist, visualy the CTA is not recignisable as such.

Instead of show this option inside the dropdown you could close the dropdown an show the CTA below the input field. Something like this:

enter image description here

CTA's should be visually consistant throughout the whole application. so the chosen blue in my mockup would be wrong, since you use this already as Title...

  • This is what i was thinking but was not sure. So for now its the best solution. Should be clear to user – Vova Bilyachat Apr 17 '18 at 9:26
  • Just out of curiosity - how will one select "New City" in the drop-down if it's not on the list yet? – Mike Apr 17 '18 at 10:36
  • @Mike its autocomplete so user will type and app will filter to his needs as soon as there is no matches then i will show add button. – Vova Bilyachat Apr 17 '18 at 11:40
  • If you have the autocomplete list available, why not putting it in the drop-down already? – Mike Apr 17 '18 at 12:35
  • 1
    @Mike: As I understand, this is already the case but when there is no match left the dropdown still shows only the "add city" CTA which is not understood by user. And the last item in the dropdown hids the next input field. At least this is what I understood out of Voldoymyr's question. to voldymyr feel free to correct my interpretation. – BrunoH Apr 17 '18 at 15:08

You might want to add an editable drop-down list, however it is not that obvious for less-experienced users.

I would go for an explicit solution if space is not at premium:


download bmml source – Wireframes created with Balsamiq Mockups

However you run the risk that if you put official city names in the list only, like for example Londonderry, there might be some people who would explicitly type Derry only to show their origin. And while in fact the dancers come from the same location, on your site they will be categorised as coming from the different locations.
Unless you have the mechanism to solve this issue.

  • Yes i like @BrunoH idea because its actually one input as soon there is not option i can show message to user. And about cities yes we solved that problem by using merge. Because sometimes people type cities with mistakes. – Vova Bilyachat Apr 17 '18 at 9:26
  • Mike, surely Londonderry/Derry mismatches will occur whether the drop-down shows only official names, or includes user-added ones? So long as you are allowed to specify your own city name, you may get multiple variants of the same place (e.g. Hull and Kingston-upon-Hull in mainland UK) – TripeHound Apr 17 '18 at 10:08

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.