Humans are difficult

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!

  • Tincan

    Noodlin is interesting, but when I discovered I would need to use my Google+ ID to access it I decided not to continue. While I’m quite willing to spend some time experimenting with new apps, I’m not willing to risk misunderstanding a privacy setting with that ID. The appeal to a developer of not having to implement an authentication system is obvious, but requiring the use of social network credentials is in itself a barrier – I think Noodlin really needs an internal authentication system. 

  • kristina1

     I’m sorry to hear it, but that’s good to know.  Would having a Twitter or Facebook option be more appealing, or does that present the same problems for you?  Unfortunately, auth is so complicated that there are very few I’d trust to do auth right.  I can’t imagine what I could switch to that would be an internal auth system and fulfill my security requirements.  
    If it helps at all, this is exactly the information I get from Google about you: email, name (if set for your account), gender, link to your Google profile page, locale, link to an avatar image, birthday (month and day), and if your email is verified.  I feel like there should be a way to exclude some of these (people might not want to share birthday, name, and gender especially, and I certainly don’t need them), but if there is I haven’t figured out how.  

  • Tincan

    For me personally Twitter would be adequate since I have an account there I never use and there’s nothing to expose. However, I suspect others will have the same concern with Twitter that I have with Google+ or Facebook – using a “social login” on a different site just makes me uncomfortable. The external authentication system I would most like to see as an option is OpenId. There are free OpenId options available that expose no information about a user other than the username. 

  • kristina1

    I like the idea of OpenId, I’ll work on adding that as an option.  I didn’t want to have _just_ OpenId, because I think less tech-savvy users won’t know what it is, but this way I’ll have both bases covered.

  • Themonkey

    FYI – the default fonts are unreadable if one isn’t using antialiased fonts.

  • kristina1

    D’oh.  Are you using an older browser?  Or is that a system setting?

kristina chodorow's blog