Two Classes of User Interface Details

Most details of user interfaces , for example, text, buttons, layout, and terminology, can be classified into how much prior knowledge is required to make them understandable:

Details that require Common Knowledge

That is, details that can be understood without having to learn anything new. The user is expected to have some form of prior knowledge that – in effect – creates a correct interpretation of what is being presented.

Examples are: The shape of buttons, or links that represent clickable elements, text written in the language the user knows about, or a layout that prioritizes information in terms of how the user scans the user interface visually.

Details that require New or Learned Knowledge

These are details or concepts that are specific to the domain of the user interface. The goal of the user interface is to communicate them to the user with the least amount of effort on both sides.

Examples are: New terminology, keyboard shortcuts, or graphical representations of concepts.

Creating a good user interface is largely dependent on how the details are working together to create a deep understanding of what the user interface represents.

If possible, simple user interfaces should use details that require common knowledge only, but any more advanced user interface needs to introduce details that need to be absorbed first.

Building a simple user interface that merely uses details of common knowledge often restricts your users from working efficiently. For example: Complex task can not be combined without introducing a new user interface element, or specific tasks may require a detailed understanding of the domain terminology before they should be used at all.

As soon the required knowledge level of each detail is defined, user interfaces can be built so that they start up with the simpler details and introduce the user to more efficient and natural abstractions over time.

So obviously, there are two steps to make a better user interface:

First, every little detail needs to be classified into “commonly known” or “new to learn” category. Details that are in the gray area should be placed in the “new to learn” category.

Remember, you are a developer or designer and you know this stuff, but – for example - most computer users may have never heard of a context menu, though they may use it all the time. You don’t need to envision a senior person who has recently learned to use a computer, but a conservative decision about what details need a introduction may be a good start to cover most users.

Second, every detail in the “new to learn” category needs an introduction. This is the hard, challenging and creative part. For once this can be implemented explicitly, by writing a textual introducing somewhere where a new detail appears. Or – and that is the most exciting part of user interface design – by a contextual introduction that automatically produces an aha-effect.

Producing The Aha-Effect by Contextual Introduction

One good example for a contextual introduction of a new user interface is the scrollbar of the iPhone. While the scrolling itself is a simple feature that every user gets as soon he touches the screen, the iPhone’s scrollbar, which shows how much of the current scrolling area lies outside of the screen, introduces itself by simply appearing and changing while the user is scrolling the list. Sooner or later, the user gets what the scrollbar represent. It clicks.

But often it’s not so simple. For example, more complex touch gestures may not be introduced at all and are buried in the manual that no one reads. These gestures will be overlooked by a lot of users. But when the same functionality is reachable by a menu, for example, a small transition animation that resembles the gesture in some abstract form may be introduced to the user.

I think that getting aware about what user interface details need an introduction and the implementation of contextual introductions that produces an Aha-Effect are the most important, challenging and creative part of user interface design.