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?

It’s with great pride that I announce two Fluid designed and developed projects have been nominated for Flashforward Film Festival Awards.

Both nominations were for RIAs we created. Under Best Application is the Build Your Own Boot application we created for Timberland. We were also nominated under Technical Merit for the RbkCustom RIA we created for Reebok. The Rbkcustom app has an extra cool feature. Even though the entire thing is Flash-based, we generate bit-for-bit perfect JPEG of the shoe you create that can be shared either via email or SMS.

Congrats to Ameet, Andrew x 3, Daniel, Darren, Debbie, Jules, Marty, Nathan, Paul and anyone else on the team I might have forgotten.

Finally! I just put up an updated version of the Fluid Tween Playground that plays nicely with AS 2. While we have been using the core tween code internally for several years, the playground was never upgraded. I had no idea people were still using the playground, but after upgrading our website we started getting a significant number of bounces for the tween library.

For those of you new to this library, Fluid has created a simple class ( fluid.util.Tweener.as ) that provides a straightforward method for designers and developers alike to use time-based animation in Flash. While there are a number of similar libraries out there, many of them involve more complex syntax, or add significant weight in file size. The Tweener class will add less than 2kb to your SWF size.

Example usage:

<snip>
import fluid.util.Tweener;
import com.robertpenner.easing.Quad;

// alpha down to 50% in 300 milliseconds
Tweener.timeTween( myMC, "_alpha", 50, 300, Quad.easeIn );
</snip>

Check it out here - http://www.fluid.com/experiments/tweenplayground .

Let us know what you think, and we would be happy to see what you create with it.

I decided to take a bit of time this morning and update to Mozilla Firefox 1.5 and took a look at the latest and greatest extensions. Here is my personal list of must-have extensions for both productivity and fun.

• Foxpose View all of your tabs in one window like in OSX Exposé. Fun!
• Web developer Toolbar The defacto standard plugin if you do any web development.
• IE Tab Open Internet Explorer within a Firefox tab. Very useful for cross-browser testing.
• Dictionary Tooltip Double-click a word to get a popup dictionary definition.
• Foxytunes Control your music apps via your browser toolbar.

Have fun!

A common mistake when creating personas is equating one persona with one style of online behavior. Although this simplifies the creation and presentation of personas, it is not an accurate reflection of actual site visitors, their motivations, and their behaviors. Do you have the same goals and behave the same way all the time?

People behave differently under different circumstances and have different needs and goals at different times. Although it may be convenient to think of John Q. Persona as “the guy who abandons his shopping cart ten times before committing to the purchase,” this is not necessarily the way he behaves all the time.

Nearly all web site visitors will change their online behavior based on their current goals. Sometimes we have extra time to surf, and sometimes we are in rush and need to get in and get out efficiently. Sometimes we need to search extensively (e.g., I want a good suspense novel), and sometimes we already know what we are looking for and where (e.g., I want the latest Anne Rice book.) But rarely do we do the same thing every time.

Personas should be representative of actual site visitors, and that means that they will have a range of goals and behaviors. Some behaviors may be more common than others, but they will exhibit a variety of behaviors over time. Yes, John Q. Persona may be more likely to abandon shopping carts than other personas, but perhaps he only does that when comparison shopping for himself. His behavior may be different when he shops for gifts for others, or maybe his behavior changes when he browses from home versus browsing from his office during lunch.

To get the most out of personas, we should separate the personalities (i.e., the personas) from the actual behaviors. Create personas to learn about who site visitors are demographically, what motivates them, how they react to options or designs, and what content or experiences are important to them. Create experience flows to describe the most common behaviors that are observed or desired for the site (e.g., gift shopping vs. product research.) Then play mix-and-match with the personas and the experience flows: which experience flows are most likely for each persona, then rank order them. For example, John Q. Persona may exhibit more cart abandonment behavior than any other persona, but he may also be interested in comparison shopping, product research, and interactive merchandising displays.

Personas are meant to be realistic representations of actual site visitors, so it is important to remember that real visitors behave differently at different times and under different circumstances, therefore personas should also exhibit tendencies, preferences, and ranges of behavior.

So as RIA developers, Windows Presentation Foundation/Everywhere (WPF/E) is of keen interest to us. It’s purpose is to ostensibly make some of the capabilities within the WPF runtime available to other platforms from the Mac to mobile devices. While Microsoft has loudly proclaimed that WPF was never intended to be a Flash-Killer, I wonder if the same can be claimed for WPF/E. From the limited information available, it appears like it _technically_ could be, but it’s obviously a long, long way from that. First, WPF/E would need to be bit for bit compatible between the various platforms. We’re talking pixel-level perfection, which is what we largely have with Flash today. Second, and far more daunting a task, they need to get market penetration on the level Flash has. How Microsoft would go about that is a big mystery to me. Short of getting Apple to build or bundle a runtime, I don’t know how they’d do it.

Here’s a brief video demoing a small WPF/E on a mobile phone that one of our engineers managed to track down:

http://channel9.msdn.com/ShowPost.aspx?PostID=126729&pvrid=107

If anyone has more details about WPF/E, we for one, would love to hear about it.