Mar 12th, 2008
Unveiling our new user interface - Part 2
Continuing discussion of the new Sharendipity UI, which was started here, now we turn to the new behavior editor.
The behavior editor is where a user controls component or application logic. This can range from simple rules to complicated programming. Our goal was to make the UI intuitive for non-programmers, but powerful enough for experienced programmers.
Previously, our UI was based on a tree-structure, and we presented all available options at each node in the tree, producing entries like this:

This UI included pull-down menus on each element that produced a multi-tiered menu, and a + menu on the right side that allowed addition or subtraction of other terms. The UI got the job done, but was intimidating and clunky. It didn’t give the user any indication of what to do, or whether a given selection made sense.
Our new behavior editor was inspired in part by Scratch from MIT, which in turn was inspired by Boxer.
The new UI is completely drag and drop. Actions, objects, attributes, and functions are presented in a navigator and dragged into the behavior editor. The action above now looks like this:

If I want to change the right-hand side from “0″ to some other value, say a copy of another object’s attribute, I simply drag in that attribute:
- Initially, I can type in a value for orientation.

- Instead, I’m dragging over the circle’s orientation attribute.

- Now my orientation is set equal to the circle’s orientation.

But what if I want to add something to the right hand side? Previously the + menu provided access to addition or subtraction terms. In the new paradigm, I select a math function from the navigator:

And simply drag it onto the value:
- Drag the plus function and drop on circle’s orientation.

- The existing value, circle’s orientation becomes the first argument.

The comprehensive set of mathematical functions allows any equation to be created.
The logic for boolean operations is similar. Conditional statements are formed by dragging over logic blocks.

Again, a comprehensive set of boolean operations allow creation of arbitrary logic.

Notice that the boolean functions are displayed with a diamond shape that fits into the IF and and statements. This shape conveys to the user visually where a given function or attribute can be dragged.
The same shape is used for attributes. The boolean attributes below, such as ignore_collisions, have the same diamond shape.

The end result is an editor that provides comprehensive functionality in a straightforward drag and drop interface.
Give it a try and let us know what you think! If you’re an alpha user, you can examine the logic from popular games like Filla. If you’re not an alpha user, send an e-mail to alpha at sharendipity dot com and let us know a little bit about yourself.



The director (currently a professor) guides the user through management of high-level applications and scenes.
The construction worker provides access to the basic building tools for creating circles, lines, joints, and other content.
The librarian provides access to the user’s collection of assets (the gallery) for the current application.
And on the right side of the screen, separated from the other characters, the Explorer acts as a gateway to the components and applications created by the community.
