–Engage

“Innovation has nothing to do with how many R&D dollars you have. When Apple came up with the Mac, IBM was spending at least 100 times more on R&D. It's not about money. It's about the people you have, how you're led, and how much you get it.” - Steve Jobs

Richness isn’t just for the web … [something a bit more topical]

Walking around the city today, it really occurred to me that when we speak of “richness” in RIAs the “I” (Internet) while relevant techologically, isn’t really all that relevant from a designer’s perspective. … well maybe it is.


What I mean by this is that, even desktop applications should add “richness” and way too many of them, do not use the same rules that web designers have been developing while discussing RIAs yet usually one of the defining elements of an RIA is usually said as “to emulate desktop behaviors.”

A few clarifications if you will allow me:
1. Which behaviors are they discussing above? I mean is there really such a thing as “desktop behaviors”?
To not play too much devils advocate here, I believe that what people really want from the desktop is lowered perception of latency between points of user action and system response.

2. But then what is richness if when we say “emulate desktop behaviors” and not all desktop apps have richness?
Lazlo Systems talks about cinematic effects when they speak about “richness” and I really like this perspective. Cinematic effects in my mind coupled with the desktop behavior of perceived lowered latency for me really bring to life the richness factor, and these added effects can bring as much value to a client/server application as it can to a Rich Internet Application.

Cinematic Effects (CEs)
What are they?
Well, I’m sorta a believer in this phrase, “I can’t tell you what [cinematic effects are]. You have to experience it for yourself.” Unfortunately, I’m not going to be able to do that for you, more than point you to good sources of it, in small and large sizes. Surprisingly a lot of typical “post child” RIAs don’t really use CEs. It is also important to know that CEs don’t have anything to do with AJAX though they can be used in coordination with them, and usually because they are difficult to do in JavaScript well, best examples are usually in Flash-based RIAs. But they also exist on your desktop.

But there is a very simple answer for the “What are CEs?” question–MOTION Graphics. When color, text, line, etc. are in motion over time, you have a cinematic effect.

But that isn’t an answer for a designer, because if motion graphics is what CEs are, and CEs are a core component of RIAs, then we enter a big danger of designing a lot of shyte. Oh! many already did that!

So Why? When? What? of CEs
Designers like Luke W. often speak of how “less is more”, so wouldn’t motion be “more”–i.e. bad?

When designers speak of “less is more”, they aren’t saying that a blank page is best and we can’t use any color, line, style, decoration, etc. Even the most modernist designers from the bauhaus, incorporated right-angled white pieces that demonstrated tremendous style through their expert craft of minimalism. They communicated fluently purpose, context and style.

Purpose is the most important element to minimalist approaches. But let’s not even get so locked up into the minimalists of the design world. Sometimes more is just that, more. While there is a risk of distraction, a splash of well timed, placed, and styled “more” can significantly contributing to communicating current behavior, as well as potential actions that users can take. And this is precisely where cinematic effects can have their greatest effect.

The best examples that comes to mind for the power and utility of cinematic effects are two examples, which span the continuum of more < > less.

The first example is our operating systems. Whether you’ve got Windows or Mac OS X, there are cinematic effects used at the very core of the OS. Some of them can be turned off, but who does that, eh? Whether you have a taskbar or you have a dock, when you minimize items to go down into it the system employs a mation graphic response to the action “minimize”.

But why? Let’s put aside for a moment that graphics motion is well enjoyable. Motion does trigger some stuff in the brain, that engages us in ways where static or on/off (make visible/make invisible) simplicity doesn’t quite do. In this case, the motion is teaching you. It is telling you, “Look down here to find me when you need me later.” It is providing you a sense of context for how the interface is laid out, so you can find those elements that you needed to disappear now, later.

One thing that the Mac side does better though is helping you discover if a “hidden” or minimized application/window needs your attention. While the Windows minimized bar item will blink a different color, the Mac OS, icon minimally bounces, but some are designed to go even further, such as Adiums flapping duck icon. As I said, motion engages the mind more than flashing. In fact, flashing bothers us, like a red nasty light. One of the reasons people dislike Web 1.0 so much.

So that’s the heavy handed version. So what would be the more subtle version. Basecamp, by 37Signals, is as minimalist as it comes, even though they are often reported to be doing a lot or rich applications. I actually feel they barely do any. What they do do though is often well thought out, and is usually on the meter of “just enough”.

In their application when you add a comment to a message and click save, your comment is converts from a text field to a non-text field version almost instantly, but its not done. To re-inforce this “irregular” web action, it adds a yellow background to the piece. The yellow color is subtle, but even more subtle than the color is the motion graphic aspect to the behavior–fade. The color fades in, and then slowly fades out after holding for a small period of time.

This minimalist of CE behavior does so much to help the user feel more engaged in the application. The one complaint I have from 37Signals, is that I feel teased in their site. I expect and feel compelled to want MORE! For this moment I feel very engaged and there are other moments where I feel like I’m hitting a wall. This is because they do not consistantly apply CEs throughout the site, and they don’t deploy AJAX consistantly, and they dont’t always use the same structre (i.e. the difference between a Writeboard and a Message feels arbitrary and contrived, though I know on the back-office side, there are reasons).

This is an important consideration to the use of any type of patterns. You need to consistantly deploy it and challenge your assumptions about “this” instance being different from “that” one. Who is it different for?

So is it different for the Web?
Well, I gave a web example and I gave a local desktop example. There are examples on both environments where CEs are used to varying degrees of “more” and well degrees of success. So like I said, it really isn’t a matter for the designer to really care whether or not it is on the Internet or on the desktop. It all COULD happen.

But where it becomes relevant, is the same place it becomes relevant for any creative activity–you need to know your canvas, paints and brushes. While the basics are the same from oils to acrylics, there are serious theoretical and craft differences to how you think about the two contexts and this is also true for differences between desktop and internet applications no matter the level of richness.

Besides the obvious issue of being constraint aware, there is also being user mindset aware. What does this mean? Well, after some 200 hours of usability testing on web-applications I have learned a careful lesson about how people use and think about Web applications of any richness. When a user sees familiarity to a web site in any way, even if for a moment, they start thinking like its a web site. The opposite is also true. If they see a glimpse of what seems like a web-application they make assumptions that make you think they are treating your web-app like a desktop app.

The problem arises with some core problems in Web-applications. The most primary of which is well the browser. It’s always there. Its like the roommate in college who always showed up right as you were about to make some moves with your date. You can’t really get rid of it either, because it lurks. So the old pop-up trick which removes the browser chrome (menu, toolbar, addressbar, and status bar), for some reason doesn’t fool anyone. And while kiosk mode exists in some browsers, people don’t like it as users. I mean, taking over someone’s desktop does feel a tad heavy handed.

People have the back-button. Even if it isn’t showing it is there: right-click, , and even your thumb button on your mouse, all give you access to it. There are many more examples like this.

But the real point here is around being consistent. Problems are reduced when designers push towards consistency in GUI strategy. If we are going to build a desktop app in browser, then it better act like a desktop application. Yahoo!’s new beta mail site is a great example of an attempt to do this. It succeeds where even teh revamped version of Outlook on the web, falls apart.

There’s a lot more about richness and even CE and hopefully I’ll get a few more doses in about how richness is an important consideration when designing RIAs or any A for that matter.

And if you’d like to get a class on this stuff come October, I’ll be teaching how to design RIA’s at the 11th annual User Interface conference.

Be Sociable, Share!

Search

The archives run deep. Feel free to search older content using topic keywords.