1. Affordance

Affordance is the property of an object or element that suggests how it can be used or interacted with. For example, a button affords clicking, a slider affords sliding, and a text field affords typing. Affordances help users understand what actions are possible and how to perform them.

To enhance affordance, UI designers should:

• Use familiar and consistent shapes, colors, icons, and labels for UI elements
• Provide visual cues such as shadows, gradients, outlines, and animations to indicate interactivity
• Avoid misleading or ambiguous affordances that confuse users or cause errors

2. Signifiers

Signifiers are the indicators or clues that communicate the affordances of an object or element. For example, a button may have a signifier such as a label, an icon, or a contrasting color that indicates its function and purpose. Signifiers help users identify and locate UI elements and understand their meaning and relevance.

To improve signifiers, UI designers should:

• Use clear and descriptive labels and icons that match the user’s mental model and vocabulary
• Use appropriate size, position, alignment, and contrast to make UI elements visible and noticeable
• Use feedback such as sounds, vibrations, or changes in appearance to confirm user actions and outcomes

3. Feedback

Feedback is the response or reaction that users receive from the system or UI after they perform an action or request. Feedback informs users about the status, progress, result, or error of their action or request. Feedback helps users feel in control, confident, and satisfied with their interaction.

To provide effective feedback, UI designers should:

• Provide immediate and timely feedback that matches the user’s expectations and needs
• Use appropriate feedback types such as text, icons, sounds, colors, or animations to convey the message clearly and accurately
• Use positive and constructive feedback that encourages users and helps them recover from errors

4. Mapping

Mapping is the relationship between the controls and the effects of a system or UI. For example, a volume knob maps to the loudness of the sound, a scroll bar maps to the position of the content, and a switch maps to the on/off state of a device. Mapping helps users understand how to manipulate and control the system or UI.

To ensure good mapping, UI designers should:

• Use natural and intuitive mappings that match the user’s mental model and physical reality
• Use consistent and logical mappings that follow common conventions and standards
• Avoid complex or confusing mappings that require memorization or trial-and-error

5. Constraints

Constraints are the limitations or restrictions that guide users towards the correct or desired actions or inputs. For example, a password field may have a constraint such as a minimum length or a combination of characters, a date picker may have a constraint such as a range of valid dates, and a menu may have a constraint such as a limited number of options. Constraints help users avoid errors and simplify their choices.

To apply constraints effectively, UI designers should:

• Use appropriate constraints that match the user’s goals and context
• Use visible and explicit constraints that inform users about the rules and expectations
• Use flexible and forgiving constraints that allow users to correct or undo their mistakes

6. Consistency

Consistency is the degree of similarity or uniformity among the elements and interactions of a system or UI. For example, a consistent UI may use the same colors, fonts, icons, labels, and layouts across different screens or pages. Consistency helps users learn faster, navigate easier, and reduce cognitive load.

To achieve consistency in UI design, UI designers should:

• Use consistent elements and interactions that follow common conventions and standards
• Use consistent terminology and language that match the user’s mental model and vocabulary
• Use consistent style and tone that reflect the brand identity and personality

7. Hick’s Law

Hick’s law describes how users make choices when they have many options to choose from. The more options there are, the longer it takes for users to decide what to do. This can make users feel overwhelmed, frustrated, or confused.

To avoid this problem, UI designers should:

• Reduce the number of options that users have to choose from
• Simplify the options by grouping them into categories or using filters
• Highlight the most important or common options that users are likely to choose
• Provide clear and helpful information that helps users compare and evaluate the options

Hick’s Law, and Fitts’ Law

Hick’s Law and Fitts’ Law are two important principles that are critical to consider in UI design. These principles are centered around the idea of how to minimize the time and effort that a user has to spend to complete a task, as well as how to optimize the user’s experience when interacting with an interface.

Hick’s Law is based on the idea that the more options a user has, the longer it will take them to make a decision. This principle states that the time it takes for a user to make a decision is directly proportional to the number of options available. The more options there are, the longer it will take a user to make a decision. Therefore, it is essential to reduce the number of options available to users to improve decision-making speed.

Fitts’ Law, on the other hand, is based on the idea that the time it takes for a user to move their mouse pointer to a target area is a function of the distance to the target and the size of the target. This principle states that the time it takes for a user to interact with an interface element is inversely proportional to the size of the element and directly proportional to the distance between the user’s current location and the element they want to interact with. This principle emphasizes the importance of making clickable elements large and easily accessible to improve the user’s experience and reduce frustration.

In summary, Hick’s Law and Fitts’ Law are essential principles that should be considered in UI design. By reducing the number of options available and making clickable elements large and easily accessible, designers can optimize the user’s experience, reduce frustration, and increase the overall efficiency of the interface.

Further Reading:

30 Practical Tips for Effective User Interface Design | by Jayaprakash | UX Planet

UX design principles to make users love your app (pixetic.com)

Class Exercise

Get appropriate images for these principles highlighted in story formats:

• For affordance, you can use an image of a door handle that shows how it can be pushed or pulled
• For signifiers, you can use an image of a button with a label, an icon, and a color that indicate its function and purpose
• For feedback, you can use an image of a progress bar, a confirmation message, or an error message that inform users about the status, progress, result, or error of their action or request
• For mapping, you can use an image of a volume knob, a scroll bar, or a switch that show how they relate to the loudness of the sound, the position of the content, or the on/off state of a device
• For constraints, you can use an image of a password field, a date picker, or a menu that show how they limit or restrict the user’s actions or inputs
• For consistency, you can use an image of a consistent UI that uses the same colors, fonts, icons, labels, and layouts across different screens or pages
• For Hick’s law, you can use an image of a simple menu with few options versus a complex menu with many options that show how they affect the user’s decision time
• For Fitts’ law, you can use an image of a large and close target versus a small and distant target that show how they affect the user’s movement time