Cloud

Five UI tips for Web apps

Keep users top of mind when you're developing a Web app's UI. Justin James presents guidelines to follow that will make for a better user experience.

A couple of weeks ago I wrote about how to improve the UI on your Windows Phone 7 applications in TechRepublic's App Builder blog. This week, I am going to talk about the same topic but in the context of Web applications. Here are five things you can do to make your Web apps have UIs that work better for your users.

1: JavaScript/AJAX should not override basic browser controls

Recently, I was using one of my bank's websites, and I noticed some peculiar behavior. There was a date field, and when you clicked it, a calendar popped up; at the same time, the cursor in the date box was active. I tried to use the "Backspace" key to clear out the existing data, but instead of working as if I was in the input box, my browser behaved like I wasn't and sent me to the previous page.

This is bad behavior, and I see it all too often. Using these JavaScript and AJAX controls can bring a lot of the desktop-like UI experience to the Web app sphere, but you should make sure that the expected browser behavior is not broken in the process.

2: Proper form behavior

If there is one thing that annoys visitors, it is being presented with a large number of input fields but the TAB button does not go from one field to another in the expected order. Along the same lines, it is also annoying when the Enter button does not submit the form at all, or it acts as if a button other than "Submit" was clicked for the current form.

Always test your forms (especially ones with many input controls) to ensure that the TAB order is correct and that the Enter button submits the form as expected.

3: Don't use images for text

When the Web was young, people went nuts trying to get the "perfect" Web layout. The "solution" was often to make the site one big image and slice it up. After a while, reality set in, especially bandwidth, and developers stopped doing this. But as bandwidth has gotten cheap and plentiful, many sites are slowly going back to using text on images all over the place to preserve their layout.

Resist the temptation! Not only is this text invisible to search engines and the tools that people with disabilities use to browse the Web, but as more and more Web access is done on mobile devices, the bandwidth and speed issues are coming back as a concern. Stick with plain text wherever possible.

4: Not too wide

For a long time, I've been a fan of the "liquid layouts," which are UIs that expand and shrink depending on the user's devices capabilities. I still advocate these layouts. That said, I learned to limit the amount of horizontal width to consume. Anything past a certain width (about 1,000 pixels) is too big. At more than 1,000 pixels or so, the page is so big that the user can't see it all even with peripheral vision, and has to move their eyes all over the place. And if they try reading wide chunks of text, they easily lose their place on the page as they scan.

So yes, you should use a liquid layout, but restrict the overall size so that it does not consume 100% of the horizontal real estate on a large monitor.

5: Don't collapse things, except in rare occasions

As Web apps look more like desktop apps, it has become stylish to make portions of the screen collapse and expand -- and this technique does have its place. For example, it is a good idea in FAQs, as long as it is done in a way that search engines can see the text and index it. At the same time, when you hide important (or even semi-important) UI elements with a small arrow icon to allow expansion, most people will overlook it.

Remember that 1,000 pixel guideline? That's a good place to use some of that extra space, as long as the usage is narrow. Keep your main area limited to around 1,000 pixels and make a small (150 pixels wide) sidebar tacked onto the side to provide space for UI elements that you would be tempted to make a collapsible area. Incidentally, this applies to menus as well; users really dislike the dropdown navigation menus that have become so popular. The dropdown navigation menus are difficult to use, and for people without a mouse (mobile users, disabled users) the menus are virtually impossible to use.

J.Ja

About

Justin James is the Lead Architect for Conigent.

7 comments
mshameer
mshameer

Really helpful. but better to compare the tips with modern websites using any ui galleries like below http://uicart.com - really fast and unique ui collection http://cssmania.com - quality websites with new trendy design

vordan
vordan

You are confusing real web applications with (more) complicated sites.

sickache
sickache

In some point it is difficult to use a menu especially without a mouse but i am one of the many users that do not hate drop down.

Bradyhawke
Bradyhawke

QUOTE: "Anything past a certain width (about 1,000 pixels) is too big." Says the website with a width of 1033 pixels... just sayin'

ginerjm
ginerjm

Tabstops that don't move in a logical order are a pain, but developers who don't take the time to set the focus() on a field when a page loads are the laziest. Over and over I encounter even the simplest of pages such as a login page coming up with no user element having focus. Why? If you are displaying a login page, then put the focus on the entry fields so the user can immediately login. The same for every page. If you are expecting input, why leave the cursor somewhere on the browser window instead of where you want the user to make entries?

Justin James
Justin James

... is that the sidebars on TechRepublic are so wide, that the actual reading area is a bit too narrow, I can't do a lot of different kinds of content because of the layout. J.Ja

Editor's Picks