Web Application User Interface Design Tips

Web application user interface design is different from other development environments. Everyone knows this fact, but a lot of people don’t know exactly why it’s different, how it’s different, or which factors account for these differences.

This is a problem that has plagued the web development fields for almost twenty years now. Along with bandwidth facilitation and browser refinement, this is the leading reason innovations like cloud computing and SaaS took so darn long to become the technologies that they are today.

Now that we’ve finally reached this era of technology, I’d like to talk about some tips for web application user interface design and compare it to traditional software design. I would like to point out the differences that are key to making web designs work properly.

#1 – Avoid System APIs A problem many web applications have experienced in the past is a reliance on local system APIs to support the GUI. A common example is the use of Microsoft’s ActiveX API for menus, applets and other bells and whistles in sophisticated web application. These worked fine for a while (when Microsoft dominated Linux and Mac systems), but now, however, most people avoid Microsoft IE. Users opt for browsers like Chrome, Firefox, Safari or Opera.

Many new devices have come to market, such as set top boxes, mobile devices and even gaming systems. They have become increasingly ‘smart’ and increasingly popular for accessing non-gaming web applications. Therefore, no longer is ActiveX supported through an emulation layer for non-windows platforms, and no longer do non-IE browsers even register them. The use of system APIs for control rendering is no longer a wise idea. (This isn’t always going to be ActiveX, as it’s just the most well-known example).

#2 – Avoid Recursive Navigation Web applications work as page or indexed spaces (not unlike mobile applications). This means that your flow and navigation have to reflect the single way in which web forms work. A common problem here is that people design forms that require a reload of the central page. This ‘reloading’ is repeated as one goes back and forth, from pages, for specific tasks.

At one time, this issue was unavoidable, but with layered systems like HTML5 and AJAX, this is no longer an issue. Now, you can simply click a menu item to load a form, which is often presented in the form of a popup (not to be mistaken with new windows for obnoxious ad popups). Upon completion, the form disappears, never reloading the main page. This saves bandwidth, server strain and time.

#3 – Simplicity is Bliss This concept applies to all software, but especially web software. Simplicity of your GUI is important. Don’t overdo the stylized skins and button faces. No one likes overdone ¬†web interfaces. Heavy designs take long to load, use up bandwidth, and make navigation difficult. The path of the eye becomes interrupted and the user may be confused. Use simple, tasteful contrasts with simple GUI faces. This ensures a pleasant but not overwhelming look. Standard and consistent layouts are easy to grasp.

These are my web application user interface design tips. If you avoid system APIs, recursive navigation and complicated designs, you will be on your way to designing a great UI.