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.

As anyone with any programming experience can tell you, formatting and unformatting Date objects into human readable strings can be a repetitive and tedious task, as well as a perfect target for a utility class!

These utility classes exist in the core package of most programming languages, but alas, not Actionscript. Luckily, Matt Kruse at JavaScript Toolbox created a simplified Javascript library based on Java’s elegant SimpleDateFormat class. As Javascript and Actionscript are syntactically compatible, porting this to Actionscript was very straightforward. Check out SimpleDateFormatter, hosted on the osflash website.

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.

Having just finished up a 3 month stint building out our proof-of-concept kiosk for The North Face, I figure it’s time to kick down about my experience. So I’m a Flashgeek - I’ve been working with Flash since Flash 3 and pretty much learned everything I know about programming from my code mentors ( you know who you are ) and dabbling in ActionScript. AS2 is ( was! ) the closest I’ve ever come to a strongly-typed language. That said, AS2 is still pretty loose with what’s allowed, and there are still a lot of gotchas that only come from having pulled yourself up by the bootstraps with the rest of the Flash development community.

Don’t get me wrong, I love Flash. I think in ActionScript. Knowing the happy and dark spaces of a platform makes you that much more efficient — and it lets you concentrate on architecture instead of chasing problems all day. So what about WPF? It’s, well, “liberating”, to say the least. C# is very elegant. XAML is a bit verbose, but when it comes to layout and styling it’s top notch. Visual Studio is the IDE that eclipse dreams of becoming one day. Compile time is fast, debugging support is powerful, and the .NET framework is *immense*. Imagine not having to roll-your-own . Results come quickly. The WPF API is well-thought-out and the layout manager makes setting up flexible UIs super simple. And the designer/developer split really exists. No more unmergeable binary files or “over-the-wall” lobs from design. You can literally start prototyping when IA is complete and let skinning exist on a separate thread without compromising logic. Imagine when IA starts working in Expression ( or similar)!

So what /didn’t/ I like? Well, the most frustrating thing was coding against a moving target. We were getting code drops every 3-6 weeks, often with breaking API changes. Perf still really isn’t there, but for the TNF POC we were definitely pushing the boundaries of the platform. It’s not always obvious /how/ to do something - the SDK is not totally complete with code samples — we couldn’t have done what we did without good hands-on support from Microsoft.

Oh, and it only runs on Windows. For now. But heck, it’s still in Beta, and they have 14 months ( Nov 2006 methinkst? ) to sort out all of these issues.

Honestly, the pros seriously outweigh the cons. If you know Java or AS2 intimately, it’s really just like learning how to speak with a different accent. And some phrases in your vocabulary have been shortened to single words ( imagine never writing another XML de/serializer again - just feed it an XML schema and let .NET create typed objects for you. In like 3 lines of code! drool…. ). Seriously, though, I wonder if I’m more amazed because I’m an AS2 developer who has never used Java - it may be less exciting for you J2EE geeks. But hardware accelerated 2D and 3D? Put that in your Swing and smoke it!

maybe that’s more like $0.03.

I can’t wait to see how Flex 2.0 ups the ante, it’s looking really nice so far.

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.

We’ve been doing some proof of concept work for Avalon (now Windows Presentation Foundation aka WPF) showcasing our client The North Face’s great expedition video content, imagery and products. Microsoft loved it and asked us to demo it during Jim Allchin’s keynote. We were pretty blown away to find out we were the only non-Microsoft people presenting in it. I’ve presented before in front of big crowds at Flashforward and MAX, but the 7,000 for this event was the topper. I learned I’m not very good at speaking and mousing simultaneously…

That night, Andrew, Darren and I were invited to dinner as a thank you. Imagine our surprise when we discovered it was for about 15 people including Jim. For a man who is probably one of the wealthiest people on the planet, he’s totally unassuming and just a nice human being. Apparently, he still codes too. On that earlier note, almost all the people we met were as nice as could be. Very open and thoughtful even about criticism about Microsoft.

We saw some pretty amazing stuff going on. We’ll be posting more about their platform in the coming days. Right now, after three straight 15 hour days, I just want to crack a beer and veg on the couch.

For the past couple of months, I have been using the FAME ( Flashout, ASDT, Mtasc, and Eclipse) architecture for Flash development. Overall, its been a great experience, but like most open-source projects, documentation is often passed on in informal settings, like this weblog !

The following are a few of the most useful keyboard shortcut tips used in ASDT (Actionscript Development Tool) culled from the highly recommended OSFlash mailing list.

• F3: Open the declaration of an Actionscript element.
• CTRL-SPACE: Opens available code completion. Hit the UP arrow to see available template functions.
• (tmpl. name) CTRL-SPACE: Inserts template with for the given name.
• CTRL-SHIFT-G: Generate getters and setters. (yes!)
• CTRL-SHIFT-D: Duplicate line
• CTRL-SHIFT-S: Open super implementation of a method

Another useful tip: To see all keyboard shortcuts available in Eclipse, goto Preferences -> General - Keys.

Hope this speeds your development along. Thanks again to the ASDT team for their hard work and great tool !