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
Tap
Tap
The tap gesture and long press gesture each allow users to interact with elements and access additional functionality.
Action gestures
Long press
Long press
The tap gesture and long press gesture each allow users to interact with elements and access additional functionality.
Action gestures
Swipe
Swipe
Users can slide elements to complete actions upon passing a threshold.
Action gesturesNavigational gestures
Scroll
Scroll
Users can slide surfaces vertically, horizontally, or omnidirectionally to move continuously through content.
Navigational gestures
Indeterminate loading states
Indeterminate loading states
Product has a waiting time that must be displayed on the UI
Determinate loading states
Determinate loading states
Product has a waiting time that must be displayed on the UI
Component loading state
Component loading state
Component has a waiting time that must be displayed on the UI
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