10 Principles of Codecademy
Codecademy spent three months developing this set of principles. The source contains additional contextual screenshots and videos.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.