Social Business Zone is brought to you in partnership with:

Kristina Chodorow is a core contributor to MongoDB. She has written several O'Reilly books (MongoDB: The Definitive Guide, Scaling MongoDB, and 50 Tips and Tricks for MongoDB Developers) and has given talks at conferences around the world, including OSCON, FOSDEM, Latinoware, TEK·X, and YAPC. Her Twitter handle is @kchodorow. Kristina is a DZone MVB and is not an employee of DZone and has posted 52 posts at DZone. You can read more from them at their website. View Full User Profile

Noodlin, the Brainstorming App - Humans are difficult

12.07.2012
| 3115 views |
  • submit to reddit
My web app, Noodlin, has two basic functions: 1) create notes and 2) connect them, so I tried to make it blindingly obvious how to do both in the UI. Unfortunately, when I first started telling people about it, the first feedback I got was, “how do you create a connection?”



The original scheme: you clicked on the dark border to start a connection.

At that point, the way you created a connection was to click on the border of a note (a dark border would appear around a note when the mouse got close). Okay, so that wasn’t obvious enough, even though the tutorial said, “click on my border to create a connection.” I learned a lesson there: no one reads tutorials. However, I didn’t know what users did expect.

I started trying things: I darkened the color of the border, I had little connections pop out of the edge and follow your mouse as you moved it near a note. I heard from one user that she had tried dragging from one note to another, so I made that work, too. But people were still confused.

The next major revision: click on a square to start a connection.

I turned to UX Stack Exchange and people pointed me to several other graphing tools, which generally had little boxes on the border you could start connections with. I changed the “click anywhere on the border” to “click on a box on the border.”

Users continued to ask, “how do I make connections?”

At this point, I was tempted to give up. Luckily, a user tipped me off that he thought the little boxes were resize handles and suggested circles, instead. I tried that and it was a huge improvement. Finally, I decided that no one was going to read my damn tutorial, so I’d animate how you make a connection and play it on an endless loop. Try to ignore that, movement-tracking humans!

And it worked.

I have gotten exactly 0 inquiries about how to make connections since I posted on my blog about it (which yielded about 50x the amount of traffic I was averaging before). Phew.

The current scheme, which seems to be working.

And if you want to try it out for yourself, check out Noodlin!

If you liked this, you might enjoy:

Published at DZone with permission of Kristina Chodorow, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)