Flog: The Official Fluid Blog

Today Fluid announced the immediate availability of Fluid Social, which allows retailers to offer the same level of interactivity and control in social networking widgets and Google Gadget Ads as they have over the merchandising on their own site. While there have been a recent flood of announcements about retailers deploying widgets to social networking sites this announcement is notable in that this is the first productized offering that allows merchants to publish and update gadgets as they see fit, using the same visual assets and interactive technologies that they use to merchandise their own site. No longer will merchants worry about a gadget that was embedded months ago featuring products that are no longer in stock. They are in complete control of both the featured content and products.

The specific implementation for The North Face is available for users to embed as a Google Gadget and is also being served to highly targeted snowsports sites in the Google ad network. The gadget offers a mix of brand experience - a fresh snowsports-focused video each day that is user contributed or one that features The North Face’s athletes - and interactive shopping. While shoppers watch a video they can explore The North Face’s Defy line of snowsports gear, including the ability to interact with the products.

At Fluid we believe this merging of compelling brand content and merchandising is one of the under-utilized opportunities available to retailers and branded manufacturers. Allowing brand advocates to enhance their own personal pages with this content is a win-win for consumers and brands. We have already heard a range of great ideas from our other customers for how they plan on using our tools to extend the reach of their brands beyond their online stores in unique and brand appropriate ways and we can’t wait to hear more.

The North Face gadget features a fresh video every day.

Shopppers can explore The North Face’s Defy product line while watching the video, without leaving the site they are visiting.

It is possible to explore The North Face’s products from within the gadget using Fluid Retail’s interactive components.

As web sites and web applications become increasingly complex, they are also becoming decreasingly static. Web sites no longer present themselves as passive, static blocks of text and images. They move on their own and in response to user actions in order to:

• Capture attention (e.g., animated banner ads)
• Provide feedback after user actions (e.g., mouseover and on-click states)
• Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)

Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read.

The animated GIF for banner ads that annoyed us for years before declining are being replaced by slicker Flash ads with embedded audio and video, elaborate animation, and even interactivity. Additionally, web sites and applications are using more motion and multimedia to add value to content and attract attention. In some cases the result is a sensory cacophony that overwhelms visitors and reduces the quality of the user experience.

Is animation bad? Should motion and multimedia be avoided? No, but we do need to consider when, where, and why we choose to use it. Animating a logo or image or infographic simply because we can is gratuitous. There should be value and improvement to the user experience, and the animation should support and enhance the content and goals of the site. Here are some basic principles for effective motion graphics and animation:

1. Remember: motion attracts attention. Using too much animation and motion on a single page results in competition for attention and often frustrates visitors. If you choose to use motion to draw attention, give the visitor control and the ability to stop the motion if it distracts them from their goal.
2. Animated graphics are only better than static graphics when they make it easier to understand complex information by being more visually explicit.
3. The content and format of a graphic should closely correspond to the content and format of the concepts and information to be conveyed (also known as the Congruence Principle.) For example, it is more difficult to understand the variations in the stock market looking at tabular numeric data than by looking at diagrams of value over time. Animation adds the ability to include changes in time and space in a more visually explicit way.
4. To be effective, animations need to be correctly understood by the viewer (also known as the Apprehension Principle.) Animations are often too complex or move too fast to be accurately processed and understood by visitors. Make the animation interactive, and give visitors the ability to pause, rewind, restart, and even control the speed or flow of the animation so that they can better focus their attention and thinking on the important and more complex portions.
5. Avoid clutter and unnecessary complexity. Provide enough information and visual cues to help the visitor understand, but do not include extraneous information or design elements that may confuse or distract.
6. Be organized and focused before starting to create the animation or motion graphics. Write a script, create storyboards, and have a plan to convey the information in a concise and focused way, otherwise you may wander away from the goal and include unnecessary information and/or steps.
7. Use the animation to tell a story. A coherent narrative helps visitors better understand the information in a meaningful context.
8. Support animations and motion graphics with corresponding text. Do not assume that the animations are sufficiently explicit to understand without supporting information. If you are using audio to support the animation, give the visitor the ability to control playback and volume.
9. Consider using visual metaphors to help visitors better understand complex information and concepts and to reduce ambiguity.
10. Avoid design myopia. You already understand the information and concepts, therefore your animation and motion graphics design will make sense to you. Show the animation to other people, test it with your target audience, and evaluate whether or not they understand it correctly. What seems obvious to you may be less so to others.

As retailers brace for the possibility of a significant slowdown in consumer spending, ecommerce managers should be prepared to articulate to management why this is exactly the wrong time to be cutting online retail investments. A recent article in Internet Retailer drives home the point:
http://www.internetretailer.com/dailyNews.asp?id=24807

The article outlines a powerful argument in favor of investing online. While offline sales were off by 0.4% versus a year earlier, online sales are up about 22%. While bad weather was cited as a reason, online’s imperviousness to factors such as bad weather and high gas prices only reinforces that the online channel is the place for retailers to invest.

Looking forward, whether the consumer credit crunch has an impact on consumer spending or not, retailers can expect to see double digit growth in online sales. And with growth like that the online channel is still definitely the place to invest.

Apple has rolled out a wonderfully innovative and deceptively simple approach to search on apple.com. As you begin to enter your search term a dropdown window appears below the search box with recommended matching results. As you continue typing, the results list dynamically updates with a refined list of results that most closely matches what you are typing.

There are never more than eight results, and each is accompanied by a clear title, brief descriptive text and either a product image or recognizable icon (a green plus sign in a white circle for support topics, for example). It’s instantly scannable and completely non-intrusive. Most importantly, the performance of the search is impressive. Over a DSL connection it updates in nearly realtime, just a split second behind what you are typing. There is a rarely a lag, and good thing because the experience would fall part if there was.

If you hit enter at any time, you get dropped into a typical search results page, but that was hardly necessary. For 90% of the search terms I tried I was able to find what I needed without ever leaving the homepage. Combine that efficiency with a compelling, quality visual presentation and you have incredibly satisfying customer site interaction experience.

Quite possibly one of the best site search innovations since parametric filtering.

At the recent Shop.org conference we got a look at an interesting new outfit builder put together by, Oli a retail fashion site in the UK:

http://www.oli.co.uk/

They have really done a nice job with interaction design here. The Look Book bar is anchored to the bottom of your browser window and stays with you as you navigate the site. Every item in the catalog has an “add to look book” link, making the process for adding items fairly smooth, although a visual confirmation an item has been added to your Look Book would be a plus.

Upon opening the Look Book you enter a full screen environment that is intuitive and easy to use. Just drag-and-drop items from the Look Book strip into a work area and you are ready to go. Of particular note is the ability to scale individual product images so you can actually build a visual representation of an outfit with the correct proportions. The ability to add an entire outfit or collection to your cart at one time is another nice feature. Importantly, price and product detail information moves with the product and is available at any time.
The one thing that doesn’t work is adding individual items to your cart. The “buy” link is hidden behind an “i’ information button - not obvious enough. It would also be better if you could browse and add items to the Look Book while in workspace mode as opposed to having to go back to more traditional catalog browsing.

Overall, nice job.

– KD

It has been well over a year since my last post about working with WPF and all of that heads-down no-posting has resulted in a real live app. After much hard work over the last year Fluid launched The North Face In-Store Explorer kiosk nationwide into The North Face retail stores nationwide. This is the first retail application deployment on Vista, and we’re all very happy with the results. Just in time for the holidays!

As the lead engineer on the project, I was responsible for the architecture of the system and the lion’s share of the UI development. We leveraged WPF for the kiosk UI, which was an absolute pleasure to work in (once Microsoft stabilized the APIs, of course). I think we probably touched all corners of the framework: 3D, media integration, rich styling and databinding, as well as a heavy dose of .NET 2.0 datasets on the back end. And that’s just the UI — we also built a robust system for remotely updating the kiosks. This is easily the most complex system I’ve ever been involved in developing. It consists of a central web-based CMS and remote monitoring application, and a concert of WCF and .NET 2.0 applications on the kiosk that safely and securely update content and applications, report home if something goes awry, and recover automatically if and when it does.

We also became experts in Windows Vista deployment, which gave us a chance to really get under the hood of this new OS. I’m very impressed with the Windows AIK (Automated Install Kit) that allowed us to create a DVD-based installer for Windows Vista that included all of our custom tweaks, patches, configuration and applications. In the end, the installers across the country who did the work were spared from several hours of noodling in Vista, instead, all they had to do was drop in the DVD, enter the product key, and come back in 20 minutes to put some final polish on the installation. Very clean.

I’m impressed with the performance and stability of the app/platform as well. We spent a lot of time in Q/A before we launched, though with new drops of Vista coming almost weekly it was difficult to establish a good baseline for testing the application. It’s one thing to have to reinstall new drivers, it’s another thing entirely to have to completely reinstall your OS from the ground up weekly in your Q/A environment. And given our production schedule, which necessitated launching while the RTM build of Vista was still cooling from the oven, we had a heck of a time juggling beta drivers from third-party vendors. That said, we have yet to see a single problem in production related to Windows Vista, which I think is a testament to the effort that really went in to its development — and in my book that’s pretty amazing for a 1.0 release. Then again, we’re definitely not using anywhere near all of the end-user-facing functionality that Vista provides, so we’re probably not pushing it as hard as a power user would.

If you’re in the U.S and want to check out the final app, go find a store near you and check it out!

As I’m sure most of you out there already know, recent changes to Microsoft’s Internet Explorer force a change in the way we embed Flash files in our HTML. At Fluid we’ve been using SWFObject , a useful bit of JavaScript that handles these changes quite nicely. The other day, after publishing several .fla files and having to update the generated HTML each time and eventually growing quite tired of the process, I decided it was time to give SWFObject a more permanent home.

The solution, modify Flash’s default publish profile to include a modified HTML template that uses SWFObject instead of the standard Object and Embed tags. Now, when I publish HTML with my .fla files Flash uses this new SWFObject enabled HTML. I was so happy with the result that I decided to package it up into an extension for others to enjoy.

You can find the extension along with release notes here.

Hey everyone - Nathan Moody here, Director of Creative Services here at Fluid, Inc. My first post on Flog brings some great news from my recent trip to South by Southwest [SXSW] .

I’m happy to announce that on Sunday, March 12, 2006, Fluid won the SXSW 2006 Web Award in the Business: For Profit category for our work on Timberland.com’s Custom Boot Configurator.

We’re obviously thrilled, and proud to have been recognized by the SXSW judges for creating a usable, fun, and innovative user experience that’s had measurable fiscal success for our client as well (how’s doubling customer conversion sound?). While I accepted the award, the true winners of this award are Fluid’s internal staff that worked on the project: Andrew Sirotnik (Account Manager, C0-Creative Director; Debbie Lefkowitz (Project Manager); Paul Spitzer, Darren David, and Ameet Mehta (Engineers); Brian Cherne (Information Architect); and Marty Kenney, Tom Hirashima and Jesse Gerstein (Interactive Media Engineers). I was the Visual Designer and Co-Creative Director.

We’d also like to thank our client, Timberland, for having the faith in us to take their product offering to the next level. Thanks especially to Troy Brown, Jill Areson-Perkins, and Joshua Deane at Timberland for their help, trust and deep collaboration on this project.

For more information, visit Timberland.com’s Custom Boot Configurator or read our case study on Fluid.com.

“That which we will call a…” Hey, just what are we going to call it?

Nomenclature, terminology, labels. What we call things and the names we use are very important, and deciding upon the “perfect label” can often be more difficult than we anticipate. As information designers and architects we are tasked with not only organizing information, but also often with naming it.

Sometimes the exercise is quite straightforward: developing a product catalog for an online toy store may be more an exercise in deciding whether building blocks are categorized as “puzzles” or ” learning toys” than in naming them “building blocks.” In either case, the label for the toy seems obvious. After all, we would not change the name from “building blocks” to “plastic construction units.”

But sometimes the nomenclature exercise is not as easy or straightforward. Sometimes we struggle with what to call something, especially when we are trying to decide upon a site’s navigation and interaction terminology, headers, subheaders, text links, and buttons. For example, should we call a section “Online Learning Center”, “Training Services”, or “Guides and Documentation”? Although each of these options conveys a similar type of content, each creates slightly different expectations about what information will be presented, the format of the information, and the extent and form of the interactions possible.

The labels and terms we use are very important, because they assist, guide, and inform visitors to our site (or users of our applications) and help them work efficiently and accurately. Poor nomenclature:

• is ambiguous, incomplete, or even erroneous.
• causes confusion.
• causes frustration.
• increases abandonment.
• decreases credibility and trust.

Good nomenclature should go unnoticed, because site visitors do not have to stop and think, “What does this mean?”, “Where will this take me?”, or “What is going to happen?”, because it is immediately obvious and meaningful to them. There are a few practices we can put in place to help us develop better labels and more useful (and usable!) nomenclature:

1. Use active language (e.g., “See the Ford Model T Specifications”) and avoid passive language (e.g., “More about the Ford Model T may be found here.”)
2. Use familiar terms that are meaningful to the target audience, and try to avoid internal, (company or product specific) terminology (e.g., “Mental Health” rather than “Psychopathology” on a community health web site.)
3. Use directive language that sets accurate expectations for the reader about what will happen and what will be presented when they follow the link or press the button (e.g., “Download the Update” communicates that the download will begin right away, whereas “Get the Update Here” is somewhat vague and may either start the download or take the visitor to another page.)
4. Be concise. Long labels are more likely to introduce ambiguity, and there is almost always limited screen real estate to work with. Tooltips that show up on mouseover are a nice way to include additional, explanatory information if necessary. Also, eliminate any unnecessary words, for example, use “Read the full article” instead of “Click here to read the full article.” There is no need to write “Click here to…” as long as the link looks like a link to the visitor. If it does not look like a link, then make it look like one - do not fix it by adding “Click here.”
5. Be consistent. The terminology, tone and voice, and grammatical structure should be parallel across the navigation system. If you are using active verbs in the navigation, then all of the navigation options should include them (e.g., “Search for Music”, “Listen to Music”, “Share Music”, and “Buy Music.”)

As information architects and information designers we spend a good deal of our time studying the organization of information. We dissect it, study it, and analyze it to discover the underlying structure. We create taxonomies, classifications, and categorizations to map out the relationships. We look for connections among disparate pieces and distinctions between similar pieces. We diagram it, visualize it, and try to give every piece a meaningful and unique name. We create navigation systems and site maps and architectures to capture and represent everything we have learned. We design page layouts, schematics, and wireframes to give everything a place to be seen. We try to put it all back together so that others can find the information more easily.

And often we fail.

Everything is findable, understandable, and logically organized. All of the pieces are there, the labels are meaningful, ambiguity is absent, and the prototype succeeded in testing, but site visitors and customers do not come. We have included everything they asked for, we have made it accessible, and we even made the connections among pieces for them, but they leave before they even get to benefit from our efforts. Our carefully crafted architecture and specially selected nomenclature languish, even though all of our test participants commented about how easy and efficient it was to complete the representative tasks we gave them.

We deconstructed the information to better understand it, but during the reconstruction process we left something out: the user experience. No matter how findable, accessible, or well-named the information is, if it is not wrapped in a desirable user experience, it will languish.

The whole is greater than the sum of the parts.

User experience is more than information design, visual design, and interaction design. We often use terms such as compelling, immersive, persuasive, and entertaining to describe a user experience, but where in our taxonomies, architectures, and wireframes do we represent these qualities? What color, shape, sound, or logo embodies them? What interface component facilitates them? Capturing and defining user experience is outside of any single design effort.

User experience is an emergent property. It arises from a wonderful convergence of good design (information, visual, and interaction), useful and usable information, and the intrinsic desires, needs, or motivations of our visitors and customers. To encourage a successful user experience (can we really ever say we create it?), we have to make the visitor or customer want what we offer, to make them feel they need it, and to help them enjoy themselves when they seek and use it.

How do we make information desirable? Not just by making it available, but by making it real. Show people how it connects with their lives, how it is useful and valuable, and how it can help them. When we reconstruct the information and make connections among the pieces, we also need to make connections between the value of the information and their lives and daily experience. We cannot stop at findability and usability. We must strive for desirability, for in the end, is it not our desires that are often the most motivating?