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.

Refracting440

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:

Prismicon

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).

16To128

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):

Favicons

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:

Interface

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.

31 comments

  1. Beside the new icon, what is the difference between Prism and Webrunner?

  2. isriya – The WebRunner part of Prism is really a continuation of the WebRunner project. Version 0.8 has a nice set of new features.

    See:
    http://starkravingfinkle.org/blog/2007/10/webrunner-becomes-prism-a-mozilla-labs-project/

  3. Scaling favicons is fine to bootstrap but you should also have a longer term solution. (svg Icons perhaps?)

  4. Good job with the icons. The Prism icon looks really cool (I don’t think I’ve ever seen so much transparency in a desktop icon before).

    The upscaled favicons look good as well. It might also be nice to include a default set of about 20 – 30 generic high-res icons that could be useful.

  5. You could use the link-tag with rel=”big_icon” or so, to let developers add support for big icons.
    This would be compatible with the html standard, as far as I know.

  6. Don’t get me wrong, I like Prism. I also know that icon design can be tough. But seriously, choosing a mostly white icon and making it fairly transparent for use in places that are, mostly white. Not a great choice. I can barely see Prism in my dock.

  7. This is fantastic news … although I still hope to continue saying “XUL”. Keep up the great work Alex and thanks for the cool screenshots.

  8. Feature suggestion to improve desktop interaction: a direct searchbox access on the taskbar (like Google Desktop or Windows Desktop Search), because most rich web application integrate ‘Search’ as primary access. See http://toolbar.msn.fr/Support/Cultures/desktop_searchanything.gif

  9. Yeah, what Sebastian said. Prism should empower a site with control of its visual identity by providing a simple and straightforward way for the site developers to offer a Desktop icon, just like browsers currently let the site developers specify their own favicon.
    link rel=”big_icon” or whatever is the right way to do that.

  10. Installed and loving it!
    I am waiting for it to remember the passwords, so that it is just click away for my laptop.

  11. Hi Guys,

    How do I make prism not share cookies across different ‘apps’? Basically I have two google accounts and starting up any of the different google ‘apps’ causes me to login to the last session. In general I think it would be best for each app to have it’s own walled garden and not be allowed to look at others cookies and prefs etc…..
    Any tips?
    -J

  12. Just to let you know that there is an academic graph and statistical program produced by GraphPad called Prism. This might cause Tm problems for you in also naming your program Prism if this is not settled amicably with GraphPad beforehand. You may already know this but thought is worth drawing your attention to it.

  13. Hi, congratulations this thing exactly what I needed to enjoy more aero… ;)

    4 things :
    - I didn’t find where to set the favicon. I can change the icon for the shorcut but the favicon (that appear on the top left part of the window keep showing the “earth” favicon which is not useful if I want to recognize each app when they are minimized.
    - also, is it possible to add other dictionaries for spell check.
    - I noticed that in gmail the cursor doesn’t show up in the main text area.
    - Finally will it be possible in a near future to make a specific app work together with plugins like “better gmail” or even greasemonkey ?

    Thanks !!!

  14. For the isometric icons, why not make a floor shadow too? Probably a bit hard to code, but would add a really nice effect.

  15. beyond the visual stuff, i’d like to comment on the following:

    … “which allows web applications to run independently” …

    … “It’s about running it in a separate process” …

    that seems to be what i’m reading from the proponents. however, when i run multiple Prism apps on my windows box at the office, and i execute Process Explorer (from SysInternals), i see only *one* -xulrunner- in the Task List.

    and if i kill that single xulrunner process, guess what? it killed all three of my -individual- Prism apps … same behavior as if i launched multiple browser windows.

    granted, the memory footprint is small, but i can achieve that with Opera or K-Meleon.

  16. is it possible to use the main language or other dictionaries for spell check.

  17. Great Idea!
    Will Prism not just be able to remember passwords, but do the log-in?

  18. Only today morning, did i downloaded the Prism prototype for Linux. I am on Fedora 7 (Moonshine). The Gmail application is crashing, every time, it is executed. A lot of things need to be done. All the best, team. :-)

  19. Talley Mulligan

    I definitely understand the need to visually distinguish freed webapps from one another so users can associate them with what they do in subsequent sessions (i.e. after they’ve forgotten which icon/logo relates to which service). However, I find the preoccupation with icons that are likely to be (at least) conflated — thanks to a combination of relative unfamiliarity with the favicons themselves (peripheral awareness thereof), re-contextualization of the webapps and their icons (from browser to desktop), upscaling mis-interpolations, and user memory challenges — a smidge strange when compared to the “Get Info” or “Set Permissions” style UX for the proposed Convert to Application dialog. Don’t get me wrong, I absolutely agree that the icons are important, but I’d like (expect, actually) to have a more “sequential” workflow that conceptually reinforces the nature of the act when deploying a webapp to my desktop. From my point of view, converting an ever increasing number of compelling webapps to the desktop presents some new challenges and will take some getting used to for normal folks. By no means am I advocating a full blown wizard, but with all the UX refinements coming in 3.0 this feels like a missed opportunity that otherwise might go far in terms of leading the user to the promised land.

    I agree with the earlier comments that it would be wise to enable developers to define large icons that wouldn’t require the upscaling chicanery (as cool as it is). Regarding the number of running processes comment, I agree that whacking all Prism converts when killing the single XUL process could be an issue. Perhaps it might be worth considering letting the user decide whether to deploy with dependencies or not (the way Amnesty Singles handles it, for example) in the conversion dialog.

    I’m excited about the project and anxious to learn more, especially in light of projects like Google’s OpenSocial coming of age. Keep up the good work!

  20. Another milestone in technology and I bet its gonna be as famous as Firefox or who knows? even more
    Great Job Mozilla!

  21. Alex, inasmuch as the charter is “Integrate Web Applications into the User’s Desktop Experience”, has there been any discussion of integrating the clipboard a la the Web Application Clipboard proposal (’05): http://lesscode.org/2005/10/21/baby-steps-to-synergistic-web-apps/
    http://lesscode.org/2005/11/02/half-a-baby-step/
    http://lesscode.org/2005/11/02/half-a-baby-step/
    Along the lines of what Ray Ozzie’s team demoed last year it’d be too cool if Prism had native, platform-specific support for bridging the Web Application Clipboard to the OS one (e.g. Windows, OS X). Microsoft “Clip Book” app screencast: http://rayozzie.spaces.live.com/editorial/rayozzie/demo/liveclip/screencast/pctoweb/pctoweb.html

  22. I agree that the future will bring nicer huge icons from web app developers. The challenge is setting up a clear path for them so something ugly doesn’t get forged in haste.

    The suggestion of using a link element is appropriate; probably with type=”image/png” and rel=”alternate icon” or rel=”large icon”. It would probably be best to consult the HTML WG on this.

  23. This product seems to be similar to Desktopize Bubbles. I think they work with each web app company interested in offering this as a feature and the web app company they provides appropriate icons. Unfortunately their apps seem to crash more than I can handle. However, one feature I do like is that when you hit the close button it minimizes the app to the system tray.

  24. isriya, i think they are quite similar.

  25. Hi,

    This seems like an interesting idea (like the widgets in Vista). What would be great is if Prism let developers write custom desktop appplications.

    I had a client who wanted something to manager his contacts. I wrote a PHP script for him and installed a PHP package compact server. The application icon was a batch file which would start the server and launch Firefox to run the it. What would be interesting is if you could model an interface in Prism and then let it communicate with a remote server. What Prism seems to be moving towards, is running web sites as desktop application so this could be another feature in it.

    Adobe AIR has some of what I mentioned as far as I can tell but it runs only on Windows and Mac. I would like to be able to run the applications on Linux and other operating systems too.

    If Prism can also make the same interface work for mobile devices, then that would also save developers time as they won’t have to redesign the UI. For complex applications at least, I foresee changes will be required for the UI but they can be minimal.

  26. I’ve been using Prism. Although I think it does nothing (it’s simply a brownser without buttons) it’s a great idea. Unfortunately I’ve had problems downloading Gmail attatchments. After a single download failed I cannot download anymore. And this arised two questions: How Prism deals with cached files, cookies, etc? Is there a way to clean the cache?

  27. I would really like to see some hidden navigation built into Prism. There’s a current trend of “floating” navigation and menus that hover around the mouse cursor. Something like that comes to mind. Perhaps a key combo, or a key-binding that will cause a simple back-forward-home navigation to appear, semi-transparent, at the top of the window.

  28. This is sounds good. But I am interested in the usability challenges the user will face when using the converted application. ex: Web apps sometimes use hyperlinks to submit inputs, but desktop apps always use buttons to submit.
    So, I am thinking whether, if we need a quick set of guidelines which developers can use and tick them before releasing it to be converted to desktop apps .