How Not to Build Highly Interactive Mobile Internet Applications

A new breed of Highly Interactive Mobile Internet Applications (HIMIA) is gaining a foothold in the marketplace. Many app designers and developers are curious to know the best practices that lead to building such apps. In this post, I will do the opposite - give you five tips on how not to plan your apps.

But first, let me begin with a brief history.

Several of the very early internet applications for mobile platforms were merely web pages delivered through a mobile browser. Whether you used Safari, Opera Mini, Internet Explorer or any other browser compatible with your device, the usability of such applications was minimal at best. The lesson was clear and obvious: what was designed for computers played best on computers.

I will skip the WAP part and move on to the early signs of interactivity on mobile - the traditional mobile apps. Several of these are natively supplied with the operating systems such as Symbian or Win Mobile. Many more are nowadays found in application exchanges such as the Apple App Store. A large number of these seem to be small form factor versions of desktop apps.

In some cases, however, you do encounter applications that take advantage of mobility inherent in the device. These are the forerunners of HIMIA - the Highly Interactive Mobile Internet Applications. There are several factors fueling the growth of HIMIA. You have a good screen size, high resolution, touch interface, GPS capability, accelerometer, camera, speakers, microphone, storage and processing power. And of course you can assume connectivity with a good bandwidth. Users are increasingly familiar with the use of internet while on the go, they are comfortable with thumbkeys and expect to stay connected at all times. No wonder, then, that a whole new generation of highly interactive mobile internet applications is round the corner.
So, then, what are the do's and don'ts when planning to build HIMIA? As I started to write this piece, it appeared to me that it will be easier define what a HIMIA designer should not do. So here is the DON'T list.

DON'T use a page-browsing metaphor
This should be obvious, but worth stating because many of us miss it. HIMIA are thick clients, with a rich user experience. Imagine the difference between a LinkedIn app on your iphone versus browsing Linkedin.com on your mobile browser.

DON'T mimic experiences similar to computers
Taking advantage of the unique capabilities of mobile devices enumerated above is critical. If the app simply emulates PC-like experiences, that is no fun .

DON'T think it is a standalone app, operated in a silo
A successful mobile app is usually a part of a bigger system, and therefore must integrate well with the backend.

DON'T hope to use the same app interface for all mobile platforms
This may be a holy grail, but it ain't going to work. Each platform has unique capabilities, and you need to contemplate variations in your app to take full advantage of unique platform capabilities.

DON'T cram all features of web app on mobile
That does not work. A judiciously selected subset of features works best. Try a Facebook app on itouch. You cannot do everything that you can do on the web app, but you will get by. It would have been disastrous of the mobile app version tried supporting all features.

This is a developing list. You are welcome to add more DON'Ts to this list.

5 Great Ways to Block U-Turns on Your Web Site

Great site designers follow basic principles of interactivity to make their sites sticky and engaging. They do everything to prevent u-turn traffic. Here are five ideas to get your creative juices flowing.

1. Capture Attention with a Visual Site Map
Most web sites start simple, but they get pretty complex before long. There are myriads of pages, sections and links. Users then resort to a site map to figure out what they are looking for. Why not make their job easier with a visual site map?

A visual site map is a pictorial representation of a web site, where clicking on a part of the picture would pop up a small display describing what is in a particular logical section of the web site. For example, a home furniture web site may have a site map showing the various parts of a home, and clicking the living room would pop up a desciption of living room furniture section. Next to this description, you can have thumbnails representing pages in that section, so users can easily navigate to couches, for example, and so on.

Visual site maps are vivid, memorable and easy to use compared to traditional treeview textual site maps.

2. Enhance Engagement with Related Actions Suggestor
If you know the way people use your site, you probably also know where they will go next from one part of the site. For example, someone that looks up pricing will likely go to the buy page. Someone that looks up a webinar schedule will likely go to the enrollment page. Or maybe the webinar recording page. In other words, you can anticipate related actions from a given point. Use this knowledge of user intention and make it easy for the user to find the related pages quickly. A Related Action Suggestor is an interactive element on your web page which suggests pathways to related pages. A well-designed related action suggestor can include a video, image or text with audio that optionally educates a user, helping him or her find parts of a site he or she may not be aware of. A great way to roll out new updates to sites.

3. Create Curiousity Using Page Peel Banners
Often you can easily organize a message in two - maybe three - layers. There is something you would like to say to everybody that visits your web page. And then there is something additional you would like to say to those who are interested. And maybe even more to those who are really interested. Peel-away banners work great in such situations. A well-designed peel-away banner can have attractive images,crisp messages and even voice over or music that plays when the banner loads, as well as when the user peels away the top banner to reveal what is underneath. It is customery for the top right corner of the banner to appear in animation which suggests that you can drag it and peel it away. That's the teaser. For a fuller discussion on the art of harnessing curiosity to drive engagement, see my earlier post on this topic.

4. Build Credibility with a Quotes Flicker
In the age of instant credibility, you must substantiate the message on your website with customer testimonials, recommendations, reviews and other types of quotes. For best results, a quote should be short, storylike, easy to read, and preferably accompanied by a picture of the person providing the quote. A voiceover adds a personal touch to quotes.

A video is sometimes worth a thousand pictures. When a customer speaks to camera about your products or services, it creates a great impact. I therefore recommend video quotes, where possible.

A single quote creates a lot of authenticity. If you have several customer quotes, even better. A good way to render multiple quotes is to make a playlist of sorts and render the quotes one by one. Depending on the section of your website, or seasonal merchandising focus, you may choose a different set of quotes. This not only adds variety to the site, but also focuses the right message to the right audience.

5. Build a Sense of Urgency and Drive Action
A web site is about driving user action. People will act if there is a sense of urgency: a deal that is good thru the end of the month, a deadline for enrolling in an event, a special that lasts for only 24 hours and so forth. Highlight the urgency with a countdown timer that shows the days remaining and drive action by popping up additional media on mouseover. The media could be a video, an image or text with audio, designed to issue a call to action.

Good luck with building interactive sites.