Coach marks

Synonyms: coachmarks

We often meet some overlayed tips that have an explanation of one or another interface detail. That is what coach marks are.


Coach marks can help to define how to interact within a new flow. On the other hand, they cannot save a poor interface design, so it is better to prevent the hints usage in the first place, or inсorporate them wisely.


Some coach marks can be informational and refer to the details on the screen and what they represent. The other can introduce and explain about how to interact with the interface.



Coach Marks Hacks

Few hacks on how to apply the coach marks:

  1. Build your coach mark with two parts: explanation block and a link to dismiss or a “close” button. User should always have an opportunity to skip the tip.
  2. Apply just one hint at a time. It’s not good to bomb the user with several messages on the screen just because it’s not so simple to remember all of it.
  3. If you are going to make several coach marks one after another (while onboarding, for example) do not put too many tips in a row. Again, this can be hard to catch on.
  4. Give the user an opportunity to try it. Learning-by-doing method is always better than just learning.
  5. Use some visuals when possible and keep the text short.
  6. Do not mix the tips with an actual UI. Sometimes users cannot realize the distinction between coach mark and the screen, so make sure the difference is clear (you can use another font or make sure there is a tinted background overlay).


Tutorial Tooltip & Onboarding
Tutorial Tooltip & Onboarding by Daniel Destefanis

share the term