Displaying Options in a UI

One of my pet hates in UIs is seeing a drop down list (select tag) in a form with only a single option in it. As a user you have to click it to see the other available options only to find that there are none. This is a clear example of developer convenience being put before user experience.

I’m sure it seems obvious now I’ve highlighted it but if there’s only one option then there isn’t a choice to be made at all and we don’t need a form input. The code should conditionally show the drop down list only when there is a selection to be made, more than one item.

Depending on the UI design, we could even take this a step further. Maybe a drop down list isn’t the best choice for selecting between 2 items? A radio button list is probably better as it enables the user to see all of the available options at a glance and make a selection with a single click/touch. We can test the number of options and if it’s below 5 show the options in a radio button list. <ol> might be a better choice than <ul> for the list if the items are in a specific order, e.g. years.

Another example I see is displaying disabled form controls where the control is never enabled, e.g. a checkbox which is disabled because the user doesn’t have permissions to change it. If it’s not an option, don’t show it. Disabling it is the lazy option, easy for the developer. Hiding it is much better but may involve a change to layout. The UX should always be put first. It’s usually no more difficult, it’s just not considered.

Beautifying Native Form Elements

The various types of form inputs can look very different in different browsers. When it comes to styling them there’s only so much we can control. Here are all the form elements (at the time of writing) in one pen. Try viewing it in different browsers to see how they appear.

See the Pen All Form Elements.

It bugs me that the width and height of these elements seem inconsistent, as do text sizes, shading, etc. It makes it hard to create attractive forms and have everything align nicely.

A Style Base (CSS Reset) for Form Elements

It’s not too difficult to try to bring some control to the styling. Textareas, inputs which accept text and buttons are basically boxes and we can style them just like div elements. Other inputs can have special features but we can still change the basics – height, width, font-family, font-size, margin, padding, color, border, border-radius.

See the Pen All Form Elements – Style Base.

This light scattering of CSS seems to bring it under control and “flexbox” is a nice way of making everything align and behave responsively.

I don’t think there’s any hope for keygen but, to be honest, I’d never even heard of it before starting this so I’m not going to lose any sleep.

Please fork either of these pens and try out your own form styling.