2

I am working on a page containing a tabular list of schools (see http://www.guidetoonlineschools.com/online-schools/non-profit). This list contains the name of the school, data on its tuition, recommendation rate as well as the ability to compare schools side-by-side. The user is also able to filter the list based on a desired degree program via a drop down menu.

My question is: as drop down menus take up as much space as the options they contain, the first column of this table is quite wide while the 2nd, 3rd and 4th column look cluttered and smashed together.

But if, I narrow the first column, the drop down menu will be narrower than the window that opens below with its contents, so if a user selects an option like "Radiology Technician and Technologist", the drop down box will display cut off text, reading something like "Radiology Technician and."

Which is more important from a UX perspective, that the table as a whole seem better balanced or that the user is able to read the option they selected clearly in the drop down box?

Improve this question
0

4 Answers 4

Reset to default
1

I'm not sure I fully understand the part:

drop down menus take up as much space as the options they contain...

So you're not talking about this type of drop down, where the options can be any width relative to the droplist component?

picklist

If that type of drop down is not what you're talking about, I still think you can keep the table balanced and handle the width of options through:

  1. wrapping the text for an entry to a second line
  2. horizontal scrollbars (not a big fan of this)
  3. truncate the text like you suggest, put a ... at the end to indicate it's been clipped and provide a mouse-over hint on truncated items.
Improve this answer
2
  • 1
    You're using Chrome, which has this behaviour (and always has). In IE if you set a width on a <select> element in CSS it will apply to the drop-down list as well.
    – Kit Grose
    Jan 16, 2013 at 0:11
  • Yes, that is the type of dropdown I'm talking about. Essentially, I was wondering whether it's better to have a table where the dropdown width doesn't encroach on adjacent columns, with a dropdown that truncates its contents when selected (In your example it would look like "Heating, Ventilation and air..."), OR a dropdown that takes up as much horizontal space as needed and encroaches on it's neighboring columns. In the end we decided to go with the former option.
    – Maizello
    Jan 17, 2013 at 18:41
1

The common solution to getting around display limitations of standard drop-downs (select lists) is to roll-your own. It takes a bit of work to ensure accessibility, but you can pretty design them any way you see fit with a bit of CSS and JS. The Filament Group produces a lot of accessible rich jQuery based controls that you might find of use (or good as an example):

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

In general, the idea is that you can keep the HTML select and option elements, but hide it and generate your own menu via jQuery. This custom menu will then update the hidden select so that it can be sent back to the server just as it normally would.

Improve this answer
1
  • Thanks for sharing this, I discussed it with some of my teammates and dev and we won't be implementing it unfortunately, but I'm definitely going to give it a try other projects
    – Maizello
    Jan 17, 2013 at 18:30
1

So in your question, the part that caught my attention the most was

Which is more important from a UX perspective, that the table as a whole seem better balanced or that the user is able to read the option they selected clearly in the drop down box?

Let me step back and think about this as a user. The form that you are creating is going to be seen for a very short period of time as a user makes a selection. So move them through fast, in this case that is accomplished with making the text very easy to read. When I signed up for classes, I just wanted things to be easy to find and be able to move through quickly.

Do not distract them with too much design (general advice). And seriously few people care if your "table seems balanced." Sure WE care, we will judge ourselves and our peers, but when you are creating a website for a client that needs to make a sale, you just want them to flow through as fast as possible to increase the conversion.

Improve this answer
1
  • Indeed, that is good to keep in mind. Sometimes it's hard to get out of "designer" mode.
    – Maizello
    Jan 17, 2013 at 18:45
0

I will also stick to your trailing question and try to sketch my thoughts…

Which is more important from a UX perspective, that the table as a whole seem better balanced or that the user is able to read the option they selected clearly in the drop down box?

I would probably let the drop down be a drop down with a predefined width and make the table appear balanced. There will always be an even longer school name and at some point that will just ruin your design anyways.

Additionally I would then give the user some orientation – could be a simple note "You selected school xyz" or breadcrumb. Ideally I would first write somthing like "Please select a school" and then replace it with the selection made…

Improve this answer
1
  • Yeah, your second paragraph is the approach we decided to go with. Thanks for the suggestion in your last paragraph, that is quite a good idea.
    – Maizello
    Jan 17, 2013 at 18:44

Your Answer

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

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