Filed under JS
Improving interactivity with Javascript
Push buttons, radio buttons, check boxes, select boxes, and text inputs. That’s the controls HTML allows us to use to interact with our users.
A small dedicated group of people at the office (I work at Valtech) sat down and listed all controls we could think of. The list below is basically that list, completed with examples where possible. Let me stress that the below controls are meant as inspiration. They are not all free, or even available for download. If you decide to use one of the ideas, google for them first and pick the best one. While selecting one, make sure it supports some kind of fallback for users without javascript enabled.
Slider
Slider control meant to let users select values from a range of options.
Date picker
What format should this date be? What weekday is the 15:th of august? A good date picker helps the user answer those questions and makes filling in dates much more delighful.
Smart text boxes
It’s easy to make some text boxes only allow certain kinds of characters. Why allow letters in the age field?
Mixing text inputs with select boxes
Allow users to both input text and pick common options.
Drag and Drop
Users are used to dragging and dropping things from their operating systems. Letting them do the same on the web makes for a great affect! Don’t forget about a fallback though, not everyone uses a mouse (A buy-button is enough).
Collapse and expand control
Makes it possible to quickly show less important information on demand. Just make sure everything is open by default (with no javascript).
Advanced tooltips
When the title attribute is not enough. Use images, fine-tune the delay, make them sticky if you click them, it’s all up to you!
Autosaving form fields
If you write an email with Gmail and the browser crashes, you’ll appreciate that Gmail automatically saves your text regularly. It’s done with a simple piece of javascript that periodically sends all your text off to the server, and saves it away. Simple and very useful.
Auto validation
While filling in some forms you’ll notice a little green check on the side. I can’t begin to praise how much faster this makes filling out forms. Directly after you’ve written enough letters in the password field you’ll find that it’s ok. No more trial and error against a slow server (unless you have javascript off, of course).
Controls affecting each other
In complex forms it’s not unusual to want the user to fill in either one set of fields or another. The showing and hiding of what fields are available is a another perfect case of where javascript really helps.
Image handling
It’s time to get easy handling of images in browsers. Javascript can help there too, by combining drag and drop with resizing and so on. Photoshop, here we come!
Search-based or structured navigation
Sometimes new navigation schemes can be useful. Using search instead of navigation is an interesting idea. Another is letting the user pick categories and using them in search.
Better looking form fields
Javascript also allows you to enhance existing form fields with prettier equivalents.
Sortable items
Sometimes you want drag and drop in a more controllable manner. Why not use it to make it easier to sort your lists?
That’s all! Hope I’ve given you some ideas of widgets/controls you can use to enhance user experience. Good luck!
- Emil Stenström
- 21 Feb, 2007, JS
Feel free to leave a comment, or subscribe to my feed.
linkback
These people have linked to this article:
To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:
<a href="http://friendlybit.com/js/improving-interactivity-with-javascript/">Improving interactivity with Javascript</a>You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.
