Interactions

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

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

💫

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