Saturday, May 29, 2010

UX Proof of concept: Developing panorama applications in .Net CF. World Cup Application

You have probably already seen a bunch of really cool applications demoed as part of the Windows Phone 7 momentum following a chrome-less and fluent approach getting a very rich user experience browsing information that Microsoft has called “Panorama Applications”. In the “UI Design and Interaction Guide for Windows Phone 7 Series” document, panoramic applications are described as applications that “offers a unique way to view controls, data, and services by using a long horizontal canvas that extends beyond the confines of the screen. These inherently dynamic application use layered animations and content so that layers smoothly pan at different speeds, similar to parallax effects”.

I really like the way the information flows along a panorama application. That’s a great approach for browsing data in a mobile application, and it’s perfectly suitable in many use cases.

If this is such a great approach, why aren’t we already developing Panorama Application for Windows Mobile? Maybe, because the task is not that easy without Silverlight and Blend for helping us. But I’m totally convinced that a Windows Mobile application can provide such a great user experience, it’s just a matter of developing the right custom controls, and that’s the tricky part. That said, I included some Panorama application concepts as part of my usual UX spikes that fills the little free time I have. It was basically a set of touch friendly controls, responsive and smoothly animated, supporting kinetic scrolling all around, alpha blending, transitions and so on.

While I was working on that, one of the world biggest sport events start was getting really close: The FIFA Soccer World Cup South Africa 2010. And as a big soccer fan, I was really interested on it. I wanted to start following the tournament from my mobile device as well as from my laptop. But unfortunately, I didn’t find any world cup app on the Windows Mobile Marketplace. I did some research on the web, because WinMo users still can download a .cab installer from the web, and just install it on the device, but I didn’t find anything meeting my expectations though.

But I’m a mobile applications developer and my free time development spikes were needing a bounded focus. Building a world cup app was a very good case study for validating the UX development I was working on. A panoramic approach for a World Cup app sounded great to me. So I decided to align my spikes targeting a World Cup Panorama Application, trying to keep it as simple as possible features-wide, but validating the panoramic approach in a .Net Compact Framework application. It was risky, as far as I didn’t have to much time for it (I had less than five weeks before the world cup starts, and this is just my pet project).

Now, we’re only 13 days away from the World Cup first match, and the application is in very good shape. I recorded a small video to show you how it feels in action, running on my Samsung Epix.

If you’re a soccer fan, and you have a Windows Mobile device, I bet you want it on your phone!. It will be available for downloading before the world cup starts. That means I’ll publish it on my blog as a free download, during next week.

The requirements are .Net Compact Framework 3.5, and a touch-screen Windows Mobile device.

If you’re a Windows Mobile developer, you’ll probably find this app very interesting. I hope we start seeing lots of Panorama Applications not only in Windows Phone 7, but also in Windows Mobile 6.x. If we have the ability to build such kind of UX in .Net CF, our applications eco system will be better for sure.

Stay tuned! This story has just begun.

23 comments:

gauth said...

It is just awesome, hell of a lot better than apps you have to pay for, can't wait! And thanks!!

Christian F. said...

Looking forward to learn more about the technology behind the app, seems like a really good implementation of kinetic scrolling and smooth animations! Will you be releasing the sourcecode?

Megale said...

Hi,

do you have plan to continue your posts on Custom Controls??

Looking forward to it!

Ari said...

When can we get this I want it!!!!

HTCeros said...

Very nice app! looking forward for this.

Are there other languages available?

Jose Gallardo said...

Hi everyone.
I'm glad all of you like how the app is looking.

@HTCeros: Unfortunately, I don't have enough time to localize the app before the tournament starts. If I find the time, a spanish version is at the top of my list. But no promises ;)

@Christian F.:
@Megale:
The source code won't be released at this time, but...
This is a development blog, and my efforts are focused on improving the WinMo apps ecosystem.
I'll continue providing guidance around how to build a compelling UI for .Net CF applications. The work on this app is definitely a great help to accomplish that goal and I bet this experience will be good for all of us.

Thanks for your comments,

-J

Marcus said...

Very cool! I'm very interested in how you implemented this - do you think you will be able to abstact it enough to make a reusable framework out of it?
Also, just curious, where do you get the data - RSS feeds?
In any case, first priority is PLEASE make sure you have it ready before June 11th ;-)

Anonymous said...

this looks really freakin' awesome! i'd even pay for this! your concept of UI damn rocks! can't wait to put this beautiful app on my hd2.

greetings and millions of thanks :-)

hebbe from germany

Christian F. said...

Posting the sourcecode to a site like codeplex (or something similar) for the controls you are using could mean a lot to the community. We're all missing a set of controls that can perform as well as the ones you've written seems to do. Would that be possible?

János said...

I can't wait, when it will be relese?

Jose Gallardo said...

@Christian and Marcus:

What both of you say is totally aligned with one of the options I'm evaluating right now.
I developed the app trying to keep the UX components as reusable as possible. But some of them still needing some work before actually be pulled from it.

My priority now is releasing the app, which will validate the approach in a real world scenario.
The client is almost done and I'm just finishing some details. After that, next steps will be totally focused on making this development technology available.
Let things just flow.

Jose Gallardo said...

And about the news, I'm getting them from the FIFA.com News feed. The official RSS from the FIFA site.

Anonymous said...

Nice looking app hope everything will be ready in time.

Jose Gallardo said...

Mission accomplished.The app is already published.

Visit my latest post to download it.

Your feedback will be highly appreciated.

Thanks in advance.

pr0duc3r said...

Hi, I want to test the app, i have an HTC HD2.
Congratz.

Arda said...

WC app was great and please make more apps with this technology and save us from old styled bad interfaced applications. especially please make an app about news or rss feeds etc. we will follow you.

juan carlos said...

Hola.
Tengo una Samsung ommia 2.
Baje los 2 archivos de el programa pero en ninguno encuentro el archivo .exe o el .cab no se como instalarlo, podrias explicarme, como hacerlo.
No domino el ingles por eso te escribo en español.
Gracias

Anonymous said...

Hi,
very cool piece of software!
works great on a HTC HD2 with German ROM.

Did you plan to localize world cup?

Greatings from Germany
Toni

Anonymous said...

Great app. Like to learn how to make it. Thanks!!

Mino said...

Hi, great app. I start learning mobile programming. It will be great if you guide how to do similar apps.
Thanks!!

paulc said...

beautiful implementation of this technology.

Just one thing - running wm6.5 on a Sony Ericsson X1, the application occasionally crashes, suggests a data update, exits, & then crashes again after entering say the groups. A soft reset (not a reinstall) resolves the issue.

Is there a workaround to avoid this behaviour?

Anonymous said...

Great app on my HD2. English version 2.0 had problems to create Images folder after first update upon installation.I had to copy it manually from temp folder. After that everything runs smoothly

Anonymous said...

Thank you for this app. It is really fantastic. I´m enjoying it a lot. Updates fantastics too. Thanks.