Archive for Interactivity


If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Have a great idea for a new mobile product or initiative? You won’t get very far without an equally great mobile prototype. A mobile prototype is the one chance you get to pitch your product or service – whether it’s a mobile app, a mobile microsite, or even an iframe mobile widget. A great prototype is essential to selling your clients, enticing investors, or getting approval from internal divisions on your vision.

Prototyping Top 10

“Prototype” and “demo” are two commonly confused terms. A prototype is an early version of a product with specific functionality. A demo is a story, vision piece or demonstration of underlying functionality as opposed to being an early stage product. While prototype and demo mean two separate things, the terms are often used interchangeably. For the purposes of this post, we’ll use the term prototype.

Mobile prototypes can vary from quick and dirty low-fidelity renderings to months long, enterprise-scale initiatives. However, all prototypes share several things in common. From storyboarding to creating an in-screen mobile demo, a successful mobile prototype must address three fundamental needs:

  • What is the purpose of this mobile product?
  • How does it further the client’s needs?
  • How will users interact with this product?

Why do so many good mobile product ideas get shot down? The company fails to create an effective prototype. Don’t let this happen to you. Whether you need to sell your client on a mobile initiative or pitch a new product to your boss, here’s what to do.

#1: Stay on Target. What will your mobile prototype accomplish? It’s all about driving business results, isn’t it? Start with your business goals and your core messaging. Everything should flow from there. Think about your client’s needs and explaining how your product will meet them. Don’t get caught up in the bells and whistles of fancy technology – stay focused on your client.

#2: WIIFT – What’s in it for them? The goal of mobile prototyping is to sell your product to the client. While demonstrating new technology is fun, it’s not your final goal. Your client assumes that your technology will work. They need to be shown how the technology will benefit them and their customers. To do so, don’t ignore the user interface. Otherwise, when your prototype is sent to senior business developers for review, it will be shot down. Clearly show your client what’s in it for them. Will your product enhance their marketing efforts? Will it help them reach new customers? Show your client that you understand their challenges by demoing a solution that meets their needs. Every aspect of your prototype – including the UI – should show your client that your business is about meaningful solutions, not just fancy technology.

#3: Go big or stay simple. Your mobile prototype should either look like a professional-grade product or be a simple, grey-scale wireframe. Anything in between these two extremes looks unfinished and unprofessional. Worse, customers will get hung up on color changes, logos and other unimportant details – missing the big picture.

#4: Plan user flows and leverage shortcuts to demonstrate features. Map out user flow on your mobile prototype so you are not constantly bouncing back and forth between screens. Use shortcuts to demonstrate functionality and content. Animated feature sequences are an easy solution.

#5: Fake it ‘til you make it. There’s no need to program everything. Use visuals to explain user flow and demonstrate functionality. Save time by demoing one feature and suggest functionality elsewhere. For example, your prototype could include five different menu items, each suggesting specific functionality. Only one of these five items needs to be active in order for your client to understand how they all operate. Unless your product is a server, there probably is no need to connect your prototype to a server. Instead, use an animated progress bar or spinning wheel as a stand-in for the connection.

#6: Auto or Manual? An animated mobile demo is an easy way to show how a user interacts with your mobile product. For example, you could show a finger making different selections to symbolize how a user interacts with items on the screen. Consider whether a self-running web demo or a presenter-controlled demo best meets your mobile prototype pitching needs. A presenter-driven demo, where you remain in complete control of the demonstration, is more interactive and effective. You can also do both, which is helpful if your pitch meetings are both in-person and virtual.

#7: Make your mobile user interface stand alone. No handholding allowed! If your client will be interacting with your prototype, make sure the interface is user-friendly and intuitive. Be sure to test this interface in advance for unforeseen complications from user error.

#8: Set up for fast changes. Pitching the same mobile product to multiple companies? Create an intelligent mobile prototype that can be easily reskinned for each client. A quick swap of colors, logos, and content examples saves time and is more likely to win you the business.

#9: Divide and conquer. When customizing a generic mobile prototype, keep your client’s industry in mind. Start by dividing your prototypes into verticals, such as retail, automotive and entertainment. This will make additional customization quicker and easier.

#10: Sell the sizzle. Don’t overthink it. A mobile prototype is meant to demonstrate capabilities, generate conversation and spark enthusiasm. It’s not a perfect solution to meet the client’s every need. If it were, then you’d already have a finished product! Let the client get excited – your job is to translate this excitement into a successful sale.




Over the past year we’ve worked with mobile advertising partners creating various mobile rich media ad products and HTML5 mobile ad experiences. We want to share some of the latest HTML 5 and microsite concepts we created around the 2012 Olympic Games.

2012 Olympics Mobile Advertising and HTML5 Concepts

Our concepts fell into two groups: for official and non-official sponsors. Since only official sponsors are allowed to associate themselves directly with the Olympic games, we came up with “live-data” concepts for official sponsors. We wanted to tie into the excitement and immediacy of the games. The ideas became ads as news. The concepts tie into close to real-time sports data providers so the ad viewer could get the latest Olympic information. A couple of ideas include:

  • Medal Count – Allows consumers to see up-to-the minute medal count results.
  • Daily Previews & Recaps – Consumers received the latest Olympic news and previews of coverage and events occurring later in the day.

We also needed to broaden the concepts to non-official sponsors to broaden the business opportunity for our partners. Concepts we designed for sponsors (official or not) include:

  • HTML5 Mobile Casual Games – We focused on a basketball mini-game. Remember the game you played as a kid where you had one minute to take as many shots as possible? That’s essentially recreated using HTML5. Many don’t know that interactive games with Flash-like experiences can be developed with HTML5 and be deployed today. The most exciting thing about HTML5 mobile games is that they can be distributed across mobile web. This means larger reach and a larger audience.
  • London Games Quiz – Another concept we developed is an HTML5 mobile quiz game based on Olympic trivia. Users have a time limit and the faster they respond, the higher the score gets. Users are allowed to then share and post results, as well as inviting other friends to play.
  • Sport Timeline – In this concept we created an interactive HTML5 mobile experience where the user interacts with a timeline. As they move their finger across the screen dates, copy, and photos update as the consumer sees information about the innovation for a particular sport. This allows a sponsor or advertiser to associate themselves with any type of sport.
  • Polling & Voting – We wanted to use polling concept that could be run throughout the day around various sporting events. Voting on who you think will win an event ties into the most common discussions people have on a daily basis. Plus you get bragging rights if you guess correctly. Polls were also targeted for specific audiences so not everyone views the same sport. Content and eesults are animated via HTML5. Advertisers can choose any type of sport to focus the polling or voting around.

The experiences we’ve been working on often get served via an expandable banner ad or a mobile microsite. HTML5 for mobile is especially exciting in that it’s enabling wide-scale interactivity and experience over mobile web. You’ll start seeing more and more rich experiences outside of apps.

Sponsors or advertisers can create custom experiences and UI components and are not relegated to standard web UI controls. HTML5 makes mobile advertising more enjoyable and encourages users to linger on microsites longer. An article in Digiday predicts major mobile interaction around the Games this summer, which gives advertisers a great chance at marketing products through dynamic microsites.

Over the next few weeks we’ll be sharing more about our Olympic as well as other concepts. Stay tuned.




While watching TV the other day, I noticed a Shazam logo pop up on the screen. Of course, I immediately searched and came across this really interesting Ad Age article about how Shazam’s new mobile marketing app listens to what you’re watching and serves up synchronized content on your phone. This new technology allows companies to target their mobile design strategy to what consumers are viewing on TV, creating a whole new way to think about interactive television.

Shazam

Back in the late 90s when folks were first envisioning interactive television, we assumed the interaction would be taking place on the TV screen. Using either a remote or a touch screen, we would engage and drive television content. What Shazam’s mobile marketing app achieves is true interactivity. It shifts how we think about interactive TV, opening up amazing possibilities for brands and consumers. Instead of interactivity taking place on one screen, it takes place on two.

The content remains on the TV and the interaction happens on the mobile device, allowing brands and networks to coordinate mobile design in support of TV shows and commercials. Shazam’s mobile app works by leveraging the company’s sound recognition technology to drive interaction, solving the challenge of syncing interaction to timed content. Sound recognition provides a ‘bridge’ for perfectly syncing broadcast content to a mobile device, which otherwise would be a very complex process. What this means is that when the Shazam app picks up the appropriate words or music from the TV, a corresponding mobile experience or ad will appear instantly on your phone.

With Shazam’s technology, the mobile design experience possibilities are endless. Broadcast networks, for example, can enhance a program’s content during the show itself to increase programming loyalty. The two screens, mobile and TV, can play off each other simultaneously, as opposed to being related yet still working individually. In addition, networks can prevent people from changing the channel by providing interesting experiences during commercial breaks. For example, during breaks the network might show you ads for upcoming programs and remind you to schedule alerts. They can quiz you and offer prizes. Tease what will happen after the break.

Most advantageous to networks, Shazam’s mobile marketing app allows them to sell more advertising on combined units. Not only can they sell standard network slots, but they can also sell the accompanying interactions on mobile devices. Brands, too, like the interactive possibilities for an integrated rich experience. Many are designing their own versions of Shazam’s mobile marketing app to create interactivity between TV content and mobile devices.

These kinds of mobile marketing apps marry television’s broad profile marketing with mobile behavioral targeting. For example, you might watch an ad on TV from an auto manufacturer. Then, based on your profile, your mobile device will provide you with additional mobile design advertising based on your specific profile and preferences. Instead of everyone seeing additional content for the same vehicle, the person will get the most likely vehicle they are interested in (SUV, luxury sedan, sports car, etc) timed perfectly to the spot on the television. Because the interactivity will make commercials more interesting, these integrated mobile marketing apps and experiences may just solve the DVR issue of consumers bypassing all commercial content.

Shazam’s application of their technology is rather new. It’ll be interesting to see how many consumers embrace this type of interactivity. One thing is for sure though, the possibilities for innovation in mobile design and interactive tv have increased dramatically.




I’ve been waiting to see innovation beyond simple check-in on Foursquare. MobileMarketingWatch had a post that will definitely enhance opportunities for mobile marketing and advertising. Foursquare has created partner badges. RunKeeper, their first partner trial, tracks fitness without check-in and encourage real-world actions.

foursquare mobile marketing advertising

This is a great way to unlock mobile marketing and advertising opportunities. There are many possibilities for brands to align with real-world actions.

Another great use of partner badges would be as a tool for consumer contests or sweepstakes. For example, a clothing store could give achievements points, special offers or coupons to the user taking a photo of the cutest “back-to-school” outfit. A health food brand could take advantage of mobile marketing and partner with Foursquare to promote healthy eating. Users could be rewarded with recipes, healthy hints or unique discounts.

This is a brilliant use of game behavior applied to marketing. To learn more about using game mechanics and get ideas for mobile marketing and advertising, I highly recommend reading Game-Based Marketing: Inspire Customer Loyalty Through Rewards, Challenges, and Contests.

It’s nice to see mobile advertising and marketing apps encouraging real world behavior outside of “get to the store and purchase.” Foursquare’s recent press release stated: “We look forward to the day when looking at your foursquare badges reminds you of all your proudest life accomplishments”.




InteractiveTV today had a post about an outdoor advertising campaign that uses shoppers own faces for a gigantic DVD promotion. It’s a high exposure campaign showcasing unique user experience design. And it’s a perfect fit for mobile.

Morphing

Inwindow Outdoor, a company that does digital storefront and mall advertising, launched the interactive augmented reality display at Los Angeles’ The Grove, to promote the Blu-ray release of “Avatar.” The display is a free-standing structure of multiple digital screens. Using technology developed exclusively for this project, shoppers faces are morphed into the wide-eyed blue creatures from the film. Once the morph is complete, users can enter their email address via touch screen, in order to be sent a video of their transformation, along with information on where to purchase the Blu-ray disc of the movie.

Down the road, this will be able to happen via a mobile. Imagine getting a message from a friend with their facial expression (or their kids or boss or pets) mapped to a branded character. This is a great way to build a buzz for any animated or costumed character-driven film – think Iron Man or Shrek. Send it to yourself, friends and family and some transformations are sure to go viral when they hit the social networks.

The display was introduced last Friday and set to run for a month – if you’re in L.A., check it out.




A few trade stories this week about video ads suggest a opportunity for intelligent mobile user experience design.

Mobile Video Ads

MocoNews reported on a Google blog post about how the company is beginning to monetize the mobile version of the video site. Banner ads will show up on the home, search and browse pages of YouTube when accessed via mobile. Meanwhile, AllThingsDigital.com linked to an editorial about the hatred for pre-roll video as well as its effectiveness. If pre-roll ads are to become the norm, why not design the mobile video ad experience to be intelligent and adaptive?

Why not combine pre-roll with dynamic content tailored to the users? Not everyone needs to see the same pre-roll ad. I’d answer more questions to reveal demographic information in exchange for seeing less ads. If not less, I’d definitely prefer to see an ad of interest to me – like movie trailers - rather than the many makeup commercials I’ve been forced to endure before watching online videos recently.

I’ve recently seen Hulu offer short surveys in exchange for an ad free episode. The experience was hassle free.

Multiple pre-rolls could be created to serve different demographics – male teenagers see video game previews, new parents would get baby products, affluents would get luxury commercials, etc.

So why not give users ads that they want? Targetted ads will result in better ad spends and more purchasing.




Google introduced a new service for searching with gestures for Android 2.0 and above. This gesturing could evolve into some pretty cool uses and mobile user interface design opportunities.

Google Gestures

Basically, users scrawl a letter (or “alphabet gesture” as Google Labs calls it) on the touch screen to bring up a contact, app, music file or bookmark from a list of hundreds or even thousands on your Android phone. The mobile user interface eliminates the need to type in certain cases.

While the gesture feature is currently for searching only, this opens up lots of possibilities for interesting mobile user interface design possibilities for Android. The API could be opened up so that anyone writing Google apps could make use of ‘common’ gestures.

Universal gestures could be explored that could be used across any app.

Imagine that there’s a ’send to the Google cloud gesture’ and a piece of content you’re interacting with could automatically be sent to the appropriate cloud service. For example, you receive a document, gesture it, and it ends up stored in your Google Docs. Or the ability to gesture a phone number on a site and save it in Google voice would make interacting with Google cloud services easier.

I’m happy to see Android evolving and opening up the door to explore more touch based user interface design options. It’s a good time to experiment before rigid standards make their way into the mobile user interface design community.




InteractiveTV Today announced that Immersive Media is making available 360-degree, interactive, online video footage of Haiti to agencies, government departments and news organizations involved in the relief efforts, free of charge.

Immersive 360 Video

Welcome to the next generation of street viewing. I’m sure the live video is amazingly helpful in the Haiti situation but I can’t help thinking about how much it opens up mobile design possibilities.

Real estate, the arts and education are just a few of the industries that will be enhanced by 360-degree video. Save time, save money and avoid hassle – I can’t see a downside and I can’t wait to see what is next for live video.

I’m fascinated with the way many emerging technologies are so compatible. Combine Augmented Reality and live 360 video for amazing immersive mobile user interfaces.

Consumers will love it but advertisers are going to flip over the insane amount of organic advertising and promotion possibilities that will open up. See my post about Google Street View, specifically how targeted ads can be displayed to consumers at almost the exact moment of purchase and offer discounts, special offers and additional information. Extreme interactivity will be the key to opening up and unlocking even more creative mobile design possibilities.




Verizon continues to blend their product offerings through a converged mobile user experience. InteractiveTV Today had a post detailing the variety of FiOS TV features that will soon launch. There are some cool elements that also have practical real world use - a good example of a multi-screen experience.

mobile tv user experience

I was particularly interested in the news that Verizon will soon release software that will let viewers to use their WiFi-enabled smartphones as a remote control. Through a remote access service, Fios TV subscribers will be able to use their mobile to review, change or add recording requests, delete recorded programs, browse and search TV and video-on-demand listings, and set parental controls.

Mobile devices are so much more sophisticated than the typical remote – it’s a great use of mobile technology.

This opens up a host of possibilities to bundle Verizon TV and mobile services together - building consumer loyalty and expand Verizon’s reach. A good example of this might be Verizon suggesting new content purchases based on shows or music you’ve watched or programmed to record. By utilizing one device as an extension of another, new user experiences are possible. For example, when watching FIOS TV and you see an ad for a show you want to watch, you don’t have to interrupt your viewing experience on the television. You just use your mobile phone to set the show to record.
Other features include an enhanced Interactive Media guide for FiOS TV as well as “bidirectional sideloading”—which allows viewers to use their TV to access digital files from mobile phones attached to their PC’s. There will also be an interactive TV application that allows you to watch free samples of premium channels with the option to order as well as various widgets, like the football widget that displays statistics alongside a game.

I’d love to see more social tv features. For example, notify when my friends are watching tv, let me know what they’re watching, let me invite them to watch something with me, etc.




Stop the presses! Sort of…Entertainment Weekly is running a CBS video ad in…their print magazine. InteractiveTV Today had all the details and I was pretty blown away. Not just about the technology – which is amazing – but the idea that online is now going print instead of the other way around. This concept is a great juxtaposition of print and digital. 

The way it works is that the video player insert is a flexible, thin, plastic screen on two pages, activated when opened (like musical greeting cards). The ad has 5 channels with 40 minutes of content. Readers can change the channel by pressing buttons embedded in the print ad. It’s launching “Monday to the Max,” a campaign for CBS’s comedy and drama line up along with a promotional tie in with the new Pepsi Max. (Pepsi Max is billed as “the first diet cola for men” with ginseng and lots more caffeine than regular Pepsi.) 

The Entertainment Weekly issue won’t be out till Sept 18th but is already generating a lot of buzz. The CBS/Entertainment Weekly ad will only appear in LA and NY subscription copies - no newsstand sales - so copies are sure to be scarce. I’m looking forward to more uses of this technology which might have the added benefit of giving the struggling print industry a shot in the arm. Magazines could have unique tie-ins or exclusives with a show or movie. From gardening to news to sports publications, the possibilities are endless.

Looking forward, it would be interesting to use this technology to go further into print, broadcast and mobile convergence. Perhaps readers could have access to a ‘trial’ episode teaser clip of the show. (with appropriate cliff hanger ending, of course) In order to continue the program, you’d need to buy a subscription or pay a fee. 

Or maybe the reader would be directed to a website to sign up for a free promotion to continue watching, yielding valuable consumer information. It would be great for consumers to be able to choose where and how they continue watching the show with availability across numerous platforms. 

Also, short-form episodic content - like mobisodes or webisodes – could be available exclusively through a video player in a print publication. Theoretically, this could drive up subscriptions and test the waters for the show to eventually become a “traditional” television show or feature film. 

CBS says the video player insert, made by a Los Angeles company called Americhip Inc, will be able to withstand the binding processes and mail delivery to arrive ready to go.