Five Best Practices for Mobile HTML5 Web App User Interaction Design

Organizations have options when developing mobile apps; the most significant choice is whether to develop native apps for specific phone OS’s (iOS, Android, Symbian) or to develop HTML5 web apps. Since native apps have more direct access to the phone’s hardware they can be more powerful, but there are also advantages to developing web apps. The biggest web app benefit is the ability to develop a single app that runs on multiple platforms. For many brands maintaining control of distribution is also critical.

There are important differences in the development process between native and web apps. Web apps are still fundamentally mobile web sites, and it’s generally a mistake to try to do everything a native app can do; an unsatisfactory and choppy user experience can be the result. It’s better to take inspiration from native apps; if you respect the limitations you will end up with a better final product.

Here are five best practices to help guide your next HTML5 web app development project:

1. Simplicity is Key: Mobile devices are small devices, so simpler is nearly always better. Nearly everything happens with one finger, so complicated actions don’t work well. Avoid hover states and drop-down menus, for example.
2. Use Responsive Design: A web app can work on multiple devices, such as iPhones, iPads and Android. Using responsive design techniques along with progressive enhancement will help ensure that your app will work and look it’s best across multiple devices.
3. Distill the Feature Set: This is really another way of saying “simplify.” Start by listing the features all stake holders want and then distill that list down to the minimal viable app.
4. Don’t Over-emphasize User Context: Mobile devices are quite capable now, so don’t assume that your users just want a basic site. Give them the features of your full site and try to simplify the interactions if possible.
5. Focus on Speed of Use: Users will not tolerate sluggish performance. Reduce the size of assets and images; when possible eliminate images in favor of CSS3 display.

At Cantina we develop both native and web apps, and provide the strategic framework to help organizations navigate the process of deciding which path to follow.