There’s nothing worse than a broken button – to a web developer anyway – except for a button that is functioning but doesn’t look like it is. That’s why every interaction with your website should result in visual feedback so your audience always knows what is happening.

For example, I created an interface to navigate my projects based on categories. Using jQuery, JavaScript, CSS, PHP and HTML, my interface provides constant reinforcement every step of the way.

To begin, when you first see the icons, they are desaturated to imply an inactive state since nothing is selected.

If you click on a checkbox, the icon will change to color to indicate the choice is active (and desaturate again if the user deselects the checkbox).

The “View Selected Projects” button will appear to signify an action can be made.

If you click on “Clear All,” all of the icons will desaturate and all of the checkboxes will be unchecked. The “View Selected Projects” button will disappear to disable the ability to return an empty query.

If you click on “Select All,” all of the icons will saturate. All of the checkboxes will be marked. The “View Selected Projects” button returns.

I didn’t want to automatically submit the query because you might want to use the “Select All” button to then narrow down your choices.

Initially, I was going to have the icons themselves act as button presses, but it was hard to get across the multi-select functionality without the standard checkboxes. (If your interface isn’t multi-select, then you should make the icons act as buttons to select and submit the query with one press.)

Because the icons aren’t buttons, I wanted them to do something else. So, I added a click-to-enlarge cursor if you hover over an icon. If you click the icon, you will see the enlarged view. Click it again to make it shrink back to its original size.

The hardest part about creating this interface was making the selections stay after the page refresh. (The page will refresh after returning the new database query. I appended those values in the return URL so that Google Analytics can capture site behavior more robustly than setting up events.)

I wrote server-side code in PHP to store which checkboxes were marked so that the browser can remember and return the same results after the page refresh.

I also wrote client-side code using jQuery, JavaScript, and CSS to store the selected categories to the browser so I could return them to full saturation and reselect their corresponding checkbox after the page refresh.