Hate UML?

Draw sequence diagrams in seconds.

"This is stupid. Your program doesn't work," my wife told me
Posted on: 2010-06-19 10:31:12
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:

Want more programming tech talk?
Add to Circles on Google Plus
Subscribe to posts

Post comment

Real Name:
Your Email (Not displayed):

Text only. No HTML. If you write "http:" your message will be ignored.
Choose an edit password if you want to be able to edit or delete your comment later.
Editing Password (Optional):


2010-06-19 12:33:17

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.


2010-06-19 12:36:59
wrong - if the users say it doesn't work, then you failed


2010-06-19 13:01:07
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.


2010-06-19 13:52:26
You fix the control you chose because it discourages unrealistically saturated colors by making it default to unrealistically saturated colors?

Kiaran Ritchie

2010-06-19 14:35:59
Don't you just love the 'wife' criticism? My wife tears my works apart, sometimes to the point where I want to cry, lol.


2010-06-19 15:06:04
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.

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

2010-06-19 17:29:43
> 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.


2010-06-19 19:17:22
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?


2010-06-19 21:45:17
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


2010-06-20 04:14:09
That is a cool and simple fix. Its always a good idea to watch someone else use your application in order to tweak the usability of it; I have improved my designs much in this way. Karl who posted above is a complete idiot, its a shame that so many people are extremely immature who hide behind the animosity of the internet.

I have... no name.

2010-06-20 09:02:15
Your wife is cheating on you.

... and you are really, really bad at design.

@I have... no name

2010-06-21 09:14:30
Yeah, well, your mom can fit three dudes in her mouth at once, but I don't feel obligated to tell everybody.

Richard Soderberg

2010-06-21 11:18:20
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.


2010-06-22 19:08:19
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.

Other posts by Steve

Yes, You Absolutely Might Possibly Need an EIN to Sell Software to the US How Asana Breaks the Rules About Per-Seat Pricing 5 Ways PowToon Made Me Want to Buy Their Software How I run my business selling software to Americans 0, 1, Many, a Zillion Give your Commodore 64 new life with an SD card reader 20 lines of code that will beat A/B testing every time [comic] Appreciation of xkcd comics vs. technical ability VP trees: A data structure for finding stuff fast Why you should go to the Business of Software Conference Next Year Four ways of handling asynchronous operations in node.js Type-checked CoffeeScript with jzbuild Zero load time file formats Finding the top K items in a list efficiently An instant rhyming dictionary for any web site Succinct Data Structures: Cramming 80,000 words into a Javascript file. Throw away the keys: Easy, Minimal Perfect Hashing Why don't web browsers do this? Fun with Colour Difference Compressing dictionaries with a DAWG Fast and Easy Levenshtein distance using a Trie The Curious Complexity of Being Turned On Cross-domain communication the HTML5 way Five essential steps to prepare for your next programming interview Minimal usable Ubuntu with one command Finding awesome developers in programming interviews Compress your JSON with automatic type extraction JZBUILD - An Easy Javascript Build System Pssst! Want to stream your videos to your iPod? "This is stupid. Your program doesn't work," my wife told me The simple and obvious way to walk through a graph Asking users for steps to reproduce bugs, and other dumb ideas Creating portable binaries on Linux Bending over: How to sell your software to large companies Regular Expression Matching can be Ugly and Slow C++: A language for next generation web apps qb.js: An implementation of QBASIC in Javascript Zwibbler: A simple drawing program using Javascript and Canvas You don't need a project/solution to use the VC++ debugger Boring Date (comic) barcamp (comic) How IE <canvas> tag emulation works I didn't know you could mix and match (comic) Sign here (comic) It's a dirty job... (comic) The PenIsland Problem: Text-to-speech for domain names Pitching to VCs #2 (comic) Building a better rhyming dictionary Does Android team with eccentric geeks? (comic) Comment spam defeated at last Pitching to VCs (comic) How QBASIC almost got me killed Blame the extensions (comic) How to run a linux based home web server Microsoft's generosity knows no end for a year (comic) Using the Acer Aspire One as a web server When programmers design web sites (comic) Finding great ideas for your startup Game Theory, Salary Negotiation, and Programmers Coding tips they don't teach you in school When a reporter mangles your elevator pitch Test Driven Development without Tears Drawing Graphs with Physics Free up disk space in Ubuntu Keeping Abreast of Pornographic Research in Computer Science Exploiting perceptual colour difference for edge detection Experiment: Deleting a post from the Internet Is 2009 the year of Linux malware? Email Etiquette How a programmer reads your resume (comic) How wide should you make your web page? Usability Nightmare: Xfce Settings Manager cairo blur image surface Automatically remove wordiness from your writing Why Perforce is more scalable than Git Optimizing Ubuntu to run from a USB key or SD card UMA Questions Answered Make Windows XP look like Ubuntu, with Spinning Cube Effect See sound without drugs Standby Preventer Stock Picking using Python Spoke.com scam Stackoverflow.com Copy a cairo surface to the windows clipboard Simulating freehand drawing with Cairo Free, Raw Stock Data Installing Ubuntu on the Via Artigo Why are all my lines fuzzy in cairo? A simple command line calculator Tool for Creating UML Sequence Diagrams Exploring sound with Wavelets UMA and free long distance UMA's dirty secrets Installing the Latest Debian on an Ancient Laptop Dissecting Adsense HTML/ Javascript/ CSS Pretty Printer Web Comic Aggregator Experiments in making money online How much cash do celebrities make? Draw waveforms and hear them Cell Phones on Airplanes Detecting C++ memory leaks What does your phone number spell? A Rhyming Engine Rules for Effective C++ Cell Phone Secrets