New Surveys

Much like the rest of the legacy code that still rattles around at ResTek, the old version of Surveys was a beast. Lots of SQL scattered throughout, poorly-implemented OO, invalid HTML, and a truly horrifying series of Javascript form submittal links. It was a scary place to try and bugfix, and not something that we were very thrilled about sharing. Surveys is pretty unique in that it is far and away our most popular shared application. We offer up a lot of the code that we’ve written and even host stuff for other departments on campus. No other application is used by as many people for as many things as Surveys.

It’s surprising that old Surveys survived as long as it did, a testament to the amount of quickfixes that we’d been able to shove into it to keep things moving along. As is my way from time to time I had become sick of it. Finishing up Answerline (as seen in “Done Done Done”, “So Close To Done”, “More New Answerline UI”, and “Rethinking Answerline”) gave me the ability to pick a new project. First in my crosshairs, Surveys.

Getting a handle on how I wanted the new interface for surveys to work wasn’t easy. My first choice was to have user-draggable questions that combined the old preview and edit modes into one seamless interface while also adding live updating for all the actions that used to require a page reload. In Old Surveys the page would reload if you: added a question; removed a question; changed a question’s type; added an answer; reordered questions, etc. It was frustrating to try and use, because the responsiveness just wans’t there. Feeling good about JavaScript after the Answerline Revamp, I tried to address all of these issues. The page reloads were simple, I’d replace them with degradable JavaScript making AJAX calls via my current favorite Library, SACK. It’s lightweight and just does the AJAX transport/receiving stuff. I’m a fan of lightweight libraries, the big ones like Prototype and Scriptaculous just don’t interest me that much. Too much overhead for what I’d need.

Back to New Surveys UI design decisions. My biggest regret about this project is that I was unable to get a flexible and fast enough drag/drop library for the list elements. Dragging the DOM stuff around was cake thanks to Aaron Boodman’s excellent DOM-Drag library. I found several wrappers for it that took care of limiting motion and shifting list elements around for me. It was awesome to see, but once I had it up and running the problems started to crop up. The ToolMan DHTML library looked like it would do everything I needed, and at first blush it worked flawlessly. The effect was really very slick and much more intuitive than selecting numbers from a drop down. Unfortunately, the shortcomings of the library made it impossible to keep. You couldn’t drag a question past the bottom or top edges of the screen, a deal-breaker any survey longer than a few questions. It also tended to apply the drag-drop to list elements within the main list. This was not particularly undesirable behavior, but proved to be so buggy as to be a liability instead of a feature. When I couldn’t get much of a response to my inquiries I had to eventually abandon my drag and drop dreams. It was a sad day. Fortunately the rest of my ideas had worked out well, allowing for New Surveys to be much faster when creating a new survey or editing a pre-existing one.

The creation of New Surveys required more attention to ease-of-use considerations than I’d run into before. I don’t recall ever purposefully designing a hard to use webpage, but as someone who is very comfortable with computers it’s quite easy for me to fall into the trap of designing for myself and not the end user. I had to pay careful attention to labelling and the organization of elements on the screen in an attempt to guide those who might not be as familiar with the system. Now that it’s out there and normal users are getting their hands dirty in it I’ve come to the realization that even my best UI efforts are not really enough. I wish I knew a UI expert that I could ask questions and have critique my stuff. I find the whole thought process behind that really interesting but a lack of real studying means that I mostly make slightly educated guesses.

I’m sure that everyone is bored to tears now, so I’ll post an image. Just one this time, because it took a while to make and I’m kinda tired at this point.