jQueryUI buttonsets have a UX problem

jQueryUI is much less popular these days, but it is still used widely. Other UI frameworks have solved many of the shortcomings with it, but switching over to Bootstrap or some other UI framework isn’t always the best option. One thing I have noticed is the buttonsets which can be used to style checkboxes and radio buttons are problematic.  Especially so if you are using a custom (not glossy) theme! It simply isn’t clear what state the buttons are in sometimes.

See the default widget demos for an example:

Icons can help with this but the jQueryUI icons are another sore spot of the framework, and implementing even those icons on buttonsets to indicate button state can be a bit tricky.

A very little custom css seems to go a long way though!

I tested this on a few different OSes and browsers just in case the unicode icon thing might be a problem but it seemed to work well. Even if that were an issue, using a custom font or other content in the content value should work.

Flattr this!

jquery ‘otherable’ widget

HTML select boxes are limited in their usefulness. Often, for quickly filling in forms I need something like a select, but with an other option that allows me to specify the other value. There are various ways I have seen this solved, but I have one I have worked out that I like quite a bit.

Here is a simplistic demo of a transforming select/text input on jsBin

Other ways you could solve it:

  1. Have a separate value to capture the other value. Bonus if you only show that field after ‘other’ value has been chosen, and hide it and clear it if they re-chose with the select… it can be a bit of a chore to keep it all strait and you have to deal with two distinct parameters on the back end as well.
  2. No select, rather some sort of autocomplete on a text input. Works! And only 1 value to deal with on backend, keeping APIs simple. But, not as friendly for users. Free recall is more work with lower accuracy. Plus you probably want to avoid keyboard use on mobile when possible if you are going for speed.
  3. Complicated custom select widget using JavaScript. These can work, and can look nice, but the code for them is bloated and fragile. HTML select works pretty well on mobile. Attempted JavaScript mimics tend not to.

 

Flattr this!