Monday, January 24, 2011

Explainability

I have been doing a lot of UI design recently at work. We just got first bunch of feedback from the users and as you can imagine they had a lot of trouble trying to navigate through the app. This made me thnk about.

I had a recent discussion with a good friend of mine and he told me that most of his UX work nowadays is about copy. At that point in time my biggest concern was to make our UI slick and lean while he was pondering how to communicate something through words. That slick and lean was the version that went to user testing and did not receive too much praise.

As I worked further on my layout I noticed interesting thing. We did not have explainable names for all the stuff in UI. The concepts were there, but they were not exposed. Sometimes I had omitted text to make the layout look better, or crammed things together to make it more compact.

We had put a lot of effort to make the app discoverable. That is, there is one layer in the UI design which allows you to explore and test all the features of the app one at a time. There is one layer, which allows really quick access to all these features via shortcuts and modifier keys. It looks pleasing to the eye too. To make the entry to the app even smoother and the structure more understandable, we added another layer of design: explainability.

Everything we have put in the UI has name and relation. Pretty much every feature and its' relation to others can be explained with just one paragraph of text (as a matter of fact, that is often my litmus test). So the UI extends outside the app too. Explainability implies literate, but not litter. Tufte's rule of adding as much information as possible with as little ink as possible still applies.

Sounds stupidly obvious, but it took me good 15 years to understand it!

1 comment:

  1. I spent a few years writing the UI to a 3D engine editor and visual programming framework. One of the biggest (and simplest) lessons I learned: have a (verbose) tooltip for every UI component.

    It's surprising how many apps don't have that. Even Maya is surprisingly inconsistent on that front. Only a fraction of its UI elements have tooltips, and often only single word ones that don't explain much.

    I think every 3D coder should try to write some user-facing UI code for their engine in their career. It is really going to help them understand what it means to have something 'usable' and 'intuitive'.

    ReplyDelete