A Little Design Love Goes a Long Way for Rich Web Applications

With rich web technology on the rise, it’s easy to get hung up in technology and forget the design. The increasing options to add application functionality (ajax, web services, etc.) make it easy to forget that no amount of functionality can make up for an ugly UI. I contend that as rich web apps become increasingly more sophisticated, those that go the extra distance to provide better visual appeal and ease-of-use will beat out the apps that just have extra functionality.

FlickrGoogleMapsBefore

For the past couple of months we have been demoing a simple Flickr and Google Maps application that I built for our presentation at Web 2.0 Expo. While building the app, I was so involved with the functionality that I kept focusing my attention on what the app could do. But it really needed the attention that only a good designer can give it. So I enlisted the help of our graphics artist, Travis Ryan, to give it a little love and make it look much sexier. Here’s a screenshot of the first version.

Click this screenshot to explore the application.

FlickrGoogleMapsAfter

While exploring this app, try the following:

  • Enter the following tags (These tags consistently have both geo data and comments): geo, bungeelabs, and titaniumwombat
  • Use Google Maps: If a picture has geo data a little globe will appear in the upper-left corner in the results list. If you click on the picture a map tab shows up in the bottom part of the preview pane. Click on that tab to see the picture on the map.
  • Double-click/Drag-and-drop: You can double-click on a picture you like to put it into the “choice pics”. You can also drag a picture from the results area into the “choice pics” list.
  • Open Map: The Open Map button will open a new window with only the pictures from your results that have geo data. Now, if you click on one of the photos the main window will show that picture in the preview pane. Pretty slick, don’t you think?
  • Comments: If a picture has comments a tab will appear in the photo info pane in the bottom center and you can see all the comments left by users.

This was the first app that Travis and I have spent time collaborating on inside of Bungee Builder and it worked out really well. I built the functionality and checked it in and then Travis took it from there and started working on the design. Travis added a resource project and uploaded the images to the datacenter (Bungee Grid). While Travis was working on the design I kept working on some additional functionality to get us to the final product we have now. Is the functionality complete? I don’t think it is. I’ll keep adding functionality as I get time. I’ve gotten more suggestions on additional features since making it look better. My users have much more to say about the app since we made it look sexy and easier to use. Let me know how you would extend the app.

Alex Barnett, Lyle Ball and Ted Haeger will be joinging me at AJAXWorld Sep 23-26th, if you’d like to meet to discuss this app, any other app or BungeeConnect drop me a note in the comments. Also, in the coming weeks developers with a Bungee Connect account will be able to import and inspect this application.

-Brad Hintze

Advertisements

3 Comments »

  1. […] and Travis Ryan recently completed a nifty little Flickr/Google Maps demo app. Brad blogged it on The Bungee Blog, and speaks a bit about it design for rich internet […]

  2. […] 10, 2007 at 10:41 pm · Filed under Blog Some time ago I promised to release the code for the Flickr Google Maps example. I’m pleased to say that now you can […]

  3. […] 17, 2007 at 3:41 pm · Filed under Blog Some time ago I promised to release the code for the Flickr Google Maps example. I’m pleased to say that now you can […]

RSS feed for comments on this post · TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: