Today's class helped us to answer:
What is the difference between micro and macro interactions?
What details are included in a 1 x D flow?
List the anatomy of a gesture.
Anatomy of a Mouse Event:
x,y (position of the mouse on screen)
“Design must seduce, shape, and more importantly, evoke an emotional response.” - April Greiman
Think about: What invites someone to know that they can do any of the above mouse actions?
Remember Don Norman's concept of the "signifier"
“Don’t even open Photoshop until you’ve prototypes and tested your low fidelity concepts with your users.” -Theresa Neil
How do we know that something is a button clickable)?
Size, shape, color, contrast
We give an ontology to a button
Anatomy of a Gestural Event:
Comes from HCI (human computer interaction) and ergonomics
Macro-level Interaction Design: Concerned with flows through the system
Distal Goals (long-term or primary)
Micro-level Interaction Design: Concerned with affordances on an interface
One to one gestural interactions.
Recommended Reading: “Microinteractions” by Dan Saffer
A quality that makes a potential action possible.
Some sort of indicator, some signal in the physical or social world that can be interpreted meaningfully.
What signifies hover state? Before you’ve actually done it, how’d you know you could do it?
It’s different from other elements on the page (like white space)
The more an item is being called out, the more likely it is that it does something different
Bill Scott and Theresa Neil's Principles:
How immediate is the action? Allow users to interact quickly and efficiently with your design by not obfuscating functionality.
We don’t want to hide signifiers
Blue underlined text is a good basic principle
The “i” symbol is a good indicator for additional info
Using principal to get someone to act more quickly with the page
Allow of micro-interactions that don’t take your user out of the flow. Check out Little Big Details for inspiration.
User overlays or expanded areas
Reduce need for loading extra content
Every page jump is a mental speed bump
Give your user the tools to understand where they are headed. Use explicit calls to action, and don’t leave your user wondering where to go next.
Illustrate the action just taken
Indicate a change of state
Example: iPhone screen "jumps" when touch camera icon is tapped while phone is locked (it's an "error message" that uses animation instead of text).
Occupied time vs unoccupied time (remember: Dallas Airport anecdote)
Prevent errors before they happen
Not necessarily something handled on the front-end. May also need to coordinate with back-end team.
Task Analysis aka User Flow
Happy path vs. paths users actually take: what a user might try to do and what the system will allow them to do. The default scenario.
Participants play out scenarios and interactions with their bodies.
Can be similar to what you get out of contextual inquiry.
How things change over time.
Getting into Meta side of things
Evaluate potential signifiers and feedback.
yousharknotpass
turnnoffyourmind
jbbartram-illu
kaledo-art
izzy806
tangentwithtanner
