INTERACTIVE ELEMENTS_____

In this first session I’m going to discuss the most important layer of an interface, the interactive element layer. The reason these interactive elements are so extremely important is that they are the elements the carry the functionality of the platform, communicating what can be done and what the platform can do for the users. As a consequence, their affordance defines how ‘smart’ an interface is perceived to be, how fast a task can be performed and how satisfactory the experience is. When their affordance is low, either due to misplacement, i.e., users can’t find the function outside of their current task flow, or due to being misdesigned, as in a low contrast or an unrecognizable icon, several month of expensive development work goes down the drain. Nothing is sadder then seeing good software architecture failing on the visual theme of the interface.

EXAMPLES_____

D
1
2
3
4
5
6
7
sample-ui-1
How to design a UI that people will love to use

TRANSCRIPT_____

When building a UI, the designer is in a continuous dialog with the users. Everything put in the interface needs to answer their questions. There are two main questions that enter a user’s mind when seeing an element:

  1. Is there an interaction available? Meaning, Does it do something? Making it obvious whether an element is clickable or not is crucial. There is usually a lot of noise in an interface, making the active elements hard to extract from that visual scene. What is clickable and what is interactive needs to be obvious just when skimming the surface. The squeezed-eye technique can help to check and correct the affordance of the interactive elements. What enters through a squeezed eye is what the brain’s basic processing system can see of the world, the first elements that are noticed and sent along for further examination by the brain. If one can see all of the interactive elements (and preferably nothing else) by looking at the interface with squeezed eyes, then the visual affordance is in good shape. I intentionally didn't apply any colour to the elements in the sample interface, since colours evoke emotions, thus bringing the limbic processing system into the game. I applied contrast instead to demonstrate that it's not the colour that gets the click, it's the visibility of an element. So, even in black and white, it needs to be perfectly clear what the interactive elements are.
  2. What is the consequence of interacting with it? To build confidence in the users, the consequences of their actions need to be communicated clearly upfront. This applies both to textual support, such as tooltips and helper texts, and graphic elements, such as icons. Very often when users try to determine the possible outcomes of their actions, they rely on only the recognisability and correctness of the icon that represents a function. Recognisability can be supported by using an icon that has a strong resemblance to its actual physical counterpart, e.g., a printer shape or an old, conventional icon.

Tipp: recognisability in the brain starts with determining the shape of an object; hence, if you want to minimize the user’s cognitive load, you might consider keeping the shape of the original physical counterpart (or the shape of the conventional icon) and customize only the internal attributes of the icon. In terms of correctness, an icon is correct when it describes the functionality without requiring further associations or guesswork on the part of the user. For example, if the platform offers an avatar editing function, then a ‘pencil’ icon, which traditionally means editing, is correct. However, if the platform offers upload only, then the ‘pencil’ icon is incorrect, since the users only can upload, but not edit, the uploaded avatar. In this case the ‘tray+up’, the traditional upload icon, is the correct one.

REFERENCES_____

Link goes here

NEXT SESSIONS_____

3
4
5
6
Fontlogo-simple2

All right reserved © Julianna Sudi 2019 London | Visual portfolio on julisudi.com