Prototyping

Catalyst has turned out to be a great tool for prototyping interactive applications. It allows me to communicate interactions with developers very quickly. One issue however: It does not have many of the built-in components (like tabs, folder trees, panels, etc) you need to truly prototype enterprise applications. Considering that this is the market for Flex, this is a big issue. Perhaps when the official release comes out this will change, but I doubt it.

Grade: B+

Designer / Developer collaboration on Flex Applications

Another advertised use of Flash Catalyst was the ability for designers and developers to work together in same file format. You can do this with Flash Catalyst and Flash Builder, but it’s a one way trip Yes, you heard that correctly. Once a designer hands over their Flash Catalyst file to a dev and they change anything, it cannot be read back into Catalyst. This is a major shortcoming to say the least. Adobe says count on it in a future release, but considering we’ve waited a year and a half for version 1, I’m not holding my breath.

Grade: D

Widgets for Web Sites

Flash Catalyst really shines in this area. It is super easy and fast for designers to create widgets and banners for their sites.

Grade: B+

but….

After following the Flash Catalyst forums on Adobe’s site for the past month, it is becoming clear that the real demand from designers is to create *sites* using Catalyst; the issue is that it is *terrible* at this. The SWF files it generates are *huge*, and there are no tools in the application for image compression and optimizations.

Grade: B+ … C-

Conclusion

Even though Flash Catalyst is a great prototyping tool, it falls short in the Flex Enterprise Application world. It also appears that they missed a big opportunity: a pent-up demand from non-technical designers who want to create websites in Flash. Again, Flash Catalyst falls short in this as well.

Sadly, at this point in the game, I don’t think there’s much hope in things improving for the 1.0 release. In the future, it might be desirable Adobe to split the product into 2 versions, one for Flex Application designers and one for Web Designers.

Ok, now back to prototyping with Catalyst. Which it does rock at.

“Sure , no problem…” you reply. Since they loved your new design, these are trivial changes.

Fifteen iterations later, you realize they are taking your new design back to their current design. The funny thing is that everyone loved the initial design. But over time, everyone keeps steering you back to their current design.

What is going on there? Why does this happen?

In my experience, there are two factors at work here:

Factor 1: Mental image “burn-in”

If you are old enough, you might remember monochrome monitors and how they were very susceptible to image “burn-in”. If you left the same image on the screen for a long period of time that image could become permanently “burned in”.

I think the same thing happens with interfaces and our brain. Over time, the gestalt of a design sinks into our brain and we have a hard time imagining it being any other way.

Solution: User testing

Have clients sit and watch how their users don’t share any of their preconceptions or biases; they have no “burn-in”. Testing can really be an eye opener for the client and does not have to be expensive or formal. I highly recommend using Morae software for this. You can quickly make a highlight reel so that stakeholders don’t have to sit through all the testing sessions.

Factor 2: How can the interface be anything else?

An interface’s design is usually a product of many valid decisions over time made by smart people. If you ask them the same questions now, they are going to have the same answers because they are smart and got it right the first time. Repeat this process for the hundreds of questions/considerations that influenced their interface design and you will travel down the exact same road and come up with the same design. How could you not?

Solution: Ask new questions

I believe that the key lies in the phrase “asking the same questions” above. If you are asking the same questions, you will get the same answers. You will get to the same design. You have to know what the new questions are. Then agree how much of an impact the new changes will have on the existing design.

Hopefully this advice can help you get though some roadblocks you’ve been hitting and get you back on track to making software that users don’t mind using.

Flash Catalyst (beta) is a very cool new tool for designers to prototype their designs. I have been playing with it recently and thought it would be useful and fun to meet up informally and talk about it. I highly recommend downloading the beta version and working through a tutorial before the meeting.

When
January 20, 2010
7pm to 8:30pm

Where
Conjunctured
1309 E. 7th Street
Austin, TX 78702
Map

What is Atlas?

Atlas is an IDE that is very similar to Apple’s Xcode (used to build OSX and iphone apps). Atlas itself is a web application that runs out-of-browser on your own computer; to do this, it starts a local webserver when you start the program. Atlas builds desktop-like applications that run in browsers.

If you want to see a stunning example of what it can do, check out 280 North’s flagship app, 280 Slides, which essentially brings Apple’s Keynote application to the browser.

What’s cool about it?

Atlas is by far and away the coolest drag-and-drop interface builder I have seen for building web apps. If you have any experience with building iPhone or Cocoa apps, then you know what to expect. If you want to see a video showing the IDE in action, check this video made by Thomas Balthazar:

What do you need to know to use Atlas?

Atlas creates apps that run on 280 North’s Cappuccino framework. Cappuccino is basically a port of Apple’s Cocoa framework. To write apps using Atlas, you really should have some experience with Cocoa programming. Atlas apps are written in Objective-J, which is a Javascript variant of the http://www.2sidesdesignstudio.com/2009/11/atlas-overview-xcode-for-building-web-apps/Objective-C used to build iphone and osx apps.

What about the backend?

Atlas is all about the client side. Theoretically, you can use any back-end you want (Java, Rails, etc).

So, should you use Altas or not?

At this point it is hard to say. The ability to build Apple-like apps in the browser is very enticing to say the least. Atlas is well geared toward building enterprise-like applications that are very data-and-interaction centric. That being said, this is very proprietary stuff and you have to completely buy into their framework (similar to deciding to use HTML vs Flash). Overall I am very impressed with what 280 North has done so far, and look forward to seeing how Atlas evolves.

jQuery tools are a set of tabs, tooltips, accordions and overlays that offer those “web 2.0″ goodies that you have seen on your favourite websites. In a very easy to use package.

The components they offer:

• Tabs
• Tooltips
• Scrollable (terrible name, it is a carousel),
• Overlay (again a terrible name, its a lightbox)
• Expose (sort of a reverse lighbox, see demo)
• Flashembed

I would argue that the “Expose” is not really an essential component, but it is an interesting idea.

Go check out Jquery tools

In depth review at Techcrunch

It makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. This technique would be great if it were converted to a plugin for a CMS (WordPress/Joomla/Drupal etc.), but also just very cool to have on your website.

Requirements: jQuery Framework
Demo: http://qpoit.com/marcofolio_demo/apple_search/
License: License Free

(Via WebAppers.)

According to one research analyst, Round Rock computer maker Dell Inc. failed in its initial attempt to bring a prototype smartphone to the consumer market after being rejected by wireless carriers for being—get this—too “Dell-like” in appearance.

Once again, if you don’t take design seriously (be it interface, industrial, visual, etc) your business will be at a serious disadvantage.

This has happened to me many times, and most of the time I am madly scrambling back to emails and meeting notes trying to find who approved something and why. Most of the time this search ends in futility, thus sparking a new design debate on something that had already been finalized.

My question is: how do you guys capture design rationale, and how specific is it? (for example, saying that “Ken X in Marketing approved this approach on Jan 7, 2003 at the status meeting”.

Comments?