7 Web UI mistakes to avoid for smartphones and tablets

By Neil McAllister
Created 2011-04-07 03:00AM

Clients say the darnedest things. The other day, one scoffed, "Anyone who's looking at our website on a stupid little phone screen probably isn't our customer anyway."

I was taken aback. "Really?" I replied. "What if they're at a business lunch and they want to show their boss the specs of one of your products?" A pause. "What if they're just trying to find your phone number?"

Too often, clients underestimate how rapidly smartphones, tablets, and other mobile devices are changing the way customers access the Web. Worse, few Web developers seem willing to educate their clients about these modern realities. Graphic designers still see their Apple Cinema Display monitors as canvases and paint their sites accordingly, disregarding the fact that the end product will often be viewed on considerably smaller screens. And coders implement those designs blindly, even when they, of all people, should understand the intricacies and limitations of HTML and CSS [5].

As an outcome, too many websites still exhibit commonplace UI mistakes that effectively cripple them for users of smartphones and tablets. Here are just a few examples:

Web UI mistake 1: Using rollovers
Somewhere along the way, Web developers fell in love with the idea of highlighting controls and popping up content when the user mouses over some part of the screen. The problem for smartphones and tablets should be obvious: When there's no mouse cursor, there's no way to mouse over controls.

That doesn't mean you should do away with rollover effects altogether. But for every hover event, there should be an equivalent click event that does essentially the same thing for users with touchscreens. Smartphone users shouldn't be penalized with a page refresh for every level of navigation because you designed your menus for use with only a mouse.

Web UI mistake 2: Using custom widgets and controls
Designers love to lend a unique look and feel to their buttons and other widgets. But UI standards differ from platform to platform, and when controls aren't readily identifiable and accessible on every device, usability suffers.

Custom scrollbars are a particularly egregious example. Occasionally designers will want to override the default controls with JavaScript, replacing them with sleek, skinny, and more visually appealing widgets. The problem for tablet users is twofold: Not only are tiny widgets harder to hit with your finger, but tablet users don't scroll using scrollbars anyway; they swipe the screen. Forcing them to use custom controls only hobbles your UI.

Similarly, don't take any input devices for granted. Pop-up dialog boxes, for example, should always have visually identifiable close controls. Smartphones and tablets might technically have keyboards, but they seldom have Esc keys.

Web UI mistake 3: Having too many scrollable areas
Viewing websites on a small touchscreen often means scrolling around to see the whole page. As I mentioned before, however, remember that tablet users scroll by swiping the screen, not by activating controls. When you divide the page into multiple panes, each of which contains scrollable content, your UI can quickly become an interactivity minefield. One part of the content might scroll with one swipe and another part might scroll with the next, depending on where the user's finger lands on the screen. Best to keep the layout as simple as possible, or at the very least, make sure there are good-sized margins to allow the user to choose whether to scroll one pane or the whole page.

Web UI mistake 4: Having an inflexible text layout
I can't tell you how many graphic designers have explained their website layouts to me in terms of precise pixel measurements and the rules of Swiss typography. While this has never been good practice for the Web -- where users can adjust the browser window and even font sizes at will -- it's an especially bad idea if you want your site to be viewable on smartphones.

The Android browser, for example, defaults to a mode where it will attempt to compress the width of a column of text to fit the width of the device's screen, regardless of the page's CSS specifications. If you fail to take that into account and expect all the design elements to line up exactly the way they do on a desktop browser, you can end up leaving smartphone users with big areas of whitespace that can effectively hide controls and obscure the UI.

Web UI mistake 5: Making assumptions about screen format
One Web designer gloated to me that he likes to stay on the forefront of technology, which is why he designs his sites to look best on modern, widescreen LCDs. But even if you disregard folks who have older monitors, you can't stay on the forefront of technology if you ignore mobile device users.

Most smartphones can automatically pivot between portrait (vertical) and landscape (horizontal) modes, depending on how the user is holding the device. What's more, some users hate the autopivot function and disable it -- in which case, you'd better hope they picked the same mode your site is designed for. Making assumptions about the page format works fine in the print world, but it's a lousy idea on the Web, where you don't know the size of the paper.

Web UI mistake 6: Preloading too many images
Pity the poor smartphone users: Not only is their Internet access not as fast as terrestrial connectivity, but increasingly cellular carriers are putting caps on data usage and imposing overage fees. Smartphones might have limited RAM, too. While it might make sense to use JavaScript to preload a sequence of slideshow images for desktop browsers, it's a little rude to users of mobile devices, even more so if the images are designed to appear when the user mouses over a certain control -- which, of course, tablet users can't do anyway.

Web UI mistake 7: Using Flash
I hate to say it, but Adobe Flash still has no place on mobile devices. Famously, Apple's iOS devices don't support Flash content [6] at all, but even those Android handsets that do support Flash offer only lackluster performance [7]. Worse, Flash applications exhibit the UI issues I've outlined above even more frequently than ordinary HTML sites. Sorry, Adobe fans: With the advent of HTML5, the days of Flash on the Web [8] are numbered.

Of course, there are other ways around these UI problems. You could build a separate, custom version of your site specifically for mobile devices. You could even build a custom app. But these alternatives have their problems: They're too device-specific, and they're hardly future-proof. Don't discount the power of HTML for building truly cross-platform, cross-device online applications. Just be sure you know what you're doing.

This article, "7 Web UI mistakes to avoid for smartphones and tablets [9]," originally appeared at InfoWorld.com [10]. Read more of Neil McAllister's Fatal Exception blog [11] and follow the latest news in programming [12] at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter [13].

Source URL (retrieved on 2011-04-07 08:15AM): http://www.infoworld.com/d/application-development/7-web-ui-mistakes-avoid-smartphones-and-tablets-128

Links:
[1] http://www.infoworld.com/d/developer-world/how-make-your-website-mobile-today-833?source=fssr
[2] http://www.infoworld.com/d/mobile-technology/5-simple-rules-creating-mobile-savvy-websites-683?source=fssr
[3] http://www.infoworld.com/newsletters/subscribe?showlist=infoworld_developer&source=ifwelg_fssr
[4] http://www.infoworld.com/d/developer-world/html5-how-infoworlds-expert-guide-639?idglg=ifwsite_editinline&source=ifwprm_blog_fe
[5] https://www.infoworld.com/d/developer-world/how-make-your-website-mobile-today-833
[6] http://www.infoworld.com/d/the-industry-standard/readers-back-apple-in-flash-iphone-dispute-252
[7] http://www.infoworld.com/d/mobilize/adobe-air-android-falls-short-705
[8] http://www.infoworld.com/d/developer-world/lights-out-flash-and-its-ria-brethren-858
[9] http://www.infoworld.com/d/application-development/7-web-ui-mistakes-avoid-smartphones-and-tablets-128?source=footer
[10] http://www.infoworld.com/?source=footer
[11] http://www.infoworld.com/blogs/neil-mcallister?source=footer
[12] http://www.infoworld.com/d/developer-world?source=footer
[13] http://twitter.com/infoworld

http://www.infoworld.com/d/application-development/7-web-ui-mistakes-avoid-smartphones-and-tablets-128?source=IFWNLE_nlt_daily_2011-04-07