Ship or Die

Fallingwater was awesome to build. You can’t tell from the...

Sat, 14 Jan 2012 23:57:59 -0500

Fallingwater was awesome to build. You can’t tell from the photo but it comes apart in sections so you can see inside.

On the move.

Sat, 14 Jan 2012 03:19:08 -0500

On the move.

So this happened… The KA team with the Dr. Sanjay and some...

Thu, 12 Jan 2012 19:33:00 -0500

So this happened…

The KA team with the Dr. Sanjay and some of the awesome 60 minutes crew. I still say that it’s completely unfair to be a brain surgeon, TV celebrity, and the nicest guy in the world. I wonder which came first?

Contact Congress - Talk directly to your representatives

Sat, 07 Jan 2012 14:21:00 -0500

Today Ben and I are announcing the release of a new iPhone app called Contact Congress. What it does is really simple: grabs your location (or you can give us an address), locates your representatives, and lets you get on the phone with them in two taps.

Why we built it

Like many folks who work on the web, Ben and I hadn’t really thought that much about contacting our representatives before the justified uproar around SOPA/PIPA. A quick poll of our friends and relatives told us that they, though many of them are unhappy with what their congresspeople were doing, hadn’t either. Moreover, most people, myself included, couldn’t name the representative for their local district (most could name their congresspeople (persons?)).

While watching the SOPA hearings we became acutely aware that our voices, and opinions, weren’t really being heard by the members of the committee despite valiant efforts by folks like Rep. Zoe Lofgren. Then, in her AMA, she made this comment:

I have noticed lot of commentary on line, many thoughtful comments, tweets, etc. But most Representatives are not as plugged into the net world as many of you are. To be heard, you must speak, directly and either by phone or in person. Tweets, emails, petitions are nice, but they don’t get the same level of attention.

We decided to poke around and see what it took to actually find trustworthy contact information, and make an effort to contact our representatives. A few searches/browsing/parses later, we had numbers. Then we had to switch modes and actually pick up the phone. It honestly seemed absurdly difficult for something so important. This was something we could make easier. So we decided to build a tool to help grease the wheels of communication.

It feels right

Something that we didn’t totally anticipate is that having this information on your phone just feels right. Our representatives not only work for us but also make decisions every day that impact our lives. Is there anyone else in your life that fits that bill whose number isn’t in your phone?

I remember seeing a presentation by Jason Putorti, co-found of the very awesome Votizen, where he said that (I am paraphrasing here) congress receives an immense amount of communication every year from a very small number of individuals/organizations. The implication is that our representatives understanding of their constituents is severely skewed to the fringes (to the folks who were willing to make the effort or had a *really* good reason to. See also: Lobbyists).

We’re hoping that by removing some of the effort we can increase the number of folks who actually do it. We know that tools aren’t enough, but we’re hopeful that what we see today at the political extremes (Tea Party/OWS) is the start of larger movement to creating a more civic-minded nation. Contact Congress isn’t the force that will drive the movement, but we hope it’s like a really good hammer for the folks — like you — that will be building the movement: a great tool that you come back to over and over to help you get the work done.

What’s it cost?

The core functionality of the product (finding and contacting your representatives) is completely free. We’ve added a simple in-app purchase, a silly costume for the party of your choice, to help support the costs we will incur from running the app.

Almost forgot! I also have the space needle. Man did Lego find...

Thu, 05 Jan 2012 12:37:32 -0500

Almost forgot! I also have the space needle. Man did Lego find the right set to get me to open my wallet. This one was actually a gift. Thanks mom-in-law!

The latest in my Lego architecture collection. This model is so...

Thu, 05 Jan 2012 01:07:35 -0500

The latest in my Lego architecture collection. This model is so incredibly well-conceived. Fun putting it together and really fun to see completed.

Efficiency, affordance, & skeuomorphism

Wed, 04 Jan 2012 16:17:00 -0500

There have been many lengthy debates on the value of skeuomorphism in design, and I wanted to put down my thoughts as I’ve purposefully avoided employing it in any broad sense in the design of Khan Academy.

There is nothing wrong with skeuomorphism per se. As a design tool, its primary benefit is the ability to communicate the way something should work by helping a user recall its physical analog. The best and most used example of skeuomorphism in web design is probably three dimensional buttons. The ability to make something look press-able is an incredibly powerful tool. People encounter buttons all the time, they know what they can do when they see one. +1 for Skeuomorphism.

The major drawback is that it is frequently costly, both in terms of screen real-estate and visual complexity. In addition, it is frequently abused to give a feeling of “realness” with no regard for how that affects the usability of the implementation. Here’s an example of an incredibly cool app that I find really frustrating to use:

This app was clearly designed for people who have used one of these devices before since the UI makes no sense otherwise, but even at that it comes up seriously short. Those dials, that would be completely usable on a physical device, are *extremely* frustrating to use on a touch screen. A combination of the lack of tactile feedback (the clicks at each position of the dial) and the necessary trade-offs that were made to compensate for lack of precision makes using those dials feel inaccurate and clumsy. And check out those sweet vacuum tubes! I am guessing most people using the app don’t even know what they hell those are.

Modern computer interfaces allow for a different set of efficiencies that are not easy to get in the physical world (can you say flexible layouts?), and designers should be looking for ways to take advantage of those not work around them. Like anything else, skeuomorphism is a tool that’s available to designers. This particular tool requires some real thoughtfulness and precision to use well. Unfortunately it is a tool that comes with no instructions and few indications of exactly where and when to use it, and that leaves many folks holding it business end first.

A quotation from the Dieter Rams exhibit at SFMOMA.

Sun, 11 Sep 2011 21:24:00 -0400

A quotation from the Dieter Rams exhibit at SFMOMA.

A reaction to the proposed Windows Explorer UI improvements

Mon, 29 Aug 2011 17:34:43 -0400

The telemetry data here shows that 54.5% of commands are invoked using a right-click context menu, and another 32.2% are invoked using keyboard shortcuts (“Hotkey” above) while only 10.9% come from the Command bar, the most visible UI element in Explorer in Windows 7 and Vista. With greater than 85% of command usage being invoked using a method other than the primary UI, there was clearly an opportunity to improve the Explorer user experience to make it more effective—more visible and uniformly accessible.

— From Improvements in Windows Explorer

Talk about learning the wrong lesson from your data. There’s a huge logical leap being made here, and it’s not even mentioned. That leap comes in the form of an assumption about why only 10.9% of users are clicking stuff in the command bar: the problem is the bar itself, it’s not “visible and uniformly accessible”.

No mention of the fact that users have obviously trained themselves to use the context menu (and hot keys). An affordance that while not immediately obvious is incredibly efficient in its economy of motion, and accurate in that the thing you’re affecting is right under the mouse (no mental math of “Oh this button I am going to press all the way over here affects those highlighted rows”). If it wasn’t, I bet some of that 55% would have found another way to do things.

Also conspicuously absent is the user research which shows users having a real problem. The article references community feedback about wanting things like a “customizable command surface” and the “up button” from Windows XP. Not a damn thing about how this stuff is creating real problems managing files. My guess is that if you asked most people they’d tell you that they give a crap about managing files. They just don’t want to lose them, and they want to be able to share/print/make-stuff-out-of them quickly and easily.

In fact, my biggest use of Explorer is to find my stuff and open it. It’s very hard to tell from the data if the “Open” command also includes double-clicking on something. I have a hunch that it doesn’t, or they would have said, right? Assuming I’m right, that means that for the most common use of explorer I have ever seen, users are going to have to contend with a bunch of addition visual complexity that helps them not one bit.

In the quote that opens the article, Steven says,

Windows desktop and has undergone several design changes over the years, but has not seen a substantial change in quite some time. Windows 8 is about reimagining Windows, so we took on the challenge to improve the most widely used desktop tool (except maybe for Solitaire) in Windows.

And herein lies the problem. This change, at its core, is motivated by the technology, not the users. “It’s old and hasn’t been updated in a while” isn’t a problem I really care about. The result is an extension of that motivation. The new UI is all about improving ways users do stuff to files, as if file management is some inherently interesting task, instead of enabling users to more easily do stuff with files. If I were reimagining Windows, I’d be much concerned with the latter.

Tutorial for creating tileable textures in Photoshop

Mon, 22 Aug 2011 17:37:52 -0400

Tutorial for creating tileable textures in Photoshop:

I used this tutorial to help me create the background on the content area of this very blog. Method and Craft is generally full of awesome. Highly recommended.

Khan Academy Site Design Past, Present, and Process I used the...

Tue, 16 Aug 2011 18:00:00 -0400

2008

2009

Mid 2010

Late 2010

Today

Khan Academy Site Design Past, Present, and Process

I used the wayback machine to build this quick look back on the design of the Khan Academy site because, even though I’ve been working on the site for nearly a year, I was curious about how the site design had evolved. The homepage screenshots don’t actually do many of the amazing improvements to the site justice, but I hope it gives some cursory sense of the site at different stages.

I chose the word evolution purposefully. When I started working on the site it wasn’t broken by any means. If there’s any pattern or direct influence from me at all, I hope that it’s one of simplification over time. And although it’s been requested in angry emails that usually start off with some variation of “Your site is lame because…”, I have made it an explicit goal to keep the site as familiar as possible to existing users until we are convinced that we’ve got something so much better that it’s worth putting students through the pain of learning something new.

Angry emailers aside, with an organization as complex and ambitious as the Khan Academy hunting simplicity is a real challenge. To illustrate this, here are just a few of the competing priorities that we consider (roughly in order) when we work on the site design:

How clearly do we show what the Khan Academy offers students?
How easy is it for them to access those offerings?
Does the site make you want to explore/learn?
Does the site communicate our vision/philosophy?
Ditto for teachers/coaches/parents
Ditto for volunteers/donors/contributors?

There are a bunch of other priorities that are more temporal or situational, but just those are incredibly hard to balance, and we have to make choices about what’s important.

Latest iteration: problems, goals, and design decisions

In brief, here are a some of the problems we identified, the goals that we set, and the choices we made to address those goals.

The amount of actual content visible on our most common screen size 1200x800, especially when doing exercises was too limited. On the knowledge map, this is really problematic because of the nature of the map interface. Some users actually thought we had far fewer exercises than we really did.

Goal: Maximize visible content especially on exercise dashboard and exercises

Design Decision: Shrink navigation (weighed in at ~160px tall). Navigation is important for obvious reasons, but students spend lots of time on a single page without using navigation, and it was unreasonably hogging screen real estate.
Click tracking over an extended period of time showed us that people were finding the homepage content mushy (people were clicking lots of different places in an attempt to perform the same action). They were coping, but we want to make it clearer.

Goal: Make call to actions more clear/obvious

Design Decision: Increase visual contrast. Came in the form of reserving gradients and 3D-ness for actions (and removing it from the header). We also reduced the number of colors used on the site for various things. For reasons that we’re working to correct, we’d wound up sorta testing 41 shades of blue except by accident.
Observing new users working on exercises, we could see some users having a hard time visually parsing the page. Couldn’t find help stuff, etc.

Goal: Reduce visual noise where we can. Try to keep emphasis on key interface elements.

Design Decision: Avoid major changes to UI, keep existing logical groupings, but try to make the whole thing a little simpler and shift emphasis to key pieces of UI.

In addition to these revisions to the design of the site, our amazing summer intern class also released a bunch of features that work hand-in-hand with the new design. If you use the site regularly, please let us know what you think in the comments (Please be nice/constructively critical. We’re all friends here, right?). Not a regular user? I encourage you to give it a try and report back.

Process note: Fire and motion is for designers too

Almost every post on a specific design effort on this blog ends with a musing about the future. It’s my spasmodic attempt to give some sense of where we’re headed because as I write each post we already know more about our students than we did the day before. We’re currently measuring the impact and effectiveness of the changes I outlined. Most of the data, and user reactions are really good. We have found some things that didn’t work out as well as we’d hoped, and they’re on our list for the next iterations.

I’m hopeful that sharing this information is helpful not only as a means of explaining why we change things or make specific choices, but also to uncover some of the less popularized bits of the craft of design. I know that to this day when I hear the word designer I still imagine some cool looking guy slaving away at a drafting table surrounded by beautiful things making something artistically wonderful.

Don’t get me wrong, there is real artistry in design, and I when I see it makes my heart happy. But the designers that I’ve come to really admire are the ones that seem to hold the view that unlike art, design is a craft that produces things that necessarily exist with purpose. The belief that the things designers make are there to communicate, to activate, to persuade, to facilitate, to change or organize the world for another human being. And that these things exist in context with the people that will use them or see them.

As a designer working on software, especially web software, I’m allowed an nearly unprecedented ability to fire and move: to conceive of something, build it, see how well it works, and then change it to make it better. To get closer to Khan Academy’s users and better understand what they’re trying to accomplish and help them do that. To see the thing I’ve designed used in context and be able to change it to make existing and future more successful. And this process isn’t just an artifact of agile web development. There’s strong evidence that even designs that people think of as iconic, as coming into existence fully formed, are really products of the same process.

If you’re still reading at this point, I admire your tenacity! You might be interested to know that we’re actually hiring people to help us with this.

CSS Tricks shows us some cool stuff you can do with pseudo elements

Tue, 21 Jun 2011 11:38:06 -0400

CSS Tricks shows us some cool stuff you can do with pseudo elements:

I just made use of the multi-layered canvas trick for the LESS library I’ve been working on.

Jon Bell giving a great talk on the dangers of design that...

Mon, 20 Jun 2011 12:52:46 -0400

Jon Bell giving a great talk on the dangers of design that isn’t relevant to your audience and how over-designing can be dangerous. Originally posted on his blog.

An enjoyable food-for-thought presentation on some of the things...

Thu, 19 May 2011 10:50:12 -0400

An enjoyable food-for-thought presentation on some of the things we could change about education through games. A big thanks to Jin Yang for turning me on to this site. All of the Extra Credits videos are fantastic.

We just started using Crazyegg at the Khan Academy, and I made...

Thu, 12 May 2011 12:15:52 -0400

We just started using Crazyegg at the Khan Academy, and I made this video to share with other folks at KA to introduce them to the tool and summarize the interesting stuff from the baseline snapshots. It may or may not be extremely boring for everyone else, but I figured I would post it since there are some kinda neat insights into how the site is being used in there.

Let me know in the comments if this was helpful/interesting.

Mobile. Social. Local. Pivot. - Well one of those, anyway

Sat, 16 Apr 2011 12:42:00 -0400

I haven’t really written about the somewhat massive redesign that the Khan Academy site underwent in January/February, but in case you didn’t notice, it changed:

A lot:

The redesign accomplished a ton of goals that the organization had, and also gave us a chance to make typography, layout, and navigation a lot more consistent visually and technically. It’s a bunch easier to add/change content which is good, because we’re doing a lot of that. And people didn’t hate it either, which is every designers fear when you’re working on a product that people love.

But that’s not really why I’m here today. I’m here today to talk about “the future.” More accurately, “the present,” but saying, “the future” always seems so much more romantic.

Introducing: the Khan Academy mobile site

One thing that the new design didn’t address was the mobile experience, especially on smaller screens (it works reasonably well on the iPad). As of this moment, if you hit the site from a device running a mobile OS like Android, iOS, or WebOS (sorry Windows Phone 7 folks, we’re working on it), you should be greeted with a new version of the site that is, for the moment, focused on one thing browsing/watching videos:

A couple of things worth noting: this isn’t a separate site. It’s the same site with some mobile magic applied to it (I will reveal those secrets in just a moment). Features that are missing (login, discussion, exercises) were intentionally cut for v1 since we were really looking to validate that this was a) possible and b) people actually liked it enough to warrant the effort of making the other features work. We did take the time to make it easy to switch between the mobile and normal sites so you can parachute out of the mobile stuff if it isn’t working well enough for you.

How we built it

jQuery Mobile did basically all of the heavy lifting for us. The thing that made it easiest for us is that the markup for defining pages and list views is pretty unobtrusive, and with a little device detection to load the right CSS and JS, courtesy of Ben, we only had to do a tiny bit of conditional styling inline. If you inspect the homepage, you’ll see that we’ve defined a bunch of “pages”: one for primary navigation and one for each playlist. In total, it’s about 2k of additional markup that defines all of the navigation in the mobile site.

Once you grasp how navigation and linking work, the experience of using jQuery Mobile is something akin to sprinkling magic fairy dust on our existing site and having a mobile site grow out of that. And even though we’re not doing everything by the book, it’s surprisingly solid.

If you want to see the specifics of the implementation, you can check out the code.

Still to do

Even before we add new features, we’ve got stuff to do. The performance on some of the longer lists is a bit sluggish and can cause a JS timeout in some cases. We need to figure out if that’s because we are generating the playlist “pages” from the *very* large homepage (clocks in at about 530k) or if we should be doing the markup differently or what. We’ve also got a bit of a kludge in there to help us handle linking to resources that haven’t been converted to mobile pages yet (we show the standard site for those pages). Finally, I’ve got some work to do creating a custom skin that more closely matches the branding from the standard site, but it looks like there’s a good way to do that.

So give it a shot, and let me know what you think. Feel free to leave comments here, but it would be awesome if you would report your bug or feature request in our issue tracker.

My take on common misconceptions about the Khan Academy

Mon, 21 Mar 2011 10:39:00 -0400

With all of the positive press the Khan Academy has received lately, we’ve also started attracting a bunch of new critics. This is a good thing. I can’t tell you how existing in an echo chamber where everyone loves everything you are doing can make a sane person become really paranoid after a while. While there are a bunch of really valid concerns about what we’re doing, I wanted to try to tackle some of the more pervasive misconceptions about the Khan Academy from my perspective.

Misconception 1: The Khan Academy is trying to replace teachers

This is totally false. We have no desire to replace teachers. Teachers are in a unique position to understand their students in a way that a computer program has no hope of doing any time soon (maybe post-singularity?). We firmly believe that this understanding is important from both an educational and social perspective, and if anything, we hope to improve it.

Our goal is to offer tools that will provide great teachers with better assessments and help in motivating students to take charge of their own learning while creating more time for project/concept learning and greater opportunity for truly differentiated instruction. Most great teachers are already trying to find ways to provide these things to their students. We think we can help them.

As for the bad teachers — the unqualified one, the one phoning it in, the one with no passion for the craft of educating — we’re on a mission to make sure that those teachers’ students have a way out. In other words, if the Khan Academy is a substitute for what you’re doing, you’re doing it wrong, and we’re going to make that much more obvious.

A smart guy once said to me, “The Khan Academy probably won’t replace a truly great teacher, but it could make the world bad-teacher-proof.” Exactly.

Misconception 2: We think students should use the KA all day, just like they go to class all day

Again, totally false. There’s a shared belief around here, based on many combined years of educational experience, that many teachers have a tendency to overcomplicate things. That combined with a lack of differentiated instructions leads to an incredible amount of wasted time in traditional educational settings. We think it’s possible to spend much less on instruction if the instruction is actually targeted at what a student needs to understand right now to get her to master a concept.

The dream is to reduce the amount of instruction time overall, but especially to reduce the amount of time spent on broadcast instruction. Instead, use that time for targeted intervention and project learning/concept application with guidance of peer tutors and the teacher.

Misconception 3: The Khan Academy is a mechanical how-to guide that doesn’t teach ideas

I’ve seen this one a bunch recently, and I’ve been trying hard to figure out exactly where it comes from since Sal makes such an effort to include concept development in his videos, and we rarely hear this complaint from students. In some cases, and I suspect that this isn’t actually that uncommon, it’s just confusion from not actually watching the videos all the way through. I think this one is driven by expectation. Teachers have seen resources that seem very much like the Khan Academy before, and there is a tendency to believe that our videos are like all other videos. In practice, this isn’t what we’re seeing. We’re constantly getting feedback from students that the videos make the difference in “getting it.” Watching only a small portion of randomly selected videos might not show you the concept development. I encourage people to dig a bit deeper before dismissing the work that’s been done on this.

None of this is to say that we can’t get better at this. I’ve seen an interesting suggestion recently about showing common misconceptions in the videos as a way to increase engagement and the chances of deeper learning more quickly. I just happen to believe, based on the feedback we’re getting from users, that we’re not missing the mark here as badly as some suggest.

One other thing: Mechanics have their place, especially in developmental math. Some things need to be able to be done quickly and without much thought. If I need to reason out how to multiply things every time I do a multiplication problem, I am going to be some pretty deep doo doo. After seeing the number of students that struggle with multiplication facts, I am inclined to say that we shouldn’t be dismissive of this either. If we can find ways to make this practice more engaging (as we’re trying to do) maybe it will take care of itself in time.

Misconception 4: The Khan Academy is all about changing school

This one is a bit subtler than the others. While I believe that the Khan Academy can be used in the classroom to great effect, it is not actually about school, in the institutional sense. It is about learning.

Since joining the Khan Academy, I’ve spent a lot of time developing stuff that’s helpful to teachers (who typically teach in schools, but we get a ton of homeschoolers too), and I’ve done a bunch of work making things better for students. At no time during design or development did the team make a decision that would benefit schools at the cost of motivated learners visiting us out of curiosity, or homeschoolers, or all of the bankers that come just to watch videos about currency issues with China and the financial crisis.

When students and teachers/coaches engage with us, we take their input and feedback seriously no matter where they teach or learn. Our goal is to democratize people’s ability to become educated. This doesn’t mean that as an organization we won’t work to help schools implement the Khan Academy in their classrooms, and institutional change in schools may very well be affected by the work we are doing, but we don’t kid ourselves about this: that kind of change will be the result of an incredibly lengthy process, and improving access to a high-quality education is just as important to those outside the school system as in it.

Misconception 5: We think that the system we’ve developed today is the one that is going to get us to our end goals

It seems like a lot of people look at the Khan Academy and see a finished product of some kind. I think that is due in part to Sal having developed so much content over the last several years (what a jerk, right?). From the outside, we don’t exactly look like a startup, but culturally and organizationally we are. I think if a VC were to meet us today, they would see a smart motivated team with great (charismatic) leadership that really believes that they can put a serious dent in the problem of access to high quality educational experiences for everyone. We are scrappy. We are obsessed with delivering a great experience. And we are open-minded. We are not arrogant. We do not believe that we have all the answers. I think that VC would look at us and the success we’ve managed so far — and then they would get all sad because we’re a non-profit.

Seriously though, the critiques of the .9 beta version (the version number I have just made up out of thin air to describe the state of the site) as not being the be-all end-all of educational tools remind me a lot of the critiques that people have about startups in the early stages. There’s a lot of good stuff to come. All we can do is work our asses off and hope that we continue getting people to love the site enough and use it enough to give us the time we need to execute on our plans.

In summary…

The Khan Academy is not trying to get all teachers fired. We do not want to see kids sitting in front of computer screens all day. We strive to make sure that we are teaching concepts and will continue to work at this. We’d love to see institutional change in schools but we have a much more pressing mission of making high quality education accessible to as many people as possible as quickly as possible. And we are nowhere near convinced that we’ve gotten everything exactly right today and spend every day finding ways to make it better.

In the end, whether we succeed or fail, I am thrilled to be working on a project that is fueling the kind of discussion and debate. I am hopeful, and perhaps even overly confident, that the Khan Academy will continue to be a positive force in that debate. But what kind of startup would it be if the employees didn’t believe in the mission and the company’s ability to deliver?

UPDATE 1: Tried to clean up the phrasing on #4. It was causing some confusion about whether or not we were planning to get KA implemented in schools. We are, we are just designing with a bigger audience in mind.

Sal's talk from TED now available

Wed, 09 Mar 2011 15:44:57 -0500

khanacademy:

The talk walks you through everything from how the Khan Academy got started, to what we’re doing today and the feedback we’re geting, to what we’re envisioning for the future. If you’ve got any questions or comments, we’d love to hear ‘em.

Khan Academy and LASD Pilot on Gates Notes

Fri, 04 Mar 2011 12:00:28 -0500

Khan Academy and LASD Pilot on Gates Notes:

khanacademy:

A few weeks ago, the Gates Notes team came down and interviewed the team here at the Khan Academy and all of the great students, teachers, and administrators participating in the pilot program over at the LASD. We’re excited to be able to share this with everyone because of how this experience has helped to inform many of the recent improvements to the Khan Academy. The Gates Notes team managed to capture a bunch of really interesting footage, so make sure to check out all of the videos:

http://www.thegatesnotes.com/TED/Speakers-Topics/Sal-Khan/

Khan Academy Profiles: You are what you know

Tue, 08 Feb 2011 12:49:00 -0500

About a week ago we launched Khan Academy user profiles. Profiles are meant to round out the previous work we’d done on the design of the knowledge map, exercise interface, and badges by bringing all of the information about your performance on the site into a single interface.

There were a few competing design goals here, but the most important one was to flesh out what it means to “progress” within the Khan Academy. At a high level, the page breaks down into a few major sections

A set of top level stats that emphasize completion of exercises and videos
Vital Statistics: A completely new set of tools for measuring work: Activity, Focus, and exercise completion
Achievements: A clearer summary and more interactive badge explorer
Recent Activity: Pretty straight forward, but coalesces information that was previously hard to see

The original version of Khan Academy included stars (proficient exercises) and points (a measure of effort). When we added badges, and the badge summary page, it turned into the easiest way to measure progress because that information was so neatly summarized for users. It was never our intent to have badges be a primary motivator for the majority of users, but the lack of a profile was mildly distorting the experience for some users. While badges, stars, and points remain important, we wanted to make profiles a powerful metacognitive tool for students in the same way that the knowledge map helps them understand the interconnectedness of the topics in Math.

Don’t dumb it down

Kids are smarter than we give them credit for. No one likes being patronized at any age, but all too often software patronizes students. Things like overly kid-like color schemes, oversized buttons, and over-simplified user interface are only really appropriate for *very* young children because they send a clear message to everyone about what you think of their level of intelligence/expertise. After spending several hours observing and interviewing 5th graders, I am happy to report that they are more sophisticated and willing to experiment/explore than many adult users I’ve worked with.

The Focus graph shows how a student has divided their time on the site over the selected time period.

This is a complex graph in some ways, but it also engenders some visceral reactions, like, is it simple looking or busy? A student/teacher might not at first glance notice that on the exercise ring we show a star next to any module name that you’ve earned proficiency in, but when a user hovers the exercise the tooltip will explain what the star means. Our goal here was interesting at a glance but not necessarily completely obvious. The other important design decision on the graphs is that we didn’t use absolute scales anywhere. The result is that whether you spend 5 minutes or two hours on the site each day, the information remains visually interesting and useful.

Make it cool

We want students to start to identify themselves with the information that we’re showing in the profile. We want them to think it’s cool to have finished 80 math modules. As Ben has pointed out, grades are kind of boring in the grand scheme of things. Khan Academy profiles are designed to be visually compelling and highly interactive. Every chart provides tooltips and drill down capability (with back button functionality preserved). This gives a feeling of depth and allows students to explore/discover the connection between different metrics.

And what’s cooler than success, right? It’s one of the most addictive feelings in the world. So many students struggle with the feeling of failure, and constant absolute measures like grades only exacerbate the problem. Not everyone is going to move at the same pace, and so we owe it to students to find meaningful and interesting progress indicators that include both absolute and relative measures. Profiles were specifically designed to provide measures that help students better understand their own educational progress, set goals for themselves, and measure themselves against those goals. The good news is that it really seems to be working.

What do you think?

In Ben’s original post on what you guys wanted to see in user profiles there were a ton of good discussions and ideas generated. Are you using profiles? If so, are they interesting to you? Missing something important? Are there things you like/dislike about the design itself (especially if you’ve had trouble/confusion while trying to use profiles)?