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.
- Desktop (45)
- Tablet (1)
- Mobile (6)
303. Background Animation
View Pattern
282. Telegram - Chat Setup Wizard
View Pattern
280. Slack - Workspace Creation Wizard
View Pattern
256. Modal Blackout with Steps & Forms
View Pattern
241. Modal Blackout with Steps
View Pattern
218. Modal Blackout with Steps, Forms and Animations
View Pattern
_23.27.14.png%3Ftable%3Dblock%26id%3Dfe319724-0b88-47a9-baf7-e6369b6d89fb%26cache%3Dv2&w=3840&q=75)
208. Checkbox for User Confirmation
View Pattern
_22.41.58.png%3Ftable%3Dblock%26id%3D9536c15c-a66b-484b-ab99-9ff0176d418b%26cache%3Dv2&w=3840&q=75)
145. Communication Preferences on Sign Up Flow
View Pattern
_19.04.51.png%3Ftable%3Dblock%26id%3Dd227abad-960b-487c-ae3b-0540251b492d%26cache%3Dv2&w=3840&q=75)
66. Actionable Empty State
View Pattern
_12.03.02.png%3Ftable%3Dblock%26id%3Db12f414a-0b9b-4fe1-b108-9745eb40b63a%26cache%3Dv2&w=3840&q=75)
199. Sidebar Emptystate
View Pattern
_17.34.19.png%3Ftable%3Dblock%26id%3Dc8f9a216-32a6-44cc-ac16-584b05eb8c6f%26cache%3Dv2&w=3840&q=75)
148. Half-page Illustration Slider
View Pattern
173. Share Invitation to Live Movie
View Pattern
173. Toggl - Onboarding Action Tooltip
View Pattern
_00.32.31.png%3Ftable%3Dblock%26id%3De64f98fb-9a9f-4ec9-a51c-480319dd9aaf%26cache%3Dv2&w=3840&q=75)
172. PedidosYa - Search Results Recommendation
View Pattern
171. Slack - Multi-browser Sign In
View Pattern
165. Two-step Download Flow
View Pattern
_13.07.18.png%3Ftable%3Dblock%26id%3D446db8c1-e81a-4dce-9180-205f9a1a75e7%26cache%3Dv2&w=3840&q=75)
161. Apple - Two-Factor Validation (2FA)
View Pattern
_14.57.25.png%3Ftable%3Dblock%26id%3D32a1aebc-beba-4b59-88ce-f316e1f8c3ea%26cache%3Dv2&w=3840&q=75)
159. Wix - Natural Language Form
View Pattern
No preview
158. Automatic Tooltip Blackout (2)
View Pattern
No preview
132. Amazon - Store Tooltip Reminders
View Pattern
122. Automatic Popover with Steps
View Pattern
_06.19.15_p._m..png%3Ftable%3Dblock%26id%3D57456b31-2530-4a00-b0f6-064d4b8bd096%26cache%3Dv2&w=3840&q=75)
118. Whereby - Pricing Step on Sign Up
View Pattern
_01.10.02_p._m..png%3Ftable%3Dblock%26id%3Dd8f84d00-8abe-4e6d-9ba5-b99460204ec5%26cache%3Dv2&w=3840&q=75)
115. Buffer - Hover Instructions
View Pattern
_18.45.21.png%3Ftable%3Dblock%26id%3Df95b113d-eb35-41ba-9051-df2e6afe72a8%26cache%3Dv2&w=3840&q=75)
104. Slack - Creating & Customization Workspace
View Pattern
_11.47.50_a._m..png%3Ftable%3Dblock%26id%3De17e8035-d749-41b4-b920-5215a65642df%26cache%3Dv2&w=3840&q=75)
81. MercadoLibre - Saving Favourites as Guest
View Pattern
56. Automatic Blackout Popover with Steps
View Pattern
_09.48.53_p._m..png%3Ftable%3Dblock%26id%3D47fc9e0e-bb5b-4bd6-ad57-830006c1c725%26cache%3Dv2&w=3840&q=75)
47. Notion - Workspace Types
View Pattern
No preview
46. Dribbble - Posting Graphics Online
View Pattern
_01.47.59_p._m..png%3Ftable%3Dblock%26id%3D3d7f46b0-9373-4bf3-8664-d22f3d5ed441%26cache%3Dv2&w=3840&q=75)
29. About.me - Wizard Generation Profile
View Pattern
28. Slack - Find your Workspace
View Pattern
_08.28.52_p._m..png%3Ftable%3Dblock%26id%3D8b6f14fb-4f4b-4c78-b997-ab525578cf52%26cache%3Dv2&w=3840&q=75)
93. Welcome Screen with Background
View Pattern
22. Mailchimp - First Mailing Campaign
View Pattern
19. Twitter - Email Validation on Sign Up
View Pattern
397. Modal with Card Options
View Pattern
386. Skeleton Loader
View Pattern
382. Interactive Background Animation
View Pattern
378. Modal Blackout with Animation
View Pattern
361. WhatsApp - Progress Bar Loading
View Pattern
360. Page Outline Menu
View Pattern
No preview
355. Jira - Feature Presentation Tooltip
View Pattern
359. Toggle List/Grid View
View Pattern
No preview
333. Static Tooltip with Steps
View Pattern
No preview
329. Postman - Onboarding Tooltips
View Pattern
320. Discord - Sign In with Loading Tips
View Pattern
No preview
318. Binance - Tooltip on Features
View Pattern
