Ok, earlier today I complained on Twitter (shocking I know) about a particular web site that I can't mention by name that has a particular 'feature' that drives me bonkers. The site has a list of forums you can subscribe to. When you click the checkbox to confirm you want to subscribe it automatically stores your preference. What bugs me is how it does this. As soon as you click the checkbox (either on or off) the entire form is posted to the server. To make matters worse, this is not the most "zippy" site out there (it's not ColdFusion by the way) so just updating your preferences can take a while and cause issues if you are trying to change something while the page is reloading. It's frustrating and it's ticked me off enough times that I decided to quickly rewrite the UX. Let's start with a mockup of how the site currently works. (I didn't view source on the page but rather built it as I imagined it is built.)
<cfset data = queryNew("name,id","cf_sql_varchar,cf_sql_integer")> <cfset queryAddRow(data)> <cfset querySetCell(data, "name", "Alpha")> <cfset querySetCell(data, "id", 1)> <cfset queryAddRow(data)> <cfset querySetCell(data, "name", "Beta")> <cfset querySetCell(data, "id", 2)> <cfset queryAddRow(data)> <cfset querySetCell(data, "name", "Gamma")> <cfset querySetCell(data, "id", 3)> <cfset queryAddRow(data)> <cfset querySetCell(data, "name", "Delta")> <cfset querySetCell(data, "id", 4)> <cfset queryAddRow(data)> <cfset querySetCell(data, "name", "Enterprise")> <cfset querySetCell(data, "id", 5)> <cfif structKeyExists(form, "subscribe")> <cfset sleep(3000)> <cfset session.subscribed = form.subscribe> </cfif> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() { $(".sublist").change(function() { $("#selForm").submit(); }); }) </script> <form method="post" id="selForm"> <table border="1" width="500"> <tr> <td>Name</td> <td width="50">Subscribe</td> </tr> <cfoutput query="data"> <tr> <td>#name#</td> <td><input type="checkbox" class="sublist" name="subscribe" value="#id#" <cfif listFindNoCase(session.subscribed, id)>checked</cfif>></td> </tr> </cfoutput> </table> </form><cfparam name="session.subscribed" default="">
So from the top, I begin by initializing a simple Session variable. This variable represents the preferences I want to store. Normally it would be loaded via the database, or perhaps a cookie, but you get the idea. The next set of code simply creates some fake data for us to render. Skip past the JavaScript and look at the table. It renders the fake data with checkboxes to allow for subscriptions. If you go back up to the JavaScript you can see that on each and every change we submit the form. That's the part I dislike. In the form processing I intentionally added a sleep() in there to mimic the slowness of the current site. (Next time I'll just write it in PHP.)
You can view this page here: http://www.coldfusionjedi.com/demos/feb1b2011/test3.cfm Clicking around, especially quickly, causes a lot of page reloads. In some testing I've seen it actually get confused and check things I had just unchecked. Now let's look at a better version.
$(".sublist").change(function() { var thisid = $(this).val(); var sel = $(this).attr("checked"); $.post("test.cfc?method=storesubscription", {"id":thisid, "subscribe":sel}); }); }) </script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() {
I've modified the code to grab the ID and checked status from the form field. Now when you click it will fire off an Ajax request to store the update. My CFC just wraps the session update (and I'll post that if folks want but it's just a few List functions) and returns no value. You can play with this here: http://www.coldfusionjedi.com/demos/feb1b2011/test4.cfm. Hopefully you can see that this version feels a lot more fluid. I wrote this in like 5 minutes so if it fails in IE or if it is still 'fragile' then I wouldn't be surprised, but hopefully the concept makes sense and hopefully I'm not alone in thinking this is much improved.
As another version of this - I believe Google's Blogger.com service does something similar when posting comments. So this particular site is not alone in having this UX issue.