As we enter the Holiday 2011 season, it is clear that mobile devices are playing a growing role in how people play, socialize, and shop. There are now 328 million smartphones, tablets, and laptops for the 315 million people in the US, and mobile web traffic has doubled in the past year. Currently, 37.4% of people in the US have a smartphone, and with 650,000 people switching from feature phones to smart phones every week, we are on track to hit 50% of people with smartphones by September 2012.

Apple still dominates the smartphone and tablet market, but Android has seen dramatic growth. Apple accounts for 43.1% of mobile devices and 58.5% of mobile web traffic, while Android accounts for 34.1% of mobile devices and 31.9% of mobile web traffic. Apple device owners are clearly very comfortable accessing the Internet via browsers and mobile apps, but combined with Android we have 63 million people accessing the web via mobile, and another 21.5 million when we add in Blackberry and Microsoft devices. That’s at least 84.5 million people on the web regularly via the most common mobile devices.

So, what are all of these people actually doing on their mobile devices? Recent data from the Pew Research Center identified the most common activities on mobile phones:

• 73% send and receive text messages
• 73% take photos
• 54% send photos (or videos)
• 44% access the Internet (via browser)
• 38% send and receive email
• 35% play games
• 34% record video
• 34% play music (Pandora reports that 50% of their traffic in August 2011 was to mobile devices!)

Other studies report that 58% of people read news on their tablets, and 25% do that daily. Socializing is also popular with 3 out of 5 mobile device owners reporting they are active on social networks, and 72.2 million people in the US accessed social networks and blogs via mobile devices in August 2011, a 37% increase over last year.

But what about mobile applications? As mentioned above, we’ve been monitoring the popularity and use of the mobile web and mobile applications over the past few years.  The trend is clearly toward using mobile optimized web sites for general activities and mobile applications for productivity, focused functionality, and brand-specific experiences.

How many mobile applications are being installed and used? In 2009, 22% of smartphone owners had installed mobile apps; by August 2011 that increased to 38%, and 75% of tablet owners report installing applications. More data from the recent Pew Internet research shows that:

• 68% of people with apps on their smartphones report using them
• only17% of smartphone owners use no apps (and only 8% of tablet owners use no apps)
• 51% of smartphone owners use 1-5 apps per week
• 31% (so-called “power users”) use 6 or more apps per week (while 39% of tablet owners fall into this category)

How are people using all of the mobile applications?

• 74% provide updates on news, weather, sports, and/or stocks
• 67% help communicate with friends and family
• 64% help people learn about something in which they are interested
• 53% help people find information
• 48% facilitate work-related tasks
• 46% are for shopping and/or making purchases
• 43% watch TV or movies online
• 35% retrieve information about en event
• 29% track and manage their personal health

Yes, you read that correctly: 46% of people who use installed mobile applications are using them to shop. This is a significant market and a huge opportunity. Forrester reports that mobile commerce increased 25% in the first half of 2011 (and mobile traffic was up 300% for Holiday 2010), and PayPal is processing more than $10,000 per minute in mobile transactions (at an average of 3 mobile transactions per second, they anticipate $3.5 billion on mobile payments for 2011!) So far in 2011, the average ecommerce site is seeing 10% of traffic from mobile devices, and that number increases to an average of 15% for premium brands.

Customers are increasingly comfortable with mobile shopping and making purchases via mobile devices, and they are not making only small purchases: in October 2011, eBay sold a $40,000 backhoe via mobile, and Blue Nile sold a a $300,000 diamond engagement ring via their iPhone app in September 2011. Blue Nile also reports that purchases in the thousands or even tens of thousands are “not uncommon.”

Acceptance of and attitudes toward mobile commerce are strong and positive. Recent analysis by JiWire shows that nearly three-quarters or more of consumers are comfortable buying on mobile devices, and older, more affluent consumers are more likely to make larger purchases.

For adults between 18-34 years:

• 73% are comfortable buying on mobile (14% are not willing to buy on mobile)
• 27% spend under $50
• 13% spend $50-99
• 15% spend $100-249
• 14% spend $250-499
• 17% spend $500+ (45% do research before spending $500 or more)
• 13% do price comparisons
• 23% research on mobile, but buy online (non-mobile)
• 15% research on mobile, but buy in-store

For adults between 35-54 years:

• 83% are comfortable buying on mobile (11% are not willing to buy on mobile)
• 18% spend under $50
• 13% spend $50-99
• 17% spend $100-249
• 19% spend $250-499
• 22% spend $500+ (34% do research before spending $500 or more)
• 34% do price comparisons
• 31% research on mobile, but buy online (non-mobile)
• 32% research on mobile, but buy in-store

Mobile commerce is growing rapidly, and both the mobile web and mobile applications provide opportunities to reach consumers and provide the information, features, and services they need to make purchase decisions and complete transactions. With nearly half of tablet owners reporting they made a purchase from their tablets, and with 111 million smartphones and tablets in use and growing quickly, now is the time to establish a brand presence in the mobile space.

The conference focused on designing for multiple screens, the intersection of design and technology, pushing the envelope of user experience, and to bring new, visionary energy to our work. Five very full days of labs, seminars, and sessions provided ample opportunity to learn from the experts, and I am honored to have been invited back to speak in two sessions.

On Tuesday, October 4 I spoke to nearly 170 people about “Making Better Design Decisions by Understanding How People Think.” We discussed how to turn merely adequate experiences on the web into more meaningful ones. People often complete tasks despite the fact that many interfaces seem intent on thwarting us; understanding how people perceive, think, learn, and remember can help us make better design decisions. During the session we identified common UX problems, discussed how people actually think, and showed how to modify the design options (in real-time!) to craft a better user experience.

Also on Tuesday I was a member of a panel discussion organized by the Society of Digital Agencies (SoDA) where we talked specifically about how we leverage the Adobe design and development tools in our day-to-day workflow and processes. Fluid was able to show some of our ground-breaking recent and upcoming work, and the attendees asked great questions about our design, prototyping, and development process. I showed work from the same projects featured in the keynote address, and many people recognized it and were excited to see it in more detail and learn about we brought these innovative customer experiences to life.

On Wednesday, October 5 I spoke to about 70 people about how we use some of our design tools at Fluid on the Experience Design team in my “I Didn’t Know Fireworks Could Do That!” session. We explored some of the lesser known yet powerful features of Adobe Fireworks, an essential design tool that operates with both vectors and bitmaps and can span the design process from wireframe to comp. I showed how we use Fireworks with Dreamweaver, Flash Professional, and Flash Catalyst, as an integral part of our design and development workflow.

Finally, I had the pleasure of sitting down with the talented folks at Nerd Radio and talked with them for about 20 minutes about our work at Fluid, our workflow, and about the exciting new announcements from our interactive merchandising products team that we have begun to launch the latest updates that enable consistent and excellent customer experiences across multiple screens and devices – precisely the core theme of the Adobe MAX 2011 conference!

Overall, the conference was a great success. My sessions were well-received, Fluid’s work was showcased in front of thousands of attendees, and I had the opportunity to meet and speak personally with dozens of talented designers and developers from around the world. Now it’s time to start thinking about and preparing for the Adobe MAX 2012 conference next October!

… while magazine reading and entertainment viewing are getting the early consumer buzz on the iPad, the real play for brands may be as an e-commerce platform. Commerce and on-the-go buying has been successful on the iPhone, but the small screen size and limited visuals have shortchanged many efforts. The iPad brings the capability for better graphics and video, a touch screen for an experience more akin to catalog shopping, social networking, an easier way to swipe or touch to buy, and even cost saving and green appeal with the use of less paper for weekly flyers and catalogs…

… The internet allows for great shopping tools to find the best prices or get reviews, but it’s missing the pizzazz — the reason why we want something in the first place,” said Brad Spirrison, managing editor of Appolicious. “With the iPad, now you can have great content combined with a great pathway to e-commerce all on one device. That’s a game-changer.

Why do retailers think they have to wait for the iPad to change their
approach to digital merchandising? Why do they think that the iPad is
the first device and opportunity to combine great content with eCommerce?

The iPad didn’t need to be a game-changer for eCommerce – it’s just a
touchscreen browser – but it makes people think differently about web design and experience, and all of the opportunities and design concepts that were available before the iPad (but which they rejected as “too edgy”) now seem acceptable. There is no reason why eCommerce web sites could not have been doing some of the things that people are doing with the iPad – the only difference is mobility – but why should mobile experiences be more engaging and content driven than a desktop (or laptop) web experience?

There is no reason why every digital shopping experience cannot be more rich and engaging, regardless of the device delivering the experience. Retailers and merchandisers have been stuck in old patterns and “traditional” ways of thinking about the web on the desktop, and the iPad is presenting an opportunity to “think different.” We should take this opportunity and run with it to create better digital shopping experiences for our customers, and in doing so we can also create great shopping experiences for any device or platform.

How did Old Spice make virality happen?

Let’s step back a moment and first take a look at something else that appeared on the Web this week: Google’s Paul Adams shared his slides from a presentation about the real structures of social networks. It’s a long (216 slides!), detailed, and fantastically informative lesson on how social communication and interaction occurs.

Why Google is Scared of Facebook, or How Social Networks Really Work

Starting on slide 147 he discusses the role of influencers in social networks, and on slide 159 he presents a graphic of how people think influencers work and how they actually work.

Go look at the diagram, because Old Spice is using this influencer diagram to create viral videos via Twitter where Isaiah Mustafa (the handsome, shirtless Old Spice guy from the television commercials and YouTube videos) creates personalized videos for people:

Old Spice is Making Custom Videos (via Mashable)

Old Spice helped these videos go viral by starting with seed videos created for influential people (e.g., Perez Hilton), because they know that if they reach people who have large audiences the influencers will share these things with their audiences if they like them, and especially if these things feature the influential person. Once the seed was planted and influential people started responding via Twitter, Old Spice created new videos for people who responded. It grew (well, it really exploded) from there.

Influence the influencer, and you influence all of their followers, too.

I started with the list of Internet Retailers 2009 Hot 100 Retail Web Sites. I don’t quite understand how they came up with this list, given that some of these sites look like they haven’t been redesigned since the ’90s, but it seemed like a good baseline to use for my research.

I set forth a series of questions as I looked at each site:

• Does the site use parametric navigation/navigation filtering?
• Are there multiple filtering categories available, i.e., does the site show filter options for both price and size?
• Can I filter on more than one criterion? So while the site shows me filter options for both price and size, can I select an option from each one of those sets?
• Can I filter on multiple sections in one set? In other words, can I select both the $50-$75 and the $75-$100 price range, or am I limited to one selection?
• Do the results refresh instantly or do I need to click a button to activate the search?
• Are the selected filters displayed on the page? If I filter by $50-$75, long-sleeve shirts, do I see these criteria close to my results set, so I know what I’ve selected? (I don’t have a very good memory.)
• And a more subjective question – how would I rate the quality of the parametric navigation? Is it easy to add and remove filters? Do the filters show the number of items in that category? Are there a myriad of filter options?

I scored the objective questions on a scale of 0-2, with 0 equaling no/not present, 1 equaling partially present, and 2 equaling yes. The last question had a scale of 0-5, with 5 being ideal. The maximum score is 17.

My Favorite Implementation

This is not on the list, but I think it’s one of the best uses of parametric navigation that I see on the Web. I use the site all the time, and am constantly amazed at its combination of complexity and simplicity.

Kayak – I don’t know that Kayak.com would be traditionally classified as an online retail website, but I do use it to browse and shop for travel information any time I go anywhere. I can enter my home airport – SFO – and my destination – NYC – and I can filter the hell out of my results. I can opt for a direct flight or choose to have a layover (yeah, I don’t pick that). I can change my flight departure and arrival times based on whether the plane is taking off or landing. I can pick only the airlines I get miles on and only the airports I would fly in and out of (definitely does not include San Jose). There are sliders for price, layover duration, and trip duration. The possibilities are endless.

What makes this an excellent site is not only the numerous choices, but also the ability to select multiple options under one category – for example, I can select JetBlue and Virgin America. I’m not limited to one option per category, which is where a lot of sites fall short. Additionally, I can set my own parameters for several filters, including flight times and price. I don’t have to try and fit into the 10:00am-2:00pm time frame or $200-$350, $350-$500. I can set my price filter to $409 if I want to. I have options, dammit! And the best thing about this site is the single-page architecture. So when I modify any of my options, the page just redraws in a relatively seamless manner. Now I didn’t judge the Hot 100 based on their search/filter technology implementation and I didn’t note if a filter forced a new page to load or if the site used a single page architecture, but it is one of the design and technology implementation decisions that makes for a positive user experience.

On to the Hot 100….

The Good

The four sites on the list with the best parametric navigation implementation are Blue Nile, Computer Discount Warehouse, CSN Stores, and Garmin. The primary thing that each of these sites does well is allow for multiple filtering choices for each category.

Blue Nile – This site makes best uses filtering on the Diamond Search – and I’m not just saying that because I’m a girl. Like Kayak, it updates results immediately and provides that direct feedback to the customer. I can select three diamond shapes on the main page and it tells me the total number of diamonds in stock in the selected shapes. Once I get to the results page, I have quite a few options to narrow my list, and I can change the shapes, sizes, price, etc. very easily. The site makes it very easy for me to buy myself lots of fancy jewels (except for the price, of course).

Computer Discount Warehouse – This site is better known as CWD and it has a massive amount of home and office computing inventory. So how to find what you need? CDW actually gives the customer multiple parametric navigation options – basic and advanced. I go to the site and select Products -> Computers -> Notebook Computers. The main Notebook page comes up and I can see that I have a ton of Advanced filtering options. I can open each one of these, select multiple criteria and customize my search to the smallest detail. Or, I can click on the Basic tab and do simpler, more traditional filtering. It’s true that I may not have as many options here, but if I’m not an experienced buyer, all of those choices could be intimidating. This site allows me to search in whichever way I’m comfortable.

CSN Stores – This is not a store most folks would have heard of. Rather it’s a company that has set up an online store template for focused purchases, and they’ve done their parametric navigation pretty well. Select Shop By Item -> Furniture. Then click on Bedroom Furniture and select Dressers in the left navigation. The site has more than 100 filtering options with quantities per filter and the ability to select (and easily de-select) multiple options under one category. And each time I add a new filter, the quantity for all the remaining filters updates, taking into account the additional criterion.

Garmin – This site, with a much smaller product set than CSN, handles it’s filtering in pretty much the same way. I select Products -> On the Road and click on Automotive, and I get 27 results with multiple filter options and updating quantities to help me narrow my choices and find the GPS that works for me.

The Not-So-Bad

These sites they come close, and I wish they would go just that little extra mile to push themselves into “The Good”.

EyeBuyDirect – This site does do a few things right with the parametric navigation. I clicked on Women’s Glasses, and got 231 results, so I decided to narrow this to Fashion and Classic glasses. I select those filters, and the page refreshes instantly, which is great. But I still have 54 results, and I decide that I only want black or brown glasses. And there is where the site falls short. I can only select one color. Why give me the ability to select multiple options in one filter category and not in another? As I said above, I like choice.

Sunglass Hut – If you’re not near a mall and you need your sunglasses, this seems like a good site to visit. I searched for “Ray-Ban” to see what results I would get. The left side of the page refreshed with a list of filter options, so I was happy. I decide to click on Ray-Ban, Oakley, Spy, and Prada. I then decide that Prada doesn’t belong in that group, but there’s no way to de-select! So I can pick several criteria, but I have to “clear all” to remove one from the set. That’s just annoying. Additionally, the site navigation design seems clean and elegant, but it does have some flaws. I decide I need new skiing sunglasses and reset my search to just look at Oakleys. I go into Features and select anti-reflective, interchangeable and polarized. Then I go to color. But my Feature selections aren’t visible anywhere unless I expand that panel. It’s great that the site allows users to select multiple filters in a single category – but those choices should be visible to me as I scroll through my results. I can’t be expected to remember what I clicked on 30 seconds ago….

The Ugly

This is just a small selection of the Ugly – there are a lot of sites that attempt parametric navigation filtering, but just don’t do it all that well.

Action Envelope – I searched for “notecard” and I can only narrow my results set by one filter – either color or style. I can’t determine if they have a yellow, pointed-flap notecard (which I desperately need) because I cannot select more than one product attribute. I can select a color, and then when I select a style it replaces the color. Big no no!

CVS – I searched for “shampoo” and got 374 results. But the filter options were not sufficient to refine that list. They haven’t set up the site attributes to map to generic products. I can navigate through the categories to Beauty -> Skin Care -> Facial Moisturizers, but again, products are not “tagged” in enough detail in order to allow me to narrow my choice. I can really only filter for brand, when maybe I’d prefer to filter by price, bottle size, SPF, etc.

SkyMall – I know SkyMall is more of an amalgamation of store sites – or more brands –in one, but it was on the list so I figured it was fair game. (And I do flip through the catalogs when I’m bored on a flight.) The filtering (like some of the products they sell) on this site totally baffled me. They made one huge error – they don’t show you the filters you have selected! I browsed to Home Living -> Bedroom Furniture. There were 49 products, so I clicked on Vendor -> Guidecraft USA. The page refreshed with new results and the vendor name was nowhere to be found. That’s just not going to work for me….

So that’s my 2 cents (maybe 4 cents). I want both options and control. I should be able to filter by the attributes that matter to me most, with the goal of being presented with a product set that meets my specific needs and requirements. I don’t think that’s too much to ask…do you?

List of Hot 100 Retailers here (reviewed sites are highlighted):

Site	Total Score
Action Envelope	7
Amazon	11
American Apparel	n/a
American Eagle Outfitters	n/a
Anthropologie	11
Athleta	n/a
Avon	n/a
Bag Borrow or Steal	11
Beckett Media	11
Best Buy	12
Blockbuster	n/a
Bluefly	12
BlueNile	17
Borders	12
Buy.com	12
Cable Organizer.com	12
Chapter.indigo.ca	12
Computer Discount Warehouse	17
Crutchfield	13
CSN Stores	17
Cusp	n/a
CVS Stores	9
Delight.com	n/a
Design By Humans	n/a
Drs. Foster and Smith	12
Dunkin Donuts	n/a
eBags	13
Eddie Bauer	12
ElderLuxe.com	n/a
Estee Lauder	13
Expressionery.com	n/a
EyeBuyDirect	15
FatBrain Toys	n/a
Fathead.com	n/a
Faucet.com	12
FragranceNet.com	n/a
Gaiam	n/a
Gander Mountain	n/a
Gap	13
Gardeners.com	n/a
Garmin	17
Goldspeed.com	13
Godiva.com	n/a
iGourmet.com	13
iTunes	n/a
Journeys.com	11
JTVWatches.com	13
Karmaloop.com	13
KingArthurFlour.com	12
LandofNod.com	n/a
Lands’ End	11
Levi’s	n/a
Lion Brand Yarn	n/a
Martin+Osa	n/a
Max Furniture	n/a
Meijer	n/a
MoMA Store	9
MusicNotes.com	9
Muttropolis	n/a
Mymms.com	n/a
NASCAR	n/a
NikeID	n/a
Nine West	n/a
Novica	n/a
Organic Style	n/a
Organize.com	12
Orvis	12
Overstock	13
Pets United	13
Popcuts	n/a
QVC	11
Ritz Interactive	12
Roxy	11
RunningWarehouse.com	n/a
Rusty Zipper	n/a
Sam Ash Music	13
Scentiments	n/a
Scholastic	13
shoeline.com	n/a
Skis.com	12
SkyMall	8
Smith & Noble	n/a
Staples	12
StilaCosmetics.com	n/a
Sunglass Hut	14
Sweetwater.com	n/a
ThinkGeek.com	n/a
Timbuk2 Bags	n/a
The North Face	14
Tool King	10
Ulta	9
UnderArmour	n/a
Undergear.com	n/a
Vans	12
Vista Print	n/a
Walgreens	13
Walmart	13
WetSeal	n/a
Zappos	13
Zazzle.com	n/a

Note: n/a means that at the time of the research, the site did not have parametric navigation.

1. Carousels work best with images, not text
2. Carousels are great for browsing, not searching
3. Carousels should create a sense of depth and extent, not be flat

Fluid’s recent work for Reebok, the “Reebok Globe” that highlights real customers and shows their designs, was featured in this video as a good example of strong design, not just for its 3D carousel (the “globe”), but also for using nested carousels in an effective way to enhance the customer experience. If you’re interested in Victor’s comments about Fluid’s “Reebok Globe”, skip ahead to 3min 15 sec.

Unfortunately, this carousels video is only free for a limited time, so check it out soon.

The new North Face design elements featured are:

• Product listing index
• Recommended items
• Color and size selector
• Rich mini-cart
• Full shopping cart
• Billing and shipping page during checkout

The design of The North Face site contributes to an engaging and rich customer experience, and few of the ecommerce sites featured on Ecommr have as many design elements highlighted, which speaks well to the quality of the design and experience.

Mass Customization and Manufacture-on-Demand

Customized products are the ultimate in personalization: customers can select from many options for many attributes to create a product that is unique. This level of customization is made possible my manufacture-on-demand processes. Finished products are not stored in inventory to be picked, packed, and shipped – they are actually manufactured when the order is received.

A potential hazard of customization is that it creates more choice, possibly too much choice, for the consumer. Much has been studied and written about the paradox of choice and decision paralysis, but it boils to situations where there are so many options from which to choose that the consumer is overwhelmed, and it is actually easier to make no choice (and abort the purchase) than to make any choice. When customers are presented with many customizable components, each with many configurable options, the number of combinations may be overwhelming. Therefore we need to design customer experiences that help customers get started, make decisions, support their choices, and encourage them to proceed and complete the process.

One way we can craft more inviting experiences is to manage the number of choices people are given and how they are presented. A manufacture-on-demand process does not need to be transparent to the customer – they do not need to know when products are stocked in inventory versus made when an order is placed.

At the discreet end of the continuum, customers never even know that they are ordering a custom product, because the merchant has pre-defined all of the options and choices (e.g., notebook color, binding, and cover image) and presents the product as a ready-made item. Even though the customer makes no choices beyond selecting a quantity, when the order is placed that product is manufactured.

At the limited level of the customization continuum, consumers realize that they are ordering a customized product, but they may not realize the extent to which that product may actually be customized, because the merchant has pre-defined some some of the options (e.g., ink color and envelope interior pattern) but left a few for the customer to specify (e.g., text on the notecard and the font.) The product is still manufactured when the order is placed, but the number of choices has been controlled to make the personalization process simpler and faster.

Finally, at the level of full customization, consumers realize they are are ordering a customized product, and they understand that it will be manufactured just for them when the order is placed. (Curiously, some customers still think that all variations on custom products have been manufactured in advance and stored in a warehouse awaiting selection and shipment when an order is placed, because they may not fully realize the number of combinations possible and that it would not be feasible to make every possible version of a product.) The choices and options are numerous, and the messaging about the product and customization service typically makes it clear that a product is being made just for the consumer according to their specifications.

There are web sites already offering mass customization of products, and we are likely to see more and more as the ability to manufacture-on-demand becomes more widespread. Today, manufacturing-on-demand is often limited to a base set of products (e.g., photo mugs and mousepads) to which a custom pattern, color, or text may be applied, or to products that have manufacturing processes that lend themselves more easily to mass customization (e.g., custom shoes.)

Cafe Press and Zazzle both offer a set of base products from which to begin. Customers then add their own personal touches and select from a few options to create products that are uniquely their own and which are manufactured-on-demand.

Reebok offers full-customization of shoes, and consumers have the ability to design their own shoe selecting from so many choices that there are literally trillions of possible combinations. A unique product is actually possible, and there is no way that Reebok could manufacture and stock all possible variations of the shoes – this is made possible only my manufacture-on-demand processes.

The manufacture-on-demand process and the ability to create custom products also quickly and easily opens up the opportunity for online, digital equivalent of “pop-up stores.” Pop-up stores are temporary physical retail stores that open for a short time in a previously empty location, generate buzz and attention, respond to a trend or community need, sell for a limited time, then close and disappear. Companies that have the ability to manufacture-on-demand could respond quickly to current trends, fads, and styles by pre-defining products, opening a temporary web site, and selling those products either under their brand or as an ephemeral brand. They could offer limited edition products, different products for different geographics regions, or even products that are offered only to existing customers. Once the ephemeral brand has run its course, the web site disappears.

Custom products are more than just choice for the consumer, they are also opportunities for the companies that are able to manufacture-on-demand, who want to differentiate their product offering, and who are able to quickly and nimbly respond to styles, fads, and market trends.

Video is the next JPEG

Just as static images are seamlessly incorporated into web pages today, we are going to see more seamless integration of video that moves beyond the use of an inline video player. Video will become integral to the content and not be a separate piece of content meant for independent interaction.

In the Harry Potter films, the Daily Prophet newspaper has “magic moving pictures” printed on the page as part of the news article. There is no separate video page and no video player off to the side – the moving pictures are simply integrated into the content of the page.

The Ralph Lauren site Rugby.com integrates video into the page content in a similar manner: the video, the images, and the text all live in the same space as part of a single experience. The brand experience is enhanced and strengthened by using simple yet high-quality video to supplement the information.

Video has the benefit of being able to convey more information than a static image. Seeing clothing on a walking, moving, breathing person tell us much more about fit and finish than a still image on a white background.  We can understand much better how a product might, work, or behave by seeing it in action.

At Martin & Osa the models take turns moving, walking, and turning around to demonstrate how the clothing fits. There is a great nuance to the customer experience: when you select a filter to narrow down your selection, the models wearing clothes that do not match the filter literally walk off the screen. Video is being used not only to show products, but to verify and acknowledge customer interactions.

Video can also tell a story much better than a single image. Would you rather watch a short film or view a single frame from a short film? And the story does not need to focus on the product – it may be used to enhance the brand, to inspire people, and even to set a mood.

The North Face uses video in several ways: demonstrate products in use, educate about the professionals who use the products, show the environments and usages for which the products were developed, and show how the company supports athletes, indigenous peoples, and environmental causes.

And of course video can be used to facilitate shopping, but rather than showing models wearing clothes or salespeople demonstrating products, we can also shop from the same video we see on television and in the movies.

“Shopisodes” take video from popular television programs and provide images, details, and links to buy the products that appear in the video. You can buy the clothes and accessories worn by favorite actors, furniture and decorations from their homes and rooms, and even the items they are using. Each video segment is created to provide information and a link when that product is visible.

Video for product merchandising falls into two categories:

• “Fast” video is meant to be watched like a short film; it provides context and information, and it demonstrates products in use; “fast” video is not clickable, and it is more likely a passive, entertaining experience.
• “Slow” video is meant to provide information while remaining clickable; it focuses on the products and provides ample opportunity to interact with the video while it plays.

Video may also come in a range of quality levels. Low fidelity video has an amateur appearance, may be customer-generated (although professionally produced video may intentionally take on this style), and generally focuses on product information and usage rather than brand enhancement (e.g., product reviews submitted by real customers.) High fidelity video has a professional appearance and may convey a much wider range of information, from product usage to brand ideals to corporate social responsibility.

Although video is becoming increasingly important to the online experience, it is not yet ubiquitous, and there are some issues to be resolved. Video requires much more bandwidth, and although more and more people have broadband access, web pages with integrated video still have longer load times, so visitors wait for content. Additionally, there are still many video formats. Even though Flash Video is perhaps the most common format for inline video today, there are competing formats that offer higher quality video and audio but with a different customer experience, and there are differences across browsers and operating systems that mean that some formats may not be viewable to all visitors.

Nevertheless, the movement toward integrated video is certainly underway, and we are seeing more video being used to provide information and content in more places than ever before. Although we cannot yet walk to the corner and buy a copy of the Daily Prophet, it may not be long before we commonly have similar experiences when browsing the web.

Adobe recently announced upcoming release of their new CS4 design software, and I’ve had the opportunity to work with the Fireworks CS4 beta team for the past year and one-half to help test and refine the new version. As part of their release of the new tools, I recorded a series of tutorial videos for Adobe demonstrating how to use the new Fireworks CS4 to create effective wireframes and interactive prototypes more efficiently than ever before:

Using Fireworks for Information and Interaction Design

Creating Interactive Prototypes with Fireworks

Rapid Prototyping with Fireworks

Fireworks As Part of the Complete Design Process

Each video runs about 10 minutes and covers a different set features of Fireworks CS4 for information and interaction design.

Some of the new features in Fireworks CS4 we’re looking forward to:

• Export directly to PDF and support for interactive PDFs
• Enhanced grids and guides for accurate layout
• Enhanced rich symbols that support CSS / HTML export
• Enhanced styles and live previews
• Improved page, layer, and state functionality
• Improved workflow between Fireworks and Photoshop

These updated tools will help us create better design documents and more interactive demonstrations and prototypes for our clients, and they support the increasing importance of complex interaction design in the visitor experience.

• 
• 
• 
• 
• 
]]> http://www.fluid-blog.com/2008/09/30/improved-prototyping-with-the-new-adobe-fireworks-cs4/feed/ 0