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.

Thursday, December 20, 2012

Would I love to work this on my deathbed?


This might seem a bit extreme criteria to evaluate what you really want to work on but answer to this will tell you whether the job that you are doing now is meant for you or not. Whatever you would love to work on your deathbed you should be doing that now. Earning livelihood by doing some job will make you like so many people who want to just do their job, earn, retire early so that they can enjoy their life -- metaphorically it's like saving up sex for old age. Why would you want to retire if you love what you are doing? If you don’t love your work then nothing great will ever be created by you.

There are hordes of stories of people working unbelievable number of hours everyday, people working very hard despite very unfavorable conditions. You can't make those people work like that just for livelihood, they work for their love. People working on job wait for 5 pm.

Mathematician Euler lost one of his eyes in his twenties but that didn't handicap his love for math. In fact he went on to say that "I’ll have less of distraction". He kept working and lost vision in his second eye at age of 70. Even complete blindness couldn't stop him working on solving mathematical problems. He proved to be even more productive in his blindness and worked for 17 years in total blindness.

This is not madness for mathematics. This is epitome of love for the job/love.

Find your love.  If you haven't found it yet, keep looking. Don't settle.