Handful of Nothing

Hi, as promised I’m going to talk a little bit about the photo viewer on the new Canola. This was a little bit controversial design and got of course the normal suspicious overview by the dev team. I fully understand them, as most of the time I have an idea but it just don’t fit in all cases, and they are a great in setting “hei dude calm down” points and to of course keep my feet on the ground sometimes.

But this time, I was really after this. I had a problem with thumbnail pages that are a really solid and fixed grid. I always thought that you photo view should be the closer to the real thing, and real thing has a real human made arrangement, where you try to combine and use the empty space as much as you can. So the goal was: How to be more “real”? More “personal”, more “human” or more “organic”?

Of course a real simulation is not possible (yet) due to the same problem like always (hardware performance) but come on! We are on a mobile platform! And this is running today only on high end computers or videogames like the Playstation 3.

But one good thing can always comes out of a restriction. After analyzing the photos, even a very small difference between the photos can give this more realistic look and feel. So it is possible to do that only by having landscape and portrait oriented photos. Then you put some small png images to the corners to create the 3D illusion and we finally found a nice format. We defined that at least height was going to be equal to ease some calculations in the thumbnailer and also in the drawing engine. But this simple detailed gave a much more “organic” feel to the view.

The internal screen

So, we are on a touchscreen based device, and as an Interaction designer I’m aware that “second click” or click and open menu are not a good solution for this kind of device. And personally I think contextual menus on touchscreen devices that appears when you hold the stylus down just one of the worst decisions ever. It’s again an attempt of bring the same behavior from the desktop to the mobile without adapting it.

To solve this we decided to have a “almost” fullscreen preview of the chosen photo and taking advantage of the widescreen and also creating consistency with the album art browsing screen, we decided to go this way :

This screen allows us to create a area for image information and maybe buttons to connect it seamlessly with other mashup content in the future, but also gives us contextual menu on the corner. We are actually not going to use in the december release this menu, as most of the options will be available in the fullscreen view but this already enable plugin developers to expand the functionality creating for example : Twango uploader plugin, Flickr, Picasa Web album or any other kind of send to application.

And to end the sequence, there’s the fullscreen view. But some of you may already say : hey what if I don’t want to see this intermediary screen? Well, you can double touch the picture and go straight to the fullscreen (actually this will be hard on low sensitivity screen) but solves the problem adding the shortcut.

The fullscreen view brings you the commands like the player : play, previous, next and in the other side: zoom and rotation.

The screen appears to not have enough hit area if you think that the Internet Tablets has a high bevel as a border, but the hit area on these screen will be actually bigger than the buttons, to allow you to click always correctly.

What’s more in and really counts: We gave an special attention to the details to make the whole usage more “smooth” so even when you have slightly bigger load time (bigger pictures being rescaled) you will have nice fade in and out transitions to reduce the loading time sensation, as well some sequential loading transitions to give the illusion of flow.

What’s out: We are not able now to make a fully powerful zoom feature, or other transitions (mainly tearing and redrawing the wholescreen smoothly limitations) and features like renaming or tagging. But as I previous stated, we already have the place to do so (menu) and there’s also small things in my head that I want to put to work next year that will allow better management, even with my belief that Canola should be more a player than a manager of media.

The Drawbacks

We all know that not everything goes the way it’s planned. There’s of course bad things about this design but I really like the way it came out.

1. What I think is really going to commented by some people is the different aspect of organization (by rows) and that some of the photos in a sequence will be out of the screen. This will be the price to pay, but I think that in this particular case it will worth.

2. The other drawback is that if you don’t have at least pictures in both orientation you’re will end up not seeing the effect and worst: if you have only regular pictures the “tearing” appears a lot more.

3. The need for a really fast thumbnailer: EFL came to help again, but this is quite complicated when you think about leaving room to allow users to manage it, and control how it works.

4. Memory consumption when kinetic scrolling : we need to provide a great experience to do not be boring. so if the user “throws” the screen to the side, it should “answer” to that. This is for example what made the iPhone UI so “attractive”. But how to do this if you have 100 or 500 images in a device where you should be really careful with memory and mainly with reading data speed? This gave us a lot of headaches. (Leo knows it)

We also did a regular, static grid version (actually used in the album browser view) so if people doesn’t like the more organic one we can maybe provide a way to fall back to the regular way.

I really believe the gorgeous touchscreen with have to work with, and it’s unique widescreen nature provides the perfect background to do something like this. So the photo view is truly an exploration of how to create exclusively for the horizontal use in a high definition widescreen. If we have this, let’s use it to it’s maximum.

Real demonstration of this screens : you can take a look in the video posted previously here (sorry for the low resolution)

Conclusion: The drawbacks are there off course, but I’m really please to push the boundaries of the platform again, and now on both fronts: design and development.

Next topic will be player screens and how Car users will really have a reason to do not worry about the smaller buttons on this version.