Friday, December 28, 2012

Design considerations for Codecademy

Codecademy is a great website for learning programming. It is helping thousands (may be millions) of people learn how to code. Content wise Codecademy rocks however there are few design areas where Codecademy can improve on. Before I want to start on I want to state it categorically that am not a professional designer. I am just a grateful user who wants to give my feedback to a very useful website that is giving so much to users. Here I go:
(Note: please click on blog images for bigger, better and clear images)

Codecademy header needs to be visible. Always.
Codecademy header


Header contains a company’s brand identity (logo) and the most important links. Moving header outside visible page (like in image below) when user scrolls down is not a good option. Always flaunt who you are.

Codecademy header not visible





Other moving and fixed parts:
Editor area and Result area should always remain fixed on web page independent of scroll (unless when user scrolls to the bottom of the page for footer). Even now Editor and Result areas are somewhat fixed but slightly moves up and down as user scrolls up or down. There is no need for them to move. While writing a line of code user is generally focused on a particular line in editor area and simultaneously going through lesson's instructions. When user scrolls up/down the lesson instruction pane, Editor area also wavers up/down because of which user need to refocus/find her line of code again. Lessons' instructions should move up and down independent of right hand side Editor and Result area. 

Run, Reset and Save options:

Run, Reset and Save buttons/info is getting duplicated on screen hence eating a lot of precious web space. Info from both the highlighted areas (in image above) can be clubbed in a single horizontal row. Something like: 
Green Run button (Ctrl+enter) then Red Reset button (Alt+R) then Grey Save button (Ctrl+S).
This will also free up some space for increasing height of result area so that users can see more lines of result in result area. Exercises where result is displayed in various lines will be better and fully displayed in that case.

Movement from one section to other:
When one section is finished in a course then link to next section is shown in result area. If we click on that link then next section instruction set appears but it is never completely visible on web page. Some part of the lesson is always hidden at the top. A user has to scroll up the instruction panel to see start of new section’s instruction set.

Wrapping text in Editor as well as Result area:

If some error message is longer than width of the result area then result area doesn't auto-wrap the message. It just goes beyond the console area and is not visible.

Codecademy track>>course>>section alignment:


Course hierarchy seems to be displayed in disorderly fashion on web page. Track>>Course (for ex JavaScript>>Getting Started with Programming?) is on right hand side while section name (“Why learn programming” in this case) is on left hand side. If all three of them can come neatly on left hand side (may be like: JavaScript>>Getting Started with Programming>>Why learn programming?) then hierarchy will be more clear and some precious web space can be spared for Editor/Result area.