Checklist Design
📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand
👋 Check-Ins
Checklist Design
🏠 Home📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand🛎 Check-Ins
🎩

Onboarding

Page

Checklist

Tutorial or instructions

Steps to show a user how the application works to get started

⭐️ Avoid static content and allow the user to actually complete tasks and use the application when experiencing the tutorial

Empty states

Designing states for when a task hasn't been complete, or there's no information to be shown yet

⭐️ Turn an empty state into an opportunity to instruct what you would like the user to do, and point them to tasks to complete that are most likely to provide immediate value

Indicators to continue steps

If you have a multi-step onboarding process, ensure the user can understand how to continue and how to return to a previous screen

Progress indicator

Visualise the user's progress to establish expectations of how long the onboarding will take

⭐️ Percentages and time are great at simplifying the expectations for a user, as 5 steps does not indicate the length overall

Contact support

Incase a user is confused or unsure at any point

Resources

Inspiration
View more
View bucket
Articles
Best practices for onboarding
UX Planet
Choosing the right user onboarding UX pattern
AppCues
10 UX design principles for great onboarding
Foolproof
Examples
Notion
Basecamp
Headspace
Related
elements
View all
Green arrow indicating card for element content is a link

🖲️

Button

🃏

Card

🌠

Icon

⌨️

Text field

⏳

Loading

Other
pages
View all
Orange arrow indicating card for pages content is a link

👋

Sign up

☎️

Contact us

🗞️

Blog post

🏢

Careers

🤝

Team

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).