Zilla Smash!

A big (omg huge big) part of this whole Answerline re-writing was coming up with a new, sleeker interface for people to interact with. The old interface was nice to look at and an awesome clean design thanks to gunner’s mad design skills, but ended up having some usability issues. The small text underneath the student name was tough to read and emphasized the field, not the value. In an attempt to remedy this, I created a new way of display tickets. Not only is this display smaller vertically, but it reduces the required number of buttons and makes important information easier to find.

The other big change is the switch from a traditional paged interface where each button click takes you to a new page. Due to our small user set, we can require certain things. Javascript is one of those, and that allows for a more interactive and dynamic user interface. Thanks to the awesomely simple Simple Ajax Code Kit (haha sack), integrating AJAX functionality into Answerline has been pretty simple. I’ve tried to follow the guidelines of unobtrusive javascript. Lots of adding event handlers on page load, etc. It’s worked out great, and allows the page to function in a limited capacity even without javascript.

There’s an animation of a sample workflow down at the bottom of the post. Assuming the user has javascript the “Ticket Detail” button expands the ticket from the compressed first/last display to show all the comments on that ticket. It also includes two sections at the bottom. On the left is a form for adding a comment, assigning the ticket, changing tier or closing the ticket. The right side is the old email popup transformed and shrunk down. Both of these will modify the ticket (emailing adds a comment w/ email body and pertinent details) and then in-place reload the ticket with the new information. The animation shows adding a comment w/ no actual text. This isn’t such a big deal any more, as per Nick’s idea the safe comments are now much more visible. You can see the ticket reload itself to display the new comment, what may not be quite so obvious is that it also recalculates its border color and will redraw that depending on certain criteria.

So that begs the question, how does it work if a user has no javascript? Ignoring the lack of in-place content reloads the answer is “remarkably similar to the javascript version”. Hitting the Ticket Details button takes you to the Ticket Details page, which shows the same view as you see in the js version. The main difference is you’ve moved pages and now you only see the one ticket. Adding a comment will force a page reload, as will sending an email. That’s it, this whole unobtrusive javascript thing makes adding failovers for non-js browsers retardedly easy. As has been pointed out, I love XHTML 1.0 Strict and this page validates entirely. There is no javascript in the actual page, it’s all stored in an external .js file, so the code stays clean and lovely.

Old Answerline	New Answerline

Example of New Answerline Interactivity