I don't know if "multivalued attribute" sounds good but I will try to explain my problem. I work on a web app and I have a list of users. Each user has a number (from 0 to ≈100) of "codes" related to him. Each code can be related to one or many users.

I have to display the list of users and the codes for each user. I also have to allows the administrators to edit the links between the codes and the users.

These requirements make the UI/UX a bit complex for me and I don't know how to do this. I thought about the following wireframes but I think it could be better.


download bmml source – Wireframes created with Balsamiq Mockups

One table with the list of users with a button displaying another table with all the related codes. Then I thought about a textaera allowing a raw editing of these codes (the administrators should be able to edit multiple codes in a row).

The main difficulty is how to edit/delete all these codes. I don't like the textaera but I don't know how to do it better.

These views are for administrators only (around 4 users) so they don't have to be "beautiful" or very "user-friendly" and can't take a lot of my time. But administrators have to easily know the codes related to the users and quickly edit them if needed.


Your example solution requires the admin to remember a list of relevant codes & what they mean/who they are linked to. I don't know about your specific users, but most people are not very good at recalling number codes.

If the list of code is short enough, consider displaying a table of these code.


download bmml source – Wireframes created with Balsamiq Mockups


If I understand correctly, when pressing "show codes" you'll only see the codes associated with that particular user. Therefor, displaying the name of the user is superfluous. Showing the codes in a table and then showing the codes again in a textfield for the second time is superfluous too.

My suggestion would be for a row of input fields for every code. (or multiple rows) The input can be easily changed and it will be easier for the admin to find the right code.


download bmml source – Wireframes created with Balsamiq Mockups

  • I think the list display was better for the user - it's easier to scan down a list to look for a particular code, than hunt through a grid. – Vince Bowdren Jul 3 '14 at 11:13

Unless users should be allowed to arbitrarily create new codes through the same interface you'll want the interface to provide the available codes to the user, either a full list of all available codes or through a full or partial auto-complete functionality (like assigning tags to questions here in the stack exchange.)

Unless there is need for extended description or explanation of the options, a full table as nightning suggests is probably too much.

Multi-select boxes are pretty much designed for this. If there is a short description or mnemonic available use that instead of or in addition to the straight code.

With a small number of codes a straight multiselect list is reasonable.

Beyond some threshold you should offer some filtering of available codes and/or change the filter box into a search box and dynamically fetch the options that match.

With a great number of available codes separating the display of the selected codes and the currently displayed options becomes useful. In this example the 6 selected items will show regardless of scroll position or filtering on the options list.

enter image description here

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.