Improving interactivity with Javascript

• • JS

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.

Slider control

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.

Date picker

Smart text boxes#

It's easy to make some text boxes only allow certain kinds of characters. Why allow letters in the age field?

Text box that only allows numbers

Mixing text inputs with select boxes#

Allow users to both input text and pick common options.

Google Suggest

Ingredience picker with AJAX

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).

Example shop with drag and drop

Real shop with drag and drop

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).

Toggling a block is easy

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!

Tool tips with a little spice

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).

Early notification that the password is correct

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!

Images you can move and resize in the browser

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.

Menu that allows expanding and searching

Better looking form fields#

Javascript also allows you to enhance existing form fields with prettier equivalents.

Pretty form controls

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?

Sortable list items

That's all! Hope I've given you some ideas of widgets/controls you can use to enhance user experience. Good luck!