17 October 2014

10 Principles of Codecademy.com

Codecademy developed these principles to guide a considerable redesign of Codecademy.com.

If you're interested in the redesign process check out Codecademy Reimagined on their blog.

Source: Reimagining Codecademy.com on Medium


The principles

  1. One Column

    Whenever possible, we have constrained our entire content to a single-column layout. This helped us focus on the core purpose of the page, while also giving us more control over our narrative. A one column layout was also easier to implement within our first responsive design system, by minimizing variation between different screens and form factors, such as mobile and tablet.

  2. Social Proof

    We never want to be arrogant, pretentious and dull in talking about ourselves, the features we have just launched, or how the product can change your life. In our new redesign we rely more frequently on our users and community to convey the benefits of Codecademy and the impact it had in their lives via quotes and testimonials. Watch a video of one of our users.

  3. More Contrast

    Something you’ll notice straight away in our new design is that we use color quite sparingly, and normally with a very defined purpose. For most part, color is associated with specific actions: hover states, primary and secondary buttons and controls. This way we can guarantee that our calls to action are very prominent and distinguishable from other surrounding elements.

  4. Fewer Form Fields

    All of us know how tiring, frustrating, and sometimes exasperating, it can be to fill long forms of personal information. Whenever we require input from our users we have tried to minimize the number questions and forms fields. Overall, this measure also tends to increase conversion rates and reduce users’ typing fatigue.

  5. Keeping Focus

    We have always tried to reduce the number of calls to action in a single page, since we want users to focus on what matters the most, while also being able to single out the primary activity. One of our favorite design principles is Hick’s Law, which says that time it takes for a user to make a decision depends on the number of choices available — the higher the number the longer the decision time.

  6. Direct Manipulation

    Whenever we have to decide between content (what users want to read, consume, and act upon) and chrome (actions, controls, and navigation), our answer is very swift: content should come first. As much as possible, we have allowed users to directly act upon UI elements for further contextual actions and controls, and in the process considerably minimize the amount of links and chrome on a page.

  7. Visual Hierarchy

    Visual hierarchy is critical to any graphic designer’s work, and we have looked at it very closely when redesigning our 70+ pages. We have used typography, color and area to provide users with a clear content order that respects white space and recurrently gives their eyes a place to rest. Overall, we want the implicit hierarchy of each page to be immediately perceived, in order to improve its message and legibility.

  8. Visual Recognition

    We all know that humans are much better at recognizing things they have previously seen or experienced, than recalling them from memory. This is why we have introduced throughout our ecosystem (Profile, Dashboard, Track overview) snapshots of users’ in-progress projects. This way we can comfort users with visual elements they are familiar with, whenever they want to continue where they left off.

  9. Larger Targets

    Another great universal design principle we love is Fitts’s Law, which essentially says that the time required to move and interact with a target area is a function of the distance and size of the target. The closer and larger the target, the faster the action. This is why we have increased the size of many UI elements, such as form fields, buttons, cards and links. Overall, it improves general usability (Fitts’s Law) and ease of use in touch-enabled platforms.

  10. Design for Edge Cases

    We know how intimidating and lonely an out of the box digital experience can be, where many features might still be disabled for newcomers. As part of our redesign, we wanted to optimize our first time user experience, to feel like a rich, welcoming place, where users feel confident in exploring further. From our Dashboard to our Profile, we want users to always feel welcomed, even if they have just joined us.

1. One Column

Whenever possible, we have constrained our entire content to a single-column layout. This helped us focus on the core purpose of the page, while also giving us more control over our narrative. A one column layout was also easier to implement within our first responsive design system, by minimizing variation between different screens and form factors, such as mobile and tablet.

2. Social Proof

We never want to be arrogant, pretentious and dull in talking about ourselves, the features we have just launched, or how the product can change your life. In our new redesign we rely more frequently on our users and community to convey the benefits of Codecademy and the impact it had in their lives via quotes and testimonials. Watch a video of one of our users.

3. More Contrast

Something you’ll notice straight away in our new design is that we use color quite sparingly, and normally with a very defined purpose. For most part, color is associated with specific actions: hover states, primary and secondary buttons and controls. This way we can guarantee that our calls to action are very prominent and distinguishable from other surrounding elements.

4. Fewer Form Fields

All of us know how tiring, frustrating, and sometimes exasperating, it can be to fill long forms of personal information. Whenever we require input from our users we have tried to minimize the number questions and forms fields. Overall, this measure also tends to increase conversion rates and reduce users’ typing fatigue.

5. Keeping Focus

We have always tried to reduce the number of calls to action in a single page, since we want users to focus on what matters the most, while also being able to single out the primary activity. One of our favorite design principles is Hick’s Law, which says that time it takes for a user to make a decision depends on the number of choices available — the higher the number the longer the decision time.

6. Direct Manipulation

Whenever we have to decide between content (what users want to read, consume, and act upon) and chrome (actions, controls, and navigation), our answer is very swift: content should come first. As much as possible, we have allowed users to directly act upon UI elements for further contextual actions and controls, and in the process considerably minimize the amount of links and chrome on a page.

7. Visual Hierarchy

Visual hierarchy is critical to any graphic designer’s work, and we have looked at it very closely when redesigning our 70+ pages. We have used typography, color and area to provide users with a clear content order that respects white space and recurrently gives their eyes a place to rest. Overall, we want the implicit hierarchy of each page to be immediately perceived, in order to improve its message and legibility.

8. Visual Recognition

We all know that humans are much better at recognizing things they have previously seen or experienced, than recalling them from memory. This is why we have introduced throughout our ecosystem (Profile, Dashboard, Track overview) snapshots of users’ in-progress projects. This way we can comfort users with visual elements they are familiar with, whenever they want to continue where they left off.

9. Larger Targets

Another great universal design principle we love is Fitts’s Law, which essentially says that the time required to move and interact with a target area is a function of the distance and size of the target. The closer and larger the target, the faster the action. This is why we have increased the size of many UI elements, such as form fields, buttons, cards and links. Overall, it improves general usability (Fitts’s Law) and ease of use in touch-enabled platforms.

10. Design for Edge Cases

We know how intimidating and lonely an out of the box digital experience can be, where many features might still be disabled for newcomers. As part of our redesign, we wanted to optimize our first time user experience, to feel like a rich, welcoming place, where users feel confident in exploring further. From our Dashboard to our Profile, we want users to always feel welcomed, even if they have just joined us.

Tags

  • UX
  • Organization
  • service design

Related collections

Shneiderman's "Eight Golden Rules of Interface Design"

8 principles


Ben Shneiderman

Don Normans Principles of Design

6 principles


Don Norman

20 Guiding Principles for Experience Design

20 principles


Whitney Hess

Android Design Principles

17 principles


Android Developers

Ten things we know to be true

10 principles


Google