10 ms·
On the Usability of Codecademy
- rgbrgb 15y agoGreat article with a small typo... "Codecamedy did a very good job, but even them left plenty of room for improvement."
- acangiano 15y agoThanks. Fixed. :)
- imjared 15y agoGlad someone pointed this out. Several of us are doing this at the office and I've watched our design team struggle in similar ways. If you're not used to the the kind of errors you'll see in coding or javascript, it can be incredibly confusing. Luckily for me, a reference error can be meaningful but to someone who has no idea about scripting, it's utterly worthless (sure you could argue this person should go to google and learn it but I'd say that this is the learning tool they've settled on and it should provide that instruction). I've found myself struggling with their less-than-clear directions. I'm even convinced that there is at least one problem set so far with no solution (Functions in Javascript Optional Course » Lesson 2, part 3). I have high hopes for Codeyear. After toying with it for a bit during the first week though, I'm hoping the usability and directions are cleaned up otherwise this will be more of an exercise in patience than in learning programming or javascript. All this said, I've at least gotten some totally sweet badges.
- dangrossman 15y agoIs this the problem you're talking about? http://i.imgur.com/tSfvV.png http://i.imgur.com/tSfvV.png
- imjared 15y agoIt's not. I was referring to Understanding Parameters - argument types, part 1. It seems to have been fixed since I mentioned it this morning.
- hugoroy 15y agoHis/her friend is dumb and she uses a bad browser. (I hope you note it's sarcastic)
- ErrantX 15y agoShe can’t be faulted for thinking that “for instance” meant she could try something else. Yet, she got an “Oops, try again.” message. I did exactly the same thing when I was checking out Code Academy - in fact I think I even typed the same math she did.
- babarock 15y agoI apologize in advance if what I'm about to say may sound harsh, mean or elitist, but the truth is programming isn't for everyone. While the intent of the article is very noble ("improving the usability of Codecademy"), it also raises very important questions about programming tutorials in general. How much "holding by the hand" should a tutor do, really? The examples the author gives are very relevant to my point. The behaviour of a web browser when pressing "BackSpace" or of an interpreter when leaving an opening quote unmatched ... Those are perfect examples of the kind of things that a future programmer must learn to figure out by themselves. While I don't argue that the pupil has to necessarily find that out from the first time, I strongly believe it is not up to the tutor to point it out. To a certain extent, the role of "introductory" tutorials aiming at teaching programming, should be a way to filter potential programmers and select the best from the ones who won't make it. Teaching programming is similar to Martial Arts in the sense that the best teachers are the ones who let their students struggle before earning an achievement. I can safely assume most of us here found out the "backspace in browser" issue (as well as "unmatched quote" one) without having the solution pointed out to us. We played, tinkered and experimented. This is how we got where we are today. Holding a student by the hand is not doing him a favor. Often, it's simply delaying his giving up. And I think that the worst thing Codecademy could do is presenting their student with a modified interface for the JS (or whatever language) interpreter, just to make things "nicer".
- geuis 15y agoIt's not hand holding when you're trying to introduce someone to programming. Learning to use a REPL isn't a test to separate good programmers from bad. It's something that has to be learned first.
- ken 15y agoI think babarock phrased it poorly but he's not entirely wrong. I learned to program (like many others of my generation) by futzing around on my C=64's repl. It wasn't a great system by any stretch of the imagination, but actually playing with it (and failing) got me to learn it so well. I think the C=64's repl was simpler for users than Javascript's, which certainly helped. The goal should be to get people to play with it, not to get them to type "Ken".length and press return. The things we know best are the things we play around with. The things I know the least well are those where I only learned the happy-path through some training procedure. I learned to read and speak and cook breakfast and ride a bike and program and everything else mainly by trying and failing. (The bicycle is actually an interesting case, because we try to teach the happy-path with training wheels, though this essentially inverts the controls we're trying to learn. It's a confidence-builder, not a skill-builder.) Last year I took a class to learn a new skill. The teacher was great: he was enthusiastic, and after each teaching point he got us to try it by saying "Now let's go screw it up and learn!" We spent a lot more time screwing it up than being lectured, thankfully. I don't know much about "Codecademy", but based on this I would say it's not really going to help most people, but not because of these minor usability gripes. The goal shouldn't be to create an 'intuitive tutorial'. You're trying to teach people a new way of thinking. The goal should be to provide an environment where the essence (type something, get result) is completely obvious, and where more information is always available upon request, and where they are encouraged to play around. What I'm seeing is an environment where there's a right and a wrong. It makes programming look like a 1980's MS-DOS adventure game but harder.
- czzarr 15y agoI made my (non-programming) girlfriend try codecademy and she had the same kind of troubles. I had to go at lengths to explain to her what a console was. She also told me that codecademy assumes too much stuff is known, like booleans or whatever. All the things that we take for granted and innate are extremely complicated to teach through a human-computer interaction. In the end she went and googled "javascript tutorial", clicked one of the results and told me "this is much clearer". The tutorial was in classic textual form. I think codecademy looks very appealing for developers because it looks like it's easy to learn on it, but that's because we are developers, not laypeople.
- Sandman 15y agoSlightly offtopic: I also have a non-programming girlfriend and she recently expressed an interest in learning what programming is all about. This is because she often sees me coding, knows that I like it and that it's a big part of my life, and feels bad when I start talking about how I started some new project and she knows that I cannot tell her in detail what it's about because she wouldn't understand me (I ususally like to make stuff for developers, like libraries, tools and so on, not stuff for general public). So I've been pondering what would be the best way to teach her a bit about programming, just to give her some general idea on what programming is. Should I just make a simple website with her and show her how to do basic stuff using javascript, or should I start with some theory first (I'm not thinking here about teaching her theoretical CS, just some basic OO principles). Anybody has any advice?
- larrys 15y ago"Should I just make a simple website with her and show her how to do basic stuff using javascript" I think the easiest way to learn is to take a simple page or script that already does something and change it. With that you get a little excitement that motivates you to learn further. The classical computer learning books normally start with a "hello world" program and then move on from there. I wouldn't go with any theory to start.
- spacemanaki 15y ago"just some basic OO principles" I can't imagine this would be productive. What's the point of learning OO stuff if you aren't actually going to be writing programs big enough to warrant it right away? Get started with the smallest part of of the joy of programming: write some code and see it do something, even "10 print hi goto 10" is going to be a lot more exciting than OO, I would think.
- qixxiq 15y agoCodecademy have done a great job at reducing something that can be very difficult down to laymans terms but its difficult deciding just how far down the rabbit go they need to go. While the problems with the REPL and trying to delete text are obviously a problem (and a hard one to solve), I'm not sure the issue with leaving out the quotes is. Obviously if the text was replaced with "I don't know anything called liz" instead of "liz is not defined" would be a minor improvement -- but at the same time anyone should be able to sit back, look at what they were asked to code ("Ryan".length) and notice the difference to what they typed (liz.length). The "Oops, try again" might be enough of a message there.
- NickPollard 15y agoFor some of these early lessons at least, could they not have 'curated' error tests? ie. for this one, since missing the quote is an obvious error, why not match the string entered with a regex (or your parsing tool of choice) and look for the presence of exactly 2 quotes, with at least one character in between. If it's not there, print "That didn't work. Did you miss out a quote?" In fact, if they log all the things people type in, they could analyse it for all the most common errors and then start attacking each of those.
- kakuri 15y agoAs it stands, I only see codeacademy being useful for programmers who are new to Javascript. If you're completely new to programming, there are too many problems, like the article mentions, that are difficult to get past without knowing... programming!
- hsshah 15y agoEven then it is frustrating. I know basic to medium level Java and Python. I wanted to learn Javascript and decided to take codeacademy for a spin. The experience was so frustrating, I gave up after the first few exercises (after shouting at my computer a few times). There was no useful feedback - just an error message like 'Oops. Try again'. I prefer Zed Shaw's style of teaching. Guess, I will wait until he publishes LearnJavaScriptTheHardWay.
- sankalpk 15y agoI did the same thing with my sister(who doesn't know any code) and the same issues came up with her as well. This is definitely a design issue. How to make the UI better? In the initial stages of learning of learning a concept, have a dialogue appear for each error saying something like: When you're coding in the real world no one is going to tell you this, but we've got your back! You forgot the quotes around your name. This problem occurs because some programming languages are case-sensitive, meaning that you have to type it in exactly the way Javascript wants you to. We'll give you a heads up about using quotes 4 more times and after that you're on your own. To fix this error type in: "Janet".length instead of Janet.length
- adeelk 15y agoAhem, “case-sensitive”?
- jnbiche 15y agoJust in case any non-programmers are reading this, the quotes around a string (like your name in the Codecademy example in question), have nothing to do with case, or being case-sensitive. Programming languages have basic building blocks called primitive data types, and for many programming languages, strings represent one type of those building blocks. Traditionally, strings are indicated by putting double- or single-quotes around the letters of the strings, but they just as easily could be indicated by two parentheses, or dollar signs. It's a convention for denoting a string, no more, just like quotes in English and certain other natural languages represent certain features of the language, often direct speech.
- meanderingleaf 15y agoI love codecademy, but I always wondered if it would be better to ease a newbie into programming with a 'childrens' UI like Scratch or Alice. It wouldn't build up any coding muscle memory, but it might help them get use to the general look and feel of code before asking them to type it out themselves.
- chrismanfrank 15y agoI'm really curious to know if anyone has experience with this. On the one hand, kids like building games, so Scratch and Alice seem like a good idea. On the other hand, those aren't "real" languages, so I think...why not just teach kids how to actually write code? I'm suspicious of how we dumb things down for kids. Anyone have experience teaching kids to code, either with Scratch/Alice, or another language?
- edtechdev 15y agoyeah there's like a whole field of research and a profession devoted to the topic: computer science education
- mattmcknight 15y ago"You’re in a browser, so the delete button tells the browser to go back to the previous page you visited in that particular tab. " Nothing at all to do with CodeAcademy- but I really hate this behavior.
- mgkimsal 15y agoAgreed 110%. given that up and down arrows scroll up and down, having left/right arrow keys ties to history fwd/back would make a heck of a lot more sense.
- dangrossman 15y agoI don't follow. Given that up and down arrows scroll up and down, left and right should scroll left and right, which is what they do.
- mgkimsal 15y agoLeft/right - yeah, I see your point. I was testing it on a page that didn't need to scroll left/right when I tried it, so that didn't occur to me. I probably always mouse or trackpad for scrolling anyway, so my key-fu is a bit rusty. Still... 'delete/backspace' going back in a browser never made sense to me.
- haldean 15y agoOn many keyboards, there's an arrow pointing to the left on the backspace key, which may be where the convention comes from.
- joblessjunkie 15y agoThis online tutorial grossly overestimates how much the layperson understands about computer languages. For the complete beginner, far too much is left unexplained. No one actually codes using a REPL in a browser. Yet the site makes no attempt to explain why or how this REPL exists, or how it works. It doesn't explain why I can only type in certain places on the screen. It doesn't explain how to try again, or undo mistakes. It doesn't explain why a string must be surrounded by quotes, but numbers must not be. It doesn't explain why suffixing `.length` to a string (but not a number) does anything, versus any of 50,000 other English words I might have put in its place. It's confusing that there are three sources of errors: those from the language, those from the tutorial, and those from the browser/internet. Where is this program running? Where does the code live? How does this code turn into action? How does the tutorial know what I'm doing? Codeacademy doesn't explain how any of this magic happens. It just plops you down in front of a REPL and tells you to echo specific things. Coding is not about learning the syntax that lets you type "Ryan".length. It's about learning the underlying concepts: the "why", not the "what". Coding is best learned "the hard way".
- diwank 15y agoMaybe you're right about learning 'the hard way'. I too strongly believe in learning with rigorous practice. But, one has to understand that people take various approaches to learning and teaching. There cannot be a right way to teach given the multitude of learners now online.
- rauljara 15y ago> Coding is best learned "the hard way". Funny. There is a series of books by Zed shaw called "Learn 'x' the Hard Way". The books tells you to type things first; the explanation comes later. In my experience, the most important part of learning to program is that you can do something fun, quickly. If you enjoy the programming, you will continue with it, and then bother to learn the "why"'s. If you don't find it fun, why would you bother learning "why"? The Code Academy tutorial isn't perfect, but I do think it's a fun introduction. Importantly, it's a fun introduction that require almost no set up. I know it has limitations, but it is pretty awesome, and a much better path into Ruby than a lecture on object oriented programming. Not to knock the lecture. It's very important, in fact. I just think the lecture should wait until lesson 2 or 3.
- Shenglong 15y agoA large part of learning to program is testing, then debugging. If 2+3 didn't work, my natural course of action would be to read the instructions again, and then try 2+2. CodeAcademy is trying to teach people to code, and I think a big part of that, is learning to navigate small problems, debug, and follow instructions. If they just gave instructions that said "type the following", that would take away these problems - but what would that achieve? That would be like a professor not giving repeat questions on an exam, and a student complaining he wasn't clear enough.
- bpm140 15y agoTalk about a quick opportunity for improvement! Instead of displaying: "Oops, try again." Code Academy could type your statement: "A large part of learning to program is testing and debugging. Please see if you can figure out what went wrong and try again." It's all about setting expectations.
- r0dica 15y agoI very much agree with this. But I still think that if someone types in 2+3 at that second exercise, the program should compute it properly and not error out :)
- tiptup 15y agoAs Codecademy is targeting a large demographic with varying ability of coding (i.e. from basic MS Office users because it's part of their day job to people who are more switched on with tech stuff but never bothered to learn coding), they need to work out how to cater them all. I'm personally in the 'I use Office in my day job and have some interest in the latest tech trends but no knowledge of how things work' segment. Adding more expansive instructions should help as their current one/two-liner approach doesn't really explain anything for the absolute beginners. However, this can put some slightly more knowledgeable learners off by being too pedantic so Codecademy needs to find the right balance. Within their existing UI, they can probably do this via offering more 'Show Hints' per task like certain computer games where Hint 1 is the cryptic-ish hint, Hint 2 gives slightly more context and Hint 3 for really struggling learners. Users can then self-select how much help they need and don't feel like they are being spoonfed. If Codecademy is really targeting the absolute (but willing) beginners, they need to realise these users are unlikely to google for help as they are used to self-contained courses a la CBT courses in their day jobs. Agree with imjared about the sweet badges - if they want to get the crowd (or maybe just me) going, they should start offering the options for users to buy some embroidered patches or 3D printed versions of the achievements!
- natasham25 15y agoI was a complete beginner at coding a few months ago. I really really wanted to learn, so I've tried going to local meetups designed to teach newbies to code and I've tried Codecademy. The problem I found was this tendency to start with the terminal as the teaching tool. The terminal is a black and intimidating hole to a beginner. Sure, I happily typed in 2+2 and got 4 as a result, and I understood how to store variables and even if statements and while loops, but honestly, I found this to be too abstract. I didn't understand what the terminal was and how typing in 2+2 was supposed to help me build a website, which is why I wanted to learn to code to begin with. I got frustrated and quit learning to code for a while as a result. But then I decided to try out the free Stanford CS106A course. I was hooked from the very first lecture. Instead of starting at the terminal, Stanford had me download Eclipse (which is less intimidating than the terminal) and they started with a fun "Karel the Robot" language. In the first assignment, my goal was to make Karel the Robot run around the grid and drop / pick up diamond 'beepers'. I LOVED it. The excitement I got from actually getting Karel to do what I wanted was exhilarating and far more rewarding than getting a pretty badge from Codecademy. I completed the course in about a month and am now learning Ruby, which I absolutely love. My point is, people want to learn to program so they can build something, so starting off with concrete and fun projects (versus typing random stuff into a Terminal) is the way to go.
- paul9290 15y agoIs there a link to this Karel the Robot exercise or is it a hand out? We're in the amidst of creating something complimentary (different too) to Codecademy called http://CodePupil.com http://CodePupil.com. We're eager to see different styles of teaching; especially examples where gaming is used! As noted in the OP's article creating a new experience and especially one that teaches all the Elizabeth's how to code is a big challenge. We've been asking our friends like Elizabeths to test and then we reiterate. Also we've found Mechanical Turk to be helpful in re: to user testing feedback. There seems to be a lot of Liz's there.
- diwank 15y agoI too tried my hand at it in a side project: iheartpy.com See if there's anything you find useful in it. Although, I think this comment needs to be someplace else.
- abecedarius 15y agoOne thing they might do: offer better feedback on an error by treating the input as a 'spelling correction' problem (like http://norvig.com/spell-correct.html http://norvig.com/spell-correct.html). A useful implementation can be pretty naive when inputs are short -- e.g. my old numerical-expressions parser https://github.com/darius/expr/blob/master/expr/Parser.java https://github.com/darius/expr/blob/master/expr/Parser.java)
- diwank 15y agotl;dr - I think I fixed this problem in my app (iheartpy.com) using AIML. Caution: Still a work in progress. The whoe thing - I am a self-taught programmer. And I had been an extensive user of codeacademy myself. I realized this rather serious design flaw early on and tried to do something about it. Initially, I tried to right my own engine based on JSON but midway I discovered AIML. It suited the task perfectly. So I downloaded pyAIML library [1]. It is surprisingly simple to get started with. I hacked around a bit and got a workable python app. Finally using pyAIML + regexp, I ended up with a crude engine that takes something like this (in Python): def foo(param1, param2) and spits out: FUNCTION foo PARAMS param1 param2 which can be easily manipulated and replied to by the pyAIML parser. It worked flawlessly. And moreover, designing lessons is as simple as creating an XML file. Then I threw together a minimal UI and got it up and running on App Engine here: iheartpy.com I used CodeMirror [2] for the editor. The focus of the UI was to be extremely minimal ( = blazing fast) and delightfully non-distracting ( = no post-to-facebook rubbish). This being a side-project, I thought I could easily get away with that. :) Honestly, this is my first project and looks more like the work of a script-junkie at this point of time. The lessons are not done yet. I wasted a lot of time in trying to optimize my app for App Engine. And now I'm an 18 year-old who has a LOT of exams on his head and this unfinished project. It is kinda disheartening. Anyway here's the github repo [3]. It is not very neat. Psst.. I added some LOLPython magic as well [4]! Finally, I made something that is essentially an MVP. I'm new to both design and coding. Plus, I don't think I'm proficient enough in Python to teach people. In short, I need help. Would be happy enough with some feedback, though. ;) [1] http://pypi.python.org/pypi/PyAIML http://pypi.python.org/pypi/PyAIML [2] http://github.com/marijnh/CodeMirror2 http://github.com/marijnh/CodeMirror2 [3] https://github.com/creatorrr/IHeartPy https://github.com/creatorrr/IHeartPy [4] http://www.dalkescientific.com/writings/diary/archive/2007/06/01/lolpython.html http://www.dalkescientific.com/writings/diary/archive/2007/0...
- zedshaw 15y agoLooks interesting, good design, didn't try it because it requires a login that gives a scary "THIS APPLICATION WANTS TO READ YOUR EMAIL ON GMAIL OH NOOOEESSSSS" login.
- steph37 15y agoI dunno. She didn't really follow the instructions. Maybe the error messages should be more helpful. But part of being a programmer is being very precise and having to deal with initially obscure and unexpected errors like that. Its frustrating yes, but if a person's reaction to that tutorial is to give up rather than be intrigued and push harder, I can't imagine them ever having the patience or drive to debug way more complicated systems.
- frasertimo 15y agoI work for a small start-up in a completely non-technical role. I have no programming ability and previously had no desire, but since I've started working here I've had the desire to learn some. Until Codecamedy came along it was probably just going to be a project I continuously put off until something else changed to make it happen. But now I'm signed up to get the Code Year emails, it's something I'll probably remember to do from week to week. Anyway, back to the usability. I agree with the author that it's easy to make mistakes and feel confused with learning to code on Codecademy. But from what I've gathered so far it's easy to make mistakes and feel confused with learning to code, period. Programming involves a lot of testing, of trial and error, to come to the right answer, or more relevantly; a better answer. Codeademy is giving people the opportunity to ease into that sense of trial and error, but it needs to be there nonetheless, because that is the reality of programming. If you make a mistake, such as typing with a close bracket quote, and then you get an error message, what you do from there is probably a good signal of whether you should continue learning to code. If that happens to you five times, and you keep thinking "huh, why did that happen?" and then continue working on it until you figure it out, there's a good chance you have the sort of insatiable quest for understanding that you probably need to be a programmer. On the other hand, if you give up after a few tries, then it's likely that you don't have that same need to understand the logic behind it. Codecademy is obviously trying to bring programming to a wider audience, but it shouldn't simplify it to the point where it's not giving a realistic picture of the very nature of programming. You can choose to take the stairs over diving in; but you still gotta get in the pool.
- roberthahn 15y agoI thought my 10y.o. daughter might want to learn programming. So I pointed her to codecademy and said if she got stuck, to call me over. She was excited to try, but ran into the exact same problems this article surfaced. She was being a real trouper about it, but it was plain that her patience and temper were running short. That said, once we got past the first steps and I taught her how the website was supposed to work, she breezed through the next handful of exercises before calling it a night. All that said, I was definitely left with the impression that codecademy was not well designed for complete beginners. Yet. For now I had a brief look at Scratch (http://scratch.mit.edu/ http://scratch.mit.edu/) and I'm tempted to turn her loose on that. It seems to have a nicer effort/reward slope, and will help her understand enough of the core ideas behind programming that I could then turn her loose on other languages.
- hsshah 15y agoI highly recommend Scratch. I teach 8 - 12 year olds using scratch. It teaches computational concepts in a fun (certainly not intimidating way). I am now planning to experiment using Scratch for adults as well as a starting point before introducing any of the common programming languages.
- pbreit 15y agoI hate, hate, hate that the "delete" button (I guess it's "backspace" on other PCs) goes back a page in the browser.
- da_n 15y agoIt doesn't go back, it actually deletes the page from the internet. Since the page has been trashed, the only logical result is to take you back one history state. (Sorry, couldn't resist.)
- Qz 15y agoSemi tangentially, the 'backspace = go back' shortcut has accidentally deleted countless posts and emails of mine (and I'm sure many other people's). I really think that shortcut needs to go away.
- pluies_public 15y agoNot sure about the other browsers, but this is mostly a solved issue in Firefox: it has grown clever enough to remember the contents of a text box even after going back, closing the tab (reopen it with ctrl+maj+t), or even quitting Firefox.
- Mvandenbergh 15y agoThey need to capture the common interpreter errors in the earlier lessons. So that if you try and do liz.length it doesn't come back with a reference error, but with an explanation of why that doesn't work. Making friendly error messages in the general case is a hard problem, but doing so in a restricted environment where you know the most likely errors that beginners will make (which you can data mine over the long term) is not.
- code_pockets 15y agoAnother point to consider is the following: People have been taught by their IT dept., their family members, friends, store clerks, etc., to not mess with a computer. This also applies to their automobiles, appliances, etc. In short, a lot of people out there have been hit with a newspaper on the nose (various times) for trying something new. So, they decide to learn a new hobby (or craft), and they spend (waste) a lot of time fighting the fear of breaking things. Yet, we (as in hackers) all know that one can't really do much harm to a computer with a simple approach such as the one used by CodeCademy. But non-hackers do not know that. They fear the machine (or the result of making a mistake with it (their files will be deleted! - plays in their mind)). So, CodeCademy, I suggest you help people overcome such fear by showing them what they can do before showing them how to do it. The terminal is fine, actually, I find that it was a genius idea. But, learning how to code is not bound to a terminal. It is bound to thinking, problem solving, abstractions. A learner cannot be afraid to break things, otherwise, they will not learn. Challenge their fear (and ignorance) from the start. Instead of throwing them crumbs in the form of a simple string.length exercise, show them that they: - cannot mess their computer up by playing with your website - will not get a virus - should try again if they fail at something - programming (not coding) takes time to learn How will you do that? I can point north, and tell you that Nirvana is that way, but I cannot walk the roads for you. Sit back, and think about what I'm saying. Help people learn how to code by helping them get over themselves. I wish your team the very best; code_pockets
- JoeAltmaier 15y agoShe might have learned more if she didn't have somebody telling here the answers each time. Instead of a teachable moment, her friend tried to fix the experience to match HIS expectations. I remember fooling with tiny BASIC etc as a young man. It was weird and wonderful. Nothing worked right; everything was a maze and a puzzle. I wouldn't have missed that for the world.
- linhir 15y agoI went through the Codeacademy exercises even though I can program reasonably well (i.e. I can do everything I need to, but I would never call myself a software engineer). I did this partially because I do not know js and partially because I wanted to see how the systems work. The “Oops, try again.” message can be very frustrating because, as the author points out, often the output they want is opaque. They have a great idea, but it seems that they sometimes prefer brevity in their instructions over specificity.
- dev_Gabriel 15y agoWell, I'm a programmer already and I'm doing Codecademy tutorials on Javascript. So far, I'm having a good time with it.