I have a screen where user defines his competencies. Each competency have to be later described with some details, so each is presented as a separate panel. Below the last Competency panel I put an area for adding a competency to the list



The problem is that each competency has its type (e.g. translation, proofreading, quality checking etc.) and the user has to define what type is he willing to add (the details for competency strongly depend on its type). I have several ideas how to present it but none convinced me enough.

These are my mockups for the first three solutions.


Solution 1

When user clicks (or hovers?) Add Competency link, it is replaced it with drop-down list with competency types. After selection, a panel for competency of selected type is created and put above Add competency area.

Solution 2

When user clicks (or hovers?) Add Competency link, a drop-down list with competency types is displayed to the right.

Solution 3

Same as Solution 2 but user has to click Add button after selecting a competency.

Solution 4

When user clicks Add Competency link, a competency panel is created but inside it the user is asked to specify the type for the competency. Only after answering the competency details area is displayed withing the competency panel. A disadvantage of this solution is that the user has to add a competency in order to see a list of available competency types. In case he doesn't find a desired one he has to remove the competency (by clicking X icon in the corner inside the competency panel).

Solution 5

A list of available competency types is presented somewhere on the screen and user has to drag-and-drop the desired one onto the Add competency area. This solution might be nice for some user but confusing for others (I expect some of our users may have very little technical knowledge).

Which solution would you prefer and suggest?

  • How long is this list of competencies you're dealing with? It makes a difference if there are 4 or 40...
    – André
    Jul 24, 2012 at 11:48
  • What's the next step after this? Do they add details based on the choice or not?
    – dnbrv
    Jul 24, 2012 at 12:18
  • @André The list of competencies will have about 5-15 elements (it is configurable by the system administrator), so I decided to use simple drop-down. Replacing it with e.g. Chosen in case it increases, is not a problem. Nevertheless, this is not the issue I was asking about. Jul 26, 2012 at 11:42
  • @dnbrv Yes, a panel representing selected competency appears (just before Add Competency area) and the user specifies details for this competency inside it. These information and the corresponding field set strongly depend on the competency type. Jul 26, 2012 at 11:45

1 Answer 1


The problems I have with dropdowns ,in the dropdown and I cant quickly find them using alphabetical keys to guide me to the section in the dropdown, I might miss what I am looking for. As Andre pointed out, if your list of competencies is just 4-5 then you should have no problem with a dropdown since the user can see all the options at one shot. However if there are a lot of options then you risk the possibility of the user missing the option he was looking for.

I would recommend going the way this jquery plugin Chosen does it where they allow you to select items from the dropdown if needed but the users can also type in word and quickly filter down based upon the requirements and then selected options are no longer part of the dropdown thus reducing the number of potential filters

enter image description here

  • @Mikołaj Pastuszko: this is a very good answer, IMO! Chosen really seems to be an optimal solution for that... thank you mervinj, your link helped me too! :)
    – Chris
    Aug 2, 2012 at 22:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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