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.
Presented below some of the most common issues and their explanation. Click on the numbers to load the related image.
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:
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.
Link goes here