Usablity Breadcrumb

Ask any web developer and they know how scary HTML (the language webpages are written in) can be, both to code and to maintain. Infinite table tags, unclosed tags and what not. Mix it with a server-side script (like ASP or PHP) and you have a perfect example of “spaghetti-style” programming which eventually looks like a sequel of Frankenstein.

Thankfully, ASP.NET has solved some of these problems by introducing web user controls (which render client-side code automatically) and code-behind techniques (aka visual inheritance, which helps keep the presentation code and logic separate). Other server-side scripting languages have utilized template engines (like Smarty) to solve the “spaghetti” situation and streamline the content management process. Having said that, a vast majority of web applications developed in the present time are still not user friendly and do not adhere to web standards for usability.

Web page styling with CSS is catching up and aims at providing a cross-browser (yes, we still have that to sort out) table-less layout, which is easier to design and much easier to maintain in the long run. However, even with the growing use of ASP.NET and CSS among developers, web applications are still considered lame, mainly due to badly designed interfaces and resulting crippled functionality. From a developers viewpoint, it can often get frustrating to build a website which works on all browsers (IE, Firefox, Opera, Safari etc.), at all screen resolutions and on all computer systems (PC, *nix, Mac). I guess the best option for developers at this point is to adhere the basic usability norms when designing web applications. Two great starting points on the usability concept are: Usable Web and useit.com.

Sharing my two cents, I would also encourage developers to look beyond the obvious and design more creative solutions to common problems associated with web applications. For example, a very common issue with web applications is that of user friendly forms. The fieldset tag for instance can help improve the layout (see example). A fieldset allows to create sections on a webpage for easier categorization of information and form inputs. Another such useful tag is the optgroup tag, which allows group choices in a dropdown list.

The key idea is to design and develop “usable” applications, which are actually operational by the end-user (who may be a novice user or a techie). More on the usability bits later …