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.

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’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.

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.

A recent blog post on MSDN discussing the usability process behind the new Microsoft Office 12 “ribbon” used to present function icons in the interface described how they learned from observation that users could scan the icons more quickly when the icons are not all the same size. But not everyone thinks (based on their intuition) that different sized icons are a good idea.

I (Jensen Harris, the blog author) was reading a blog entry of someone who was kind of critical and dismissive about what we’re doing and our designs. One of his criticisms was “how bad the usability of the Ribbon would be because it’s got icons scattered all over of various sizes.” What we’ve learned is actually the opposite. People can scan disparate patterns more easily than homogenous patterns. When we use more toolbar-like layouts–a bunch of equally-spaced, equally-sized buttons, people scan them less quickly than when each chunk has a memorable layout. So we actually try explicitly to vary the layouts between chunks–it helps people find the thing they’re looking for more quickly.

This is a great example of how we are re-discovering some basic perceptual principles that have been studied psychologists for nearly 100 years: humans (and all insects and animals, for that matter) are designed to perceive change. We notice more quickly when things are different or when they change, and we get perceptually “bored” when things are all the same and never (or rarely) change. We know from software design experience that rows and rows or columns and columns of the same icon in file management UIs offer no scanning advantage, but if just one of those icons differs it seems to literally jump off the page at us. We notice the difference.

It is possible for historical reasons that function icons in toolbars are the same size because is it easier to design and build a toolbar where everything fits together like uniform bricks. It’s more difficult to create a toolbar where all of the pieces are different sizes and must be properly arranged in order to “look right.” Perhaps we have a perceived need for a grid-based system because it is simpler, not because it is better.

Yes, icons do vary in color and content based on the function, so there are differences among the icons already, but a standard icon size introduces a regularity that makes it more difficult to see those differences. Reading researchers have known for a long time that we read LONGER TEXT PASSAGES WRITTEN IN ALL CAPS MORE SLOWLY THAN WE READ PASSAGES WRITTEN WITH BOTH UPPER AND LOWER CASE LETTERS, because the ascenders and descenders provide us with word patterns based on the differences among the letters that we recognize more quickly. All caps letters are uniform rectangles, but a mixture of upper and lower case letters are a sequence of different sizes and shapes. We notice the differences.

Change and difference can occur in more than size, shape, and color; it can also occur over time. Our attention is drawn by things that move. Yes, we can see things when they are stationary, but when something moves it attracts us, it makes us want to look at it. Predatory animals are particularly sensitive to movement, but when the prey remain motionless it is much harder for the hunter to perceive it. Camouflage only works well when you are sitting still. Many animals are equipped with the coloring and instinct to blend in: fawns lay motionless in the dry grasses and stick insects cling motionless to branches. If they move, they become dinner.

We can use these perceptual principles to our advantage: facilitate scanning by using color, shape, and size cues to create memorable patterns, and draw attention with the use of differences, change, and motion. Although it may be easier to build UIs based on a grid pattern, the reality of our perceptual systems (and of the organic world) is that patterns are based on differences not similarities.

Overall, drag-n-drop is a popular interaction method, most people get it, and it is often requested. However, there is a distinction for many people between desktop environments and web sites or web applications. The “click for action” paradigm on web sites is very strong, and drag-n-drop is not yet as common on the web. We often find that we have to explicitly tell people that they may drag-n-drop items, but once they know it is available, they get it and use it properly.

The one problem with drag-n-drop (on the desktop and on the web) is that there is no uniform way to visually indicate drag-ability and inform people that the functionality is available. Buttons look clickable and underlining links is a well-known convention, but nothing really looks drag-able. People often must try to see if something is drag-able, hence the need to inform people explicitly.

Drag-n-drop in file management dialogs in a desktop environment is a good example of a learned behavior: the filenames do not really look draggable, but we have learned to drag them around and drop them where we want them. Similarly, we have learned that we can drag-n-drop appointments in our calendars as well as re-arrange our email.

The whole idea of dragging an electronic document (or image or other virutal object) composed of electromagnetic bits and putting it in a “place” relies on the metaphor of space: physical things can be found in places and can be re-arranged. We can re-arrange files in a cabinet, books on shelf, pictures in a scrapbook, or bricks in a new patio. While tangible objects have the affordance of being grasp-able, electronic objects may not.

On the web we have to create designs and provide guidance to help people draw the analogy between physical and virtual dragging and use drag-n-drop in situations where the concept of space applies to the virtual object. We need to help people transfer the skills they have learned in one situation (e.g., desktop applications or making a scrapbook) to another, new situation (e.g., placing merchandise in an online shopping cart by dragging rather than clicking.) Luckily, most of the virtual objects we drag-n-drop around do have the property of location (or space), so the drag-n-drop paradigm typically works well.

Are there instances where a virtual object lacks the analogous property of space and would therefore be confusing to drag-n-drop? Are there situations when dragging and dropping a virtual object would make little sense as an interaction method or would be more complicated than other interaction methods? For example, although it may be possible to select dates for a flight or hotel reservation using drag-n-drop calendars, it may not be as efficient or usable to abandon the drop-down lists or clickable calendars.

Drag-n-drop is an effective, easily learned, and relatively common interaction method, and as web technologies improve and grow we will have many more opporunities to incorporate drag-n-drop in our interaction designs for web sites and web applications.