When we’re putting a face to one of our ideas, the goal usually, is to design something a user can easily navigate, without really thinking too hard about it. There should be an obviousness to the form and function of the elements that make up the interface; a subconscious familiarity that comes with common design standards and practices. A button clicks, a scroll bar drags, a floppy saves, etcetera, right? Yeah... but sometimes, standards fail to provide the very best solutions. Lets consider why.
Many of the UI elements we’re familiar with are based on some real world object or action. The first successful OS “desktop” was arranged just like your physical desktop. You had folders, a trash bin, and little pieces of paper that were your files. It was an easy way for everyone to understand and interact with information on their computers, and so it persists today. But what happens when the physical things our UI element represent become outdated and goes away?
Should our “save” buttons still look like 3.5 inch floppies? Does your little nephew even know what a floppy is? I heart retro, but I’m positive Microsoft isn’t trying to be quirky. Sure, we might always understand what that floppy icon does because... well that’s what we’re used to. Your grandkids, however, might have to look up its origins on Wikipedia to understand why that strange squarish icon means “save.” (If you still use floppies, a double-high-five to you)
When do we decide to update a UI standard?
We had to ask ourselves this recently when considering the Radio button. The problem i found was that there just isn’t enough contrast between the selected and unselected states. If there are a lot of buttons, or if they were arranged in a grid, it took a little scanning to figure out which item i had selected, especially if i was coming back to the form after logging out.
The little black dot isn’t enough. Why the hell do radio buttons use a dot anyway?
If you don’t know why a radio button is called a “radio” button, it’s because the original thing it represented is a little outdated. Apparently, car radios back in the day had an array of buttons that, when one was pressed, the previous button would pop-out. Only one button could be pressed in at one time, hence the radio button’s functionality.
The use case makes sense, but the design of the radio button fails because it’s limited to the physical thing it represented. It inherently lacks contrast.
It’s seems more obvious to use a check rather than a dot, because the check breaks the line of the circle, making it stand out more in a list. “Well what about using a check box,” you ask? Nope. Check boxes suggest you can select multiple items, and the interface I'm designing requires only one item be selected at a time.
Check boxes are out, and radio buttons are wimpy. So, we invented a hybrid.
Meet the Liotta button. A Liotta uses a check, rather than a dot. It provides the visual contrast we need, while maintaining the functionality of a traditional radio button.
Here’s a working example of Liotta buttons in a form. We’ll be providing a jQuery plugin in the coming weeks if you too want to jump on the bandwagon.
By Cole Rise
Many of the UI elements we’re familiar with are based on some real world object or action. The first successful OS “desktop” was arranged just like your physical desktop. You had folders, a trash bin, and little pieces of paper that were your files. It was an easy way for everyone to understand and interact with information on their computers, and so it persists today. But what happens when the physical things our UI element represent become outdated and goes away?
Should our “save” buttons still look like 3.5 inch floppies? Does your little nephew even know what a floppy is? I heart retro, but I’m positive Microsoft isn’t trying to be quirky. Sure, we might always understand what that floppy icon does because... well that’s what we’re used to. Your grandkids, however, might have to look up its origins on Wikipedia to understand why that strange squarish icon means “save.” (If you still use floppies, a double-high-five to you)
When do we decide to update a UI standard?
We had to ask ourselves this recently when considering the Radio button. The problem i found was that there just isn’t enough contrast between the selected and unselected states. If there are a lot of buttons, or if they were arranged in a grid, it took a little scanning to figure out which item i had selected, especially if i was coming back to the form after logging out.
The little black dot isn’t enough. Why the hell do radio buttons use a dot anyway?
If you don’t know why a radio button is called a “radio” button, it’s because the original thing it represented is a little outdated. Apparently, car radios back in the day had an array of buttons that, when one was pressed, the previous button would pop-out. Only one button could be pressed in at one time, hence the radio button’s functionality.
The use case makes sense, but the design of the radio button fails because it’s limited to the physical thing it represented. It inherently lacks contrast.
It’s seems more obvious to use a check rather than a dot, because the check breaks the line of the circle, making it stand out more in a list. “Well what about using a check box,” you ask? Nope. Check boxes suggest you can select multiple items, and the interface I'm designing requires only one item be selected at a time.
Check boxes are out, and radio buttons are wimpy. So, we invented a hybrid.
Meet the Liotta button. A Liotta uses a check, rather than a dot. It provides the visual contrast we need, while maintaining the functionality of a traditional radio button.
Here’s a working example of Liotta buttons in a form. We’ll be providing a jQuery plugin in the coming weeks if you too want to jump on the bandwagon.
By Cole Rise
