Nearly 1.5 years ago, the Adobe community was treated to a demo of Codename Thermo at Adobe Max in Chicago. Thermo is a next generation tool for designing and developing RIAs. It’s come a long way since then, renamed Flash Catalyst and had a significant refining of its purpose in many many presentations by Adobe personnel, evangelists and community members. The title of this post, making reference to the mythical beasts of lore like the Griffin (Gryphon), is an allusion to the fact the Flash Catalyst is no small bit of work. It draws from the complete Adobe software catalog for various pieces of it’s makeup. It’s got a little of Adobe’s complete DNA strain sprinkled throughout it. Built on Eclipse (like Flash Builder), complete with drawing tools (like AI/PS/FW), possessing some timeline functionality (AE/FL), allowing for interactivity and design time data (FL/DW), Flash Catalyst is one tool from many many sources. Can something so varied in heritage and huge in scope deliver? Well, the community at large is just starting to determine that.

The Flash Catalyst beta (FC) has been in the hands of the general public for a week or so. I’ve been playing with it, too. No question about it, it’s a cool tool. The potential to create fully custom skinned MXML based apps leveraging the Flex framework by designers is very near a “holy grail” of XD judging by the level of interest around this application. So, what’s on everyone’s minds now that it’s more than a MAX demo or screencast?

First off, the toolkit… It’s a little feature incomplete to be used for production work right now, since it’s missing a large number of absolutely necessary components for proper RIA design and development. I’m sure they have planned to dramatically increase that number of of available components, but I’ve started a list for that in the user forums, here, to serve as a community point for discussing this topic. It can’t be easy thinking through the nearly limitless permutations of Advanced Datagrids, Item Renderers and ways that components can be combined and then providing a bridge between design tools, so it’s no surprise that some of those pieces are still absent from FC. The Flex framework is mature and robust, and providing Spark components (the new Flex 4 SDK components) for the entire suite is a big big undertaking. This is largely an effort of dumping tons of resources towards finishing this, so I’m confident this will be taken care of prior to sale.

Secondly, the use cases… There are a number of users/community members out there still a bit confused about how and when FC would fit into their workflow. Most have to do with questions about integration with various Adobe apps, but some deal with roundtrip issues and integration with Flash Builder. An interesting post on that can be found here. I don’t think Adobe can possibly make everyone happy here. There are simply too many masters to serve.

Thirdly, the app has some pretty big stability issues and install problems for a good chunk of users. I’m not going to link to each one here, but a quick scan of the topics in the user forum shows a full third of the posts are about basic app launching issues and very basic feature issues. Now, of course, these issues will be fixed prior to release, but it does go to show just how very far they have to go to get app performance up to par for a retail release. I wouldn’t expect a Flash Catalyst release party at MAX… as awesome as that would be. There is so much un-Eclipsing this Eclipse build, so much Adobe-ying to do. I’m sure they want this app to feel like a CS family memeber, and it’s close, but there is a ways to go (just export the project and read “Invoking Flex” as the progress bar advances, examine the Edit menu using Eclipse icons, note the missing preference panel, play around with the code view a little) before it’s an Adobe app.

So, enough complaining, what are some of the real bright spots in this tool so far?

• Illustrator and FC go together like peanut butter and jelly. I’ve imported a dozen or so AI files into FC and had only minor aesthetic issues with any of them. This bodes well for my RIA mockup tool of choice and FC working well with each other.
• The tool is a fantastic wireframer! I use Omnigraffle pretty much exclusively for this now, so it may be tough to usurp this for me, but if FC continues to add widgets and an extensibility layer to allow new components to be added to the basic library, I can see big big things for this. One of my biggest problems with doing wireframes revolves around it essentially creating a dead document. There is not really a tool out there that allows you to take a wireframe and use it as a part of your final deliverable. Flash Catalyst looks to proivde a way out of this.
• It really does work as advertised. You can indeed wire up a CS4 created mockup to XML schema in minutes. Not kidding here.Very nice!

So, to recap… Not complaining about the tool at all. In fact, the contrary. FC is a brave new world in RIA design. There are so many unknown tricks and suprises in this mythical software beast, though, it’s difficult to see how to get to a downloadable purchase from where we are today. The product is sure to elate many, and possilby disappoint just as many as well, at least in this 1.0 release. I’ve got high high hopes. Maybe that is part of the problem.

How about you, are you enjoying the Flash Catalyst beta? Is it what you expected? Where do you this fitting in your workflow? What part of this Gryphon are you most interested in?

I’ve been talking to a lot of people at conferences and other events lately regarding RIA design and development. I’m noticing something. Maybe a trend, not sure yet. So, here it is. I feel silly talking about RIA as a separate type of app apart from the standard web app. It’s almost an unnecessary qualifier at this point. Roll with me on this for a moment if you will.

RIA as a term, as a mindset, as a bold new direction was needed when Jeremy Allaire wrote the white paper prior to the release of Flash MX (2002). Most web apps were staid, slow, and unwieldy. There was a new type of app percolating though. These were very different. They were rich, interactive, allowed for asynchronous communication between the client and the server increasing perceived responsiveness and enhancing the user experience. There needed to be a term applied to these new apps that were beginning to be concepted created and deployed. Thus, the birth of the RIA. I’ve written about this before.

Flash forward to 2009 and you’ll be pretty hard pressed to find any consumerized web apps that don’t have some layer of RIA tools or techniques being employed to enhance the UX. Nobody is blogging about the hottest new monolithic server side bean, dll etc that requires a maddening combination of Konami code-like query string mumbo jumbo delivered to it on a page refresh induced GET request. I’m pretty sure there isn’t some sort of Bizarro world of web design that is holding conferences with ugly Macs and stone faced developers talking like cavemen plotting to fill the world with crappy web apps and taking down Superman.

So, this begs the question… Is the term RIA needed anymore? What is it a unique qualifier against that makes it valid as a term? I would venture to guess… Nothing. Aren’t RIAs just IAs? Or maybe with the widespread use of cloud based apps and SaaS, they might just be As.

With this in mind, maybe it’s time to coin the next three letter acronym that is conference worthy. Let me take a couple stabs here.

• “CIA” ‚Äì Context aware Internet Application: This app knows where you are, when you are and what you are seeking. The app experience scales, shifts and changs if you are mobile or on your desktop, and knows that on the day of your flight when you visit AA.com on your phone that you don’t care about buying tickets, but you might need a reminder on baggage requirements and which gate you should be looking for. This shift in app dev is just getting underway, but the actual context shift is largely done by user agent detection and crude URL hacks like subdomains, etc. Look for a big push in this in the next gen of apps, especially as more devices make location aware apps easier to deploy reliably. This acronym also has the benefit of making you sound like a badass spy.

• “PIA” ‚Äì Personalizable Internet Application: Your iTunes experience is not mine. I haven’t ever bought a TV show. I don’t want to be promo’ed a TV show ever. Ever. You, on the other use iTunes to dl Jon Stewart, and have never heard of Crystal Castles, Peaches or LCD Soundsystem. You see where I am going with this. Personalized pages, portals and expereicnes based on use patterns and preferences. Apps that learn how to be better by tracking how you use them! Amazon is obviously a leader in this, but yeah, they have a huge database and an army of developers. Most people don’t. The algorithms to handle this sort of analytics and content filtering might just be the next wave of 3rd party APIs or cloud based web services to allow your smaller apps to apply these laws of large numbers and trending to a smaller 300-500 item SKU db using a larger sampling database to help with the metadata matchup. This acronym is also the airport code I fly out of, bonus.

So, what are your thoughts on this? Does the term RIA still stand up? Is it a valuable differentiator? How about the next big things in web app dev. Obviously things like persistant connections and binary services, push services etc are big and coming and game changing for certain reasons, but I’m not sure if they are as big of paradigm shifters as the RIA was.

2 years ago, I wrote a pretty dismissive post about my views on Silverlight and where it would go. Then, a year ago I followed it point by point with another post to see where things had improved. It wasn’t that impressive. So, here you go… a bullet point by bullet point update, 2 years into it.

• No IDE for me – With some work, you can compile Siliverlight using Eclipse. I still want Blend on my Mac.
• No plug in for Linux - If you are a Linux user, you can download yourself a hobbled Silverlight version. Sounds fun, right?
• Market Penetration = Demand - A few months in, Flash player 10 is already over 60% market penetration. Microsoft still has yet to publish any sort of numbers on what sort of percentage of web users can use Silverlight content. It’s been two years! It’s estimated that the number is around 25%. Here’s the kicker though, IMHO, not a single remarkable rich media site has been created to showcase a new movie or recording from a band or singer using Silverlight as it’s sole delivery platform. MS is getting killed here. I’d love to get some info that disproves this, so if you can share something, some links, etc, please comment on this post.
• The Growing Mobile Content Market -Alright, so Adobe’s mobile strategy is pretty shoddy. MS hasn’t really capitalized on this though, so I’d call it a wash.
• Maturity – SilverLight is just entering it’s 3.0 version. They’ve added some cool features like multi-touch, that clearly eclipse the interactive design features on the Flash platform, but most of the additions and tweaks are really just MS playing catchup (eg. H.264 support). SilverLight out of the Browser doesn’t make a whole lot of sense to me at all. If you have the .Net platform to deliver to, why worry about delivering a hobbled .Net app when you could have a fullblown WPF exe?
• The Developer Community - Obviously the .Net crowd is huge, but I’m not seeing any high profile defections, even in this down market, where developers should probably be trying out new tech to improve their marketability.
• CS3 ‚Äì Microsoft still has no creative suite competitor.

So, beyond the bullet points, some things to consider. Silverlight was the video platform for MLB. They got pitched out for Flash. Silverlight was the video platform for the Olympics on NBC. They got dumped unceremoniously. Ouch. These two Defections really have to hurt. Silverlight needs customers like this to push adoption, but as it is right now they have a big chicken and egg situation on their hands.

That said, the tech is good for the industry. Really, Silverlight is doing a lot to push Flash’s advances. I also believe that the duoply of binary plugins, Flash and Silverlight is leading to a ton of innovation in the non-plugin RIA dev space. JQuery is super advanced, HTML 5 and CSS3, the Canvas tag, on and on. A lot of good things are happening right now because of this healthy competition.

There are some cool RIAs coming out in the Sliverlight space, Redliner being one of the best, IMHO. BTW, my favorite Silverlight “feature”? The fullscreen alert that appears when watching a video and the transition from an embedded video to a fullscreen video view on Silverlight is way nicer and smoother than the same function on Flash. Don’t believe me? Go to that Redliner site, watch the video and then jump to fullscreen… then do the same on Youtube. Which one looks designed? Which one looks cobbled together? Flash needs to allow for skinning of this message and better handling of the blank screen syndrome when going fullscreen.

Also, the recent additions of streaming services for Silverlight to IIS is a great move. Adobe, are you paying attention? FMS/FMIS might be priced a tad high now, comparatively, don’t ya think? Hmmm… free versus $995.

So what do you think about all of this? Is 2 years of Silverlight “experimentation” by MS enough to expect better results? Is this about where you thought it would be? I’d like to know what metrics MS is using to gauge it’s success.

Friday May 8th 2009… approximately one hundred designers and developers joined together to meet, talk and learn about Rich Internet Applications (RIA) at RIAPalooza 2. What a great day! Kevin Hoyt from Adobe was there, Michael Labriola, Josh Holmes, Steve Holstad, Corey Miller, Adam Flater and Pek Pongpaet, myself and Erik Peterson all presented on various topics related to RIA. Some nice work all around! You can see the session listing at the site, and hopefully many of the presenters will publish their notes and slides so that you can get your hands on these great topics.

I’m sharing my slides here. Please feel free to download ‘em!

Last Year I attended RIAPalooza, a conference focused on the design and development of Rich Internet Applications. It was a fantastic event, with a lot of great presentations covering AJAX, Flex, and Silverlight. I wrote a recap about the event, here.

The event is happening again this year, on May 8th. It looks to be another awesome lineup of sessions. One change from last year… I WILL BE PRESENTING THERE! I’ll be speaking with a coworker of mine, Erik Peterson. We’re going to be covering a site that is about to launch for a Chicago museum. The site features an Open Source CMS, AMFPHP, Flex and lots of cool social media integration points. We’re going to be discussing not only the nuts and bolts behind what makes it work, but also the process to get from the sales pitch to the finished product. Should be a great talk!

In addition to my session, Roundarch will be there, Josh Holmes and Mike Labriola among others. This is a great opportunity to see some platform agnostic information, with technology taking a back seat to the bigger issues in RIA design. It’s a cool way to learn a little bit about Silverlight, AJAX or Flex, too.

Best of all, the event is only $20 and includes lunch, a T-Shirt and free beer after the sessions! You can’t beat that with a wiffle ball bat. Register now.

Just a quick note to clue my visitors in on a fantastic little Firefox addon/cross platform app named Service Capture. From the site…

ServiceCapture runs on your computer(pc or mac) and captures all HTTP traffic sent from your browser or IDE. It is designed to help Rich Internet Application(RIA) developers in the debugging, analysis, and testing of their applications.

It is a time saver and a conundrum killer. It’s a verbose little HTTP sniffer, Flash tracer and bandwidth simulator all in one. It thoroughly rocks. One thing that it certainly shows, is just how many people publish SWF content without either removing or turning off trace statements before pushing files to their sites.

Besides Flash Trace statements, it shows XML files, AMF requests, system logs and tons of other stuff. It’s $35 well spent. I’m always looking for little utilities like this to help me out, so if you have some you like to use, let me know, I’ll check ‘em out.

I have shared tools, and components and source code libraries here in the past, primarily focusing on free and open-source libraries. I do enjoy using and getting to contribute to these community projects, but sometimes, there is no way to get around it, you just have to buy a component or plug-in to get the project done. When doing so, it’s really difficult to separate the wheat from the chaff. Here are a few commercially available tools or components that I have used that aid in creating web, RIA or other rich-media experiences like kiosks or tradeshow pieces. There are some add-ons that I have used in the past that I haven’t included here because they were troublesome or too buggy for final use, so view this as a list of only the ones that have stayed in my toolbox after a successful deployment.

• FlashLoaded’s 3D Wall/Spiral/Tube, etc – If you want to create a simple 3D gallery or touch-panel display, need it done quickly and don’t have a lot of time to to learn Papervision, this relatively inexpensive group of component will achieve most of your needs. It’s pretty much bug free and does have a fairly large and accessible API for managing and working with the properties, methods and events in the component. You can integrate video into the the 3d planes, and put interactive SWFs in the panels as well. Pretty cool. That said, if you are already adept at Papervision and have a grasp on how you might want to build image galleries using the library, this product would have very little use to use to you. FlashLoaded does a respectable job at offering support, updating the components when there are bugs or issues and even adding features after a components release, offering updates free of charge to registered purchasers. They are worth a look.

• JumpEye Component’s Menus – JumpEye is a well known rich media design/development consulting company, but they also offer a wide variety of components for sale at their JumpEyeComponents.com site. The menus they have there are pretty good in particular, and fill the void created after Adobe Flash CS3’s release, when the more advanced menu components and accordion panel were inexplicably removed from the product. It’s a shame you have to purchase a replacement for a component that Flash used to ship with straight from Adobe, but it seems that advanced UI components, etc have been migrated out of Flash and into Flex. This site has a number of add-ons available that help you overcome that shortcoming if you need to produce some advanced UI in Flash. For the price, it’s tough to argue for custom development of a menu when a deadline is looming. Highly cusomtizable and powered by XML, the components are flexible enough to make them useful for a wide variety of implementations. Find out more here.

• IconFactory’s IconBuilder- Do you find yourself needing to produce a wide variety of icons for AIR apps, Windows apps, Mac apps, websites, favicons, etc? If so, this will save you a ton of time. If all you ever need is a Favicon from time to time, this probably overkill, but Iconfactory’s IconBuilder is great for simplifying the process needed when moving through the design process for multi-sized icons inside of Photoshop or Fireworks. It can create icons of pretty much every size dimension and palette, even helping you verify how the color indexing will look for final output to older, or smaller icons used in list views, etc. It’s pretty indispensable for that reason. If you are delivering custom apps for clients and you aren’t creating custom icons for those apps, step up to the plate and add some polish to your deliverables. It really finishes off the presentation. This app is $79 for Mac users, $49 for Windows users, but the Mac version does have a few extra niceties for the extra $.

• ixis’s (formerly Softheap) Public PC Desktop – Have you ever produced a kiosk for use at a trade show, exhibit or other installation? How did you lock it down? You know, prevent those pesky users from monkeying with the system? An absolute necessity. This $80 app is super handy for keeping nosy people out of the OS. You can lock down the computer via a white-list for applications, URLs, services, firewalls/proxies or pretty much anything else. Additionally on lockdown, you can have Public PC desktop auto launch your kiosk app. This helps in the daily routine for a exhibit when the computer reboots after being off for the evening. I wouldn’t dream of putting in a touchscreen at a remote location that didn’t have some level of protection on it. This is a key step in setting up that final disk image that gets shipped on pretty much any project we do. This app is by no means the only out there that does this sort of thing, but is probably the easiest to use that still offeres enough configurability to fit your clients needs. The site is pretty poorly designed, but here is a link directly to the product page.

• Zoomifyer – This app gets a bit of use from time to time by me. The intelligent slicing, loading and simple navigation UI it adds for deep image viewing, panning and scrolling is pretty nice. Advanced hotspots, event management and other interactions make this a very nice choice for making an image viewer app. A simple version does ship with Photoshop, but the full product adds a suite of bells and whistles that make the upgrade worth it. To do this sort of thing by hand, you’d need an army of graphic prep artists and a very regimented workflow to ensure the proper consistency. Check out some samples here.

• Multidmedia’s Zinc – More than just a plug-in, this IDE allows for Mac, Windows, and Linux applicaiton compilation. Wht’s the big deal? Why would you use this instead of AIR? Well, not a lot of major client I encounter have made the jump to AIR yet. On top of that, Zinc compiled apps have deeper access to OS level APIs, file IO, Database connections and much much more. This compiler really does take your Flex or Flash app and turn it into a desktop program. It’s got an impressive list of features. My main complaint against it is that the developers seem to prize a rapid release cycle over a robust testing cycle, so sometimes even minor point updates can break previously stable code. I have learned this over the years and now only update Zinc after reading the suport forums and ensuring that the most recent release doesn’t mess things up. This is by far the best SWF to EXE tool out there IMHO, and I have used pretty much all of them. Check it out. Absolutely worth the $ if you have projects that require this sort of functionality.

So there you go, a group of tools I have found useful in my projects over the last couple of years. These get used again and again by me and my team, and maybe you will find a use for them as well. Got others in your toolbox you keep going back to? Share ‘em with me by leaving a comment.

About a year ago The Iona Group created a presentation viewer tool for the International Mission Board. I wrote a post on the tool and explained some of the key features in it. We were contacted by the client several months after the launch and asked to make some UI updates and some feature additions to the tool. We gladly obliged as the client was great to work with, the work was rewarding and the application is just really really cool. In it’s simplicity, it excels at providing a seamless well put together presentation and has some nice social/sharing features that allow the end users to really stretch the tool.the new codebase is live. Check it out here: http://commissionstories.org/

We owe alot of the success of the tool and the revision process to Flex. Honestly, the maintenance and the agile changes required to make it work would have been unnmanageable if developed without the Flex framework. We also use Degrafa in the app, too, so it really does have some nice things running under the hood, too.

It handles pictures, video, audio, SWFs, and the now defunct Flash Paper. It does Ken Burns effects, smooth dissolves and other types of transitions, too. It can go fullscreen, be embbedded in other peoples siites via the share code and can even be downloaded as an EXE or and Adobe Air app. All in all, a very cool ap and one we are proud to be part of.

A little over a year ago, I converted my then dormant domain, Mediadinosaur.com, into a gossip focused news aggregator (previously, it was a media/celeb focused community and blog). It now captures feeds from a number of high profile celebrity rags (Egostastic, TMZ, E!, WWTD, etc) and lets you get your fan fix in one centralized place. I built it in Flex to highlight the ease of use of the Framework and the power that the HTTPService and E4X gives you in getting and parsing XML. I’m using the site as an exercise for my Mashups and RIAs class as an introduction to developing with Flex and a easing into the concept of reading and using XML feeds and services for students that may have never used either of them. So let’s take a look at how this all comes together. (more…)

In my presentation last week at CD2, I mentioned I would provide a list of the resources I recommend using as reference in designing application interfaces. I thought I might get a chance to blog that list this past weekend, but I was a tad busy, designing interfaces for an RIA, naturally. We at Iona have a great app coming soon that uses CakePHP, AJAX, Flex and a whole lot of experience developing superior elearning solutions in order to create a fantastic RIA. That’s pretty much occupying my time right now, but I needed to get this list together.

That said, when I need to sit down in front of my diagramming tool of choice, OmniGraffle, I like to have some references to tap in order to ensure I am making the right choices. I might not use all of these every time, but I certainly do refer to them once and again. I hope you can find a couple of these useful in your work, too.

1. Designing Interfaces – Jennifer Tidwell: A newer book and one that many may not have in their library yet. This book is currently in use in my Mashups and RIAs class, and I can’t recommend it strongly enough. It is a virtual library of great UI analysis. Pretty much every modern UI pattern in play today is dissected and explained when and why it works. A must have.
2. The Visual Display of Quantitative Information -¬† Edward Tufte: Not really UI focused, but a necessary academic resource for all UI designers to have read. It’s no nonsense approach to data display and intolerance for bad design will not steer you wrong. A bit heady at times, this beautifully printed book is one you can open and read a little bit at a time and keep for years. The information in here is not going out of style anytime soon. I really got a lot out of reading each of the Tufte books, but this is his hallmark title, IMHO.
3. Information Dashboard Design: The Effective Visual Communication of Data – Stephen Few: Lots of pictures and a short book. This title is all about explaining quick and easy data display. Charts, graphs, widgets, etc. Not heavy on interactions, but a good resource for effective infographics.
4. Design of Everday Things – Donald Norman: This book should have you appreciating the nuances in the design of products you use all of the time. Hopefully some of that thought process will rub off on you when create the GUI you’re about to slave on.
5. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition -Stephen Krug: I’m sure most of you have read this. It’s a very common sense approach to basic ideas behind web usability and may be one of the best known books on the subject. For those of you who haven’t picked it up yet, please do so. It may seem sort of obivious to many advanced designers out there, so if you are very experienced with topics like user testing, etc, you can probably skip this one.
6. The Art and Science of CSS -by Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams, David Johnson : A simple book, no doubt, but this one has some real nuggets of CSS genius in it in regards to styling tables and form widgets. Some nice subtle effects get pulled off in here, so this one is shared with my students very often. Dates, lists, calendars, all kinds of things that can be really really boring screen elements get a bit of polish here. Nice touches all around.
7. Getting Real – 37 Signals: Not really about graphical user interface design at all, but it should definitely help you make some hard choices in your application’s functional design. Think simple, release early, release often. Build half a product, not a half ass product. On and on. Indespensable.
8. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers (Interactive Technologies) – Jeff Johnson: This is a tome. Well over 500 pages. This teaches by illustrating major gaffes in UI design. It’s not an overly entertaining book, it’s not meant to be a graphic novel but rather a text book. Many of the apps detailed in here are showing there age, but I believe there is now an updated “2.0″ of this book. I haven’t reviewed that version, though.
9. Human Interface Guidelines – Various: Be it Apple, Sun, IBM, Microsoft or Adobe… all of your favorite dev/design centers have great topics for making informed UI design choices for your audiences. Don’t overlook them just because they are obvious. They get updated often and are pretty much always worth spinning through when starting a new project.
10. Creating Visual Experiences with Flex 3.0 (Developer’s Library) – Juan Sanchez & Andy McIntosh: Not technically available in stores yet, but a great great resource for understanding the powerful design tools in Adobe Flex. I was granted an early copy for review and it was a very satisfying read. RIA design with Flex is as much an art as it is a science, so dig in here. This book is really well laid out and has tons of great images.

So, there you have… some guides I find useful… Of course, I am always looking for new books and sites to add to my collection, so, let me know, what books are you using to help you with app UI design?