All it takes is a little thought...

I'd like to start off my blog by looking at a variation of a theme on a post by a friend and colleague on his blog regarding South Africa's Independent Electoral Commission's website.

A particular interest of mine, and one that is notoriously difficult for developers to get right, is the area of human-computer interaction (HCI). This seems to have been something the development team at the IEC have forgotten about at best, or ignored at worst. After the recent South African General Elections, I thought it would be interesting to have a look at the breakdown of the voting patterns in the area I live in. I opened up the report page to find this handy breakdown:



Now granted that whilst the Voting District number is supplied in your identity document, would it really have taken much trouble to populate this drop down with the name of the Voting District, as they've done for the Province and Municipality? This is a standard ASP .NET control, quite simple to populate the name and value properties...

Ah, but never mind - there is a handy search tab I see. Well, not quite. This allows you to search the Voting District's number, or by some other variable called the "VS Name". On running a report you discover this stands for "Voting Station Name" - as in the physical building you voted in (e.g. "Camps Bay Club"). I tried searching for large, well known suburbs but nothing turns up. I tried an exact search of Camps Bay Club but nothing turns up. Clearly this piece of functionality is quite flawed. I was nearly tempted to call them on the toll free number for that "more information", seeing as there was no discernible help available!

This is could be all quite innocent - until we view the source. I must say, they've out done themselves with unnecessary Javascript. I don't want to stray too far off the HCI topic, but even at Varsity I knew I was doing something wrong if I had to use invisible text fields to get the job done. And why write lines of Javascript for something that can be easily achieved using the .NET Framework? In fact, why bother using the framework at all?

Finally, I had a look at the validation. Take a look at this function, presumably used to prevent HTML injections (taken from the view source available in any browser):

---------------------------------------------------------------------------------
This function is used to detect the characters '<' and '>' when the user enteres them
onto the screen or when text containing the mentioned characters is entered onto the screen.
When this happens, this function will delete remove everything that was entered onto the textBox
---------------------------------------------------------------------------------------*/
function RemoveBadCharacters()
{
var txtSearch = document.getElementById('ctl00_ContentPlaceHolder1_txtSearch');
var bRemoveText = "0";
if(window.event.keyCode == 188 || window.event.keyCode == 190)
{
txtSearch.value = "";
}
for(var i = 0; i <= txtSearch.value.length; i++) { if(txtSearch.value.substring(i, 1) == ">" || txtSearch.value.substring(i, 1) == "<") txtSearch.value = ""; } return false; }

Whilst it's great that they've thought about validation it's not so great that they don't tell the user what they've done wrong. Rather let them enter these characters, and redirect an error message to the page. And see what I mean with regards to unnecessary Javascript? Not much room for code reuse across the application here. Again, I'm straying.

Now I've knocked this application quite a bit, so I need to be fair as I'm not aware of their requirements, deadlines, development team skills and all the other holistic aspects that affect development. However, this is an important institution, reporting on an event that only occurs once every 5 years - and this reporting was done far more innovatively by others (News24 is a great example). I think they're some key principals we can take away from this:

• Apply the KISS (Keep It Simple, Stupid) mantra - to both the usability as well as the code
• Make it clear to the user what they've done wrong, and how they can go about correcting it
• Make it easy for the user to do the right thing, and difficult to go wrong
• Provide easily accessible, preferably context based, help