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?”
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.
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.
And if you want to try it out for yourself, check out Noodlin!