Seadragon Philosophy: The User Never Waits

As you are probably aware,  Seadragon’s schtick is zooming technology and user interface experiments.  We have also done some work in creating design patterns to help with best practices and interaction.  Here in the office we also talk a lot about how to apply a third idea to our projects: a Seadragon philosophy.   In fact, our technologies (Silverlight Deep Zoom, Seadragon Mobile, Seadragon Ajax, etc) can all be seen as manifestations of our philosophy; our vision brought to reality through design and technology.   In this vein I thought I’d post about this technological coda, instead of code, in a series of posts from time to time.

One of the core tenets of our philosophy is that the user should never have to wait for the technology.  Though a simple idea, take a moment to think about all of the times you’ve wanted to do something on a computer and been unable until it finished whatever task it was working on.  Moving email, loading a document or image, starting a program, a piece of software locking up; all of these things cause you to wait.  In Seadragon, we try to make every experience wait-free.

One way to think about the user never waiting is that the UI thread is never blocked. Even in the middle of a lengthy process, we’re still accepting and responsive to user input. This is expressed in Seadragon by allowing you to zoom and pan constantly, even when we haven’t loaded all of the imagery for the current view. In addition, we try to give you something to work with as soon as possible, so even while we’re waiting for the high-res data, we load a little low-res data to show in the meantime.  You always have something to look at and you always have control.

-Kevin Hanes

Where to go for Seadragon news?

As recent as a year ago, it was pretty easy to keep track of all the stuff going on in the Seadragon world… a few people were doing interesting things with Deep Zoom, but otherwise it was pretty quiet. Nowadays there’s new stuff (projects, content, tools, code examples, etc.) all the time. I do my best to keep track of it and share it in various ways, but I haven’t found one single best channel; it’s all kind of scattered about. Perhaps I should fix this state of affairs and consolidate somehow, but for starters I think I’ll just share what I’ve got.

• There is of course this blog.
• I (and others) tweet from @livelabs.
• I bookmark zooming-related sites (many but not all having to do with Seadragon) on Delicious.
• I share interesting posts I find on Google Reader.
• I’ve also recently started a Twine for Seadragon-related stuff… we’ll see how that goes, but I like the fact that multiple people can contribute to it. The Zooming Group has a similar feature, and in fact my Delicious bookmarks (along with those of others) are replicated there, but it’s much broader than just Seadragon stuff. That’s cool, but it’s also nice to have the specific focus sometimes.

What do you think? How best to keep track of all the interesting stuff that’s going on?

– Ian Gilman

New in Zooming: Sony Gets Some.

The folks over at Gizmodo have a delightful article on a zooming technology that Sony has demoed for both the PS3 as well as their portable device, the PSP.  From the video you can see a lot of the nice touches that we’ve come to expect of high-quality zooming implementations.  Things like springs for smooth zooming, total responsiveness to the user and remarkably fast resolve time from one zoom level to the next.  It truly is mesmerizing to watch.

The ability and apparent usability of the PSP (at 2:10 into the video) is particularly cool.  The portable device’s navigation buttons appear to be intuitive and every bit as performant as on PS3.  I can’t wait to see what people come up with after Sony ships this to developers “soon”.

-Kevin Hanes

Spezify

One thing I generally like about developing internet technology is the idea of “everything, all the time”. Sometimes this can be a muddy concept that gets in the way of effective communication, but when done well, it can save the user precious visual time they might otherwise spend looking in several places for similar sets of information.

Spezify is a Flash-powered service that allows users to search for terms and retrieve results as a visual canvas of assorted media. Photos, videos, articles, and Twitter updates relevant to the search query populate the screen, pannable in all directions. It also retrieves a list of words relevant to your search, so you can easily browse different results (by clicking the word) or additional, more specific results (by clicking the pink “+” next to the word). One-click search refinement sounds pretty great; I like the idea of being able to maximize my laziness and yet still dive deeper and find new content. One down side: you can’t zoom, which is usually our first instinct. Still, this does give what is surely a milder version of the Clockwork Orange information overload experience, without any of the nasty brainwashing side effects.

– Kate Welch

Infinite Canvas is relocating

My Infinite Canvas web app has been running on AppJet, which has been delightful, but they’ve just announced that they are discontinuing hosting on July 1st. I’m looking into where to move it to and how to make it as smooth a transition as possible. I’ll update here once it’s been sorted out.

UPDATE: Looks like I’ve successfully moved it to JGate, which has taken up the AppJet torch. Take a look and see what you think; it should be identical. Once I’m happy with the transfer I’ll turn editing features back on again.

UPDATE 2: The move is complete, and the folks at AppJet have been nice enough to redirect the original URL, so both http://infinitecanvas.jgate.de and http://infinitecanvas.appjet.net now work. I’ve turned editing back on and everything looks good! Let me know if you have any problems.

Jobs in the Zoomosphere

Working on a zooming project and need some expertise?  A Twitter account has been set up to connect those with the jobs and interested parties with related skills.

Not a whole lot of activity going on as of this writing, but as the economy and zooming pick up steam it’ll be good to have all like minded individuals in one area.  Swing on by, leave a message if you’ve got a job opening and if you haven’t yet, check out the zooming group.

-Kevin Hanes

What We Can Learn From Games

Games have long been the source of UI innovation in software, though each new generation of app developers seems to forget it. There are some great recent talks on what application and social media developers can learn from games and game design.

This is especially important for those of us trying to bring the zooming/infinite canvas approach into the mainstream. Zooming spaces are already more immersive (i.e. more game-like) than regular applications, and they work best when they prioritize responsiveness and exploration. While people have been toying with zooming UIs for some time now, it’s only recently that they’re becoming mainstream (along with zooming’s cousin, multi-touch), and there’s still much to sort out in terms of what works and what doesn’t. In this process we have as much, if not more, to learn from games than we do from traditional applications.

Check out The Princess Rescuing Application (Dan Cook) for a look at how game mechanics relate to how users become skilled with your app, and Putting the Fun in Functional (Amy Jo Kim) for a look at how game mechanics drive social media.

-Ian Gilman

Canvas Emulation in IE

The <canvas> tag in HTML5 is awesome, plain and simple, and if you’ve ever worked with it, you’re aware.  You also know that there’s one big, glaring, red-light-on-the-nuclear-submarine problem: Internet Explorer doesn’t support <canvas>.  Not in IE 8, and certainly not in 7 or 6; together these browsers make up a sizable chunk of web users.  You can either ignore this population, or not use <canvas>.   In Seadragon Ajax, we’ve utilized <canvas> when we detect Firefox or Opera, and fall back on different methods in other browsers, even those with <canvas> support.  This is because the implementation of <canvas> in the other browsers doesn’t support sub-pixel rendering (we’re looking at you Chrome and Safari); check out the gallery in Firefox and another browser, and you’ll quickly see a difference.

You can also do something a little unorthodox; you can emulate <canvas> functionality using various methods.  ExCanvas is one way to accomplish this, though from searching around, you can see that there are some limitations.  You can also try using Flash to get <canvas> functionality, my favorite write-up being on Aza Raskin’s blog.  It’s fantastic to see smart people working on this problem, so that we can all make use of HTML5 goodness on the next generation of web experiences.

-Kevin Hanes

Out of the Box Week

I haven’t posted for a bit…it’s been Out of the Box Week here at Live Labs. Once a quarter (more or less) we all take a week away from our normal work to pursue whatever interesting ideas we can come up with. We’ve been doing it for a couple of years now, and it’s a great source of innovation, as well as being an opportunity for us to recharge our batteries and collaborate with people on other teams.

A couple of my previous Out of the Box projects have gone on to be published: Seadragon Ajax (after plenty more work by Aseem Kishore) and Infinite Canvas. Seadragon Mobile also started as an Out of the Box project, by Ben Vanik. Jeff Weir’s Colour Picker is another example. Of course some projects simply end up as features within existing products, and some just remain novelties.

We’re not the only ones in the industry doing this sort of thing. Google has their 20% Playtime, and there are lots of examples from smaller companies, such as Meebo’s Hack Day, SharedBook’s Cool Factor Projects, and many others. Even inside Microsoft, other groups, such as Office Labs, are giving it a spin.

Hopefully this is a trend that will continue…I highly recommend it for any team that needs to stay fresh and innovative.

More on OotBW: from Jeff Weir and from the Seattle Post-Intelligencer.

Algorithm Ink

So this isn’t exactly about zooming (though it is about fractals, which is close), but it’s still cool. For one thing, it’s built with JavaScript using the HTML5 canvas, which is an interest of mine.

Anyway, Aza Raskin has created a lovely little web app, Algorithm Ink (works best in Firefox), that allows you to write fractals using his JavaScript port of Context Free. Check out the video for more info:

I love how interactive it is; you can browse through the fractals, futz with the code, save a copy, etc. in one smooth flow. This is the feeling I was trying to create with Infinite Canvas, which in turn was surely inspired by AppJet. I hope to see more such web apps where viewing, creating and remixing all flow together so smoothly.