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. 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

2. 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