I asked a friend of mine (who isn’t a coder) if she could try out the amazing Codecademy for me.
She is a smart person, but again, she isn’t a programmer. I thought Codecademy would be a great way to introduce her to programming for the web. As a programmer, I thought it was extremely well made and assumed it would work for anyone.
She landed on the homepage and read the instructions.
She wrote her name (“Elizabeth”), then decided however to change it to the shortened form of her name, “Liz”. To do so she highlighted the whole string she had just typed and tried to press the backspace key to delete it. The whole page disappeared and the browser redirected her to the new tab.
Liz: “Why did it do that?”
Me: “You can’t highlight a word like you’d do in Microsoft Word. You’re in a browser, so the backspace button tells the browser to go back to the previous page you visited in that particular tab. You need to delete the string one letter at the time.”
She reopened the page and tried again, this time things were successful.
Next, she had to measure the length of her name. But she forgot the quotes, so she got this:
Liz: “What happened?”
Me: “What do you think happened?”
Liz: “Some kind of error, but what does ‘Liz is not defined’ mean?”
Me: “You accidentally forgot the quotes.”
Liz: “Oh, OK, let me try again.”
She wrote the first quote but pressed enter before immediately realizing she had forgotten the closing one. As such she encountered the following scenario:
Liz: “I messed it, let me try again.”
Liz: “I typed it right this time, why didn’t it work?”
Me: “Since you didn’t close the first string, it thinks that the second line is still part of the first command. Do you know how to get out of this?”
Liz: “No, but let me try.”
No, she didn’t close the string and pressed enter twice or deleted a bunch of characters (this web REPL allows it, kudos to Codecademy). She simply reloaded the page. Thankfully the same exercise (#1) was reloaded. After completing it successfully though, instead of exercise #2, exercise #0 reappeared, asking her to enter her first name again.
After raising an eyebrow at that point, she went along with it. Next she was asked to try some math.
She can’t be faulted for thinking that “for instance” meant she could try something else. Yet, she got an “Oops, try again.” message.
At that point I suspended this tiny hallway test and I asked her what she thought of this system. She found the site to be a bit unintuitive, but above all felt like she didn’t know how to get unstuck when she made an error.
Now, before you all jump in and tell me that my friend is dumb, that she’ll never be a programmer, or that you can’t idiot-proof a design, keep in mind the very point of this post.
Usability is hard because real users use our UIs and software in different and unexpected ways. Codecamedy did a very good job, but even they left plenty of room for improvement. As web developers it’s our duty to give usability and user experience a significant amount of attention. The UI is the software to the end user.