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.

There’s nothing better in the world than work with passionate people.
If you know me you can see how I get when I talk about the work, the office, how I get really pissed sometimes etc. I’m a real passionate mtf*** . And now I have examples almost daily of the same feeling all around me.

Here in INdT, Developers, Designers are really really passionate. Althougth we do have to keep things on track, theres a  hunger for doing better, cleaner faster and more beautiful than it already is.

So It has been quite a month! First I saw some of the crazy ideas on the picture view implemented, then they are choppy, not so fast, and after a whole weekend hacking the guys made it quite smooth.

After that I receive a version for playing and when I go test the theme swtich, BAM! surprise a REAL nice thing happens. I was really not expecting. Why? Because we had no time to do it, but the guys do on free time, weekends, over night whatever.

Yesterday People didn’t went home after all the hours and the team presented me this morning another surprise and even if it seems pretty ridiculous to someone, I can make sure that this is plus work and people do because believe in the whole project:
Remember Gustavo’s Keyboard demo? André after hacking ecore input did a great job last night and now we have a translucent keyboard not using the whole screen! YEAH!

Now, the plan is to have this as optional keyboard. And of course IT WILL NOT HAVE THIS iPhone look!

Embedded Video

This was the final piece of the fast lecture I had the pleasure of presenting at WUD’07 Recife. After talking about UX practices, our team, and how things can change when you do user centered design I made a small demo of the new Canola explaining some design choices and how it evolved from the past version.

The video is a nice opportunity to see the UI for music and Photos, that even not being the most important on Canola is now for sure one of my favorites.

Bellow you can also watch the video of the same UI but now running on a real device. Sorry for the quality but here the goal is just to show how smooth we were able to achieve with EVAS. The guys are just out of this world.

Click here to watch the second movie

Well, after what some considered the “biggest” iPhone review, I really tried going back to my previous cellphone. The problem is that like an friend said, when you are not using, and making critics to something new you maybe mistake a little bit what the old one was. So I admit: I was not able to return to my N95. Here goes the why’s  :

1.  I used the web a lot, and the browser (even being webkit) just feels awkards enough to make me hate it.
   1. It tries to “shrink” the pages, to fit better in the screen. This approach is just not as good as showing the minimap and choosing the section. So using my blog’s wordpress administration was just impossible.
   2. Not enough ram to multitask. the iPhone do crashes a lot, but it’s incredible that I’m able to open 5 or 6 pages on the iphone, while opening 2 on my n95 will make the browser crashes. Actually it looks that some memory is leaking because the behavior is not well predicted. I do make sure nothing was “open” when opening the browser.
   3. Flash is not present in both browsers, but the javascript in the iPhone worked better than in the N95
2. The music application works fine, but (when on the headphones) the quality is not as good as in the iPhone
3. Video playblack (specially in the plane) was also better in the iPhone
4. The email application on the iPhone is simpler, the settings are synchronized and has rich html email that doesn’t crash.

So I still miss the hardware keys for music, the powerful speakers and the better reception as a phone. But I grew dependent on the superior browser, superior email client and the iPod application.

I was really hoping to be satisfied once I returned to my previous, much powerful phone but it really didn’t happen. The iPhone still have all the problems I said in the last review but it also brought the best multimedia and internet suite packed in an enjoyable UI experience.

To close: I’m not saying that the iPhone is a overall superior phone, but as I started the previous post about it I end this one : For a hardcore internet and multimedia consumer it really fits better. And I realized that I just don’t use the phone that much.

Well, this deserves a post because it’s exactly what I have been saying in all my talks over the iPhone. It really takes more than just “let’s do something to mimic” and what we see in the market is a bunch of frankstein trying to awfully copycat the phone without having the thing that really makes what the iPhone is: A guy who understand that user experience is everything, and that pushes it down into the company’s organization in such a way that what you get in the end is a device that was able to in it’s first incarnation set all the mobile manufactures 2 (I would say more) years behind when it comes to user experience (I already said that feature wise and hardware wise it sucks).

So take a little time to read this presentation from Peter, who beautifully put in a slideset the 10 reasons why you can morph a phone into the iPhone. here

To be able to produce inspired software, the top boss has to believe in great user experience and kick everybody’s ass to get it done. In huge companies a VP will do, but management below that level will be sidelined when trying to implement proper interaction architecture and usability processes.

In the meanwhile what we get is a lot of FranksteinPhones.

My highlights from his texts :

on Features :

This circle of dependancy is diabolic. Users and features are like children and candy. They never say no, even if stomach pains will surely follow. For developers, it is the easiest thing hand out. New features are a commodity. If you have no clue how to improve your software, you can always add new features.

Incrementally improving a mobile so that it leaves the cluster and approaches the iPhone is impossible. It is actually easier to join the iPhone’s position from above, below or the right. The only way to get there, is to jump.

It could be surely used in games (actually has been by nintendo) but there’s not way in heaven or hell I would be blowing anything to do anything. Less effort = better. The only exception is when playing games in the Wii when : more effort = more laughs about the other’s movements = more overall fun.

Speaking of UI I’m now preparing a sequence of post on how we (at least) tried to solve the problems in our Canola UI. We know that a lot of things were quite poor on the first one, but some problems were quite tricky to solve, once you put in the table all the restrictions you get in from the hardware. If you have any suggestion on what you read, it would be great to receive feedback on any topic.

Click the image for more info.

INdT giving sequence to it’s software tech days is going to make another on november 20th and 21th in Joinville. This is a great opportunity to get in contact with Maemo development. Not only you will have introdutory course on developing for Maemo but also be able to attend small classes on Python for Maemo, Qemu and even the microBrowser extension courses.

the best part? it’s FREE! =) as in free beer!

Maemo may not be giving away 10 millions dollars, but it’s going near everyone to teach on person how to do stuff :) :

Well, it’s not that, but this shows how easy is to create your own plugins. As a testing ground for our plugin architecture Kenneth is implemeting some Carman screens / sensors and data acquisitions.

Canola Menu

For those not interested in plugins, carman etc It’s really a peek into the most recent version of the main menu. Apart from the video quality you can see how smooth it is. The point for me is why to design a menu like that

Actually it was only a matter of observing the users and gathering feedback on the first version. Things that were clear and already posted here:

1. Scrolling on main menu : BAD. Why? A lot of users simply didn’t know that there was more options when scrolling down.
2. Arrows everywhere : BAD. Solving the problem above with arrows was the worst thing ever. It didn’t quite solved it and made the ui a stage for almost useless visual components.
3. Arrows not grouped : the arrows also were not “grouped” together. While the up and down were near by, right and left were quite apart, but there’s was not better way (IMHO) to do it. But it doesn’t justify the mistake.
4. Useless scrolling and not enough room: While it doesn’t appear too much with a 3 item only menu, it would be a hell to have 5,6 or more items on canola menu. Therefore the need to use something much more simple: the grid. You can run, you can hide, but in touchscreens the grid most of the times is the best, time saving view to use.
5. Textual internal menus are bad. While text can make things a lot clearer than icons, it also demands a lot more room (sometimes) and can be trick for a grid view. So to solve the problem of space we have a grid into a grid menu, or like a called here: menu on menu. The only difference is that we can fit up to 12 items on the first level then 10 items on internal menu. This takes canola now to a incredible capacity of 120 features in a range of 2 clicks. PS: WE NEVER going to place 100 items there =) but flexibility is never enough.

So this was the starting point to design the main menu, and after a lot of iterations we ended with a cleaner, simpler yet visually appealing menu that provides 2 level access to a number of applications much bigger than we need now and in the near future.

From the first 2.0 video, here you can notice that we really killed the scrolling. To keep main icon hidden is a incredible mistake that I really apologize for doing it ;)

Also in the image you can notice that we brought down some elements size. Actually we want to keep a small “compatibility” with the older Canola, and enable touchscreen use at it’s maximum, but I really (personally) wanted to get rid of :

The back button (letting only on hardware keys)
The menu button (also on hardware, but now harder because in the n810 is on the keyboard : /)
The home button (also on hardware, but this can break the device’s home button functionality while on canola)

In a sense, what I’m looking for is a almost button free (or at least when possible) User interface. Let people touch things and do things by context not only buttons. I know it’s a little bit too much, but come on, you need to have a bold target.

After attending a course of self organization and all those bla bla blas, I really wanted to place all my time wasting web things in one place (the sidebar).

Instead of looking for mozilla sidebars, I tried the new flock browser and I can say : I’m really impressed. So simple idea, and for me works better than those web desktops.

Let’s see how much time I can use this before hate it (I hope not)

Does anyone knows if I can extend it myself (even if it uses xul) ? If the answer is yes, I will for sure try to improve and fulfill my needs on top of this, instead of creating from scratch.

Congrats flock team! this is far superior than the previous version I’ve tried in the past, and at least for me it seems that you guys are on the right track to “fulfill” a web-app-addicted dude’s dreams.

World Usability Day, Recife, originally uploaded by MarceloEduardo. Picture by: Fábio Caparica from UXRecife

Talking about User Centered Design (in Maemo) at World Usability Day using Canola 1.0 x Canola 2.0 as case

Why? Simple: the carriers would really bend to openness and would be a important and strong influence on other’s platforms. To be able to create mashups will be just incredible.

Apart from that, I’m not that keen on Java, but it’s a nice move from google, and as Gustavo said to me tonight, a lot better than use Gobject / Gnome components. It just don’t fit. (sorry maemo on that point, but that’s why we also don’t use). Gnome is so 35 minutes ago - ;) and while it really fits well on the desktop is a drag on the mobile space.

It seems also that google has a very nice VM for it’s Java bytecode. I think sun is really happy today, or could it be Eric’s heritage? Only time will shows us. For me it smells Google + Sun + Apple against the others. (kidding… or not)

Not all of them but at least can help you figure out your own answers, or better: bets for the future of mobile platforms.

Starting a little bit old, but a nice yet simple point of view from Alistair Croll here where he shares with me the surprise to know that the n810 is a step out of a full dance.

Of course he talks about Android, and this new Google adventure is already bringing up a lot of reviews, sometimes not the kind of reviews google fans would like to read. For me the most important: is it going to improve or not interoperability? PC advisor article points to not, but I’m inclined to think that yes. BBC brings a note about Symbian’s opinion with the basic line :

Google’s dominance of the web will not translate to the mobile phone market, a senior executive at Symbian has said.

Which I totally agree. For more on android, get to know the man behind it here, a “this is pure PR” based article here, then there’s a nice FAQ here, courtesy of BBC, a Zdnet article full of analyst’s opinions here and a ok article at gizmodo here. A note: I do not only believe in what android is after (an open platform) that I also am very proud to see that my buddies at work (INdT) have always pushed this thing further, and more proud when I think of openMoko, the one which is truly an open mobile phone software stack blabla. And to finish this the all might question : “will Android kill the iPhone?” the question is here
but I would say that would be more probable to have Android powering a future iPhone (I know, linux is not bsd, iPhone has it own “cocoa” Application framework, but I just want to make it hard) than killing it.

Enough of Android, I was happy to read that EA is donating Simcity for the OLPC project! Better yet, the guy behind the port to python, is the guy who did the multiplayer version of the game, fitting pretty nice on the XO laptop goals, that is collaboration and learning between the kids.

On the iPhone side, it’s now officially on Europe, and T-mobile has released the figures for the first day : 10.000 units. Not bad, but I think people were expecting more.

speaking of internet tablets, take a look at the first part of Reggie’s from ITT video going through the features and hardware design of the Nokia N810 : here

So Google, after all the speculation about the gPhone is going even higher: Android is out and it’s the Google mobile, open source, and free? version of Windows. To be more specific, Windows mobile.

I know this is a pretty simple conclusion, (actually a comparison) why Google, heading the OHA, is aiming in nicely providing a lot of people a open platform, stack, or whatever to everyone interested on creating devices. Nice nice nice move google and more, after buying Android, expectable.

To imagine that Google is actually going to make sure all device made by the involved companies can run it’s web services nicely (in or without a browser like the Gmaps on iPhone) gives you a hint of how geniuses this can turn out to be.

“With devices built on the Android Platform, users will be able to fully tailor the phone to their interests. They can swap out the phone’s homescreen, the style of the dialer, or any of the applications. They can even instruct their phones to use their favorite photo viewing application to handle the viewing of all photos.”

Being honest, if Google manages to pull this thing off as it is bragging the world it will, and also if it can convice the actual manufactures to keep it open this thing can be a major blast at least in the smartphone world (Maybe HTC is tired of giving MS money and motorola cannot sustain it’s montavista linux prices) and really put Symbian and WM to work. But, really how they are going to pull this out :

Android does not differentiate between the phone’s core applications and third-party applications.

It can be, maybe with this :

…a custom virtual machine that has been designed to optimize memory and hardware resources in a mobile environment.

I like it. To have another good competition against WM for me is enough reason, and I’m all in for big players in the mobile world.

The best thing is to see that EVERYONE is jumping on the mobile bandwagon. Nice opportunities ahead.

And to end the post …

Breaking down application boundaries
Android breaks down the barriers to building new and innovative applications. For example, a developer can combine information from the web with data on an individual’s mobile phone — such as the user’s contacts, calendar, or geographic location — to provide a more relevant user experience. With Android, a developer could build an application that enables users to view the location of their friends and be alerted when they are in the vicinity giving them a chance to connect.

Please Google tell me how are you going to convince the manufactures and carriers (ok they are in the alliance) to allow developers (with certificate and signed code only?) to access people’s Agenda, Money (calling) and so on?

Ps: Oh yeah! I was almost forgetting this : Why do not take the Linux fragmentation from desktop to mobile also? =)

When you have someone, doing a “independent” review of a brand new “exciting” product you maybe have also a really nice user testing case to observe.

Of course this is not comparable to some deep in lab usability studies but really shows off the worst cases as fast as possible. Imagine a reviewer, used to a lot of devices picking up a device and facing several “odds” across the basic usage. This is for sure one of the best materials if not for influence, but to prevent you to commit the same mistakes again and again.

My observation to my own comment: it really helps in the cause of a touchscreen, to know it’s sensibility etc, so its better to at least hold one of the devices before to really dig what’s going on in the video.