Sometimes little details go a long way to improving the feel and quality of a product. For the most part, these fall into the category of “don’t annoy your users.” But a few are truly helpful. Here are three we’ve implemented for Thought Holder:
1. Useful information in the browser window title —
Your users aren’t always going to be looking at your application. They may go check their mail, browse some interesting blog, surf for pr0n, whatever. So it’s helpful to indicate to your users when you’ve got new stuff for them to look at. We do this by adding brief notices to the browser window (or tab) title. That way the user can see that they’ve got stuff to do back on our site without having to lose their place in what they’re doing at the moment.
2. Caps Lock Checking — This is both surprisingly huge and extraordinarily simple. How many times have you fat fingered and accidentally turned on Caps Lock? We’ve made sure that Thought Holder (and all of our other products) warn you if you’re entering a password with caps lock on. We got the inspiration (and most of the code) from this forum post.
3. “onbeforeunload” Edit Warnings — Ever been editing something and close your browser window by mistake, before saving your work? Or, for nerds like me, forget that Ctrl-W is cut in Emacs but close window everywhere else? Lost work can be rough, and there are generally two solutions: autosaving (which is another post entirely) and warning the user that they’re about to lose work. We chose the latter for Thought Holder. Every time you have an edit window open, we add a hook to the browser’s onbeforeunload event that pops up a handy little dialog. Here’s how we do it:
-
var checkUnload = 0;
-
var unloadCheckHandler = function() {
-
if (checkUnload > 0) {
-
return “Are you sure you wish to leave? You may have unsaved work.”;
-
}
-
};
-
window.onbeforeunload = unloadCheckHandler;
