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

Made with šŸ’™ by Pablo Armenv2.1.10

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 (45)
  • Tablet (1)
  • Mobile (6)
303. Background Animation

303. Background Animation

Desktop, Onboarding, Awareness, Web, English, Animation, Password Input

Open pattern
282. Telegram - Chat Setup Wizard

282. Telegram - Chat Setup Wizard

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

Open pattern
280. Slack - Workspace Creation Wizard

280. Slack - Workspace Creation Wizard

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

Open pattern
256. Modal Blackout with Steps & Forms

256. Modal Blackout with Steps & Forms

Desktop, Onboarding, Decision Making, Accessibility, Web, EspaƱol, Facebook

Open pattern
241. Modal Blackout with Steps

241. Modal Blackout with Steps

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

Open pattern
218. Modal Blackout with Steps, Forms and Animations

218. Modal Blackout with Steps, Forms and Animations

Desktop, Onboarding, Web, English, Squarespace

Open pattern
208. Checkbox for User Confirmation

208. Checkbox for User Confirmation

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

Open pattern
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

Open pattern
66. Actionable Empty State

66. Actionable Empty State

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

Open pattern
199. Sidebar Emptystate

199. Sidebar Emptystate

Desktop, Onboarding, Awareness, Web, English, Side Panel, Hypertext Links, Empty State, Google, Google Suite

Open pattern
148. Half-page Illustration Slider

148. Half-page Illustration Slider

Desktop, Onboarding, Web, English, Google, Google Meet

Open pattern
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

Open pattern
173. Toggl - Onboarding Action Tooltip

173. Toggl - Onboarding Action Tooltip

Desktop, Onboarding, Apple OS, English, Toggl

Open pattern
172. PedidosYa - Search Results Recommendation

172. PedidosYa - Search Results Recommendation

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

Open pattern
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

Open pattern
165. Two-step Download Flow

165. Two-step Download Flow

Desktop, Onboarding, Decision Making, Landing Page, Web, English, Google, Google Chrome

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

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

Desktop, Consent, Onboarding, Web, Apple OS, English, Apple

Open pattern
159. Wix - Natural Language Form

159. Wix - Natural Language Form

Desktop, Onboarding, Web, EspaƱol

Open pattern
No preview

158. Automatic Tooltip Blackout (2)

Desktop, Onboarding, Web, English, Notion

Open pattern
No preview

132. Amazon - Store Tooltip Reminders

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

Open pattern
122. Automatic Popover with Steps

122. Automatic Popover with Steps

Desktop, Onboarding, Apple OS, Web, English, Figma

Open pattern
118. Whereby - Pricing Step on Sign Up

118. Whereby - Pricing Step on Sign Up

Desktop, Onboarding, Decision Making, Web, English

Open pattern
115. Buffer - Hover Instructions

115. Buffer - Hover Instructions

Desktop, Onboarding, Web, English

Open pattern
104. Slack - Creating & Customization Workspace

104. Slack - Creating & Customization Workspace

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

Open pattern
81. MercadoLibre - Saving Favourites as Guest

81. MercadoLibre - Saving Favourites as Guest

Desktop, Onboarding, Web, EspaƱol, MercadoLibre

Open pattern
56. Automatic Blackout Popover with Steps

56. Automatic Blackout Popover with Steps

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

Open pattern
47. Notion - Workspace Types

47. Notion - Workspace Types

Desktop, Onboarding, Web, English, Notion

Open pattern
No preview

46. Dribbble - Posting Graphics Online

Desktop, Onboarding, Web, English

Open pattern
29. About.me - Wizard Generation Profile

29. About.me - Wizard Generation Profile

Desktop, Onboarding, Accessibility, Web, English

Open pattern
28. Slack - Find your Workspace

28. Slack - Find your Workspace

Desktop, Onboarding, Web, English

Open pattern
93. Welcome Screen with Background

93. Welcome Screen with Background

Desktop, Onboarding, Web, English

Open pattern
22. Mailchimp - First Mailing Campaign

22. Mailchimp - First Mailing Campaign

Desktop, Onboarding, Web, English

Open pattern
19. Twitter - Email Validation on Sign Up

19. Twitter - Email Validation on Sign Up

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

Open pattern
397. Modal with Card Options

397. Modal with Card Options

Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, EspaƱol, Modal, Thumbnail, Animation

Open pattern
386. Skeleton Loader

386. Skeleton Loader

Desktop, Awareness, Onboarding, Web, English, Loader, Thumbnail

Open pattern
382. Interactive Background Animation

382. Interactive Background Animation

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

Open pattern
378. Modal Blackout with Animation

378. Modal Blackout with Animation

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

Open pattern
361. WhatsApp - Progress Bar Loading

361. WhatsApp - Progress Bar Loading

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

Open pattern
360. Page Outline Menu

360. Page Outline Menu

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

Open pattern
No preview

355. Jira - Feature Presentation Tooltip

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

Open pattern
359. Toggle List/Grid View

359. Toggle List/Grid View

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

Open pattern
No preview

333. Static Tooltip with Steps

Desktop, Onboarding, Pathfinding, Awareness, Apple OS, English

Open pattern
No preview

329. Postman - Onboarding Tooltips

Desktop, Onboarding, Apple OS, English

Open pattern
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

Open pattern
No preview

318. Binance - Tooltip on Features

Desktop, Decision Making, Onboarding, Pathfinding, Web, English

Open pattern
Ā