design


Jason Langdon took my reflection component and made a new version that adds blur, which actually makes it look a good deal more realistic (higher levels of blur make it look like it’s on a less polished “table”). Very cool.

Digg!digg this | del.icio.usdel.icio.us | 1 Comment

UPDATE 2/21/2008: See this post for the latest version of Reflector.as. I’ll reintegrate it into the source code linked to from this post eventually, but for now you’ll need to download the code from this post, then replace Reflector.as with the version from the newer post.

Okay, enough highfalutin’ chatter. This entry actually has (arguably) useful code in it.

The reflection effect is destined to become one of those gratuitous UI clichés, like brushed metal and gleaming highlights. But hey, the kids seem to like it, so I figured I’d try to make a similar component in Flex.

Before jumping into the explanation, here’s the demo:

You can drag the panel around to watch the reflection follow it, and play with the sliders to tweak the look of the reflection.

I’m not the first to attempt this: Trey Long created a reflection effect in an early beta of Flex 2 (the demo pointed to from that link no longer works with the shipping version of Flash Player 9). However, his version created static reflections—so, for example, you could see the reflection of a Button, but if you moused over or clicked on it, the reflection wouldn’t update to reflect (no pun intended) the visual changes to the Button.

I decided to make the reflection “live”—as you interact with the components being reflected, the reflection actually updates in (near) real-time. I also componentized the reflector itself, so you can just target it at a component and it automatically positions itself appropriately. I used code very similar to Trey’s reflection filter to render the reflection bitmap, though the way I actually draw it to the screen is a little different.

Read on for an explanation of the code: (more…)

Digg!digg this | del.icio.usdel.icio.us | 48 Comments

As the phrase “user experience” was coming into vogue, people adopting the term took pains to distinguish it from “usability”: usability makes it easy to use something, while user experience makes you enjoy using it. To me, this always seemed like a fairly straightforward proposition.

Today I ran across a blog entry entitled “The Battle Between Usability and User-Experience”. The author starts off with this rather provocative sentence:

The main reasons why it is so hard to create usable products is that there is a conflict between a high-usability level and great user-experience.

He then goes on to describe how he sees the distinction, using the example of a road trip: a straight freeway is usable but boring; a twisty mountain highway is not usable, but provides you with a much more interesting experience.

While I appreciate a number of the points in his article, I actually think it’s wrong to position usability against user experience, as if there were necessarily a trade-off between the two. The point he’s missing, I think, is that there’s a difference between challenge and frustration. To follow his analogy, some drivers may prefer straight roads and some may prefer twisty roads, but no one likes to drive over a road full of potholes. Many people enjoy challenge, but nobody enjoys frustration.

Back in the software realm, take video games as an example. Some people prefer casual, relaxing games; some people prefer deep strategy games; some people prefer tense shoot-’em-ups; and some people, like me, play too much of all of them. But nobody enjoys a game with unresponsive controls or bad level design (except in the way that one can enjoy watching, say, Mystery Science Theater 3000).

When we say something is unusable, I don’t think we generally mean that it’s challenging; I think we mean that it’s frustrating. It’s challenging to use a graphic design tool to draw a nice picture (especially if you can’t draw your way out of a paper bag, like me), but you can have a good experience trying. It’s frustrating to fight the interface, and that’s never a good experience.

So, while it’s true that you can have a usable product with a boring experience, it doesn’t follow that it’s difficult to build a good experience around a usable product. In fact, the exact opposite is true: you can’t build a good experience around an unusable product. Pitting usability against experience just obscures this basic fact.

Digg!digg this | del.icio.usdel.icio.us | 5 Comments

Lots of people have reported the news that Flex 2 has shipped (yay!), so I won’t repeat the details here. (Just go download the free Flex SDK or a trial of Flex Builder already! You know you want to.)

Instead, since it’s all about me, I’d like to point out an article I just published on the Flex Developer Center about designing skins for Flex 2 using Flash, Photoshop, or Fireworks. It’s aimed at visual designers who want to use their familiar design tools to customize the Flex components, but Flex developers might find it valuable as well to understand how skinning works.

(more…)

Digg!digg this | del.icio.usdel.icio.us | 12 Comments

« Previous Page