Experimenting with Zooming Interfaces

Zooming interfaces ensure the user is always aware of context. Based on The Humane Interface ideas of Jef Raskin.

Zooming interfaces require heavy use of animation effects (fx). As a lot of fx can quickly slow a browser to a crawl, the first step is to put together an efficient handler. Instead of lots of events going off at any time, it uses a time line so all fx are sync'ed to a single repeatative event without flooding the browser with other events. To add further efficiency, calculated transitions are cached so future fx can use them, removing redundant processing.

Further speed ups are achieved by using lazy instantiation/ Lazy Function Definition pattern. jQuery 1.2.6 and Dojo 1.1.1 as well as many other libraries do feature detection on every add event, etc. to enable cross browser support. This adds needless overhead. The code here for adding an event or getting a background color, etc, only does feature detection once for a particular function and only if the function is actually called. This is a really useful strength of javascript. For example, initially addevent is coded to do feature detection, and then replaces itself with a new function specifically for the browser it is running in.

Rendering can also be expensive. To minimise this, when a transition step has been calculated, its resultant value is compared to the previous transition step result. If the values are the same (due to rounding precision) then a null is inserted for the current step and no rendering updates are executed for that particular transition step.

The style link markup layout is based in Jon Hicks recent presentation for including CSS, neatly simplifying multi-browser support. Also implemented are ideas from Steve Souders Yahoo!s performance chief – CSS at the top, minified javascript at the bottom. Pretty much all this js does is call other unobtrusive js after the DOM has loaded without waiting for images to complete downloading. It also enables the developer to set variables in the ct.config namespace and specify any other resources to download that are specific to the current page.

1. Implement 'wall clock' timing rather than intervals.
2. Modify cache to keep only the most frequent transitions without this extra functionality being more expensive than recalculating for each transition.
3. Create more transitions.
4. Add movement.
5. Find out if rounded corners can be done on IE with data: urls
6. Reduce js engine and dom/css object models messaging
7. May be use DojoToolkit's gfx extension as it supports cross-broswer graphics.