The user interface represents the sum of possible experiences, not of visual elements. The way you accomplish tasks with a product  —  what you do and how it responds — that’s the interface.

So, the structure and appearance of the interface determine what is and isn’t possible.

Structure and appearance are defined through conveyed meanings.

All possible experiences should also be communicated through conveyed meanings.

Once we accept that there is a meaning to be told, it’s useful to think of interface design as a communication process. There is not only a message, but also a sender — as well as a recipient. There has to be a common thread that both of them can understand, otherwise the communication fails.

1.1







1.12




1.13




1.14




1.2


Each piece of our grid control inputs is designed to visually convey its particular function.

It is crucial for every feature to provide a recognizable function. An interface designer should always wonder how a user will know an action is possible.

Preferably, the user interface should be self-explanatory (i.e., easy to understand without any tutorials or support services).

All features should also be discoverable in the interface, without external help.

An interface should keep users informed about their actions and any changes.

2.1






2.2





2.3




2.4


shape

When the interface is self-explanatory, it becomes easy to learn and use.

When a font parameter is being adjusted, the user needs to see what has been changed with the type setting on the page.

When the user uploads an image or processes a payment for more than a second, the interface should communicate that.

Similarly, when the project is published or a font parameter is adjusted, the user needs to know that and perceive changes quickly.

A perfect user interface for a graphics editor is WYSIWYG (What You See Is What You Get).

In a physical world, you simply move objects with your hands if you want to move them. You don’t go to another room, press some button there, and then come back to the first room to see the result. In the digital space, the result of the user actions should be also shown right away; without shifting between panels, windows and preview modes.

Minimize additional layers between the interface and user, and maximize operations performed directly via content.

User attention is a precious resource that should be treated with care. As an interface designer, you must reduce the load put on the user.

Avoid visual clutter. Construct your interface out of only functional elements.

Disclose your interface gradually. As task A and task B often differ, focus the user's attention on whatever part of the UI is best suited to the task.

2.41





2.42





2.5




2.5












2.52





2.6






2.61




2.62

text widget

The Text widget padding — space around an element's content, inside of bounding box borders — can be adjusted by directly interaction with the bounding box edges.