Humility

Humility is a word that gets thrown around a lot when discussing positive characteristics that great designers might have. Most often when I hear it used, I think it’s meant to be the opposite of pride. But is it impossible to be proud of the work you’ve done while remaining humble? The conflict, at least for me, has revolved around a poor conceptualization of what it means to be humble as opposed to acting humble.

When people describe humility I frequently hear things like “a humble person isn’t defensive” and “they listen to what other people say”. These descriptions get at what humility looks like from the outside, but no one has ever described to me how to become the kind of who other people perceive as humble. Moreover trying to mimic the behaviors associated with humility has,at times,helped me assume the posture of humility while politely ignoring what others are saying. I fear I’ve missed out on a lot because I was so busy trying to act humble that I missed the point. I’ve been obeying the letter instead of the spirit of the law.

So here’s my strategy, stop thinking of humility in terms of its visible behaviors and instead think of it as a state of mind:

Humility is being open to the fact that there is always value outside ourselves.

Humility is a stance. It is an attitude for approaching work and life.With this definition, interactions with others are opportunities; they’re gifts. It’s hard to be defensive when receiving a gift. It’s easy to listen to someone who’s doing something thoughtful for you. The behaviors start to take care of themselves.

Using this framework, humility and pride aren’t in conflict. They are part of a cycle. I look back on my past work, and I’m proud. I step forward into my current and future work with humility.

khanacademy.org gets a makeover, bug fixes, and UX improvements

Khan Academy has come a long way from when I first joined waaaaay back in 2010. The company and product have both matured. The content and experience that we offer the world has grown and changed dramatically, but this is the slow steady change of iterative improvement. And even though we’ve added over 1,000 videos and hundreds of interactive exercises to the site, that change isn’t always obvious.

It’s going to be hard to miss the changes we’re releasing today.

Current:
image

New:
image

Today, we’re launching the first piece of what will eventually be a major redesign of Khan Academy. This first step is part visual refresh, part re-focusing of the interface that folks use every day, and part foundation for future changes. This change should help to clarify exactly how our content is organized and what order we recommend proceeding through tutorials while fixing a host of other small bugs (like progress indicators not showing up or not being properly aligned). It also includes user experience improvements like the menu improvement that Ben Kamens blogged about.

For the curious, we’re planning a more in-depth look at the ideas and process behind these changes to be written by our amazing design intern, Tabitha Yong. Keep an eye out here  and on the official KA blog for an announcement when that’s ready.

We’ve been testing these changes with a subset of our students and teachers around the world for the last month or so, and lots of folks have reached out to us, excited about the changes. But change isn’t automatically good and it’s definitely not always easy to deal with. We know folks will have questions and concerns. I invite you to leave your comments and questions here, or get in touch with the team via Twitter, and DEFINITELY file bug reports for things that are getting in your way. Your feedback is critical to helping us understand how to improve. Please don’t be discouraged if we can’t respond to you individually! We are reading/listening.

Love,

Team Athena (Ben Komalo, Marcia, Marcos, Jason, Tabitha)

Welcome to Crit Club

Brit!

Or Brit Club? (This is Brit, he’s from Canada!)

As a product designer, I thrive on high quality feedback about my work. My designs would be worse without it. It’s that simple.

Giving and receiving high-quality feedback is challenging. Sometimes feedback sessions can go sideways. You find yourself heading into the second hour of an intense feedback session discussing things that are clearly important but only tangentially related to the design you put up for feedback. Frustration and defensiveness start to appear in the tone of the discussion, which is changing quickly and organically. You start to worry that you’re not getting the specific feedback you need to improve the proposed design.

Given that feedback is critical, how can designers create an environment that helps them get the feedback that they need while ensuring that important but unrelated feedback gets attention it deserves. And how can you do this in a way that encourages even more and better feedback?

How about a simple rule?

The First (and only) Rule of Crit Club

Welcome to Crit Club. We only have one rule: Critique the work that’s in front of you. Be specific.

Really? One rule?

Well, I guess you could say we have two rules. Rule the Second: be civil. I’ve found it easier to enforce this rule because most organizations recognize a lack of civility as unhelpful. So let’s focus on that first rule.

A somewhat real-life example

image

Shit just got real.

I am working on a project that includes changes to my product’s homepage. The project doesn’t change the scope or functionality of the homepage significantly, but it does re-prioritize and change the visual treatment of certain elements. I present the design to a group of my colleagues walking them through the scope and rationale for the design. I explicitly invite folks to offer feedback about the design. Here are some samples of the kinds of feedback I get:

Feedback that obeys the first rule

  • This seems less readable to me.
  • I don’t understand why we’ve changed the placement of element “X”
  • I really like having more color on the homepage!

Important but not specific-to-the-current-design feedback

  • I don’t think the homepage is showing the right information. We should change the homepage to show “Y” instead.

And herein lies our challenge. The non-specific feedback is really important, and comes in the form “I don’t think we’re solving the right problem.” Because the suggestion is (almost always) an incomplete idea, the conversation becomes asymmetric. Without sketches, user flows, or use cases clearly defined, everyone starts to compare their idealized version of the new suggestion to my higher resolution idea with all its warts clearly visible. Folks start jumping in with agreements or disagreements. And suddenly I’m debating the purpose of the homepage. And it’s important, but it’s out of scope for the proposed design change.

Invoking the first rule

The only way invoking the first rule works is if, when invoked, it also means that you take responsibility for following up on the feedback that prompted you to invoke it in the first place.

In this example, I would offer an exchange: a future conversation in which I agree to address, in detail, the concern and proposed solution in exchange for the ability to keep the current conversation focused on specific feedback. In addition, I’d commit to documenting the results of that follow-on conversation and sharing it with the participants of the original discussion.

This is a bunch of extra effort, but that’s OK. The extra effort helps to ensure that the first rule isn’t invoked casually and provides clear accountability and increased transparency for the follow-up decisions. That additional accountability and transparency creates an environment that encourages more and better feedback. A virtuous cycle is formed. Peace and harmony run rampant through the team.

Cute Dog Napping

Peace, harmony, and naps

We’re trying this out at KA now, and for obvious reasons YMMV. One thing we’re still figuring out is exactly how to handle the kind of feedback that would make you reconsider the entire design. We’re thinking that the follow-up feedback loop will catch these problems and we’ll handle them on a case-by-case basis for now. Keep an eye out for a future post on a more systematic approach!

Dessert Drama

The one where my friends, Ben and Rebecca, decide to share dessert:

The one where, moments later, Rebecca discovers that Ben has eaten the entire thing while she was telling a story:

Contact Congress - Talk directly to your representatives

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.

Efficiency, affordance, & skeuomorphism

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 reaction to the proposed Windows Explorer UI improvements

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.

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.