Dev

How to make the web touchable: developing for a tablet interface

For publishers and brands the tablet device is the new interface of the web. As tablets continue to invade the marketplace, both will have to provide a tailored interface for users. Below are a few concepts on how to approach building tablet experiences for the web.

Simply put, it is time to rethink everything you know about how users want to consume digital content as we evolve from click driven graphical user interface (GUI) to gesture focused natural user interface (NUI). This consumer shift in human computer interaction (HCI) began with the introduction of touchscreen smartphones and peripheral devices, but the tablet will be instrumental in users getting accustomed to NUI over the next 3 to 5 years.

There are two reasons tablets will lead the evolution to NUI:

1. Screen Size: Screen size is a key factor in determining how much interaction you can build into a user experience. Tablet screen sizes range from 7 to 10 inches, which represents the biggest interactive display most users have personally experienced to date. This larger screen size will allow for enhanced user interactions that other devices cannot currently support. (Just try using an iPhone app on your iPad. It sucks pretty bad.)

2. Multi-touch inputs: The combination of the screen size and multi-touch inputs creates a platform that presents unique user interaction capabilities that cannot be replicated on any other device or platform. With a mouse, you have one point of interaction from a user. With multi-touch, you have ten inputs and that alone changes the game. We have just scratched the surface on using multi-touch inputs to define new gesture architectures for users.

We have started testing what type web interfaces work best on tablets and how we can enhance the user experience based on current user knowledge and expectations.

Make the user feel like a Natural

Making the user feel like a ‘natural’ is the goal of NUI, so it is very important to take an inclusive approach when introducing NUI. When building for tablets you have to focused on the idea of being inclusive in your gesture architecture, specifically relating to user interactions. For example, if there is a pinch gesture associated with an element on the screen, it should work on tap as well so that it is inclusive for those who do not inherently understand they can pinch the element

With that approach we set out to develop new tactile and fun websites for tablets.

Make the experience tactile

To test out new tactile interactions we developed the CARDS interface (see video below).

Objective

The objective of the CARDS interface was to give the user complete control over each piece of media that is displayed for consumption on a webpage by flicking through cards and selecting the desired item from the stack. Browsing through CARDS is a natural process for most users, and it gives them a sense of control over each piece of media and not just the page (e.g. a magazine layout). Also we wanted to present multiple media/content options on a single screen without visually overwhelming the user.

Results

The results from our initial tests were very interesting. The average time spent with the CARDS interface was over 3 minutes based on Google Analytics. This was very encouraging, considering the CARDS interface was focused on a single tactile interaction (flicking) to drive content/media consumption. The user feedback we received was very exciting as well. Users wanted more interactions and different ways to engage with their selected media. This was great to hear because it meant that our baseline CARDS interface made the user want more NUI throughout his or her experience.

Make content consumption interactive and fun

To build on the user’s request to add more interactions and ways to engage with selected media we thought to ourselves: What if you could draw on any piece of content/media on a tablet device?

This approach would definitely make the experience more fun and engaging. Also it was a user interaction that is tailor-made for tablet devices. With that in mind, we created DRAW featuring Justin Bieber (see video below).

Objective

Make a fun engaging way to interact with content/media at a webpage level on tablet devices.

Results

We saw over 2 minutes average time spent with DRAW based on Google Analytics and some of the funniest pictures ever. (People love their Justin Bieber!)User feedback centered around the ability to share drawings and add filters to the photos. Based on these learnings, we have a ton of new NUI thoughts to make media fun and engaging, which we will be releasing in the near future.

Overall, we feel that these tests show the desire and demand for a more tactile and fun experience on tablet devices when it comes to the web. We believe our approach to building tailored interfaces for tablets is the next step in web user experience. The thought of watering down the user experience on a tablet because you are tied to a website built for GUI (clicks) makes no sense to us.

If you are not thinking about the touchable web you are missing out on a huge opportunity.

Mark Spates is the founder and CEO of ClrTouch, a company that makes it easy to self publish websites on tablets. ClrTouch recently demonstrated at the Fall 2011 DEMO conference


Mobile developer or publisher? VentureBeat is studying mobile app analytics. Fill out our 5-minute survey, and we'll share the data with you.
0 comments