Home » Blog » Archives

Archive for 2007

Thoughts on Interactivity

October 17th, 2007

A wonderful patron of the web arts (that I will keep anonymous to respect his privacy), in asking for some fixes to Timeplot that he couldn’t write himself, empties out my Amazon book wishlist and gives me a wonderful surprise by filling up my reading queue for months to come.

Two books went right on top of the queue:

  1. Paul Dorish’s - Where the action is: The Foundation of Embodied Interaction
  2. Edward Tufte - Beautiful Evidence

Let met start saying that both books are incredibly interesting, stimulating and open-minding but surprisingly boring, verbose and repetitive at the same time.

Granted, a lot of Beautiful Evidence (sparklines, the anti-powerpoint rant, his analysis of the map of military losses of the Napoleon’s invasion of Russia) was already available on the web or in previous books, even if not as detailed, but “I get it” emerged in my mind a lot more (well, first time ever, really) than in his previous books (and the last ’shameless plug’ chapter about his sculptures felt borderline pathetic).

Similarly, “Where the action is” could be condensed in about 20 pages without loss of precision or clarity.

But my intent here is not really to review these books and criticize their shortcomings (who am I to do that? using my blog precisely to avoid the effort of making my thoughts coherent and organic!), but to dump the fresh feelings and thoughts that these two books inspired.

One of Tufte’s focal points in his entire work (not just in this last book of his) could be summarized as: “less is bore”.

Tufte doesn’t declare himself so, but he’s a paper kinda guy: he despises low resolution, low data, shortcuts, lack of integrity, moral and scientific and does a great job to inspire all sort of criticism in those of us that aspire not only in emerging meaning from more or less chaotic collections of data, but to present it in a way that is readily understood and easy to value as integral and valid.

He never explicitly mentions interaction in any of his four information visualization books.

But he mentions repeatedly that data should be abundant and that infographic design should respect the infographic consumers (the readers) and be ready to demand a lot from them. A chart, a map, a page should capture attention more than just be easy to skim and forget.

Dorish, on the other hand, is all about interaction and his book could well be summarized as: “meaning is embodied interaction”.

This deserves a little explanation: philosophy aside, his major idea is that humans interact with systems and tools as a form of dialog, learning the meaning of their actions thru the interaction with the system. Not only that, but such interaction is ‘embodied’, in the sense that it’s subjective, phenomenological, something that relates to us using our mind and body at once, not as independent entities in search for the ultimate, meta-physical, ‘meaning’ of the system.

The book contains a lot of fascinating background on phenomenology, that branch of philosophy that, basically, rejects Plato’s idealism and treats concepts like ‘meaning’, ‘knowledge’ and ‘truth’ as emerging property of our own ‘embodied’ interaction with the world around us. It rejects the Cartesian separation between mind and body, it rejects absolutes (both individual and social ones) and sure shakes deeply the foundation of the ‘classic models’ of many disciplines, from sociology to linguistics, from politics and morality to information technology and library sciences.

If you hoped for recipes and design patterns about how to do things, both books will disappoint you deeply: both Tufte and Dorish carefully avoid telling you what to do or giving you procedural recipes to do this or that. Instead, they show and analyze examples, outlining the interesting and outstanding parts and explaining the weak ones. In Tufte’s case, he also manages to ‘redraw’ some of the infographics to show you his point and he’s really a master at radically improving an existing chart with just a few lines and text here and there.

At the same time, while no practical tools were added to your bag after reading these books, the feeling you get is somewhat rewarding in the sense of ‘coherence of thought’ that you perceive emerging from all the words that you’ve read and the examples they’ve helped you absorb.

The first of such surprising thoughts is the realization that, even without mentioning it, Tufte is too advocating interaction: not the sort of interaction that you do with keyboards and mice, but the interaction in jumping from one part of a complex chart to another, the emerging of ‘meaning’ from ‘playing’ and trying to understand the message that a chart or a map embeds.

In that sense, the ‘less is bore’ mantra is about stimulating interaction more than putting more data per square inch.

This has surprising effects: not only it makes Tufte’s message much more modern and appealing for those of us who deal with interaction design, but it gives us the ability to re-evaluate interactivity not only as in ‘change of sensorial context due to direct action’ but in more general terms. This not only helps in cases where the interaction is more ‘embodied’ (think about the tremendous appeal things like the iPhone, Nintendo Wii or Microsoft Surface have… all examples of more ‘embodied’ interaction), but also to realize that capturing somebody’s attention goes hand in hand with respecting their intelligence first and admit, as designers, that we have no clue about how people are really going to use the systems we design and that it’s empowering, for both sides, to admit so.

So, the use of a tool or a system becomes an interaction dialog between the user that feels compelled enough to continue to use the system and the designers who should balance the need to make things discoverable and easy to learn from guiding and locking users into wizards and ‘rails’ that feel refreshingly accelerating at first and unbearably patronizing when the users becomes proficient and has emerged his own meanings.

Interaction drives the emergence of meaning in the user’s mind. A meaning that, phenomenology teaches, is very much likely to be completely different than the one the system designers themselves share.

Dorish explicitly suggests the thought of considering systems as toolkits rather than series of precompiled workflows, but also acknowledges how not all types of users appreciate such a wide option space without feeling lost. I would also add thoughts on discoverabilty that he fails to mention explicitly.

At the end, the message that emerges loud and clear is the importance of interactivity as a central part of the process of emerging meaning and knowledge our own ‘embodied’ experience with the world around us (which includes, obviously, infographics and computer systems).

For some reasons I can’t really understand, we have a tendency to forget how serious ‘playing’ and the use of our body is in our daily experiences and we tend to somewhat believe that there is something purer in the use of our minds alone.

It might not yield immediate practical effects, but thinking otherwise is already starting to influence the way I produce and judge my own work and that is, alone, a great reward.

Permalink | Posted in Article
 

Why Programmers suck at Picking Colors

October 3rd, 2007

There is one simple way to tell if a user interface was designed by a programmer: the colors suck.

For the longest time, I had that problem myself, so much that I decided to go grayscale (like this blog) and focus only and exclusively on brightness and contrast.

This turned out to be a great strategy: picking colors from a 1D grayscale was way easier than picking it form a 3D solid cut up in 2D rainbowy slices. If we keep the background fixed (doesn’t need to be white!) then we just need to pick the right amount of contrast that we want. This is a very simple and straightforward choice.

Let me repeat this because it’s very important: contrast is the basic building block of UI design. Two pieces of information with the same contrast against their background will be perceived at the same importance level (all other things being equal), while more contrast identifies more importance and less contrast identifies less importance.

It’s trivial for programmers to understand this and the resulting experience is both pleasant and rewarding for them as they never feel they are making random choices or guesses: they need strategies and algorithms.

When colors (or ‘hues’ in proper terminology) enter the picture, the average programmer feels lost and for two main reasons:

  • There is no easy way to estimate the ‘energy contrast’ between two colors, also because the background heavily influences the human perception of color relationships
  • There is no strategy on picking colors that ‘go together well’, especially if the color picker gives you 16 million of them

The very first huge mistake that programmers do is to think in terms of RGB: RGB is the result of the discovery that a lot of the colors that humans are capable of perceiving can be generated out of the combination of three light sources, one red, one blue and one green, at different intensities. This is how pretty much all screens and projectors work. Unfortunately, this is not how your brain works, it’s a technological artifact and it’s mostly due to the physiology of the color receptors in the human eye (and not to the physics of light itself!).

But we don’t see colors we our eyes only, there is a lot of post-processing that our brains do on top of the ‘raw’ signal that the retina’s receptors send over to the visual cortex.

A better way to model color is the HSV color space (sometimes called HSB: hue, saturation and brightness): most color-picking dialogs of graphic programs have an HSV mode and it’s clearly much better than RBG because it allows you to easily go back to the ‘linear contrast’ strategy by just changing the brightness and keeping hue and saturation fixed.But now you’ve turned a grayscale UI into a monochromatic one, not that much of an improvement.

So you’re designing a UI and you get to the point that you want to differentiate parts of the screen that have the same importance (ergo, should have the same contrast) and you go back to the 2D problem since you have two nobs: hue and saturation. Which one to turn?

So you start turning at random hoping to find something that ‘goes well together but has the same contrast’ and, with your surprise, you find out (after years of doing this) that changing hue and/or saturation alters the ‘energy’ perception of that color. So, while you turn your hue and saturation knobs, you’re screwing up the contrast and it’s very hard to understand what to do about it other than sampling at random (which is a very frustrating strategy for algorithmically-oriented minds).

Here is where a little more advanced color pickers will use a fixed hue angle for you to pick palettes: if you start with a color, you go x hue degrees more and less, with the same saturation and brightness. The resulting color schemes are not horrific (as they would if you did the same operation in an RGB color space, say), but they feel mechanical and soulless.

Then came the ‘color loving’ web sites, where others, who are good at this in some mysterious and magic way, upload their own ‘color discoveries’. Sites like ColorLovers and Kuler do just that.But while I’m an avid user of those sites, using other people’s palette’s without any idea or strategy on how to improve on them feels like admitting defeat.

So, here I was, completely defeated and basically ready to give up and admit that my brain just doesn’t work that way, when I came across a web site on color theory for UI designers at the NASA Ames Research Center.

And it blew my mind.

The site features a lot of information about color theory for UI designers (which is so so very different than color theory for desktop publishing, for digital photographers or for video editors) and, best of all, a color-picking applet that features a color space that I never seen before: the Munsell color system.

The Munsell color system is a color space that specifies colors based on three color dimensions, hue, value (lightness), and chroma (color purity or colorfulness).

While this feels a lot like HSV on paper (where chroma can be used as saturation), this color system is different in many important ways:

  • the colors are ordered based on perceptual information (aka human subjectivity) and not some physical property of the reflected light
  • the resulting color space is asymmetric (reds have a lot more chroma than blues, for example)
  • the color space is discrete (making picking easier)

With the help of such tool, picking colors for UI design becomes a very natural process (unlike all other color pickers that I’ve tried previously): lightness still is the principle axis, guided by information importance and relevance, hue can be sampled out of personal taste (or existing palettes or real-life scenes/pictures) and the chroma can be sampled to obtain the desired value of differentiation (one can also use chroma to indicate sub-relevance but not everybody has the same ability to perceive chroma differences so this is a more dangerous practice).

Overall, the discovery of the NASA color picker has changed my ability to designed colorful user interfaces without feeling like I’m copying somebody else or I’m just lucking out. I’m never going to be a great web designer, but understanding that tools were part of my problem has been a tremendous help in gaining confidence: I hope it will do the same for you.

Permalink | Posted in Article
 

The Catalytic Power of Passion

August 28th, 2007

Two friends reached important milestones in their lives recently: Bea gets her second food article published on the Boston Globe and David discusses his thesis and finished graduate school at MIT.

The two events seem highly uncorrelated (even more so since Bea and David actually never met), but there is something deep the links their work and their success: passion.

Bea started to do her food blog as a way to express herself, when unemployed and bored. Didn’t know much about photography and turned to me (that’s how little she knew about photography) for help. “how do you do those blurry effects in the background?” - she asked me one day. A few years after that (and a few new lenses) and she goes on to win the award for best food photography in a blog… and gets published in a serious magazine.

While Bea cooks, photographs and writes about it in that lovely mix of French and English, David expresses himself by writing software. Beautiful and clever software. He’s a prototype machine, a fearless coder with a serious eye on visual balance and interaction usability.

There is one thing about Bea’s and David’s work that simply you can’t miss: the passion that their work emanates.

Passion is rare, passion is hard to transmit and it’s impossible to fake.

Passion is not hard work and it’s not focus (although both help in getting stuff done), passion is not faith or egocentrism, it’s not confidence and it’s not humility (although both help in getting things done and learning from one’s mistakes).

Passion is a catalyst, it’s the thing that makes hard things seem easier for them, it’s the flavor we taste on this side, the ‘je ne sais quoi’ that we envy from outside looking in, the distillate of sweat, tears, pain, joy, suffering, mistakes, frustrations, cleverness and enlightenment… all mixed with a little childish nonchalance and a little tiny desire to joke, to surprise.

In a word, passion.

Apple vs. Microsoft? passion. Google vs. Yahoo? passion. Ruby vs. Java? passion.

Passion is not everything and it’s not even enough, but for sure I’ve always been drawn to things that emanate a distinctive scent of passion from within, even if these passionate exercises have no reason to exist or are simply an act of creation love, a form of art.

We are emotional beings in every aspect of our lives, no matter how much we want to pretend otherwise.

And passion is a magnet, a catalyst, a distillate of everything positive that we value, that we care for and that we want more of.

So this post is for Bea and for David, a toast to their wonderful achievements and to their bright futures. But it’s also a wake up call for those who might decide to put passion a little lower on their priority scale, as it’s rarely considered important or valuable, or it simply requires a lot of energy and the ability to continue to play and to accept risks.

It’s also a toast to those who supported them (financially and emotionally), their decisions and their ways of doing things, even when they looked weird or felt wrong or sounded empty.

Passion cannot exist without an healthy, loving and trusting ecosystem around it.

Chapeau, my friends.

Permalink | Posted in Commentary