Interaction Principles
Core interaction design principles
Affordances
Define what actions are possible with an object or interface based on the capabilities of the user. ## Affordances help you know what action to take. Help users achieve their goal by connecting what an object does according to their **Conceptual Model** of what that object should do. ### The form of the interactive element implies the function Affordances help people figure out what actions are possible without the need for labels or instructions. For example, buttons afford pressing because they often appear to be raised from the surface, or they are styled differently from other content often in addition to text that implies an action. ### Distinction: signifier vs affordance Affordances are the actions that are possible, while signifiers communicate where the action should take place.
Conceptual Model
An explanation, usually highly simplified, of how something works, which is formed through experience, training and instruction. ### Conceptual models provide understanding They enable people to make associations with things that are familiar in order to understand how something works and what to do if something goes wrong. ### Universal ideas we all share Examples include the files, folders and app icons found on computers. The universality of these images makes them easier to understand and use. For more abstract concepts, like deleting, we use visual metaphors, such as the trash icon. We understand the concept of throwing something in the trash, so we can use that to represent the idea of deleting items. ### Mismatched conceptual models cause frustration In the absence of a good conceptual model, we act rashly and lack appreciation of why a system works the way it does, or become frustrated if something behaves differently to how we expect it to.
Constraints
Physical, semantic, cultural and logical constraints guide our actions and aid in interpretation. ### Constraints give us clues They allow us to determine a course of action by limiting the possible actions available to us. ### Physical constraints Restrict the possible operations; for example, a mouse cursor cannot be moved outside the screen. This boundary prevents a user from losing their visual anchor. ### Semantic constraints Provide clues to where actions can be performed; for instance, a socket is restricted in where the plug pins can be inserted. The constraint of only being inserted one way eliminates user error. ### Cultural constraints Social conventions, such as waiting in a queue to be served, create a signifier of where to stand. ### Logical constraints Help determine the alternatives; for example, scroll bars indicate that content exceeds the viewport, and that we should scroll.
Discoverability
The ability to discover what a system does, how it works, and what operations are possible. ## Discoverability is key to learning what's possible. It defines the ease at which users can find new content or features and directly affects their ability to complete specific tasks. It results from the appropriate application of affordances, signifiers, constraints, mappings and feedback. ### Ensure clear focal points Discoverability is supported through clear focal points, visual hierarchy, prioritizing the visibility of critical elements, navigation systems that are easy to access and understand, and using iconography that holds universal meaning. ### Distinction: discoverability vs findability Findability refers to the ability to find content or a functionality that users already know or assume is present. Discoverability, on the other hand, refers to the ability to discovery new content or a functionality that users are not already aware of.
Feedback
System responses that makes it clear to the user what action has been taken and what has been accomplished. ### Feedback communicates the current state of a system or object Feedback allows the user to feel in control and take appropriate actions to reach their goal, as well as building trust that the system works as intended. ### Good design gives clear feedback Clear feedback prevents discomfort or difficulty. For example, a loading bar gives information that ‘behind the scene’ progress is being made. Without it, a user may get frustrated that nothing appears to be happening. In some cases, when things load too quickly, fake progress bars can create reassurance that something did happen! ### Avoid ambiguity. Be clear and specific. The key is to design the experience to never leave the user guessing about what action they have taken and the consequence of doing so.
Mapping
The relationship between the elements of two sets of things. ### Mapping helps you understand what controls will do When controls are mapped to the layout of the devices being controlled, it is easier to determine how to use them. For example, rotating a steering wheel clockwise or counter-clockwise steers the vehicle right or left. Or the layout of a rooms' switches are mapped to the location of ceiling lights they control. ### Natural mapping Spatial analogies, such as moving an interactive element up or down in order to increase or decrease the value of another element, will decrease the time it takes to understand it.
Signifiers
Signifiers are visible or audible clues that communicate the appropriate action within a system. ### Signifiers provide important cues They show how and where people can interact with an interface and help people see the affordances of an object. ### Apply signifiers to communicate the 'what' Use signals such as labels, arrows, icons and sounds to lead users to take relevant actions. For example, a horizontal bar lets people know that a door should be pushed to open, while a handle lets them know to pull it. ### Distinction: signifier vs affordance Affordances are the actions that are possible, while signifiers communicate where the action should take place.