Ship or Die

Khan Academy auto-complete UI iterations. Should ship tomorrow.

Wed, 09 May 2012 20:16:00 -0400

Where we're starting

R1 - The basic idea

R2 - Lines for visual separation

R3 - Whitespace for separation

R4 - Hover style consistency

Final - Breathing room + full row select

Khan Academy auto-complete UI iterations. Should ship tomorrow.

Three (Taken with instagram)

Wed, 02 May 2012 02:45:33 -0400

Three (Taken with instagram)

Macro (Taken with instagram)

Sun, 22 Apr 2012 23:03:35 -0400

Macro (Taken with instagram)

Those Radiohead photos were asking to be made into a poster of...

Mon, 16 Apr 2012 01:20:46 -0400

Those Radiohead photos were asking to be made into a poster of some kind. This is what I came up with. Click through for a larger version. Could make a huge version if people are interested. Leave a comment or get at me on Twitter.

Photos from the Radiohead show I attended this week.

Fri, 13 Apr 2012 17:15:13 -0400

Photos from the Radiohead show I attended this week.

Raaaain! The snails were excited. (Taken with instagram)

Tue, 10 Apr 2012 14:59:30 -0400

Raaaain! The snails were excited. (Taken with instagram)

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.