Home  >  

To Conquer Form Factor

Author photo
| | Comments (3)
AddThis Social Bookmark Button

Today is an exciting day, with the official release of Flex 3 and AIR 1.0. These two technologies are bringing in the next era of software development, one which is focused on reach, and user experience. With Flex and AIR together, the claim is that we can now build rich internet applications that run in any browser, or on the desktop on any platform.

Having a huge amount of experience developing for the Flash Player over the last ten years, and working with AIR heavily for over a year I can testify to the fact that the goal of reach has been realized in a big way.

The Flash Player in version 9 has penetration upwards of 90% and now runs in all major browsers across all platforms. The Flash Player is very stable, and you can be pretty confident you will get a "write once, run anywhere" type result.

AIR is extending the Flash Player and other runtimes (webkit, sqllite,Adobe reader,etc), by bringing them to the desktop across all major platforms. AIR is now available for all Windows flavors, MacOSX, and a Linux version is already in testing. Many major players are already developing great applications using AIR, and it is very likely it will see some nice penetration over the next year as the momentum builds.

So, this is all great stuff! As an experience designer and developer I couldn't be more pleased with this new toolset at hand.

Wait a second though........ Write once, run anywhere.....? We shouldn't get too carried away with that phrase because it is deceiving.

This platform released today provides an effective solution for slaying one dragon, but a much scarier dragon lurks atop the mountain I call form factor. The danger is in thinking that we have a platform for developing universal experiences, when the truth is, that we have a platform that provides us with a universal runtime to build experiences upon. Just because your code is cross-platform, doesn't mean that your experience is.

Let's take a close look at the problem the Flash Player and AIR solve:

For many years web browsers have struggled to provide proper support for standards defined by the W3C. Internet Explorer, Firefox, Netscape, etc all had quirks that made it so developers often had to introduce browser specific code to achieve consistency. This problem inflated the amount of work designers and developers had to do to make something work. They had to maintain browser specific code that could often double the size and complexity of the project

The Flash Player emerged from this struggle as a runtime that offered full consistency along with very advanced capability. Consistency was never sacrificed for capability by the Flash Player team though, and that turned out to be the key to why the Flash Player is so successful. No forking.

So at the end of the day, the Flash Player allowed developers to "write once, run anywhere" on the web.

Cross-Platform software development on the desktop has always been a daunting task. Operating Systems offer much more capability to an application than a web browser offers a web application. Operating Systems for the most part have not been developed against any standards like web browsers have. Vendors tend to achieve consensus by copying each other and as a result of the process of natural selection, standards tend to emerge over time.

AIR is truly amazing because not only does it abstract all the dominant operating systems to developers, it also takes web standards to them as a model for development. While AIR's capabilities are still a little limited at this time, it is poised to offer a true "write once, run anywhere" for applications running on the desktop.

Write once, run anywhere is a serious reason to adopt a software development toolset and runtime. It means that one version of the software will be written, and maintained. Awesome!..

Now back to Form Factor. The way we are using computers is changing radically fast. Early in February the World Mobile Congress conference was held in Barcelona. Vendors were showing off tonnes of new devices that will hopefully run all our applications someday.

This year we have seen powerful devices like the iPhone emerge, and many MID Devices powerful enough to run full versions of Windows and Linux. We are seeing new set-top environments, and game consoles that will also power a large majority of future digital experiences. There is a huge market here as we all know.

All of these devices have different user inputs though. Some have keyboards, some use remote controls, some have tiny screens, other have huge screens, some are touch screen sensitive, some use mouse-like pointers, some use both, and some even use multi-touch input! Whoaaa! Sounds like a lot of in-consistency to deal with.

Over the last year, Teknision has been working with a client called Finetune. We have built many applications with them, here's a list:

The Finetune Embedded Player(Actionscript 2 and Actionscript 3)
The Finetune Desktop (AIR)
Finetune Mobile (Flash Lite 3)
Finetune Wii Player (Flash Player 7)
Finetune Player for Moxi set-top (Flash Player 7)
Finetune MID(aka:Media Junction) (AIR)
Finetune for Facebook (AJAX, FBML)

While all of these applications share a common code base, I found that the majority of the work for all of them was in implementing the view. Maintaining them all is certainly a challenge. I realize this example is very broad involving multiple runtimes and versions of them, but let me refine this a little further and focus on Adobe AIR:

Finetune Desktop

The Finetune Desktop (AIR)
Finetune MID(aka:Media Junction) (AIR)

We were approached by Intel to help them build some sample applications to showcase on MID devices. MIDs are just small handheld computers. Here is an example of the one they sent us to test with.

Intel wanted us to get Finetune Desktop running on the MID. No problem!, we built the app in AIR, and the MID runs Windows as an OS, so we just loaded it up and ...... off we went..... ah crap!.....

Finetune Desktop was designed for the form factor of a traditional desktop or laptop computer as most AIR apps right now are(trust me, I installed many). It was not a great experience on a small screen like the one on the MID. The MID also offers two input models: A little track ball-like thumb pad for moving the mouse, and also touch screen input.

The thumb pad just felt clumsy, so we quickly realized that a touch screen interface would be more effective for our app. In order to make the touch screen UI as effective as possible, we felt the app would be better presented in a full screen mode. Making these decisions just set off a sequence of usability and design changes to be made for the app, and when it was all said and done, we had a new Finetune Desktop for the MID, but it's UI was completely different than the original Finetune Desktop.

While I love building awesome applications, I realized that there is another dragon at the top of the mountain. How is this going to be maintained going forward considering the massive potential for differing form factors in the future? It may end up looking something like this:

Download finetune_desktop.air
Download finetune_mid_touchscreen.air
Download finetune_tv_remote.air
Download finetune_tv_pointer.air

Look familiar?:


Download Finetune for Windows
Download Finetune for MacOS
Download Finetune for Linux


Well the other approach would be to just deal with the difference conditionally in the code:

if(Formfactor.TV){

}else if(Formfactor.MID){

}else if(Formfactor.REGULAR){

}

That also looks familiar (just a simplification for points sake):

if("Internet Explorer"){

}else if("Netscape"){

}else if("Firefox"){

}


Dealing with this is going to be a huge challenge in the future as it may be that more people interact with our rich internet applications on devices than they do on traditional computers. I am relieved that we have the cross-platform thing solved though. Can you imagine how difficult it would be to manage an application across form factor without a universal runtime that is cross-platform?

The most important take away from this article is that we have a universal runtime/platform that is fully cross-browser and cross-platform. That does not mean that we have brought about the universal experience, if such a thing is even achievable.

While we have solved one huge problem, we may end up having to manage way more inconsistency than ever before in the coming years. Where we used to have 2-4(ish) web browsers and 3 operating systems, we will now have dozens, maybe hundreds of different devices, with dozens of user input models. Dealing with this will be the challenge of the next generation of software development platforms.


Read more from Tony MacDonell. Tony MacDonell's Atom feed

Comments

3 Comments

Ben Longoria said:

Nice post!

It will be interesting to see how successful Android is in solving this same problem. The XML UI resources (which I dubbed AXUL :)) can apparently be mapped to different locales and device profiles. There obviously is a strong separation between the Java code and the UI markup. And the association is made at runtime. Interesting what it would mean to do the same thing with Flex/ActionScript.

I recently gained a new appreciation for this upcoming problem when I was asked to revamp two web applications to make them iPhone-friendly.

I thought it would be pretty simple: they were fairly simple apps with only a few views that were already designed for a small viewing area (they're remote portlets for our portal system). But like you said, it's not just about the screen size.

You have to increase the spacing between clickable elements so that users could easily put their finger on just what they wanted. There's no such thing as "hover" or "click and drag" in the touch interface, so any CSS styles related to hover and any drag-and-drop functionality provided by JavaScript libraries are useless. Even some fairly generic JavaScript events, like the onChange JavaScript event for drop-down boxes, don't fire because the iPhone apparently intercepts certain actions related to forms.

The first person to develop a central repository that contains spec data for all the mobile devices out there (screen size, touch/no touch, etc.) and the information on how your app can verify that the request is coming from each particular device will be hailed as a savior a year or two down the road.

Great post Tony! I think the challengers outlined here bring to light the need for knowledgeable and experienced UI designers more than ever. A lot of these smaller form factor UIs are actually easier to implement technically than they are to design given the input, screen size and other constraints. Obviously bandwidth, processing power and storage imitations on non-pc devices is another factor when thinking about cross platform.

@Brian - this sounds like quirksmode.org for mobile.
"The first person to develop a central repository that contains spec data for all the mobile devices out there (screen size, touch/no touch, etc.) and the information on how your app can verify that the request is coming from each particular device will be hailed as a savior a year or two down the road."

I also think a UI and interaction pattern library for mobile and devices would be a HUGE asset!

Leave a comment


Tag Cloud

Poll: Mobile Features

What feature do you use most on your mobile phone?

Vote | View Poll Results | Read Related Blog Entry

Latest Features

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.