buttons vs links

I vividly remember a discussion back when I started working for Internet Architects. The discussion was about the difference between a link and a button. After a while you kinda know intuitively when to use one or the other, but actually putting that into words can be quite tricky. Every distinction we tried to make between use cases for these two very simple elements just seemed to wield more exceptions. Also it doesn't really help that throughout the years back-end developers have been mixing links and buttons indiscriminately, relying purely on styling to make a difference.

It is commonly accepted though that links are used to simply browse between pages, where buttons are used to submit data (in whatever form or for whatever purpose). Here's why this matters:

the online tax form

In Belgium we have the option to file our taxes online. The application is notoriously hard to use and as someone who cares about accessibility, usability and overall good web design the application is a true disaster to use. How such a thing can still exist in 2012 is a complete mystery to me. On the other hand, the functionality it offers is a big plus, overshadowing all the negative points. Or at least, so I thought.

When I submitted my taxes online just a couple of months ago, the application told me the data wasn't complete. The tax form is a collection of 8 tabs, each holding their own form with a button at the bottom of the tab content. Pushing that button takes you to the next tab. You run through all the tabs and submit the whole tax form when you're ready. If something is wrong or missing, a red attention icon appears next to the tabs where the problems occur. So far, so good.

Apparently I missed one field on tab 3, so I went back to fill in the missing data. I even used a little wizard linked to the input field to calculate the right amount I had to fill in. When I clicked the button on the bottom of the tab 3 form, the application jumped to the next tab (= normal behavior), but the error was still there. Slightly annoyed I went back to tab 3 in order to check the error once more. Again the application informed me that the data I had entered into the field was not correct. Weird no, because I had just used the application's wizard to calculate the data. I tried various amounts, resubmits, checked online, even tried some gibberish and still the form kept telling me something was wrong with the data. This one little field was starting to cost me a lot of time (spent on an old laptop with XP, because of course the application doesn't run on Win8).

what went wrong ...

The clue is actually pretty embarrassing. Apparently the application only validates the form when it is submitted as a whole, meaning that the button at the bottom of each tab is little more than a simple shortcut bringing you to the next tab. The error I kept seeing was still the same error that popped up the first time I had tried to submit the entire tax form, but because of the nature of the message ("the data is wrong") this never became clear to me.

When I finally (and I was pretty pissed by that time) tried to submit the entire form (a last resort attempt) it suddenly worked. It turns out the validation only applies when you submit the form in its entirety and not when browsing between the different tabs. Sadly the amount that was entered at that time was erroneous which could end up costing me a 10% fee (for unintentional tax evasion).

... and why it went wrong

The reason for the confusion is what interested me though. Because there was a button at the bottom of each tab, I looked at each tab as a separate form. Since links are used to simply browse between pages, I assumed that the button would actually submit the data I had entered in that particular tab and that it would prompt the application to reevaluate any possible mistakes. But all that time I had just spent entering the data and browsing between the tabs while the application was doing nothing at all. The final submission of the tax form wasn't just a final confirmation, it was the actual submit of the data and the only trigger to validate the data entered in the entire form.

It's painful when applications start abusing buttons simply to switch between states or pages instead of submitting data. On the web, when you click a button, you expect the application to process the data and to inform you when anything problematic occurs. The Belgian online tax application doesn't do that, so now I run the risk of paying a rather big fine if they don't agree with my explanation.

conclusion

Choose your elements carefully when building something for the web. These days more and more attention is paid to building online applications, but it is beyond me that an application of this magnitude (and with the very real risk of running into big fines when the slightest thing goes wrong) has such poor usability and customer care. It's clear that no proper front-end developer or usability expert was ever involved in the project, the result is pretty disastrous.

In most cases buttons and links are not interchangeable elements. Use the correct element for the right use case. People have certain expectations when they see these elements and when you start tinkering with them (or just plainly mix up their known functionality) you're not doing anyone a favor. Let this be a lesson learned next time you doubt between picking a link or button (or a link styled as a button).