Here’s the description:

So your client asks you for a mobile app that needs to run Android and iPhone. While both platforms have their strengths, designing and deploying for both can be a challenge: The development environments are very different, and their interface patterns are different enough to require different interaction design. On a lot of client budgets (and for design shops that have traditional web dev backgrounds), this can be troublesome.

To solve this problem, mobile frameworks based on traditional web technologies such as HTML/Javascript have emerged. We’ll take a brief tour of Sencha Touch and jQuery mobile, two frameworks that allow you to build cross-platform apps. (As an added bonus, we’ll look at how designers can theme Sencha Touch using LESS/CSS).

We’ll also take a brief look at how you can use Phonegap to get your apps ready for the various app stores.

Understand users, then ignore them

People are notoriously bad at predicting their own behavior. When you design, watch what they do, and then go design. Henry Ford had a great quote, “If I had asked people what they wanted, they would have said they wanted a faster horse.” The amount of user research you do will vary based on your project, but just make sure you do some*.

Build only what’s absolutely necessary

It’s can be very easy for coders to add feature to digital applications. Marketers encourage this so that the product sheet is longer than competitors. These new features have a huge cost beyond the initial coding though:

• They have to be tested and documented.
• They have to be designed. To do this well takes time.
• Most importantly, they’re another thing for users to learn or evaluate, and can often dilute other more-important features in the UI.

Support the users mental model

A “mental model” is a construct people use to help them understand new objects in the world. For example, we all have a mental model of a car. If we see a go-cart, it may not be the same, but it’s close enough to a car that we could most likely operate it. This is because our mental model of a car is sufficiently accurate to work a go-cart. We can use this in digital design to help users understand our application. If there is good mental model you can use for your application, it will go a long way in helping your users understand how to use it.

Turn beginners into intermediates immediately

Beware the blank screen. If a user is new to the system and there is no data in it yet, replace that blank screen with a tour or a video to help them learn what to do. Users don’t read manuals, so you need to make the system useful to the novice with them. Watch new users, see where they have the “what do I do next” look, and then add contextual, inline information to help them

Prevent errors (or handle them gracefully )

Dealing with errors and user input is often regarded of as one of the least interesting parts of application design, and thus is usually done very poorly. The reality is that good design in this area can be the difference between and application being successful or not. Design good forms that are easy to use. Craft good copy for your forms and dialogs. Two great books on this subject are, “Defensive Design for the web” by 37 Signals and “Web Form Design” by Luke Wroblewski.

Reduce

Get rid of features you don’t need. There’s an expression called “Kill your darlings” in the design field. It means we have to be willing to get rid of things we have worked on unless we are absolutely certain they add value to the application. If you want to see a fun example of how to reduce, check out the the “We sell fresh fish here” story.

Make it fast

Push your developers and designers to make the fastest app they can. Slow applications simple *kill* usability and perceived usefulness. Speed is what put Google where they are now, and the are absolutely fanatical about it in all their products. I recently ran across a great site called Bagcheck, which allows users to share lists of things they are interested in. The site’s functionality is great, but what is amazing about it is it’s speed. It is simply the fastest web app I have ever seen, and this speed makes it absolutely delightful to use. If you’re interested, you can read about how they achieved this performance.

*The only time it might be appropriate to not do user research is if you are designing self-referentially (ie, the app is something you would use). The designers at Apple don’t need to ask users what they need in an iPod since they have a lot of experience with digital music devices.

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.)