TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Codecademy - how not to do a redesign

59 pointsby MichalBuresabout 13 years ago
Some thoughts about the recent redesign of Codecademy's courses page

17 comments

zdsabout 13 years ago
I'm the cofounder of Codecademy. Unfortunately, there aren't comments allowed on the author's blog so I'll comment here (I'm emailing him as well so hopefully my comment gets posted to his blog).<p>We've received a lot of feedback on our initial courses page redesign since a soft launch on Saturday. We're working on making it easier for our users to find what's important to them and to discover interesting courses among those available on Codecademy.<p>I'd love to hear everyone else's feedback - we've been making incremental changes since the launch of the redesign (we work all the time) and we won't stop until it's incredibly easy to find the right courses. As the author mentions, we're starting with gradual changes. Thanks for your patience.
评论 #3851113 未加载
评论 #3851078 未加载
评论 #3851386 未加载
Karunamonabout 13 years ago
FTA&#62; "You could say it isn't such a big deal. But if they don't care about this what else they don't care about? Quality of the courses? User experience?"<p>This entire line of thinking really bugs the ever-loving crap out of me. Slamming the entire service based on a few misaligned elements? Pedantic much?<p>Edit*<p>I'd almost argue that the alignment was by design. Having the "start here" lined up with the middle bar implies that you would "start" by taking some action on that bar, since most of us read left to right. In this case, a bad cue. By breaking up that line, you cease going right and look down instead.
评论 #3851232 未加载
评论 #3851007 未加载
评论 #3851026 未加载
calydonabout 13 years ago
Taking a stand on something publicly takes courage so I don't want to be too dismissive, but respectfully, Michal, I disagree.<p>I'm taking the Javascript courses and I barely noticed the page had been redesigned. (That's good design!) I had no trouble finding and walking right into what I wanted. The layout is clear, logical and looks good. The 'start here' tag is probably superfluous because it isn't needed. It's obvious where you should start, depending on what you're after. I immediately got that the HTML course material had been added, but really it seemed like not much more had changed.<p>I think overall, your article was bad advice.<p>The slight misalignment of a few elements should be corrected, but actually, why bother - NO ONE but someone with a bone to pick would notice something so trivial. Build, measure, learn - don't obsess over UI pedantry.<p>Michal - I looked at your proposed redesign and found it cluttered, hard to read, and confusing. Codecademy - here's a good example of when to ignore your vocal users.
评论 #3851082 未加载
评论 #3851179 未加载
cesartabout 13 years ago
For someone very vocal and direct about one specific designer's work, there seems to be a very obvious lack of work, a portfolio or a link to a Dribbble profile on his own site.<p>As a designer myself, I'm always down for critiques and feedback (especially when it's a tough pill to swallow — this is what keeps me improving), but Michal, your post was overly critical and not constructive in any way. You mentioned your youth and ambition — being a designer is all about communication, whether in creating a product for your users, in pitching clients, in explaining functionality to an engineer, etc., and in my opinion, this is not the way to communicate with someone regarding their work, designer or not. Best of luck in learning this.<p>Edit: here's an example of someone doing something similar in the right way: <a href="http://kyrobeshay.com" rel="nofollow">http://kyrobeshay.com</a>.
评论 #3851491 未加载
zdgmanabout 13 years ago
Great to see zds in here actively addressing comments. I was really surprised to find the site redesigned after not having picked it up in about a week (been to busy to walk through the rest of my missing tutorials).<p>I have to agree with the sentiment currently, the redesign throws way too much in your face all at once and I can only imagine for a beginner that you would easily be pushed away from the site if it was your first time trying to get into it.<p>For me, I would like to be asked up front which path I would like to take: Are you looking at applications or are you looking at web apps? After that only show me the lessons that relate to that path and pull back the rest of the site design to be as minimalist as possible.<p>What would also be great is if I didn't have to bring up another tab just to look at the QA section when I get stuck trying to implement a solution.<p>Finally, would love if the code panels were actually a bit bigger so that when you have a multi-line program you could view all of it at once. I don't know what is the most used resolution when viewing the site but I imagine you do have room to make the console bigger regardless.<p>Love the product and I am definitely going to keep using it regardless of the design.
评论 #3851103 未加载
valhallarecordsabout 13 years ago
I don't care much for alignment. I think it's nit picking for the most part.<p>The simple list format you had before was much easier to understand than the new design.<p>The new design does look prettier at first glance though, but it just becomes frustrating once I try to actually use it. It's very unclear which course I should take first. I get no sense of prerequisites. Different types of activities (ie. projects vs lessons) are mixed together.
评论 #3851091 未加载
twelvechairsabout 13 years ago
The author is really making the most of this. Sure, Its not the greatest redesign I've ever seen, but is it the worst? No. far from it. And his own redesign is not exactly an earth shattering improvement - some relatively minor tweaks (which work at this resolution well, but perhaps not others) only.
tagawaabout 13 years ago
I think there's a lot of truth in the criticisms but is the harsh tone really needed? Seems to me as though they're trying out small design changes, listening to feedback (as evidenced in this page) and improving things as they go along. Sounds like a good recipe to me.
评论 #3851287 未加载
malectroabout 13 years ago
The grammar of this post really detracts from the arguments.
MichalBuresabout 13 years ago
Here's my follow-up post <a href="http://michalbures.com/blog/follow-up-on-the-codecademy-post/" rel="nofollow">http://michalbures.com/blog/follow-up-on-the-codecademy-post...</a><p>Also I'd like to write it here too that I really appreciate and thank you for all the constructive comments.
commanderkeen08about 13 years ago
"Codecademy is about learning and teaching so something along the lines of What do you want to learn? would be more appropriate here."<p>you mean exactly what Treehouse asks?
jkantroabout 13 years ago
Preface: I'm an interface designer with a background in human-computer interaction. I come from a family of teachers, so the processes of learning and teaching lessons is nothing new to me.<p>The OP isn't wrong. This design has some major flaws, especially considering it's launch point for academic lessons. This design tries to provide many affordances through a simple layout and language, which unfortunately is one of it's core weaknesses.<p>As a designer, I fully support providing users with affordances to help guide them through the navigation and (initial) experiences they have with a product. The design of user affordances can be very hard to scale in covering a swath of new experiences, specifically those for learning and teaching new lessons (languages, projects, etc). This is especially true in Codecademy's case. With teaching and learning a lesson, it's a journey of an experience with a story or narrative that we all generally share/follow. Knowing this and from experience the design of a learning and teaching experience is one that should be guided through the means of using clean and intuitive interactions, layouts, straightforward language, limited and specific color choices, clear and understandable iconography and most important the display of relevant and necessary information.<p>The design of this page unfortunately doesn't follow much of what I've generally just stated. It lacks focus partially due to the language, the use of 5+ colors, general layout, ambiguous iconography, and the lack of sensibly presented information hierarchy and relevancy. You don't know which container to start with, and whether or not the content in one is relevant or has an impact on the other. It all starts with the left container and the yellow box stating 'Start Here!-&#62;'. If you start there and try to follow along you can either end up in the right column or continue further down the left column. This is where the navigation and understanding of this page falls apart.<p>Path of the Right Container:<p>If you go to the right container you are presented with a list of projects and lessons that can filtered in two different ways: Above the list is filtering by language/platform/all and to the immediate right of the list is filtering by lessons/games/misc/all as well as a search field. There too much filtering and currently unnecessary search field for a contained design and growing list of courses (currently at a total of 24). Better inline segmented of of the list (i.e. segment games from courses from misc as opposed to random ordering). There are plenty of other issues but let's continue on.<p>Path of the left container:<p>Continuing down the path of the left container your asked the only question of the page "Hello! What can we help you build?" Ideally I'd imagine this relates to a user finding and picking a project game or lesson in the right container. But, immediately below the question there is an instructional statement to 'Pick a track to start learning" where a user can select one of two answers 'Applications' or 'Websites'. If a user then clicks one they are taken away to a different page with out any feed forward affordance via language or visual queue at all. This makes you question what's the point of the right container with all those options if I'm going to be taken to a different page. Continuing on, just below these 'track' options is another section titled 'Up Next', which contains a course title and button to 'Continue course' that I've partially completed. Because it's titled 'Up Next' its misleading and now seems arbitrarily placed on the page with no connection to the content above or in the right container.<p>General conclusion:<p>Between the issues with language, layout, information hierarchy, relevancy and more, it seems like this design wasn't fully thought through or tested enough. As a designer who cares, this is troubling for a site offering an academic service with potential to charge its users. Even more so because I hope these same issues don't care over to other pages.
wyckabout 13 years ago
It is kinda confusing.<p>Agree with bad alignments but more importantly there are just to many options that basically do the same thing.<p>I find this type of page 1000x more useful ( the profile page as well), <a href="http://www.codecademy.com/tracks/javascript" rel="nofollow">http://www.codecademy.com/tracks/javascript</a><p>Several nice pages makes the cluttered <a href="http://www.codecademy.com/courses" rel="nofollow">http://www.codecademy.com/courses</a> even more strange, which fails this first metric of UI, KISS.
评论 #3851034 未加载
ramatganabout 13 years ago
I absolutely agree, new design is absolutely terrible. Hard to use and understand where the last lesson I left off at.
评论 #3851304 未加载
评论 #3851045 未加载
truth_dudeabout 13 years ago
dick
jsavimbiabout 13 years ago
You're right, the redesign looks shoddy and inconsistent with modern layout conventions. Truth be told, they probably didn't hire a designer to do the work.
评论 #3851042 未加载
评论 #3850915 未加载
5teevabout 13 years ago
For me, the site design is a small matter after the jarringly cacophonous name.