Category Archives: User Experience

Clickable labels that highlight when selected

I’ve been designing a touch-friendly form for one of our clients. One thing we wanted to do was make checkboxes and radio buttons easier to tap, and clearly show what has been selected. A little bit of CSS and JavaScript did the trick. Check out the demo to see it in action.

This example uses Bootstrap classes, so you can drop these snippets straight into your own Bootstrap-based site and it should work just fine.

HTML

    <form id="testForm" class="form-horizontal" method="post">
    <div class="form-group">
      <div class="col-md-4">
        <label class="radio" for="option-0">
          <input name="options" id="option-0" value="1" type="radio">
          Option #1
        </label>
        <label class="radio" for="option-1">
          <input name="options" id="option-1" value="2" type="radio">
          Option #2
        </label>
        <label class="radio" for="option-2">
          <input name="options" id="option-2" value="3" type="radio">
          Option #3
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-4">
        <label class="checkbox" for="cb-option-0">
          <input name="checkboxes" id="cb-option-0" value="1" type="checkbox">
          Option #1
        </label>
        <label class="checkbox" for="cb-option-1">
          <input name="checkboxes" id="cb-option-1" value="2" type="checkbox">
          Option #2
        </label>
        <label class="checkbox" for="cb-option-2">
          <input name="checkboxes" id="cb-option-2" value="3" type="checkbox">
          Option #3
        </label>
      </div>
    </div>
    </form>

Pretty straightforward. Just standard Bootstrap form-groups, with the radios and checkboxes wrapped in label tags with appropriate “checkbox” and “radio” classes.

CSS

label.radio-inline,
label.checkbox-inline,
label.radio,
label.checkbox {
    margin-right:2%;
    cursor:pointer;
    font-weight:400;
    padding:10px 10px 10px 30px;
    background-color:#dcdfd4;
    margin-bottom:10px!important
}
label.radio-inline.checked,
label.checkbox-inline.checked,
label.radio.checked,
label.checkbox.checked {
    background-color:#266c8e;
    color:#fff!important;
    text-shadow:#000 1px 1px 2px!important
}

Again, fairly straightforward: We give all the labels a gray background and some padding. If we add the class “checked”, we use a blue background with white text.

JAVASCRIPT

//When checkboxes/radios checked/unchecked, toggle background color
$('.form-group').on('click','input[type=radio]',function() {
    $(this).closest('.form-group').find('.radio-inline, .radio').removeClass('checked');
    $(this).closest('.radio-inline, .radio').addClass('checked');
});
$('.form-group').on('click','input[type=checkbox]',function() {
    $(this).closest('.checkbox-inline, .checkbox').toggleClass('checked');
});

The Javascript ties it all together.

When a radio button is clicked, it finds the parent form-group and then from there looks for any radio buttons. It removes any existing “checked” classes from the radio buttons, then adds the “checked” class to the label for the radio button that was just clicked.

When a checkbox is clicked, the code is simpler: it just finds the label for that checkbox and toggles the “checked” class on it.

bridge the gap 2

CX and UX – A Marriage Made in Heaven

Engage 2014 is only a week away! I’ve had the great honor to be a presenter at this annual user conference for the past 14 years, and it has been wonderful to see the conference grow from a small group of customers gathered in our company’s conference room, to taking over the DoubleTree hotel with over 300 registered attendees. This year’s conference promises to be the best yet, with my personal favorite, the keynote speaker, Dave Carroll, the overnight YouTube sensation “United Breaks Guitars” and best-selling author. Dave will share his personal story about the importance of customer experience, and the impact that social media can have on even the largest corporations. Stu King, a masterful user experience designer, and I will be partnering up to deliver a break out session entitled, “CX and UX – A Marriage Made in Heaven”. We are finishing up our presentation now, and are very excited to talk to attendees about how CX and UX are rapidly converging, and how many companies have a significant digital transformation gap to overcome. If you will be attending #Engage14, we hope to see you in our break-out session!