🎓 Reactive Onboarding:
Adapts user instructions based on their actions.
Reactive onboarding is a method of educating users about your product, by explaining what, and why something happened.
This is particularly useful when your app has lots of functionality that may not be necessary to learn, and it'd be impractical to force the user to acknowledge it immediately.
✅ Productivity & efficiency
Highlighting what just happened, and how you can change your behaviour in the future, can be a great way of teaching users to be more productive and efficient.
✅ Attention & interest
Reactive onboarding, by design, commands attention. i.e., "look what just happened".
✅ Complexity & understanding
✅ Feature usage
It's not enough just to identify what happened (i.e., the trigger), you also need to explain why it happened, and what the consequences are.
Remember that reactive onboarding can happen over multiple sessions, days, weeks and months. The user doesn't have to be taught about that feature the first time they hit that trigger.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M 20.929 0.527 C 20.592 -0.002 19.891 -0.159 19.36 0.176 C 17.843 1.133 16.39 2.186 15.009 3.331 C 12.239 5.618 9.838 8.414 7.792 11.345 C 7.316 12.02 6.854 12.699 6.402 13.371 C 4.944 11.666 3.485 9.962 2.006 8.27 C 1.094 7.253 -0.512 8.394 0.16 9.597 C 1.765 12.352 3.347 15.136 4.901 17.924 C 5.58 19.22 7.587 19.241 8.28 17.938 C 9.178 16.364 9.998 14.808 10.863 13.323 C 12.537 10.409 14.464 7.711 16.85 5.35 C 18.042 4.171 19.31 3.07 20.645 2.054 C 21.124 1.699 21.248 1.034 20.929 0.531 Z" fill="rgb(255, 255, 255)" height="18.905683782091618px" id="vbkgGQJFh" transform="translate(0 2)" width="21.10528955799295px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 26" xmlns="http://www.w3.org/2000/svg"><g opacity="0.8"><path d="M 15.85 4.177 C 14.316 1.561 11.568 0 8.501 0 C 3.814 0 0 3.75 0 8.363 C 0 9.811 0.409 11.268 1.184 12.588 L 7.708 21.553 C 7.872 21.828 8.176 22 8.501 22 C 8.819 22 9.123 21.838 9.259 21.608 L 15.853 12.533 C 17.383 9.914 17.383 6.789 15.85 4.177 Z M 11.693 7.779 C 11.693 9.512 10.261 10.921 8.501 10.921 C 6.744 10.921 5.312 9.512 5.312 7.779 C 5.312 6.05 6.741 4.641 8.501 4.641 C 10.261 4.641 11.693 6.05 11.693 7.779 Z" fill="rgb(255, 255, 255)" height="22px" id="qqsnXVfDT" transform="translate(2.75 4)" width="17px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><g opacity="0.8"><path d="M 22 13.357 C 22 13.983 21.751 14.582 21.309 15.024 C 20.867 15.466 20.268 15.714 19.643 15.714 L 2.357 15.714 C 1.731 15.714 1.132 15.466 0.69 15.024 C 0.248 14.582 0 13.983 0 13.357 L 0 4.021 L 10.648 9.345 C 10.869 9.456 11.131 9.456 11.352 9.345 L 22 4.021 Z M 0.691 0.69 C 1.133 0.248 1.732 0 2.357 0 L 19.643 0 C 20.268 0 20.868 0.248 21.309 0.69 C 21.73 1.111 21.974 1.674 21.998 2.265 L 11 7.765 L 0.002 2.265 C 0.026 1.674 0.27 1.111 0.691 0.69 Z" fill="rgb(255, 255, 255)" height="15.714187334136962px" id="ta6fHHMhV" transform="translate(0 2.75)" width="22px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><g opacity="0.8"><path d="M 0.897 1.646 C 0.552 1.989 0.312 2.425 0.203 2.901 C 0.203 2.904 0.203 2.906 0.202 2.911 C -0.703 7.117 1.463 11.39 6.043 15.965 C 10.565 20.483 14.902 22.706 19.09 21.801 C 19.092 21.8 19.094 21.799 19.097 21.799 C 19.568 21.692 19.999 21.456 20.341 21.116 C 20.582 20.885 20.913 20.554 21.244 20.223 C 21.729 19.74 22 19.082 22 18.398 C 22 17.713 21.729 17.057 21.244 16.573 L 18.812 14.139 C 17.804 13.131 16.171 13.131 15.163 14.139 L 14.238 15.066 C 13.969 15.335 13.554 15.395 13.22 15.214 C 12.065 14.479 10.828 13.452 9.691 12.315 C 8.561 11.184 7.531 9.943 6.81 8.795 C 6.62 8.458 6.677 8.043 6.947 7.772 C 6.951 7.768 6.956 7.762 6.96 7.758 C 7.241 7.466 7.563 7.144 7.866 6.839 C 8.873 5.831 8.873 4.197 7.866 3.189 L 5.433 0.756 C 4.95 0.272 4.294 0 3.61 0 C 2.926 0 2.269 0.272 1.786 0.756 Z" fill="rgb(255, 255, 255)" height="22.00003095067357px" id="d8dLzF7CH" transform="translate(0 0)" width="22.000293766102647px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><g opacity="0.88"><path d="M 5.528 20.013 C 7.098 20.879 8.867 21.333 10.666 21.333 C 16.547 21.333 21.333 16.547 21.333 10.666 C 21.333 4.786 16.547 0 10.666 0 C 4.786 0 0 4.786 0 10.666 C 0 12.555 0.498 14.404 1.447 16.031 L 0.089 21.612 Z M 6.094 5.682 C 6.32 5.474 6.613 5.363 6.92 5.363 L 7.245 5.363 C 7.675 5.363 8.058 5.633 8.204 6.035 L 8.868 7.866 C 8.93 8.038 8.9 8.23 8.785 8.375 L 8.26 9.031 C 8.052 9.287 7.996 9.637 8.117 9.943 C 8.754 11.544 10.646 12.67 11.635 13.165 C 11.994 13.344 12.424 13.276 12.708 12.995 L 13.288 12.414 C 13.427 12.275 13.635 12.226 13.824 12.284 L 15.586 12.846 C 16.009 12.983 16.297 13.375 16.297 13.82 L 16.297 14.268 C 16.297 14.595 16.166 14.91 15.935 15.142 C 14.218 16.837 11.371 15.594 9.525 14.462 C 8.196 13.646 7.036 12.573 6.174 11.272 C 4.087 8.122 5.355 6.356 6.094 5.682 Z" fill="rgb(255, 255, 255)" height="21.612112500000002px" id="zYPv9Ut6a" width="21.332987500000016px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 4 3.5 L 8 0" fill="transparent" height="3.5px" id="l4SKgLppq" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1.5" stroke="rgb(232, 232, 232)" transform="translate(2 5)" width="8px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M 11 0 C 4.925 0 0 4.925 0 11.001 C 0 17.076 4.925 22 11 22 C 17.075 22 22 17.075 22 11 C 22 4.925 17.075 0 11 0 Z M 16.044 15.866 C 15.951 16.021 15.798 16.132 15.621 16.175 C 15.444 16.218 15.257 16.188 15.102 16.093 C 12.519 14.515 9.267 14.158 5.438 15.033 C 5.26 15.073 5.073 15.041 4.919 14.944 C 4.765 14.847 4.657 14.693 4.617 14.517 C 4.531 14.149 4.762 13.782 5.133 13.696 C 9.324 12.739 12.917 13.151 15.817 14.923 C 16.14 15.121 16.243 15.542 16.044 15.866 Z M 17.391 12.871 C 17.273 13.064 17.082 13.203 16.861 13.256 C 16.639 13.309 16.405 13.272 16.211 13.153 C 13.255 11.336 8.748 10.809 5.25 11.871 C 5.032 11.936 4.796 11.913 4.595 11.806 C 4.394 11.698 4.245 11.516 4.18 11.299 C 4.043 10.848 4.298 10.371 4.752 10.23 C 8.746 9.018 13.713 9.605 17.108 11.692 C 17.512 11.94 17.639 12.468 17.391 12.871 Z M 17.506 9.752 C 13.961 7.646 8.112 7.452 4.727 8.479 C 4.465 8.558 4.183 8.53 3.942 8.401 C 3.701 8.273 3.522 8.054 3.444 7.794 C 3.279 7.25 3.586 6.676 4.13 6.511 C 8.016 5.331 14.475 5.559 18.556 7.982 C 19.046 8.275 19.207 8.904 18.917 9.392 C 18.779 9.626 18.553 9.796 18.288 9.864 C 18.023 9.931 17.742 9.891 17.507 9.752 Z" fill="rgb(255, 255, 255)" height="22px" id="GHRWN_Lxj" width="22px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M 9.205 0.574 C 9.455 -0.191 10.545 -0.191 10.796 0.574 L 12.583 6.046 C 12.695 6.389 13.016 6.622 13.379 6.622 L 19.161 6.622 C 19.973 6.622 20.309 7.653 19.653 8.127 L 14.975 11.507 C 14.681 11.718 14.558 12.094 14.671 12.438 L 16.457 17.908 C 16.708 18.674 15.826 19.311 15.17 18.838 L 10.492 15.457 C 10.199 15.245 9.802 15.245 9.509 15.457 L 4.829 18.836 C 4.174 19.31 3.291 18.673 3.542 17.907 L 5.329 12.436 C 5.442 12.093 5.319 11.717 5.025 11.505 L 0.346 8.125 C -0.309 7.651 0.028 6.619 0.838 6.619 L 6.622 6.619 C 6.984 6.62 7.305 6.388 7.417 6.045 Z" fill="rgb(255, 168, 55)" height="19px" id="zi8w6qybr" transform="translate(1 1)" width="20px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><g d="M 10.314 0.604 C 10.352 0.604 10.383 0.615 10.403 0.629 C 10.418 0.638 10.438 0.656 10.453 0.701 L 12.313 6.191 C 12.527 6.821 13.141 7.248 13.832 7.248 L 19.854 7.248 C 19.903 7.248 19.927 7.26 19.942 7.272 C 19.99 7.311 20.011 7.373 19.995 7.432 C 19.99 7.447 19.978 7.472 19.938 7.499 L 15.068 10.893 C 14.508 11.282 14.273 11.974 14.488 12.605 L 16.349 18.092 C 16.364 18.138 16.357 18.164 16.351 18.181 C 16.34 18.208 16.321 18.232 16.296 18.249 C 16.271 18.267 16.241 18.277 16.21 18.279 C 16.179 18.279 16.148 18.268 16.124 18.249 L 11.254 14.856 C 10.694 14.466 9.936 14.466 9.376 14.856 L 4.505 18.25 C 4.481 18.269 4.451 18.28 4.42 18.28 C 4.389 18.279 4.359 18.268 4.335 18.25 C 4.309 18.233 4.289 18.21 4.278 18.182 C 4.272 18.165 4.267 18.139 4.282 18.094 L 6.143 12.606 C 6.356 11.975 6.122 11.284 5.563 10.894 L 0.692 7.499 C 0.652 7.472 0.641 7.447 0.636 7.432 C 0.628 7.403 0.629 7.372 0.639 7.344 C 0.648 7.315 0.666 7.29 0.69 7.271 C 0.715 7.254 0.746 7.246 0.777 7.248 L 6.797 7.248 C 7.489 7.248 8.103 6.821 8.316 6.191 L 10.177 0.701 C 10.192 0.656 10.212 0.638 10.227 0.629 C 10.254 0.612 10.284 0.604 10.316 0.604 Z M 9.561 0.577 C 9.824 -0.199 10.973 -0.19 11.223 0.589 L 12.608 4.904 C 12.633 4.984 12.646 5.067 12.646 5.151 L 12.646 15.359 C 12.646 15.426 12.661 15.495 12.689 15.558 C 12.903 16.033 12.321 16.471 11.891 16.159 L 10.914 15.452 C 10.616 15.236 10.206 15.232 9.904 15.442 L 5.03 18.837 C 4.346 19.312 3.428 18.673 3.689 17.903 L 5.549 12.414 C 5.667 12.07 5.539 11.693 5.234 11.48 L 0.361 8.088 C -0.322 7.613 0.029 6.577 0.873 6.577 L 6.894 6.577 C 7.272 6.577 7.606 6.344 7.723 6 L 9.56 0.577 Z" fill="transparent" height="19px" id="EC2dERZZZ" transform="translate(1 1)" width="20px"><path d="M 9.684 0 C 9.722 0 9.752 0.011 9.772 0.024 C 9.787 0.034 9.808 0.052 9.823 0.097 L 11.682 5.586 C 11.897 6.217 12.511 6.644 13.202 6.644 L 19.223 6.644 C 19.272 6.644 19.296 6.656 19.311 6.668 C 19.36 6.707 19.38 6.769 19.364 6.827 C 19.359 6.843 19.348 6.867 19.308 6.895 L 14.437 10.289 C 13.877 10.678 13.643 11.369 13.857 12 L 15.718 17.487 C 15.733 17.533 15.727 17.56 15.721 17.577 C 15.709 17.604 15.69 17.628 15.665 17.645 C 15.64 17.663 15.611 17.673 15.58 17.675 C 15.548 17.674 15.518 17.664 15.494 17.645 L 10.623 14.252 C 10.064 13.862 9.306 13.862 8.746 14.252 L 3.874 17.646 C 3.851 17.665 3.821 17.676 3.79 17.676 C 3.759 17.674 3.729 17.664 3.704 17.646 C 3.679 17.629 3.659 17.605 3.648 17.578 C 3.641 17.561 3.636 17.535 3.651 17.49 L 5.512 12.002 C 5.726 11.371 5.492 10.68 4.932 10.29 L 0.062 6.895 C 0.022 6.867 0.01 6.843 0.005 6.827 C -0.003 6.798 -0.002 6.768 0.009 6.739 C 0.018 6.711 0.035 6.686 0.059 6.667 C 0.085 6.65 0.115 6.642 0.146 6.644 L 6.167 6.644 C 6.859 6.644 7.473 6.217 7.686 5.586 L 9.547 0.097 C 9.562 0.052 9.582 0.034 9.597 0.024 C 9.623 0.008 9.654 -0.001 9.685 0 Z" fill="transparent" height="17.675943321433873px" id="bUPtjzpG3" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1.32" stroke="rgb(255, 168, 55)" transform="translate(0.63 0.604)" width="19.369611311791196px"/><path d="M 9.561 0.577 C 9.824 -0.199 10.973 -0.19 11.223 0.589 L 12.608 4.904 C 12.633 4.984 12.646 5.067 12.646 5.151 L 12.646 15.359 C 12.646 15.426 12.661 15.495 12.689 15.558 C 12.903 16.033 12.321 16.471 11.891 16.159 L 10.914 15.452 C 10.616 15.236 10.206 15.232 9.904 15.442 L 5.03 18.837 C 4.346 19.312 3.428 18.673 3.689 17.903 L 5.549 12.414 C 5.667 12.07 5.539 11.693 5.234 11.48 L 0.361 8.088 C -0.322 7.613 0.029 6.577 0.873 6.577 L 6.894 6.577 C 7.272 6.577 7.606 6.344 7.723 6 L 9.56 0.577 Z" fill="rgb(255, 168, 55)" height="19px" id="Zy4wQPk0p" width="12.734743290247948px"/></g></svg>)