Pet Theory

A self-evident interface is always Plan A…but a self-explaining interface is a decent Plan B. Here is one in action. (Follow the purple arrow…not optimized for start up yet.)

“As simple as possible, but no simpler.” For my current Flex project I reached this point pretty quickly. Inspired by improv, it is a chat site that creatively orders group chat. There are roles (Host, Quizzer, Conservative, Blind Date, etc.) for a variety of scenarios, mostly drawn from pop culture. Chatterers vote for a scenario leader, who plays one role and picks others for the remaining roles.

For a game, it’s not complicated. For an interface, it is. Some sort of help was required. The obvious recourse was to a video link on the landing page. But while video help is a mega improvement on text help, it has the same mega drawback: it whisks the user away from the interface.

So how could help be directly integrated into the interface? Before going further, I laid down some requirements:

1. No going away.
2. Turns on and off quickly.
3. Scannable, bookmarkable.
4. Demonstrates whole use cases.
5. Updates automatically.

The implementation:

1. A slider as well as last/next buttons lie at the bottom of the site. Each page entails a new label and help contents.
2. Here is the novel element: Clicking the buttons or dragging the slider causes the interface ITSELF to change: components are loaded with dummy data, controls are called out, navigations done. (And since the help is just steps thru the interface, when the interface is updated, the help is automatically “updated.”)
3. If the help controls lose focus, help disappears. Once they regain focus, the user finds herself at the same point in help. The slider can be used to scan help steps.

Only user testing will tell whether this kind of self-explaining interface is better than video. Either way, it’s a good example of what a rich, stateful client like Flex can do.

Here is the package. Not commented. I’ll clean it up if people are interested. It’s basically commands structured in a composite hierarchy that is flattened and stepped thru. I thought about elaborating Flex states, or using the state interface that the history manager uses for deep linking, but neither was general enough. I wanted help sequences that could build hierarchically or linearly, and involve callouts or navigations or whatnot. The result might be useful inside a testing framework.