When it comes to user interactions there is a lot to cover. What I'm gonna do here is simply explain fundamental principles and illustrate them accordingly.
Interactions help users to navigate between views, take actions, and manipulate content to final reach their goals.
User interactions
- Action gestures
- Navigational gestures
Product interactions
- Loading states
- Transitions
User interactions
Tap
The tap gesture and long press gesture each allow users to interact with elements and access additional functionality.
Action gestures
Long press
The tap gesture and long press gesture each allow users to interact with elements and access additional functionality.
Action gestures
Swipe
Users can slide elements to complete actions upon passing a threshold.
Action gesturesNavigational gestures
Pinch
Users can scale surfaces to navigate between screens.
Navigational gestures
Drag
Users can slide surfaces to bring them into and out of view.
Navigational gestures
Scroll
Users can slide surfaces vertically, horizontally, or omnidirectionally to move continuously through content.
Navigational gestures
Product interactions
Indeterminate loading states
Product has a waiting time that must be displayed on the UI
Determinate loading states
Product has a waiting time that must be displayed on the UI
Component loading state
Component has a waiting time that must be displayed on the UI
Animations
A great way to add personality to your design
Transitions
Product transition from state/screen A to state/screen B
Micro-interactions
Create a delightful moment for your users
Best practices
- Provide realistic interactions
- Don't exceed 300ms as the maximum time for your screen transitions unless it's intentional
- Use visual clue to indicate gesture
Next up
User Research