< >

"Your program is stupid. It doesn't work," my wife told me

Posted 14 years ago

The HSV colour wheel, based on barycentric coordinates, is my favourite colour selection device. It discourages picking unnatural looking saturated colours. Instead, it gives the realistic designer colours more space in the triangle. That's why I chose it for Zwibbler.com, my online Javascript sketching application.

I was working on the drawing tool one evening and my dear wife happened to start using it to draw stuff. I watched her and asked her to change the colour of what she had drawn to blue.

Naturally, she clicked on the blue outer portion of the colour wheel.

"This is stupid. It doesn't work," she complained. I love that I can always count on her for honest feedback!

The colour wheel works, of course. It works exactly the same way as Inkscape and other graphics design software. Clicking on the ring sets the hue. But when the saturation is zero, the hue component doesn't matter, because the absence of colour is always gray.

On Zwibbler, this always happens, because the default colours are black and white.

With one line of code, I made the colour wheel behave the way she expected, and eliminated a negative experience for first time users.

(Update in response to criticism.) The fix I made matches expectations of new users, as well as experienced designers. If the current colour has saturation level 0 (i.e. it's white/black/gray), and you click on the outer ring, then obviously your intention is to eventually increase the saturation. Otherwise what you are doing has no effect. The program sets the saturation component to 1.0 only in that specific case. Otherwise, it leaves your current position in the triangle alone, allowing you to rotate the hue value.

You might also want to read:

Steve Hanov makes a living working on Rhymebrain.com, rapt.ink, www.websequencediagrams.com, and Zwibbler.com. He lives in Waterloo, Canada.

Post comment

edit

jimbo1qaz

eight years ago

don't use javascript links for the white panels on the bottom. I can't middle-click.

edit

jimbo1qaz

eight years ago

your links don't work.

edit

Feedback

14 years ago

Speaking of random feedback: Make sure backspace deletes the selected item, not just "delete". On many laptops and other small keyboards, backspace is much easier to reach.

edit

Richard Soderberg

14 years ago

You indicate that you prefer the HSV wheel because it avoids "unnaturally saturated colors", but you also set the saturation component to 1.0 when a user selects a hue while at 0.0 saturation. I might suggest choose a component 0.8 instead, so that the user gets approximately the color they selected, without defaulting to the "unnaturally saturated" state you're trying to avoid.

For an extra UI bonus, you could animate the slide from 0.0 to 0.8 (or 1.0) saturation. This might help users understands what that little circle/triangle device is, and thus ensure they can select a 1.0 saturation if they really want to, in case the default 0.8 isn't "unnatural" enough.

edit

Erik

14 years ago

Cool, seems like a nice usability tweak.

BTW, when I text color in Zwibbler, it doesn't seem to change the text unless I move the text or something to get it to redraw.

Using latest Chrome on Ubuntu

edit

14 years ago

I don't think this is a good change. The user may be working with low saturation values, why would they want it to suddenly jump to 1.0?

edit

i don\'t have a name stop discriminating against me

14 years ago

> Instead, it places the more realistic designer colours at the center of the triangle, where you can see them.

The color at the center looks like a sickly shade of gray to me. It might be better to emphasize the side favoring some more color, but not the tip of the triangle.

edit

Karl

14 years ago

Your wife is stupid. Now your program doesn't work for the 50% of users who have encountered a color wheel before, or the 99.9% of users who are smart enough try clicking in the triangle after they didn't get what they want from clicking in the circle.

edit

Kiaran Ritchie

14 years ago

Don't you just love the 'wife' criticism? My wife tears my works apart, sometimes to the point where I want to cry, lol.

edit

Matt

14 years ago

You fix the control you chose because it discourages unrealistically saturated colors by making it default to unrealistically saturated colors?

edit

Ben

14 years ago

Also, it would be nice if the colour wheel grabbed focus, so I don't start highlighted the page contents when I try to drag around the wheel.

edit

sdf

14 years ago

wrong - if the users say it doesn't work, then you failed

edit

Kevin

14 years ago

Hey!

I just tried Zwibbler! It's very cool!!

I only have one minor issue: when I switch the combobox selections using the keyboard, it doesn't work. It doesn't update the drawing, and if I change target, my selection is lost.

Four ways of handling asynchronous operations in node.js

Javascript was not designed to do asynchronous operations easily. If it were, then writing asynchronous code would be as easy as writing blocking code. Instead, developers in node.js need to manage many levels of callbacks. Today, we will examine four different methods of performing the same task asynchronously, in node.js.

A little VIM hacking

How to detect if an object has been garbage collected in Javascript

If you are writing an application in Javascript, soon you will have to worry about memory leaks. But it is difficult to even know if a memory leak exists. This handy method can help.

barcamp (comic)

How a programmer reads your resume (comic)

People thought it was a comic, so I never corrected them.

Automatically remove wordiness from your writing

Shorten your writing with this tool, made well before AI was popular.

0, 1, Many, a Zillion

It's common wisdom that there should only be three numbers in source code. But there's actually four. Here's why.

Compress your JSON with automatic type extraction

JSON is horribly inefficient data format for data exchange between a web server and a browser. Here's how you can fix it.

How IE <canvas> tag emulation works

At the time of this writing, Internet Explorer at version 8.0 still lacks the <canvas> tag. But you can easily add the capability by including a short javascript file in your page. At first glance, that's astounding. How do you implement an entire vector graphics API in a few lines of Javascript?

Draw waveforms and hear them

A while back I thought it would be interesting to be able to draw arbitrary waveforms and then listen to how they sound. I had an audio engine just laying around, so I whipped up a quick application to do that.