Google Maps, the IPhone and my San Francisco Trip

I just got back from my trip to San Francisco (top secret project…shhhhhh), but a couple of things made this trip rather interesting. I have never really been a tourist or a photographer. Its something I have been meaning to change for a while since I do want to have something I can look at years from now and be like: “oh yeah I remember that..”. However my interests are so much more in the new and shiny things on the www that cataloging my travels seems like a chore.

However this trip I tried to mix the two domains a bit. I have a shiny new iPhone (well not so new now), and I have been meaning to play with Google’s new my maps + embeddable maps features, so here is my trip with photos from my iPhone with some information about my trip on custom markers. I have a vague color coding going on there with green markers being the first day, the blue, the second and pink the third day at SF.

While this was fun, it really isnt the experience I was hoping to create. Thankfully, both flickr (where my photos are hosted) and google maps have apis so I may monkey with ’em a bit and come up with something interesting.

Free AS3 package: MP3Playback

When Flex 2 came into beta, I wrote an online mp3 player application called FlexAmp. The application let you play songs from an online Box.net storage account and and used the ID3 info to load related content from Flickr, YouTube and Amazon.com. Mike Chambers later did a desktop application using AIR called Ascension that also mashed up your music with the sources mentioned(but I still want to claim first rights over the idea, plus I did remote storage 😉 ).

Just for nostalgia, here are some pics of what it looked like:

Anyway, a lot of people have asked me to release the source code for the application but the code (like the code for most of my weekend projects) is fairly messy. But I will try to release some of the core code as I get around to cleaning it up.

This blog entry links to the MP3Playback class which did all the playback for that project. I took some time to make the api pretty clean and similar to the Flex VideoDisplay class. I also wrote a quick example showing how the class can be used. The one interesting feature of this class is also the ability to fade out the song at any time. Not really rocket science, but nice to have anyway ;).

I hope this class helps someone with a project. If you find this class useful or find a bug, please leave a comment here and I’ll try to fix it.

The application can be found here. Please right click to view source.

Lets talk about UX baby …

This post is a mashup of my notes from the Adobe XD group’s session at MAX, the Apple iPhone Tech Talk with John Gelenyse, Director of Technology Evangelism & User Experience Evangelism at Apple I attended today and my personal thoughts on User Experience on applications that I see across the web (even the ones I have written 😉 ). Hopefully you will find these pointers useful in evaluating application designs before you deploy them to the masses.

Identify the problem:
A no-brainer, right? But you will be surprised how often applications start looking at features without identifying the core problem they are trying to solve. Just as often, the problem statement is formed incorrectly. For example, for a video aggregator like say, the Adobe Media Player, is the goal isnt to aggregate videos but enable easy discoverability of video content. The fact that this is done via aggregation is a secondary thing.

Whats the point?
This is the most important question that you SHOULD be able to answer in one or two sentences. Apple calls this the product definition statement. In his talk, John gave the example of Apple Aperture. While Aperture has a huge number of features, the product definition is simple and strong: “An online image management solution for professional photographers”. The product definition statement must include the function and the target audience.

Think Task First
Identify what the task is. The interface must make that task really easy. You should even break the tasks down by order of importance and make the ones at top really easy to accomplish. Again, dont design for the task that a minority will do. Identify and define:

  • primary and secondary tasks
    eg: organize, purchase and approve
  • primary and secondary objects:
    eg: people, movies, books

Keep it simple
Again, fairly obvious but I know some of my own applications suffer from this. As a developer, I know exactly what actions the various nuts and bolts on my application trigger but how obvious is that. How many actions are you trying to promote on that one application? Dont overthink the problem or optimize the design for the edge case. John exact words were :Simple and straightforward is best. Make it dead easy to use!

useful -> useable -> desirable
Andrew from XD talked about the progress of the application as it approaches completion. First and foremost, the application should be useful. Once you have that part worked out, make it usable so that an average user doesnt have a steep learning curve to your application. Finally, it should be desirable and this is where you tweak the designs, colors etc. A lot of applications seem to go the other way

Content is king
Remember the application design is to promote the content. In the case of the Adobe Media Player, the original designs were beautiful but reduced the video content area to a small window in the corner. The one released has the video as the primary focus and the chrome is completely secondary.

Create an experience, not an interface
Sounds like another slogan doesnt it 😉 ? But keep the user experience as the priority. While the buttons and knobs may result in a working application, if its not an enjoyable experience for the end user, its to no point. At this point, I think Andrew brought up the Apple IPhone and talked about how people forgive the mediocre phone capabilities of the device just cause the experience is so good (as an iphoner myself, I completely agree 😉

Choreograph sequence and flow
Transitions and animations arent just eye candy. They help keep the users oriented as the application interface changes as the user tasks change (for example, the Adobe Media Player starts out giving the user the ability to browse through content, but at some point the user finds a video to watch and now browsing is a secondary action with the watching being the primary. The transition of the browse area to a list on the right keeps the user aware that the browse capabilities are still there but are not taking up the main focus space)

Trust your instincts and later have it validated by usability tests:
If you have a seasoned design team, there is a good chance that they intuitively understand how users interact with applications. They may even come up with a paradigm that hasnt been established yet but may be a great idea (for example, a lot of sites now offer tag clouds that I prefer to get to the more interesting parts faster, but who came up with that ?). Dont be afraid to try something different. But validate the paradigm through usability.

Prototype, prototype, prototype
Nothing beats a prototype.

Share Everything
The XD team has an internal wiki where all the designers upload their work everyday. They then work off of each other’s ideas.

Passing of Mark Belsterling, distinguished member of the Flex community.

I was shocked to hear today of the passing of Mark Belsterling, one of the main voices of the Flex community in Philadelphia and indeed the world. Mark was the manager of the Philadelphia Flex User Group.

Mark passed on this Saturday, Sept the 8th.

I met mark a few months back when he came over to interview with us at CIM. I was struck by how much Mark knew of all things technology related. Mark had a very unassuming nature but had the experience to humble many veterans in the online domain. And it was really obvious how passionate he was about Flex. He started the Philadelphia Flex User group in June filling a need a lot of us were feeling. He had been having heath issues over summer but still found the energy to organize the meetings for the groups. I met him last at the Air bus tour event at Philadelphia.

I offer my condolences to his family and friends. His presence will be sorely missed.

New Flex Component: ScrollImage

ScrollImage is kind of like Flash ScrollPane component. The component takes any image url and loads the image putting scrollbars around it to allow the image to be scrolled. While the same effect can be created by using the Image inside a Canvas container, this implementation is much more efficient since its not creating a heavier container object.

I wrote the ScrollImage container as I was trying to understand the basic ScrollControlBase class that all controls that have scrollable content use. If you are a Flex developer, the source of the code should be very instructional. I have commented it out a bit and most of the code is self explanatory. Check the component out here and view the source here.

[Video] DiggGraphr Desktop 1.0: My entry for the Air Derby

DiggGraphr is finally mature enough for me to give it 1.0 status. I finally got around to implementing the features I have been meaning to for a while, including auto update and inline browsing using the HTML control in AIR. The code for it wasnt difficult but the change in user experience is pretty phenomenal. You can read more about it and grab the latest version from http://www.arpitonline.com/blog/?page_id=63.

I captured a quick video of the application in action so take a look. Its grainy but you get the idea. You’ll have to download the app to check it out.

7 Reasons to consider Flex

In response to another annoying Flex bashing article on Digg, I though I’d post my response and get some facts straight (I basically take all his ‘facts’ and respond to em so read the other article in paralllel). Funniest thing is, they are trying to sell a proprietary AJAX framework and scare their prospective customers with “Flex = vendor lock-in”.

Also I would like to emphasize that I love AJAX and javascript and I feel that they have a need to fill just as much as Flex does. This is just to make sure people have their facts straight when choosing a technology.

1) Adobe Flex effectively don’t care about any of the web standards we have spent the last 4 decades building!
Actually it does. AS3, which Flex is written in, is trying to be the ECMA reference implementation. ECMA is the standard that Javascript is based on. If anything, normal browsers fall short of actually implementing the spec correctly. This will get crazy again when Javascript 2 comes out when you will have to check your applications in multiple versions of Javascript running on multiple browsers. Your QA time will most likely double.

2) Adobe Flex is a BINARY RIA Framework!
Umm….so? You still code it in text and compile it like Java or C#. Binary code keeps file size smaller. Its better if you also come up with a funky UI and dont want others to copy the interaction by just copy pasting the code into their app. And if you DO have a serious application that you want to deploy, dont you compress your javascript files ?

3) Adobe Flex will effectively render your website invisible to Search Engines:
Are you creating a website or an application? If you are creating something like cnn.com in Flex, then its obviously the wrong technology. However, most of the AJAX examples I have seen that AJAX library vendors try to sell are mortgage calculators and the like. How on earth does google index a mortgage calculator? And if you are using AJAX, googlebots still cannot make asynchronous calls to your server. So for indexing AJAX applications, you still will have to resort to the same techniques as Flex/Flash applications.

4) You don’t know the technology needed to use Adobe Flex!
This was the funniest point I saw on the list. Basically it says: “I dont know it so you dont know it”. Flash and actionscript have been around for a while and AS3 is not that big a leap. Flex, as a framework will have to be learnt but no more than any ajax library by a javascript developer.

5) You don’t know who’ll win (Flash vs. Silverlight):
The flash player aint going away anytime soon. Ask yourself this: Will my application outlast youtube, google finance, etc? Are you willing to bet that Google, Yahoo and other huge companies who have invested in Flash dont know what they are doing or chose Flash callously?

6) Adobe Flex is immature technology!
Flash based RIA (rich internet applications) came on the web before dhtml/ajax ones. Flex has been around for 2+ years and we are now approaching version 3 of the framework. And Flex unlike javascript and AJAX is being groomed as a technology for applications. For example, you have stuff like Flash Remoting that let you manage client server interctions between flash and serverside code without actually serializing your messages into XML. You also have paged data support in Flex when rendering huge sets of data, and the true power of the Flex framework shines when dealing with huge amounts of data (The javascript vs. Flex results are just obscene).

7) Adobe Flex is lock-in technology!
Um, no! Flex is an open source framework that runs on the Flash player which is owned by Adobe. Sun owned Java but Java is still the language to beat for enterprise level applications. When you are trying to avoid vendor lock in, a lot of people choose Java.

Maybe the next blog will be where Flex outshines AJAX, unless someone from the community beats me to it.

Ever used LoaderContext?

Kevin, another Flash/Flex developer on my team, has a good poston his blog on the LoaderContext class and using it for getting access to the BitmapData object of an image loaded off a domain other than the one hosts the swf. I never tried this with AS2, so when we were unable to get BitmapData off a domain that had the correct crossdomain policy file, he was convinced that it could not be done since apparently AS2 had no way to do this. AS3 introduces the concept of LoaderContext that checks the crossdomain.xml in such situations. The LoaderContext is an optional parameter to the Loader class’s load() function. Whats weird is by default, the Loader doesnt which is counter-intuitive, since all other such crossdomain look ups do.

I am excited about the presence of LoaderContext though since another thing it allows is loading classes to their own ApplicationDomain, which means the potential for class collisions is virtually eliminated. When would this be useful? Well, for one if you are loading swfs using the same third party libraries, but there is a potential that someone tweaked some part of it making it behave slightly different. In my world this is a very real issue. I am just bummed that the code that I have such issues with is still in AS2 with no such security mechanisms.

Anyway, check his post out. While he talks about the Image component, the same idea is valid for the AS3 Loader class.

onAir Philly: DiggGraphr Desktop gathers more goodies

I should have posted about this earlier but I have been really slammed with work of late. However I did manage to get away for an evening as the onAir bus rolled into Philadelphia. It was really a cool evening (evenings with free beer usually are) and I did manage to meet a lot of people from the Philadelphia Flash and Flex user groups. The cool part though was the DiggGraphr won an award for the hot air contest run by the Philadelphia Flash UG. I now have the web premium pack from adobe sitting at my desk. sweeeeeet! If you havent tried DiggGraphr yet, try it out and let me know what you think.