Wednesday, February 11, 2015

interaction design - How do you deal with very long dropdown values?


Usually, dropdown menus are made as long as their longest value. However, that works well only for dropdowns with a predefined set of values. How can we deal with a dropdown that receives its values dynamically and displays user-generated values which don't have a reasonable size limit? For example a file name may be extremely long. I'm looking for a way to solve this which would still let me use the dropdown in a reasonable way (e.g. without having to always place it in its own row for fear that it might grow and mess with my layout).


Truncating values at a low cutoff point won't work well since the difference between the values might be at the last characters (again, the file extensions example is a good one). I can use it for the edge cases, but I'd like to get there as late as possible.



Answer



And what about to make a dropdown popup wider and think about how to show the selected value in the combobox itself?


Here is an example of how it may look like:




  1. Dropdown popup contains the whole path to the files and it's wider than the combo

  2. When selected value are modified somehow (cutting off the path, for example) so it will fit into the combobox

  3. A tooltip may show the original value if needed


enter image description here


Unfortunately, there is no obvious way to shorten the names of the files automatically. You may crop them from the beginning or from the end, no matter, but it still will be a meaningless string. The way you may try to do is to ask your users to name files before upload (or after, within some limits), or place a preview icon somewhere (if it's an image) and name files automatically somehow (using today date, or just "1", "2", etc) so their names will fit.


Or you may try to rethink the idea and avoid combo at all if possible.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...