Interactions and micro-interactions
Interaction: intent + action = results
Example signing up for a Gmail Account
INTERACTION
Intent: To get a new Gmail Account
Action: Fill out ‘Create an Account form’
Result: New Gmail Account
MICRO-INTERACTION
Filling in Gender field
Intent: tell Google my gender
Action: Select gender from dropdown
Result: input field is populated with what user has chosen
Common interactions are composed of many micro-interactions
Interactions
Intent to do something
Action to make it happen
result which is either successful or unsuccessful
Anatomy of an interaction
DIAGRAM from video
Controls
Controls are objects that allow us to control a product
E.g: Tabs, radio buttons, check boxes, buttons, switches, input fields, dropdowns, pickers
Rules
Macro rules: Big rules that are made up of smaller rules
Example form:
Macro rule: All the fields must be filled in correctly in the form to submit it and proceed to the next step
Micro rules: Rules specific to each field within the form e.g - credit card fields accept a maximum 16 digits
Rules define:
- How the interface works
- What it can and cannot do
- Success and failure
- What feedback is given to users after each action it taken
- Rules define what data is used to complete a transaction / proceed and where this data comes from (e.g user must provide email address and password to login)
- Rules define what data is produced and where that data goes (e.g a confirmation number is produced at the end of the transaction and sent to the user’s email)
- Rules define what happens next after a user completes an action
Creating rules
- Use IF statements
Example Logged in user:
IF the user is logged in, display a “Hello XXXX” welcome message in the navigation bar
IF NOT logged in, naviagtion bar with the option to sign in is displayed
Example Kindle/Kindle App:
IF… the user is logged in, check to see if they have read ahead on another device and display message checking if they want to continue reading from there
IF NOT … do. nothing
Rules for users
For users rules must …..
- Be easy to understand
- Be easy to learn
- Must facilitate the overall flow
When creating rules
Must be clear to the product team how the rule is suppose to work
Feedback
Communicates to the user what is happening within the product - acts as a confirmation when a user has interacted with something
Feedback must be polite and helpful and use language that the user can understand - poor feedback can contribute to a poor user experience
Macro interactions such as transactions completed or an error message has occurred require feedback
As well as micro-interactions such as a field populated incorrectly
Feedback Summary
Feedback:
- Confirms an action has taken place
- Communicates results
- Tells us what (if anything) to do next
Defining an interaction
Interaction Design
As a UX designer one must define:
1.How the system behaves
2. How the system responds to actions
3. How the system communicates results
4. How it helps fulfil intentions
All this information must be communicated to the developer through design annotations
