Monday, March 22, 2010

New Trends in Site Maps

When was the last time you were excited about looking up a site map? Yes, I hear you - the answer is ten thousand years back or more. Site maps are boring, and we don't really expect much from them. In most cases, they are an apology for poorly designed site navigation. In many cases they are hopelessly out of date. I could go on. But here is something interesting. Poonam Agarwal's article titled Changing Design Trends for Site Maps does a great job of showcasing some of the trendiest site maps around. Worth a look.

Thursday, March 18, 2010

Adobe, Apple and the UX Platform Holy Grail

This is a guest post by Shivesh Vishwanathan.

As the search for the dominant mobile platform continues amongst players, including Apple and Adobe, it is helpful to bring out some analogies from the past. This stand-off has many similarities to the Microsoft/Win32 vs. Java dominance battle that was fought a decade ago. Apple is today's Microsoft with its proprietary OS and a strong iPhone developer community. Adobe is today's Java with its dreams of becoming a device-agnostic platform. "Singular experience, multiple devices", proclaims its Open Screen Project.

One problem that Adobe will have to tackle is that in today's world, the user interface paradigm can only go so far in providing great user experiences. What today's devices and platforms enable is much more than UI. They provide Interactive User Experience or IUX. IUX combines three types of interactivity, Interface, Sensor and Location, which in turn exploit unique platform capabilities such as direction, touch, orientation, location, movement, proximity and others. As you can see, user interface is just one piece of the puzzle that is the next generation application.

Apple not providing Adobe with access to iPhone is a war for platform supremacy, no doubt. What is also true is that the singular experience that Adobe wants will force the company to go way beyond UI. If history is any judge, Adobe has its task cut out. Creating a write-once-run-anywhere platform is the holy grail of software, but if Adobe treats it like a panacea, it could be in trouble.

Sunday, March 7, 2010

Flash on iPad and Android - Not Quite the Time to Cheer Yet?

According to news coming out of the Adobe camp, Flash seems to be catching up on emerging platforms. Using a new packager coming in Flash CS5, it seems application developers will be able to export packages to iPhone and iPad platforms. There are many factors at play here - the growing adoption of new Apple devices and emergence of  HTML5, to name a few. Key question is, will Flash developers find it easy to deploy their Flash apps over Apple Appstore? That's a big gatekeeper there. In the meantime, news is out that Flash 10.1 is almost ready to be released, with support for Android. That should cheer up Flash developers. The release date however is 'later this year' - so, it is not quite the time to uncork champagne bottles yet.

Monday, February 22, 2010

Listening Skills for Presenters: 7 Questions

Watch out - now I'm rambling.
  1. Good presenters are good listeners. Do you agree?
  2. People in the audience do not always talk back. However, they provide visual cues. There are nods and smiles. Or claps. Or yawns. Can you think of any more visual cues?
  3. Sometimes the presenter calls a show of hands, asks an open question or initiates a discussion. At other times, someone in the audience asks a question or makes a comment. In either case, interaction gets going. Does interaction always help a presentation along?
  4. You need to know your audience. Will the key takeaways from your presentation differ from one group to the next?
  5. You need to adapt to the audience, and they receive you well. Can you think of some techniques for adaptation you have used in the past?
  6. Sometimes you conduct a presentation online, and audience is remote. How do you listen to your audience in such cases?
  7. Sometimes you simply email a presentation to a group of people, or upload it to a web site. How do you listen to your audience in such cases?
I close this piece with these lines from poet Dylan Thomas: Someone’s boring me. I think it’s me.

Monday, February 8, 2010

Interactivity vs Bandwidth

Would you rather have a web page that loads quickly - and offers minimal or no interactivity, or build a nice interactive experience - and hope that the site visitor will not lose patience as the page loads?

A recent article by Poonam on Hongkiat.com titled The Importance of Web Interactivity: Tips and Examples provides a case in point. The article itself is a remarkable compilation of some of the world's most interesting interactive web sites. Poonam' s radar sweeps from Starbuck's Find My Perfect Coffee quiz to Mercedes, Nokia and Harry Potter. She even talks about Monoface, a site where you can manipulate facial features to create funny faces with mouse clicks.

What's interesting is the numerous comments on this article - presumably from web designers. Several of them loved the ideas in her article, but are not sure they can take the leap of faith in the face of bandwidth constraints many users face.

It will be interesting to see how increasing bandwidths, better compression techniques and improvements in Flash and Silverlight resolve these concerns.

Thursday, February 4, 2010

Six Steps to Building Effective Presentations

Harbinger Knowledge Products has recently published a white paper on interactive presentations. This white paper is a must-read for presenters who wish to exploit the power of interactivity. This post is a companion piece for its readers.

The white paper identifies six areas in a presentation that could leverage interactivity:

1. Create a first impression
2. Build instant rapport
3. Drive presentation through audience inputs
4. Simplify complex ideas and educate your audience
5. Make it easy to see your value proposition
6. Facilitate effective meeting closures

For each area, the paper suggests appropriate interactive elements presenters can use. To assess how good a job you are doing with this, here are some questions I suggest you pose yourself.

1. Create a first impression
  • Have I got my audience's attention?
  • Have I got them curious and interested?
  • Do they get a sense that together we are about to explore something interesting?

If you don't have a resounding 'yes' in answer to all these questions, it is time to re-assess your use of interactivity. Maybe what you have is too passive or too overbearing. For example, a video clip may gain attention, but render the audience passive. A witty quote may get a few people very interested but leave out others. A game right at the start may be interesting in itself but may not always build the right expectation.

2. Build instant rapport
  • Have I demonstrated that I care to know my audience?
  • Have I let them open up and talk to me?
  • Have I set the right expectations?
  • Do I have their trust?

Well chosen icebreakers help in building rapport. Polling or surveying the audience is one technique. Getting them to brainstorm ideas is another. The goal should be to build rapport and to create a foundation for the dialog to follow. You have to be careful in choosing your questions. Posing open-ended questions at this stage in presentation can be disastrous because you have not set the momentum and the discussions can go in all directions.

3. Drive presentation through audience inputs
  • Can my audience have a say in where we go next?
  • Is there a way for me to navigate the presentation accordingly?

Give too much information, and only a little will be received and retained. The level of detail required will vary based on the audience. Drill-downs and roll-overs provide the kind of interactivity that helps you calibrate the depth of information being presented.

4. Simplify complex ideas and educate your audience
  • Am I telling good stories?
  • Do I break down complex ideas into simpler ones, explaining them one at a time?

Display a whole slide full of text at once, and you instantly lose your audience. The preferred way is to unfold a story. Several interactive elements serve as excellent visual companions to storytelling. Dynamic flowcharts and other interactivites that build up visuals in a step-by-step fashion work great when you want to simplify complex ideas.

5. Make it easy to see your value proposition
  • Do I use appropriate business visuals?
  • Do the visuals permit interaction, drill-down etc?

If a picture is worth a thousand words, business visuals are pivotal to describing business ideas. Presenters often stress verbal communication too much, and ignore graphics in the process. Watch out for this bias.


6. Facilitate effective meeting closures
  • Does the audience get to take part in summarizing key ideas?
  • Are the takeaways listed in one place?
  • Is there a clear conclusion and action plan articulated?

In the end, it is about leaving an imprint in your audience's mind. The more interactively you summarize the ideas discussed, the better they will be retained. Well designed interactivities can mimic sticky notes that collect key takeaways from the audience. These are then are collated and posted in one place so it is easy to go back and refer to them. The white paper gives an example of such interactivity.

As you start using interactivity in your presentations, you are sure to see increased audience involvement. Feel free to add your own tips and questions to enrich this framework for interactive presentations.

Wednesday, January 27, 2010

What the iPad Means for Interactive Application Developers


When it comes to interactivity, the idea of 'less is more' is proved yet again by iPad. It remains to be seen whether it lives up to its promise of delivering the best browsing experience ever. Yet, what impresses me is the elegance of its design - the largest touchscreen device ever designed by Apple is remarkably clutter free.

In one of my earlier posts, I laid out ten new trends in interactivity. It is remarkable to see how some of them are playing out with iPad and its native applications. Here are some illustrations drawn at random.

  1. The sea change in input mechanisms is evident in the increasing use of multi-touch and device orientation while keeping the keyboard as a soft popup.
  2. The way photo albums are presented and rendered indicates a paradigm shift away from interfaces to interactivity. You see a world map, click on a city to see clusters of pictures you took there. Hover your pointer on any cluster to get a sort of preview of what's in there, and finally pick one that you like and render it in an engaging origami-like presentation where pictures unfold in myriad ways.
  3. The breadth of platform support required of interactive applications keeps increasing. Now web pages should play on iPad optimally as well. If designing web pages for multiple viewing devices was a challenge already, now it gets even more interesting with iPad in the mix.

Every time there is a platform shift, application developers have an opportunity to exploit the new capabilities it offers. It will be interesting to see how app developers render richer applications for iPad - it is almost certain that they will be different from laptop browser apps and smartphone apps. There is a new unlearning and learning curve waiting here for app developers. They need to take advantage of the larger size and touch capabilities while reducing the dependence on keyboard.

Monday, December 14, 2009

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.

Thursday, December 10, 2009

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.

Monday, November 30, 2009

Is Your Web Page Getting a Lot of U-turn Traffic?

There is one word that spells the dirty little secret of useless web traffic: Bounceback. For all the search optimization that brings your site in the first ten blue links on google, what good is a site traffic that will make a u-turn and go away?

Let's declare a war on clever schemes that bring u-turn traffic to web sites. We want engagement and stickiness - visitors must stay on site and interact meaninfully with the site. That should be our goal.