Show mapped input in form

Question

As a part of a form I got one field where users input an id. This id maps to a name. I want to show this name in the form since spotting a typo in a id sequence of numbers is harder than recognising a name.(In the case both Id and name are similar I guess I'm out of luck)

Doing it the other way around is not an option since names are not unique. In the context of use, ids are widely used already. So the user are accustomed to entering ids and not names most of the time.

Where I get into trouble is how do I show this mapping so it's understandable? I tried to put a label after the input field but then to me it's mostly looked like a label for a missing input field. At the moment it looks something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Where the name goes in to the disabled field once an ID has been entered. However I'm not to entirely satisfied. What better ways are there of solving this?

Answer 1

One way you can simplify this process is to think of it as a process.

1. Enter user's id
2. Input data for form for selected user

^{download bmml source – Wireframes created with Balsamiq Mockups}

Using an autocomplete here will be helpful for people to enter IDs and correlate them to the user name quickly. Separating the step of entering IDs first will ensure that the form will have a correct ID input.

Alternatively if you allow the autocomplete to do a lookup on name or ID it could be an added benefit.

^{download bmml source}