Home
Flows
Components
Changelog
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.12

Home
/Flows
/Onboarding
Description
First time usage, guides and checklists to follow.

Patterns for Onboarding

Interfaces can be overwhelming for users while they learn how to use it. In those cases, onboarding patterns guide users making that learning curve smaller. Usually found when logging in for first time, on floating tooltip, stepped content or checklists to follow.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (47)
  • Tablet (1)
  • Mobile (6)
303. Background Animation (on Load)

303. Background Animation (on Load)

Desktop | Onboarding | Awareness | Apple OS | English | Animation | Password Input

282. Telegram - Chat Setup Wizard

282. Telegram - Chat Setup Wizard

Desktop | Onboarding | Accessibility | Pathfinding | Apple OS | English | Telegram

280. Slack - Workspace Creation Wizard

280. Slack - Workspace Creation Wizard

Desktop | Accessibility | Onboarding | Apple OS | EspaƱol | Slack

256. Modal Blackout w/ Forms & Steps

256. Modal Blackout w/ Forms & Steps

Desktop | Onboarding | Decision Making | Accessibility | Web | EspaƱol | English | Modal | Button | Steps | Dropdown Menu | Text Input | Image / Illustration | Close Overlay | Facebook

241. Modal Blackout w/ Steps

241. Modal Blackout w/ Steps

Desktop | Onboarding | Awareness | Web | English | Modal | Hypertext Links | Pagination | Image / Illustration | Wordpress

218. Modal Blackout w/ Steps, Forms and Animations

218. Modal Blackout w/ Steps, Forms and Animations

Desktop | Onboarding | Web | English | Squarespace

208. Checkbox for User Confirmation

208. Checkbox for User Confirmation

Desktop | Onboarding | Consent | Web | EspaƱol | Google | Google Suite

145. Communication Preferences on Sign Up Flow

145. Communication Preferences on Sign Up Flow

Desktop | Appreciation | Onboarding | ā–¼ Consent | Web | English | Text Input | Hypertext Links | Pagination | Google | Google Suite

66. Actionable Empty State

66. Actionable Empty State

Desktop | Onboarding | Awareness | Web | English | Loader | Empty State | Google | Google Suite

199. Sidebar Emptystate

199. Sidebar Emptystate

Desktop | Onboarding | Awareness | Web | English | Side Panel | Hypertext Links | Empty State | Image / Illustration | Google | Google Suite

148. Half-page Illustration Slider

148. Half-page Illustration Slider

Desktop | Onboarding | Web | English | Google | Google Meet

173. Share Invitation to Live Movie

173. Share Invitation to Live Movie

Desktop | Pathfinding | Onboarding | Awareness | Web | Apple OS | EspaƱol | Hypertext Links | Navbar | Live State | Empty State | Copy to Clipboard | Avatar | Thumbnail | Invitation Link | Disney

173. Toggl - Onboarding Action Tooltip

173. Toggl - Onboarding Action Tooltip

Desktop | Onboarding | Apple OS | English | Toggl

172. PedidosYa - Search Results Recommendation

172. PedidosYa - Search Results Recommendation

Desktop | Onboarding | Decision Making | Awareness | Web | EspaƱol | Tooltip | PedidosYa

171. Slack - Multi-browser Sign In

171. Slack - Multi-browser Sign In

Desktop | Onboarding | Pathfinding | Apple OS | Web | Email | English | Navbar | Text Input | Hypertext Links | Button | Numeric Input | Slack

203. Two-step Download Flow

203. Two-step Download Flow

Desktop | Onboarding | Decision Making | Landing Page | Web | English | Button | Fixed on Scroll | Hypertext Links | Steps | Google | Google Chrome

161. Apple - Two-Factor Validation (2FA)

161. Apple - Two-Factor Validation (2FA)

Desktop | Consent | Onboarding | Web | Apple OS | English | Apple

159. Wix - Natural Language Form

159. Wix - Natural Language Form

Desktop | Onboarding | Web | EspaƱol

No preview

158. Automatic Tooltip Blackout (2)

Desktop | Onboarding | Web | English | Notion

No preview

132. Amazon - Store Tooltip Reminders

Desktop | Onboarding | Awareness | Web | EspaƱol | Tooltip | Hypertext Links | Amazon

122. Automatic Popover with Steps

122. Automatic Popover with Steps

Desktop | Onboarding | Apple OS | Web | English | Figma

77. Sign Up Flow with Pricing Step

77. Sign Up Flow with Pricing Step

Desktop | Onboarding | Decision Making | Web | English | Button | Text Input | PIN Code | Toggle Field | Fixed on Scroll | Banner | Steps

115. Buffer - Hover Instructions

115. Buffer - Hover Instructions

Desktop | Onboarding | Web | English

104. Slack - Creating & Customization Workspace

104. Slack - Creating & Customization Workspace

Desktop | Onboarding | Web | Apple OS | EspaƱol | Slack

81. MercadoLibre - Saving Favourites as Guest

81. MercadoLibre - Saving Favourites as Guest

Desktop | Onboarding | Web | EspaƱol | MercadoLibre

56. Floating Tooltip with Steps and Blackout

56. Floating Tooltip with Steps and Blackout

Desktop | Onboarding | Decision Making | Awareness | Web | English | EspaƱol | Google | Gmail

47. Notion - Workspace Types

47. Notion - Workspace Types

Desktop | Onboarding | Web | English | Notion

No preview

46. Dribbble - Posting Graphics Online

Desktop | Onboarding | Web | English

29. About.me - Wizard Generation Profile

29. About.me - Wizard Generation Profile

Desktop | Onboarding | Accessibility | Web | English

28. Slack - Find your Workspace

28. Slack - Find your Workspace

Desktop | Onboarding | Web | English

93. Welcome Screen with Background

93. Welcome Screen with Background

Desktop | Onboarding | Web | English

22. Mailchimp - First Mailing Campaign

22. Mailchimp - First Mailing Campaign

Desktop | Onboarding | Web | English

19. Twitter - Email Validation on Sign Up

19. Twitter - Email Validation on Sign Up

Desktop | Onboarding | Consent | Web | EspaƱol | Twitter

406. Fixed Bottom-Right Chat Bubble

406. Fixed Bottom-Right Chat Bubble

Desktop | Feedback | Pathfinding | Onboarding | Web | English | Chat | Side Panel | Accordion | Fixed on Scroll | Notification Badge | Progress State | Live State | Transition | Scrollbar | Text Input

403. File Upload and Background Loader

403. File Upload and Background Loader

Desktop | Awareness | Feedback | Onboarding | Web | English | User Selection | Drag & Drop Gesture | Loader | Animation | Image / Illustration | Empty State | Progress State | Button | File OS | Click Event

397. Modal w/ Card Options

397. Modal w/ Card Options

Desktop | Decision Making | Feedback | Awareness | Onboarding | Pathfinding | Web | EspaƱol | Modal | Thumbnail | Animation | Close Overlay | Cards | Dim Overlay

386. Skeleton Loader

386. Skeleton Loader

Desktop | Awareness | Onboarding | Web | English | Loader | Thumbnail

382. Interactive Background Animation

382. Interactive Background Animation

Desktop | Feedback | Awareness | Onboarding | Landing Page | Web | English | Animation | Scrollbar | QR

378. Modal Blackout w/ Animation

378. Modal Blackout w/ Animation

Desktop | Decision Making | Awareness | Onboarding | Web | EspaƱol | Modal | Hypertext Links | Animation

361. WhatsApp - Progress Bar Loading

361. WhatsApp - Progress Bar Loading

Desktop | Awareness | Pathfinding | Onboarding | Web | EspaƱol | Loader | Hypertext Links

360. Page Outline Menu

360. Page Outline Menu

Desktop | Pathfinding | Awareness | Accessibility | Onboarding | Web | English | Pagination | Anchor Scroll

No preview

355. Jira - Feature Presentation Tooltip

Desktop | Awareness | Decision Making | Onboarding | Web | EspaƱol | Tooltip | Hypertext Links | Pagination

359. Toggle List/Grid View

359. Toggle List/Grid View

Desktop | Accessibility | Onboarding | Pathfinding | Web | EspaƱol | Tooltip | Hypertext Links

No preview

333. Static Tooltip with Steps

Desktop | Onboarding | Pathfinding | Awareness | Apple OS | English

No preview

329. Postman - Onboarding Tooltips

Desktop | Onboarding | Apple OS | English

320. Discord - Sign In with Loading Tips

320. Discord - Sign In with Loading Tips

Desktop | Pathfinding | Onboarding | Apple OS | English | QR | Text Input | Password Input | Button

No preview

318. Binance - Tooltip on Features

Desktop | Decision Making | Onboarding | Pathfinding | Web | English

Ā