Wayne Pan

I just finished watching one of the better YUI Theater talks “Designing the Rich Web Experience: Principles and Patterns for Rich Interaction Design on the Web” by Bill Scott. If you’re an interaction designer, product manager, or general front end engineer I would highly recommend the video.

Scott begins his talk with emphasizing that we need to focus surfacing vocabulary. Rich internet applications continue to mature and in general we all need to get on the same page regarding interaction. Just like the Gang-of-Four and their Design Patterns for OOP allowed software engineers to talk about the discipline using the same vocabulary, all the new interactions on the web need a similar movement.

The rest of the talk covers general principles in designing RIAs. Here are the general talking points, obviously watch the video for a non-bastardized version

Interaction

• Make it direct - Direct manipulation of data on the page. Being able to edit data in it’s read state, inline editing, drag and drop re-org of lists, etc all increase usage.
• Keep a light footprint- Keeping common user tasks easily accessible and in front of the user. The longer (not only in time) it takes a user to do something, the less they’ll do it.
• Cross borders reluctantly - Page loads are speed bumps. Users have to digest new pages, less speed bumps = better flow

Feedback

• Give live feedback - Communicate to user that something is happening. Use a load bar versus ‘loading’ to make time pass faster. Client side validation on forms, etc. YTF technique is a prime example.
• Offer an invitation - Use empty space to invite interaction. Use visual cues to signal to users which parts of the page are interactive
• Show transitions - Transitions/animations are more than just eye-candy. Use them to speed up time, draw focus, visual confirmation

Information

• Think in objects - Don’t view pages as text, think of the user’s mental / workflow process in terms of the objects that they interact with on your website.
• Tie information to interactivity - Interactive elements accompanied by reactive information makes the interface seem more intelligent. (eg. Google Finance / Timeline View)

Click more for the video.
(more…)

Some things that have been spinning around in my head that don’t deserve a whole post…

There was a good post on Ajaxian on the subject of unobtrusive javascript. It points to an outstanding article written by Christian Heilmann called The seven rules of Unobtrusive JavaScript. I understand unobtrusive javascript, what it means, and the reasons why it’s needed. However, there are a few times when it’s just not practical. For example, if your application heavily depends on javascript then having a hard rule to always use unobtrusive javascript doesn’t make much sense.

You can actually gain a few things doing the opposite like performance and even save developing time. (See the video posted on yuiblog.com - Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is Wrong”)

Naturally, it’s best practice to use unobtrusive whenever possible, but when pragmatic enough I can see both sides of the coin.

For all you designers out there, Style Ignite has a very nice article about tracking the web 2.0 trend of horizontally divided pages. Out of those samples, I like Wishlistr.com the best.

Normally I read John Dvorak’s column with a grain of salt (I mean when you make a thousand outrageous predictions, you’re bound to strike gold once in a while), but he had an interesting thing to say about the GooglePhone that puts things into perspective.

People have had eons to program for the Windows smartphones and nothing has come of it. What’s so different now?

Puts the whole OHA/Android thing into perspective doesn’t it.