5 ui tips for web apps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

5 ui tips for web apps

on

  • 281 views

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.

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.

Statistics

Views

Total Views
281
Views on SlideShare
281
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

5 ui tips for web apps Document Transcript

  • 1. 5 UI Tips for Web AppsBy Justin JamesKeep users top of mind when you’re developing a Web app’s UI. Justin James presents guidelinesto follow that will make for a better user experience.1: JavaScript/AJAX should not override basic browser controlsRecently, I was using one of my bank’s websites, and I noticed some peculiar behavior. There wasa date field, and when you clicked it, a calendar popped up; at the same time, the cursor in the datebox was active. I tried to use the “Backspace” key to clear out the existing data, but instead ofworking as if I was in the input box, my browser behaved like I wasn’t and sent me to the previouspage.This is bad behavior, and I see it all too often. Using these JavaScript and AJAX controls canbring a lot of the desktop-like UI experience to the Web app sphere, but you should make sure thatthe expected browser behavior is not broken in the process.2: Proper form behaviorIf there is one thing that annoys visitors, it is being presented with a large number of input fieldsbut the TAB button does not go from one field to another in the expected order. Along the samelines, it is also annoying when the Enter button does not submit the form at all, or it acts as if abutton 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 iscorrect and that the Enter button submits the form as expected.3: Don’t use images for textWhen 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, especiallybandwidth, 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 theirlayout.Resist the temptation! Not only is this text invisible to search engines and the tools that peoplewith disabilities use to browse the Web, but as more and more Web access is done on mobiledevices, the bandwidth and speed issues are coming back as a concern. Stick with plain textwherever 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 shrinkdepending on the user’s devices capabilities. I still advocate these layouts. That said, I learned tolimit the amount of horizontal width to consume. Anything past a certain width (about 1,000pixels) is too big. At more than 1,000 pixels or so, the page is so big that the user can’t see it alleven with peripheral vision, and has to move their eyes all over the place. And if they try readingwide 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 consume100% of the horizontal real estate on a large monitor.5: Don’t collapse things, except in rare occasionsAs Web apps look more like desktop apps, it has become stylish to make portions of the screencollapse and expand — and this technique does have its place. For example, it is a good idea inFAQs, as long as it is done in a way that search engines can see the text and index it. At the sametime, when you hide important (or even semi-important) UI elements with a small arrow icon toallow 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 longas the usage is narrow. Keep your main area limited to around 1,000 pixels and make a small (150pixels wide) sidebar tacked onto the side to provide space for UI elements that you would betempted to make a collapsible area. Incidentally, this applies to menus as well; users really dislikethe dropdown navigation menus that have become so popular. The dropdown navigation menusare difficult to use, and for people without a mouse (mobile users, disabled users) the menus arevirtually impossible to use.Recommend Office .NET/Silverlight Component:Spire.XLS for .NET and SilverlightSpire.Office for .NET and SilverlightSpire.Doc for .NET and SilverlightSpire.PDF for .NETSpire.DataExport for .NET