about a week ago, we released hovercards (not to be confused with hoverboards). the next time you watch a video on ka, mouse over the name of someone who has posted a comment, question, or answer!

the observant ka user will recognize that hovercards are mini versions of a user’s public profile, with her avatar, name, five hand-picked badges, and some stats hinting towards her commitment to the site.

discussing a video on ka is intellectually fruitful, and the hope is that hovercards make the experience more joyful and more human. human in that you can imagine the other people who also mulled over which five badges to share, who also played around with their arrangement until their display case looked just right, and who are embarking on educational journeys that cross paths with your own.

give it a try and let us know how you feel!

===

as has become habit, here are a few screenshots chronicling this feature’s development.

cutting the public profile in half, and putting it into another rectangle:

one day, we might have an “add as coach” button in the hovercard, and this was a silly experiment to see what it would look to have a giant button. it is indeed giant.

wouldn’t this have been funny for folks without a public profile? maybe?

kitt (our new-but-not-that-new-anymore designer!) with the winning breakthrough to emphasize the display case over the exercise and video counts. the acts of choosing and manipulating the badges are much more meaningful and personal — we cannot be reduced to numbers, after all!

did you know that the triangle on the hovercard is in fact two triangles? there’s a white triangle sitting on top of a gray triangle. well, now you know! we’ll spare the details of how this feature was implemented except for that fun fact. the curious will always find what they seek (hint: look here).

most of the hovercards you encounter will give notice of a non-public profile. that makes for a slightly subdued learning party, but such is what happens when opting for a public profile is itself a relatively new feature and we at ka respect your privacy!

adding a coach is nothing new on ka, but this little piece of functionality does have a new home (and mostly new implementation)!

one of our values at ka (literally and officially. it is written in a document somewhere.) is that shipping beats perfection. so yes, we pare down features, as 10 user happiness units now is worth more than 11 happiness units later. once we’ve given users the 10 though, it’s not a bad idea to give them the extra 1!

cue screenshots to show where i drew the line between v1 and v1.00000001.

check out that new section in the profile nav! there used to be an add-a-coach link in the site’s footer, but no longer. you might expect to see more things pertaining to You appear in Your Profile, In The Future.

v1, fairly similar to the old add-a-coach page’s layout. we released this a couple weeks ago.

hm, how about one list?

take away the zebra stripes, add a dash of color.

maybe to the left?

never mind, let’s move it back. and on hover, turn that button *orange*. we released this shortly after v1.

i also made a few changes since v1 to the interaction to hopefully make it Feel Right (like disabling inputs, clearing the textfield in various cases, showing error notifications, and maybe more!). alas, those don’t show up so well in screenshots.

try to add a coach, and let me know how it goes!

in the usual spirit of shipping, learning, and iterating, we’re using naive heuristics to suggest only exercises and videos. we explicitly cut showing the context for an exercise/video (is it part of a goal, badge, or challenge?), and we don’t suggest goals even though that would have been nice.

i wouldn’t publish a paper on the preliminary data from our a/b test, but it is at least promising. the super scientific diagram below compares video completions by users who do see suggested activity against users who do not see suggested activity (blue and red, respectively). for the curious, we mostly arbitrarily chose to split 50-50.

=== bonus screenshot time! ===

how suggested activity might have looked. we brainstormed a long list of encouraging phrases, but it didn’t feel right. if we used the same phrase for everything, it became repetitive and not-useful. if we mixed up the phrases, the exercise/video names were no longer nicely lined up for skimming (i love skimming!).

===

how suggested activity might have looked #2. similar to the previous screenshot, but bringing the exercise/video icons into the blob, minifying the icons and the streak bar, and giving up on encouraging sentences. rock out!

===

might you have a suggestion for me? i’m all ears.

exhibit a. the first (and thus mildly ugly/embarrassing) screenshot that i could find! from the beginning, we envisioned the new-new-profile page as being a personal and celebratory place, which people could opt-in to sharing with the greater world. we hope that people enjoy morphing their profile into some representation of themselves, proudly rejoicing in their favorite accomplishments.

exhibit b. more moving-things-around. jquery ui was great to prototype the tabs with, although we ultimately moved away from it.

exhibit c. the general structure is looking more and more familiar!

exhibit d. fast forward (many cycles) to today. here is my public profile at http://www.khanacademy.org/profile/marcia! (yes, every over-13-year-old user can claim their own URL!)

exhibit e. a helpful introduction to your new-new-profile page!

exhibit f. one of the neat new ways to customize your space. (a MySpace joke would have been funny here, right?)

exhibit g. the whole point of this is to make ka an enjoyable, engaging, and enriching experience (<– unnecessary adjective usage for alliteration purposes). how will this change behavior, # videos watched, # proficiencies earned, or the amount of awesomeness that a person feels when pondering their education?

anecdotally, user feedback has involved positive excitement and anticipation, and it’s a good sign that people are asking how to find others’ profiles (hint: you can’t right now). watch out for more improvements, like cooler avatars, suggested exercises/videos, and more! feedback always appreciated, whether via email | tweet | carrier pigeon.

ps. we didn’t actually think to claim the “khanacademy” profile url, but i’m glad we didn’t, since someone way more awesome than us has it now. check out his profile here: http://www.khanacademy.org/profile/khanacademy

• our team has blossomed from countable on one hand to no longer countable on 2 hands plus 2 feet. if we were a different collection of individuals, quadrupling in size might have been a disaster, but it wasn’t! sure, we’ve had a few existential discussions and moments of ponderous introspection, but what team doesn’t?
• interns++ (they just keep getting smarter!)
• usage++
• press++
• comparisons++ (“we’re ka for _____”, where _____ could be as curious as cooking classes)

but all these plus signs shan’t be mistaken for complacency! there are a hundred million things to change about the ka learning experience. we are not “just videos” nor are we “rote pattern matching”, and the burden is on us to dispel these misconceptions.

hello, 2012.

behold some options for aforementioned links:
#1 — something that we can laugh at now.

#2 — something that we will laugh at in x months.
ka.org/profile/marcia/vital-statistics/focus/last-month

option #1 has a path… and a hash fragment… that has another path… with url parameters… and some portion of that should probably be encoded. …more ellipses… .. . ….. …. …. .and navigating around your profile doesn’t necessarily update the address bar.

option #2 boasts improved url aesthetic/readability/rememberability. clicking on those links still does the right ajax-y thing to bring in the correct graph to the right without a full page reload, but *now* your address bar changes to reflect what you’re actually looking at. and isn’t that what you would expect?

wouldn’t you expect to be able to bookmark the page, or to copy/paste the link, or to control-click the link to open in a new tab, or to refresh the page a gazillion times and See What You Expected To See? hitting the back button takes you back to the thing you last saw, and isn’t that how history should work?

make links work, and make history work. or perish!

fortunately, it took surprisingly few lines of code to transition from #1 to #2, thanks to backbone. i just had to create a router, and let other people’s code do my job. in case you don’t believe how easy it was, i specified some routes like so:

and then i tell backbone to Make It So:

!!!

and the most beautiful thing is that it behaves nicely in internet explorer. since window.history.pushState doth not worketh there, backbone gracefully falls back to a path plus hash fragment like /profile/marcia#/vital-statistics/activity/last-month

this is just one of many interesting nuggets sitting in https://khanacademy.kilnhg.com/Repo/Website/Group/profiles, which will not see the light of production until the new year. more on what we’re cooking up in profiles later.

Anti-intellectualism has been a constant thread winding its way through our political and cultural life, nurtured by the false notion that democracy means that ‘my ignorance is just as good as your knowledge.’

– Isaac Asimov

h/t @jasonrr

We begin on the class profile page, which looks something like this.

How might we take this progress report and make it More Awesome? Say, make it easier for a coach to glean useful and actionable information? Can we show less in order to show more?

Sketch 1. One row, one exercise, different segments’ sizes are proportional to students’ progress. Scan up/down, instead of both up/down + left/right.

Sketch 2. What might happen.

Sketch 3. Get feedback! This is where Jason provides the brilliant idea of some expansion action that drills down and provides detailed student data. A long list of students under struggling or proficient still provides visceral uh-oh or oh-yay feelings. The possibilities are endless! Might you decide here to pair a struggling student with a proficient student?

.

Screenshot 300. Wherein you learn that I have much to learn about CSS.

Closer…

Learning handlebars.

Abiding by our site’s color scheme.

Like a perfectly timed cooking show, look at what we deployed earlier today! This is a real-life class, on the easy exercises, with lots of blue and orange to the right.

The same class on the harder exercises, notice the weight to the left in the bleak gray land of Unstarted.

What happens when you click on a row. The horizontally stacked segments metamorphose into a bar graph of sorts, with all of your students’ names listed alongside.

You can probably see the changes here and there between the screenshots, but I’ve listed some of them below. We have Jason, Marcos, and Matt and their feedback to thank for that!

• left to right ordering of status is swapped
• exercise name moved to the left to reduce vertical space
• shows number of students per segment, unless the segment is too skinny
• shows legend up top to remind you what the different colors mean
• cursor changes to convey “hey-you-click-me!”
• major improvements to the experience of clicking and expanding a row. easeInOutCubic is your friend, as is fading-in in sequence and slower, while fading-out in parallel and faster.
• truncate long student names with text-overflow: ellipsis

Without a doubt, the behind-the-scenes-code-action is also less appalling because of the Bens (Kamens, Komalo, Alpert) and the singular Desmond.

And there we have it, the lightweight collaborative + iterative spiral from idea to sketch to okay to better. I’m excited to chat with some coaches/teachers on Friday, and that’s how we can get from better to best.

Yay!