In case you hadn’t noticed, 2011 is the year of mobile computing. We’re seeing powerful smartphones, 4G networks, and a wave of tablets coming out this year. More people will access the web via a mobile device this year than any other year prior. You know what? Many of those people could be your customers.
With that in mind, what’s your mobile strategy? If you plan on taking advantage of the mobile trend (which you definitely should be doing), you will undoubtedly run into this question: Should you build native, platform-specific applications, or build web apps designed for mobile use?
My thoughts: Creating web applications for mobile browsers is safer, faster, and easier to maintain than creating multiple, platform-specific applications. In a previous post, I explained how this is accomplished from an architecture standpoint: Create one application with three presentation layers. The question is…how do the mobile presentation layers differ from the desktop/laptop presentation layers? Can’t you just make minor tweaks to the desktop/laptop layer and use it for mobile?
The answer: Absolutely not. In fact, certain design flaws in your mobile applications will not only make you look amateurish, they will drive away your users. In the first of this two-part blog post, I’d like to explain three design flaws to avoid when creating an application for use on a mobile browser:
Small navigation elements
If you’ve ever browsed the web on a smartphone, you know the frustration of trying to press text links or even small image links. The link is so small that you accidentally press the wrong one. When designing a web app for mobile or tablet use, remember one thing: Mouse pointers are precise. Fingers are not. Don’t use text links or small navigation elements. Instead, use buttons or larger images for links.
Some websites use hovers to place lots of information on a page without overwhelming the user. Basically, when you place your mouse cursor over some text or an image, a little “hover” box pops up with more information. This works great if your user has a mouse, but not so great if they’re using a touch-based interface. There’s no “hover” on a mobile browser. So, when designing apps for mobile use, avoid hovers. A good, mobile-friendly alternative to hovers is the accordion.
If your app cannot possibly fit on one screen, restrict scrolling to only one direction–preferably vertical. Why? Usability tests have shown that users hate horizontal scrolling. If you’ve ever browsed the web on a smartphone, you know how frustrating it is trying to look at a site while scrolling both vertically and horizontally.
If you plan on creating web apps for mobile use, make sure you avoid these three design flaws. Now, this isn’t a complete list of what to avoid, this is just the first part in a two-part blog post. Look for part 2 in the coming weeks.