Human Computer Interaction
A ___________ affordance is a design feature that helps, aids, supports, facilitates, enables, or makes it possible for users to sense things. • Seeing • Hearing • Feeling (and tasting and smelling) something Associated with "sense-ability" characteristics of user interface artifacts • In interaction designs, used in supporting role to help user sense • Cognitive affordances - Physical affordances
Sensory
A sensory affordance is a type of __________ affordance
Implied
A physical affordance is a type of _______ affordance
Real
Cognitive, physical, sensory, functional, and emotional are all _______ of Affordances
Types
The following are examples of ____________? • A grey link on the screen might afford clicking (truth) • A user might perceive it just as a non-interactive label (perception) • Styling it as a button (background, shadow etc.) is a signifer that makes it clearer that the link can be clicked.
Affordances
The following are reasons why ______________ is important in design? • Good usability • A good ______________ allows the user to interact with product right away, they don't have to spend time learning. • User can focus on what's important - solving their problems.
Affordances
____________ shows what an object can do. Truth • In HCI/UX, this is something that helps, aids, or makes it possible for a user to do something. The relationship between the properties of a (physical) object and the capabilities of an agent/user that determine just how the object could possibly be used. Example: • A button can be pushed; the possibility of pushing a button is it's _______________.
Affordances
A chair _______ ("is for") support and, therefore, _______ sitting.
Affords
Self organized, cross functional teams frequently analyze circumstances and user needs to adapt projects. Scrum teams contantly improve quality in springs with short term deliverables. 12 principles make up the Manifesto for _________ _____________ - four at heart • Individuals and interactions over processes and tools - be interested in user experience • Working software over comprehensive documentations. • Customer collaboration over contract negotiation. • Responding to change over following a plan.
Agile Development
The following are all a cultural combination of __________-_____ 1. Management must understand and support UX work. 2. UX professionals should show leadership and take time to reach out to colleagues. 3. Agile workflows must be flexible enough to accommodate the needs of UX personnel. 4. UX personnel should be part of the product teams, building respect and rapport with developers. Part A -> Definition -> Concept -> Wireframing -> Prototype -> Part B -> Definition -> Programming -> Testing -> Delivery -> -REPEAT-
Agile-UX
The following are _______________ of affordances. Existence of feedback for all user actions • Feedback keeps users on track • Provide progress feedback on long operations • To prevent costly errors, solicit user confirmation before potentially destructive actions • But do not overuse and annoy Help users make informed responses to dialogue box questions Example: • clear communication in message pop up prompt for closing an app like your email with unsent messages in the outbox.
Assessments
The following describes the role of affordances in _________. Through cognitive, physical, and sensory affordances users needs are met
Design
The following are ___________ ____________ in affordances? • Classifications • Framing
Design strategies
The following describes what kind of affordance design strategy? • Manipulating the relationship between the context in which the object may live and the user's motivations and knowledge. Example: To signal its intended context by designing the pen/pencil holder with a large number of holes (people have many pens and pencils but few toothbrushes). Materials such as cardboard could reinforce the fact the holder does not belong in wet environments. (e.g., bathrooms)
Classification
Design feature that helps, aids, supports, facilitates, enables, or makes it possible for users to do their _______________ actions, i.e. • Thinking • Deciding • Learning • Understanding • Remembering • Knowing about things Key for users to know what to do and how.
Cognitive
The following are examples of what type of affordance? • Clear / precise words in a button label - Enable users to understand the meaning of the button in terms of. • The functionality behind the button • The consequences of clicking on it • A clear and concise error message as feedback
Cognitive
Interfaces where computers use ___________ of the human body, typically hand movements, but in some cases other limbs can be used, for example, head ____________.
Gestural
An ____________ affordance is a design feature that helps, aids, supports, facilitates, enables, or makes possible a quality ______________ impact. Features or design elements that make an ____________ connection with users. Example, the ambiance inside IKEA stores
Emotional
An effective component of user experience which focuses on the users feelings. • Pleasure, fun, joy of use, aesthetics, desirability
Emotional Impact
The following describes what kind of affordance design strategy? • Manipulating the relationship between the intrinsic properties of the object and (again) the user's motivations and knowledge. Example: pen and pencil holder having the circular profile of pencils and circles with the notch profile of pens (stronger framing) rather than one large opening (weak _______).
Framing
Connect physical user actions to invoke system (back-end) _____________ity • Link usability to usefulness • Add purpose to physical affordance - For ex.: the reason a user clicks on a button - Help users do real work (and play) - Help users use system to get things done
Functional
An interface that takes from the same idea of movement in human body, typically hand movements, but in some cases other limbs can be used, for example, head gestures. Examples: • Scrolling, pinching, and tapping to operate an interface • It also refers to _________ recognition, including tipping, tilting, eye motion, and shaking.
Gestural
The following is what part of Norman's Stages-of-Action Model? • Evaluation of interpretations • Interpreting the perception • Perceiving the state of the world
Gulf of Evaluation
The following is what part of Norman's Stages-of-Action Model? • Intention to act • Sequence of actions • Execution of the action sequence
Gulf of Execution
The following are elements of what? • Interaction can be described as stimulus-response, whereas ______________ implies partnership between the human and the computer • A continuum from interaction to _____________. ___________ extends but does not replace interaction. • As designers, developers, researchers, product managers, entrepreneurs, and users, we can improve _____________-___________ interaction by focusing on the larger context of integration. A good partnership is understanding why the other person acts as they do. Scenario Examples: • Waking up - Turning off the alarm (interaction) - Alarm poses a consequential choice (______________) • Starting the workday - Reading email (interaction) - Email app prioritizes messages (___________) • Surfing social media - Scrolling news feed, seeing ads (interaction) - App suggests video, selects ads (___________)
Human-Computer Integration
Whether there is or is not an affordance or whether the affordance is perceptible or hidden does not really matter. What matters is that users should perceive the affordances ____________. Designing affordances means designing for recognition of the affordances _______ by the designer.
Intent
A mutual or reciprocal action, effect, or influence. Involves an exchange and is not limited to computer systems.
Interaction
The following are examples of ____________ • turning off the alarm • reading an email • scrolling a news feed
Interaction
What embraces the following? • Seeing, touching, and thinking about system or product • Admiration and anticipation before any physical _____________ • Entire experience during ____________ • Savoring memory after _______________
Interaction
This cycle is a representation of user interaction sequences
Interaction Cycle
Fundamental principles of ______________ _____________ • Visibility (perceived affordances or signifiers) • Feedback • Consistency (a standard) • Non-destructive operations (the importance of undo) • Discoverability (all operations can be discovered by systematic exploration of menus) • Scalability (operation should work on all screen sizes, small and large)
Interaction Design
________ interface focuses on traditional human abilities, such as vision, touch, speech, handwriting, motion, as well as cognition, creation, and exploration to replicate real world environments to optimize interaction between physical and digital objects.
Natural
The following is from what cycle? • Forming the goal and intention/Planning • Specifying an action/Translation • Executing the action/Physical Actions • Outcomes • Assessment - of outcome via feedback
Norman's Interaction Cycle
The following are examples of what model? • Getting rid of unnecessary emails (trigger) • I want to delete emails (Goal) • Long press or press the empty circle (alternative actions sequence) • Can I press delete (icon disabled/enabled) • Press the delete button (how to do it) • What happened (yellow notifications) • What this notification means? • Goal accomplished
Norman's Stages of Action Model
The following are ___________ in interactions. • No real usability issues • Can be user experience issues relating to inadequate usefulness • Check functionality for missing features • Check functionality for non-user-interface software bugs
Outcomes
• What one thinks an object can do is an example of a ______________ affordance.
Perceived
A ___________ affordance is a design feature that helps, aids, supports, facilitates, enables, or makes it possible for users to do their __________ actions. • Clicking • Touching • Pointing • Gesturing • and moving things In non-computer designs, it is about handles, levers, gripping, turning, moving things Example: interface button design • Adequate size and easy-to-access location • Enable users to click easily on button
Physical
This step in the interaction cycle helps with the following: Sensing objects to manipulate - The usual sensory issues (visibility, noticeability) - Includes sensing objects during manipulation • Show outline during object dragging • Make sure outline always contrasts with background Accommodate physical disabilities Avoid physical awkwardness Example: • user having to alternate constantly among multiple input devices such as between keyboard and mouse or between either device and a touchscreen. • weird buttons on a blow dryer - too close, off switch between high and low that's not easy to change/switch
Physical Actions
This step in the interaction cycle helps with the following: • Help users plan goals and complete tasks • Help users with conceptual model, metaphors, work context • Design to match user's conception (mental model) of high-level task organization Keep users aware of task progress, what has been done and what is left to do. Provide cognitive affordances to remind users to complete transaction. Examples: • 55% download progress Examples: • Hey, don't forget your tickets • Email attachments
Planning
A ____________ indicates that an affordance exists, it can be a mark, a sound or a label. Microcopy on a button that states 'click to create an account' is a ____________ that indicates the presence of the affordance of pushing a button. ___________ make affordances clearer • close the gap between truth and perception • may reduce # of possible interpretations and/or make intended way of using an object more explicit.
Signifier
Usability, Usefulness, and Emotional Impact are basic components of what?
The User Experience
This step in the interaction cycle helps with the following: • Existence of cognitive affordance • Provide effective cognitive affordances that help users get access to system functionality • Help users know/learn what actions are needed to carry out intentions • Help users predict outcome of actions • Consistency is key • Make text legible, readable • Mainly about font size, color, contrast with background Examples: • GMAIL Archive button jumps around • Adapt label to system state ("Marked for Deletion" instead of "Delete")
Translation
The series of screens, pages, and visual elements (buttons, icons, etc.) that you use to interact with a device.
UI
The look, feel and behavior vs The code that implements the interaction component Examples: • Banking app that looks good and has great navigation, but it is slow and you have to click through multiple pages to complete a task. • Ketchup's original glass bottle opened at the top, with a screw top. Hard to get ketchup out. Updated version is made out of plastic, with a pop top that sits at the base of the bottle. Looks "upside-down" in comparison to original version. Better for the user. • human body - digital product. Bones represent the code, organs represent the design
UI vs UX
The internal experience that a person has as they interact with every aspect of a company's products and services.
UX
From narrow focus on task performance to overarching characteristics of entire user experience, __________ is -part- of the user experience. Example: Different ways of zooming in on a map. • a drop down menu • drag bar • touch zoom in
Usability
Component of user experience about system functionality. • Gives ability to use system or product to accomplish goals of work (or play).
Usefulness
