Prism
Today Mozilla Labs is announcing a new experiment called Prism. Over the last few months I’ve had a chance to contribute to many of the initial user facing design aspects of Prism, and this is one of the most exciting labs projects I’ve had a chance to work on so far at Mozilla. (It took us a few months to get this experiment launched due to another little project that has been taking up most of our time). Now that we’ve announced the project and are looking for contributers, here is a quick recap of where the project currently stands in terms of user experience.
UX Goal: Integrate Web Applications into the User’s Desktop Experience
Personal computing is currently in an awkward phase of transition. Half of the applications we interact with are client side desktop applications, and half are online Web applications. This means that half of the applications, regardless of what they are, are currently trapped inside of a Web browser, like some kind of Shakespearean play within a play. Because of this, Web applications are unable to take advantage of many of the user experience benefits afforded to client side applications. Web applications get lost amongst countless tabs of documents, and are closed by accident. Web applications are surrounded with controls like back and forward buttons, and a location bar, that have nothing to do with interacting with the application itself. For many AJAX applications, these Web browser controls literally serve no purpose. By being trapped inside the browser, Web applications are unable to fully integrate with a user’s computing environment, and when accessing Web applications, users are constantly forced to think about what underlying technology the application is based on.
Prism allows users to split Web applications out of their browser, and run them directly alongside desktop applications.
With Prism, you can now have shortcuts to your calendar and email in your quick launch bar, even if one (or both) are actually Web applications. You can organize your favorite applications by purpose, instead of by implementation. If you happen to be away from your computer, you can access these same applications from any Web browser. And if you ever decide to switch platforms, all of the applications you run with Prism can seamlessly switch with you. Marc Andreessen once described the browser as having the power to “reduce Windows to a partially debugged set of device device drivers.” Personally I disagree, in that I think operating systems also happen to be very useful for application launching and window management.
I believe Prism is important not just for the future of the Web, but for the future of the desktop as well. The social nature of the Web has resulted in incredibly fertile ground for new applications. Over the past few years this has resulted in a renaissance of new and innovative applications emerging on the Web, and even entirely new application archetypes, like RSS readers, social networks, and micro-blogging. Some specific applications in these new genres have been ported from the Web to the desktop, but for the most part the evolution of client side applications has significantly slowed, remaining largely in the previous era of desktop publishing. Prism will allow new innovative applications on the Web to integrate into the user’s desktop experience without any additional development effort for the applications’ creators.
Identity
People who follow planet.mozilla.org will likely recognize this project by the former name “Webrunner,” which was a reference to XULRunner, which was a reference to XUL, which was a reference to Ghostbusters. So why change the name? As much as I love geeky references, (especially recursively geeky references), we have to remember that most people aren’t going to semantically disambiguate terms the same way we do. For mainstream users, “running” means faster than jogging, and similarly “execution” involves killing people. The name Prism references a real world metaphor for splitting something apart. Also, we thought the name Prism would adapt well to an icon:
The Prism icon was created by the Iconfactory. If you are curious, here is the creative direction they were working off of.
The Favicon Problem
One of the biggest problems facing the user experience of Prism is that we needed some way of magically scaling favicons to the size of desktop icons. Favicons are nearly always 16×16 (but technically they can be a larger png, or contain higher resolutions in an ico file), while desktop icons go all the way up to 256×256 on Vista, and 512×512 on Leopard (because, seriously, why 1-up someone when you can 2^(n+1) them).
The traditional algorithms for image upscaling like bicubic interpolation were not going to work, since this can get rather fuzzy even for small amounts of upscaling, and certainly can’t scale images from 16×16 to 256×256 or 512×512 without looking horrible. Instead, I decided to try a more artistic design that embraced the pixel, and is reminiscent of our 8-bit heritage (click through for a larger image):
This idea was influenced by the Icon Garden that was previously on the Apple campus, but more directly by ThinkGeek’s 8-bit Tie. The upscaling implementation is all done with <canvas>, and here is an example of the output. You can view the code to see how it works. We haven’t implemented the conversion of these upscaled png files to the proper .ico and .icns formats, so the current version of Prism unfortunately isn’t shipping with support for upscaled favicons yet. If you are interested, helping us out with icon upscaling on OS X, Windows and Linux is one of the many ways you can help contribute to the project.
User Interface
Prism’s user interface for integrating web applications into the desktop isn’t completely in place yet, but here is a mockup of the current design (click through for the full image). The interface is pretty straightforward, a single dialog that is displayed either by launching prism.exe/.app, or by selecting a menu command in Firefox:
The dialog box allows users to change the application’s icon, in case they don’t happen to appreciate dynamically generated isometric pixel art. If Prism becomes popular, we will probably start to see a lot of really cool high resolution unofficial icons for Web applications appear on sites like deviantart.com. These custom icons will also be particularly useful in cases where a favicon doesn’t happen to convert to isometric pixel art very well. Favicons that use a lot of antialiasing don’t look that good when upscaled, while favicons designed for the pixel art aesthetic look great.
Next Steps
In terms of user experience improvements to Prism, I think first we should primarily focus on getting the UI for generating webapp bundles fully in place (here is the current mockup), and getting favicon upscaling implemented is also pretty key. After that, working on creating css styles to match different operating systems could help streamline the creation of application-specific webapp.css files. I am, after all, a big fan of visual integration.
Beside the new icon, what is the difference between Prism and Webrunner?