5 UI Tips for Web Apps

By Justin James

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.

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.

Recommend Office .NET/Silverlight Component:

Spire.XLS for .NET and Silverlight

Spire.Office for .NET and Silverlight

Spire.Doc for .NET and Silverlight

Spire.PDF for .NET

Spire.DataExport for .NET