Usability Principles Flashcards
What is the definition of affordance and false affordance? Provide an example.
Affordance is the perceived (and actual) properties of an object or system that allows an individual to perform an action. False affordance is an apparent affordance that does not have any real function, meaning that the actor perceives nonexistent possibilities for action.
Examples of affordance: Shading and emboss effect to look like a clickable button
Examples of false affordance: Things that look like buttons but cannot be pushed (placebo button)
What is the definition of signifiers? Provide an example.
Signifier is an indication that communicates how to use the object.
Examples: home icons indicates you can go back to the home page, google assistant’s wave icon indicates that the user is speaking.
What is the definition of visibility? Provide an example.
Visibility is how easily the feature or capability of the object is seen. The more visible an element is, the more likely users will know about them or how to use them.
Examples: log-in page should only consist of information regarding logging in, compose email button in Gmail
Bad examples: sensor for faucets, may not know where to put
Debatable example: hamburger menu
What is the definition of mapping? Provide an example.
Mapping is the relationship between the control and the action or result.
Example: slider which increases in value when sliding right, stovetop where the knobs are mapped in the same order as the stovetops themselves
What is the definition of feedback? Provide an example.
Feedback is the information sent back to the user about what action they had taken or accomplished.
Examples: state changes in button when button is clicked or hovered over, loading cursors
What is the definition of constraints? Provide an example.
Constraints limit the range of interaction possibilities for the user to guide them the appropriate next action.
Examples: checkout page, only allow users to access individual steps (e.g. step 1, personal info, step 2, card details), dropdown menu (e.g. month only include the 12 months so users don’t input wrong data), validation checks on input fields
What is the definition of metaphors? Provide an example.
Metaphors are visuals, actions and procedures that exploit specific knowledge that users already have from other domains.
Examples: desktop metaphor from real-life desktops to MacOS desktop, iBooks, etc., folders/files
What are conceptual models and mental models? What are the differences between them?
Conceptual models are from the designer’s perception of how the system will actually work, while mental models are from the user’s perception of how they think the system should work.
Differences:
- Conceptual models are typically created externally by designers, while mental models are individually constructed by each person.
- Mental models can be highly flexible and adaptable, evolving over time based on new experiences and information. Conceptual models are generally more static.
What is the system image?
The system image is the information conveyed by the product itself.
What is the Gulf of Evaluation and Execution?
The gulf of evaluation revolves around if the actions were performed correctly, and it is the expectations and the availability of the information specifying the state. The gulf of execution revolves around the difference between the user’s perceived execution actions and the required actions.
How do you bridge the gulfs?
Use the principles of Visibility, Feedback, Consistency, Reliability, Discoverability etc.
What is Norman’s 7 stages of action?
- Forming the goal
Something to be achieved - Forming the intention
Specifies the task that needs to be done in order to achieve the goal - Specify sequence of actions
Precise sequence of the actions taken to complete the task - Execution of action sequence
Actually doing the task - Perceiving the state of the world (the result from the action)
Experience what happened after executing the action sequence (5 senses) - Interpreting the perceived state
Making sense of the perceived states and put perceptions together - Evaluation of interpretations
Compare the outcome with what was originally wanted
Apply Norman’s 7 stages of action to deleting a file on the desktop GUI.
- Want to delete the file XYZ.
- Put file in trash can.
- Open the explorer, click to folder that contains XYZ, press and hold mouse over XYZ, drag XYZ towards trash can, place XYZ over trash can, release mouse button
- Doing the actions above
- Hear a sound, see the icon disappear, trash can icon changes
- Sound comes from putting the file in the trash can, icon that disappeared is the file deleted, trash can be changed to an image that is full
- Trash can is full, file has been deleted
Apply Norman’s 7 stages of action to creating a new directory (folder) using the command line in Unix.
- Want to create a new folder XYZ
- Execute command to create folder in terminal
- Open the terminal, change directory to desired location of place to create folder, type “mkdir XYZ”
- Doing the actions above
- New folder icon appeared
- Icon that appeared due to new folder created
- New folder icon appeared, folder successfully created
