Highly interactive JavaScript widgets

For a project we worked on recently the user needed to categorize works of art into disciplines and movements and tag them. We developed a little control panel that is easy to use for first time users and powerful for daily users.

We used standard form elements to make them recognizable and implemented functionality on top of that using JavaScript.

A lot of stuff happens in that video so I’ll explain a bit about what you’re seeing. You can add new items using either the drop down or the text field. Once the item is added, you can toggle it using the check box. Text fields allow you to add any value, but assist after a while by suggesting values previously filled out by others.

We don’t use spinners for background processing because it’s visually distracting, instead we add something to the interface when you add something and disable check boxes when they’re active.

We’ve made sure the panel stays consistent with the information on the server and kept interaction with the server at a minimum. When you select the same item twice nothing happens. If you select a previously unchecked item it doesn’t create a new item but instead it checks the item already on the page. If any communication with the server fails, the controls are reset to their previous state.

Finally, we make sure ‘Browse’ tab is always up to date, otherwise the user might think we lost her carefully filled out information.