Communicating intention

In web design, communicating intention at the point of interaction is important to beget the right expectations from the user. It's only through the coincidence of expectation and result that a design becomes right. In other words, the result must satisfy the expectation as transparently as possible for the end user. This way he can become more confident in interacting with the site.

To illustrate what I mean, I have scrolled down to the comment section on Lifehacker.

lifehacker comments

Notice the length of the left column and how comments in the right column are divided by gray bars with icons that indicate expansion. We will need that later.

When I accidentally clicked in the left column, a new layer appeared above the comments with the following content:

lifehacker comments overlay

There wasn't any indication that this would happen at the point where I clicked. I just saw the regular cursor for text selection and therefore expected that I would be able to select individual words. It turned out that my expectation was wrong. The icon in the first screenshot acts in the same way—showing a layer with the conversation initiated by that particular comment. We can derive that clicking on it will expand something—maybe even full screen,—but we can't tell if it will just reveal who the participants are or do something else. Because we don't immediately perceive the arrows and the comment as one unit due to the high-contrast difference in their background colors, we can't be sure that they will be necessarily related. As we can see from the second screenshot, the comment is the first thing people see, and if it is sufficiently long, participants would not even be visible. Another side effect of a long comment is that it can push the icon off-screen (left column in screenshot 1), so that no visible clue remains, that it can be expanded. This is exactly why the point of interaction is so important. We need to always provide the user with the right context in which he/she operates. To indicate that a comment can be expanded, we could apply cursor: nesw-resize or something equivalent before anyone does the wrong thing. But then we should ask ourselves whether the new layer improves or worsens the accessibility of that content. If we enclose comments with a gray border that pours into the gray bar, we could better indicate that the scope in which the icon is valid is the whole unit.

Intentions matter, which is why they need to be clearly communicated to the user, preferably to the point when they become self-explanatory. Only this way can we generate the right expectations against which users will validate our design.

bit.ly/1aaStAM