View final code

While designing a form for my client, I came across the need to render clickable text beside checkboxes for better usability. I had a difficult time finding an article that did not use Javascript in anyways.

Then in my search, I came across the most obvious answer that lying right under my nose the whole time.

The Label Tag, and the ‘for’ attribute.

Most designers will start with the following:

<fieldset>
	<legend>Your dog's favorite foods:</legend>

	<input type="checkbox" value="kibble" />
	<label>Kibble</label>

	<input type="checkbox" value="chow" />
	<label>Chow</label>

	<input type="checkbox" value="steak" />
	<label>Steak</label>
</fieldset>

Which renders:

Your dog’s favorite foods:

Kibble

Chow

Steak

As you can see, you can click the checkboxes, but the text only serves as well… a label, and is not useful as an interface.

Using the ‘for’ and ‘id’ attributes respectively, we can achieve ‘clickable’ checkbox text.

Now, we add the ‘id’ attributes to the inputs, and the ‘for’ attributes to the labels.

<fieldset>
	<legend>Your dog's favorite foods:</legend>

	<input type="checkbox" value="kibble" id="kibble" />
	<label for="kibble">Kibble</label>

	<input type="checkbox" value="chow" id="chow" />
	<label for="chow">Chow</label>

	<input type="checkbox" value="steak" id="steak" />
	<label for="steak">Steak</label>
</fieldset>

Which renders:

Your dog’s favorite foods:

Kibble

Chow

Steak

Great! Now we can click either the checkbox or the label, and they both check or uncheck the box! But.. we’re not done.

The problem with the current setup is that the cursor does not change at all, and does not alert the user that ‘You can click me!’

If we add some simple CSS, we can then create a enriched user interface.

First, lets give a class to this fieldset so we do not affect other inputs or labels.

<fieldset class="checkbox">
	<legend>Your dog's favorite foods:</legend>

	<input type="checkbox" value="kibble" id="kibble" />
	<label for="kibble">Kibble</label>

	<input type="checkbox" value="chow" id="chow" />
	<label for="chow">Chow</label>

	<input type="checkbox" value="steak" id="steak" />
	<label for="steak">Steak</label>
</fieldset>

Now we can add some CSS.

.checkbox input { cursor:pointer;  }
.checkbox label:hover { cursor:pointer; color:#ffffcc; }

What this declaration is doing is; When we hover or any inputs or labels within the fieldset with the class of ‘checkbox’, it changes the cursor to a pointer, and creates a roll-over color for the label.

*NOTE* Since you are using the :hover pseudo class, you can not use ‘inline-css’ to style these elements.

Which renders:

Your dog’s favorite foods:

Kibble

Chow

Steak

Success! We now have a clean, usable, and attractive interface. Plus, we’ve created valid xHTML and CSS without having to use any Javascript or other methods.

Like the article? Leave a comment!

Since March, Internet Explorer Lost 11.4 Percent Share To Firefox, Safari, And Chrome

Quoted from TechCrunch

The new browser wars on on. More than a decade after Microsoft killed off Netscape with Internet Explorer, competition in the browser market has never been stronger. Just last week, Mozilla released Firefox 3.5, which has now been downloaded nearly 14 million times. Earlier in June, Apple released Safari 4. In March, Microsoft introduced Internet Explorer 8, and Google came out with a speedier beta of its Chrome browser.

Some early data is coming in showing relative market share and how fast people are upgrading. If you look at the chart above from Statcounter, it indicates that since March Internet Explorer has lost 11.4 percent market share to other browsers. That is the combined market share of IE8, IE7, and IE6. Certainly IE8 (the light blue line) has been growing strong since its release last March, capturing 16.7 percent of the market as of July 4. Those strong gains make up for most of the drop in IE7’s market share from 49.1 percent in March to 30.1 percent yesterday, indicating that Microsoft is doing a good job of getting existing IE7 users to upgrade at a steady pace. And in mid-June, IE8 finally surpassed IE6, which still stubbornly holds a 7.6 percent share. Add those three up, (IE6+IE7+IE8), however, and IE all together holds only a 54.4 percent market share versus the 65.8 percent combined share in March, 2009.

In just over three months, Internet Explorer has seen its overall market share erode by 11.4 percent. Where did that go? It went to Firefox, Safari, and Chrome. Nearly 5 percent of that, or about half, went to Firefox 3.0, which currently has 27.6 percent market share. That doesn’t count last week’s upgrade. See the dotted line just below the light blue IE8 line? That is a combined set of “other” browsers and appears to include Firefox 3.5, Safari 4, and Chrome 2.0.

If you look at a 30-day version of that same chart, it shows Safari 4 with 4 percent market share and Chrome with 3 percent market share. It doesn’t yet break out Firefox 3.5, but if you assume that makes up the bulk of the remaining dotted line which jumped to nearly pass IE6 in the past week, you can figure out more or less which browsers are taking share from Microsoft. (I’ve used data from the most recent daily chart in this post, but embedded the monthly chart below which has data as of June 30).

As I said, this is early data from one source. Net Applications, another commonly cited source for browser market share, is currently reviewing its June numbers, but I have a feeling they will show similar trends. (This Wikipedia page shows other browser market share sources, most of them haven’t been updated since March). It is difficult to make any firm conclusions at this point, since market share is shifting so rapidly as every major (and minor) browser tries to convince users to upgrade.

But we are in the midst of a major upgrade cycle simultaneously across IE, FireFox, and Safari (with the Chrome wild card thrown in). When all is said and done, we might see a major shake-up in market share and almost definitely will see leadership pass from IE7 to another browser. The question is will that be IE8 or Firefox? Whichever one wins, the good news is that IE6 is finally dying.

Personally, I believe once the more modern technology becomes more commercially available for businesses, we will finally be able to attend the funeral of IE6.

I came across this interesting article written by Derek Sivers, explaining and giving some interesting facts on the subject of presenting choices to both customers and clients alike.

It’s quite a good read, and you can view the article here: http://sivers.org/jam

Quoted from Derk Sivers:

For 10 years, Columbia professor Sheena Iyengar has been studying choice. For her research paper, “When Choice is Demotivating”, they ran a great test:

They set up a free tasting booth in a grocery store, with six different jams. 40% of the customers stopped to taste. 30% of those bought some.

A week later, they set up the same booth in the same store, but this time with twenty-four different jams. 60% of the customers stopped to taste. But only 3% bought some!

Both groups actually tasted an average of 1.5 jams. So the huge difference in buying can’t be blamed on the 24-jam customers being full.

Lessons learned:

1. Having many choices seems appealing (40% vs 60% stopped to taste)
2. Having many choices makes them 10 times less likely to buy (30% vs 3% actually bought)

Surgeon Atul Gawande found that 65% of people surveyed said if they were to get cancer, they’d want to choose their own treatment. Among people surveyed who really do have cancer, only 12% of patients want to choose their own treatment.

So, if you ask your customers if they want extensive choice, they will say they do – but they really don’t.

I recommend the book “The Paradox of Choice” if you’re interested in this.

Where does this NOT apply?

In “preference matching” contexts, where people come looking for something they already know and prefer, extensive selection increases the likelihood they’ll be successful in their search. (For example: a menu at a Chinese restaurant.)

Many tests have shown that when people are given some choice versus none (choosing between six possible activities versus being assigned an activity), having some choice increases motivation and enhances performance.

How do we use this info?

Online stores often offer too many choices on their front page. Lists of dozens of new arrivals, top sellers, sale items, and categories.

Artists showcasing their art (music, essays, photos) often present a giant list of everything they’ve done.

But all of us could come to these conclusions:

• Only present 3 to 6 choices at a time. (No less than 3. No more than 6.)
• Only show your deep selection when people are searching for something specific.

My favorite example of this is Firefox’s about:config feature. Those hundreds of intimidating options are hidden from most people, but there for the few who need them.

I found that these basic rules apply to almost any situation, whether it be prototyping, branding, product design, or even options for stages of web design.