INTERACTIVE ELEMENTS_____

This first session is about the most important group of design elements, the interactive elements. The reason for their extreme importance is that they are the elements that 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. Hence, interaction design is very focused on the affordance of these elements, both in terms of placement and visibility. When the affordance is low, either due to misplacement, i.e., users can’t find the function because it's placed outside of their current task flow, or due to being misdesigned, as in case of low contrast or an unrecognizable icon, several months of expensive development work go down the drain.

EXAMPLES_____

Please check some of the most common issues and their explanation below. Click on the numbers to load the related image.

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 and need to be answered during interaction design:

  1. Is this element clickable/does it do something? Meaning, is there an interaction attached to it? Making it obvious during interaction design, whether an element is clickable or not is crucial. There is usually a lot of noise in an interface, making the interactive elements hard to extract from that visual scene. What is clickable and what is interactive needs to be obvious just by skimming through the surface. The squeezed-eye technique can help to check 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. If one can spot 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 color to the elements in the sample interface, since colors evoke emotions, thus bringing the limbic processing system into the game. I applied contrast instead to demonstrate that it's not the color that gets the click, it's the visibility of the element. So, even in black and white, it needs to be perfectly clear what the interactive elements are.
  2. What happens when clicking on it? Meaning, what is the consequence of interacting with the element. 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 during interaction design by using an icon that has a strong resemblance to its actual physical counterpart, e.g., physical printer shape for the printing functionality.

Design 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 a related conventional icon) and customize the other attributes of the icon. In terms of correctness, an icon is correct when it describes the functionality without requiring further associations or guesswork. 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 avatar. In this case the ‘tray+up’, the traditional upload icon, is the one true to the functionality.

SESSIONS_____

SESSIONS_____

All rights reserved © Julianna Sudi 2019 | Design strategy projects