Simplified User Interface
- October 29, 2007 11:19 PM
- CSS, User Interface Design
- Comments (0)
Ever wasted time trying to figure out how to do something in an application? I know I've sat and cursed at badly designed user interfaces, just as everyone else has, and thanks to an awesome book, Designing the Obvious by Robert Hoekman Jr., I've been thinking about user interface design nearly every day.
Whether we like to admit it or not, every page on the internet is at heart a user interface; a website's design really isn't anything other then a UI for that site's content. Sure its not an application, but hard to find buttons and links are just as annoying as hard to find settings and options.
In Designing the obvious, Mr. Hoekman talks about how to simplify user interactions, and leverage things they know rather then teach them new interactions. In particular, he hones on the often confusing expanding/collapsing tree as a canidate for overhaul. Despite becoming ubiquitous in desktop applications and being a key feature of many JavaScript libraries, such as ExtJS, Hoekman marks them as being difficult to use (for a number of reasons that you will need to read the book to find out), and he proposes replacing the drill-down of little folders and expandable lists with a drill-down composed of multi-selects, in which you pick the option you want, and another multi-select is shown that drills down further until you find the file you want. I like it.
What what about the lowly multi-select itself? Does any one know how to use it? I know that I've never been able to use one without needing to put explanation text right next to it to "Hold ctrl to select multiple records" or some such garbage. So, in the same vein as Hoekman's tree replacement, I give you a very simple replacement for multi-selects:
Yep, a scrollable list of checkboxes. While it was an original idea to me, others have probably beaten me to it. Either way though, I think it makes much better sense then a multi-select. It takes up the same screen space, but it avoids confusing users. Plus, as far as I'm ware, it would degrade nicely to a list for people disabling CSS and I think the same for screen-readers and non-visual browsers.
<style>
ul.multi {
height: 100px;
width: 200px;
border: 1px solid silver;
list-style-type: none;
padding-left: 3px;
overflow: auto;
}
</style>
<ul class="multi">
<li><input type="checkbox" id="test1" name="test" value="1" /><label for="test1">One</label></li>
<li><input type="checkbox" id="test2" name="test" value="2" /><label for="test2">Two</label></li>
<li><input type="checkbox" id="test3" name="test" value="3" /><label for="test3">Three</label></li>
<li><input type="checkbox" id="test4" name="test" value="4" /><label for="test4">Four</label></li>
<li><input type="checkbox" id="test5" name="test" value="5" /><label for="test5">Five</label></li>
<li><input type="checkbox" id="test6" name="test" value="6" /><label for="test6">Six</label></li>
<li><input type="checkbox" id="test7" name="test" value="7" /><label for="test7">Seven</label></li>
</ul>
Enjoy.
