SlideShare a Scribd company logo

5 ui tips for web apps

•Download as DOC, PDF•
•
Chen Stephen
Chen Stephen

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 of 3
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
5 ui tips for web apps

More Related Content

5 ui tips for web apps

  • 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