Good Design

If “good design is good business” as former IBM President Tom Watson, Jr. said, and if that business is to encourage users to learn how to code, then good design of a medium must be a significant element in learning. Such a business is Codecademy: a reward-based programming education website with a fairly responsive and interactive interface designed to entice the code-wary and step it above similar ventures that have already set a strong foothold in the budding market.

This design accommodates for what Buchanan cites in “Good Design in the Digital Age” as a necessity for good design in the marketplace: setting it apart from its competitors in exploding scenes. While online education is improving in appeal and recognition, the systems are often based on one of only several paradigms, including the badge system that Codecademy uses (Young 2012). With the badge system, users of the service earn digital badges that indicate a level of knowledge or skill in a particular area depending on the tasks completed. Cofounder of Codecademy Zach Sims# uses badges as a motivational incentive that he felt was lacking in traditional methods of programming education. Retention rates, the bane of any educational program, can be directly linked to good design this way, and by introducing a dramatic plot of badge earning the user can find his own desire to continue as a “student”.

Given the fundamental nature of code being structured, efficient, and functional, the user-facing side of Codecademy also reflects this with its consistent two-column layout. The left column contains all instructions, and the right column contains a console where the user can enter code that is compiled and run server-side for instant feedback and to tame the complexity that comes with configuring a server to do this manually. Lessons earn different badges and points depending on their goal and difficulty (beginner and advanced), and sandbox consoles (called “Scratch Pad”) permit free experimentation with the code regardless of the lesson. The idea of interacting with a dynamic learning medium has a history, though, central to other popular code education sites like Code School and as an element of Dynabook research by Mark Guzdial’s Contextualized Support for Learning lab at Georgia Tech. However, Codecademy’s current main product Code Year permits their prime audience of novices to receive particular lessons emailed to them weekly and free of charge. This social context of badges mixed with a passive informal education context is a strong organizational design and central argument for their novice demographic.

The pace and delivery of the course content is designed with the greenhorn programmer in mind, with initial lessons based on very short leaps from natural language to computer language. The first lessons for Javascript, the current language of choice for Codecademy, include how to store, print, manipulating and getting information about variables and their values. Each roughly half-hour lesson opens a path to being fascinated with what programming can do, and all the user had to do was check his email as he likely does every day. In some instances, the user experience may fall off for those used to different computer interaction paradigms. Programming blogger Antonio Cangiano recently posted an experience with a novice programmer interacting with Codecademy who does not have the same intuition as experienced programmers such as browser behavior and top-level interaction that the console uses (Cangiano 2012). Another case is journalist Audrey Watters, who found that despite the badges and success with the lessons, the practical implication was lacking (Watters 2011). Context is an important design principle, providing the abstract space for which a product can be best used. However, if the user can’t take that product out of its native context, in this case using code outside of Codecademy’s console, then the user lacks the affordances necessary to benefit from the product in other ways. This is more important in the case of learning to write useful code, as the usefulness of programming is beneficial when using it to create rather than to complete lessons from a digital school.

Zach Stills responded to Waters, indicating more lessons with such a practical context and establishing Codecademy’s current state as a launchpad for interest and accessibility of programming basics. This is reflected in its main product Code Year, a weekly lesson sequence of coding basics. The future of Codecademy will likely pivot on balancing the usefulness of the lessons learned, usability of the interface to accommodate for novices, and desirability to continue clicking the “Start Your Free Lesson” button in weekly emails.

References

Cangiano, Antonio. “On the Usability of Codecademy.” Zen and the Art of Programming (blog), January 16, 2012. http://programmingzen.com/2012/01/16/on-the-usability-of-codecademy/.

Codecademy, “Code Year: Week 1.”http://www.codecademy.com/codeyear/week/1.

Guzdial, Mark. Georgia Institute of Technology, “Contextualized Support for Learning.”http://home.cc.gatech.edu/csl.

Richard, Buchanan. “Good Design in the Digital Age.”AIGA Journal of Design for the Network Economy. 1. no. 1 (2000).http://www.aiga.org/uploadedFiles/AIGA/Content/Tools_and_Resources/Gain_journal/good_design_in_the_digital_age.pdf.

Watters, Audrey. “Codecademy and the Future of (Not) Learning to Code.” Hack Education (blog), October 28, 2011.http://www.hackeducation.com/2011/10/28/codecademy-and-the-future-of-not-learning-to-code/.

Young, Jeffrey. “‘Badges’ Earned Online Pose Challenge to Traditional College Diplomas.” The Chronicle of Higher Education, , sec. College 2.0, January 08, 2012. https://chronicle.com/article/Badges-Earned-Online-Pose/130241/.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s