0

enter image description hereSometimes, when I download a new app, I encounter various tips and behaviour suggestions about what I can do and how to interact with the UI.

Scenerio 1:
For example, when I land on a screen, a sort of 'tooltip' may appear suggesting me to do or discover something, and after a couple of seconds, it fades away automatically (same animation as the notifications on Instagram, when the 'tooltip' fades away and it remains only a red dot in the tab bar; of course in the case I am describing above I am not talking about notifications, so there's nothing left after the teaching purpose of the 'tooltip' has been fulfilled).Image credit by Greg Wilkinson

Question 1:
How is this 'tooltip'/panel/suggestion technically called so I can refer to it in a proper way within my team?

Scenario 2:
Sometimes a hint comes in form of animation: I recall downloading an app with a message system inside, and the first time I saw the list of the various inbox messages, the first line swiped on its own on the right and on the left, allowing me to see that if I'd do the gesture myself, I could interact with hidden drawers (like in iOS) such as "delete" "flag" "read" and other things. With my big surprise a lot of iOS users I know don't know about these features, so I found the animation on this app (which I can't remember the name) pretty clever.

Question 2:
How can I call these "behaviour teaching" animation in a proper way?

I've searched here https://developer.apple.com/ios/human-interface-guidelines/interaction/3d-touch/ and online more in general, but I didn't find anything that applies.

Improve this question

1 Answer 1

Reset to default
0

I'm not sure I understand your example, but for scenario 1, you might be referring to Coach Marks, in which an overlay, tooltip or pointer introduces a concept or UI element with a short sentence, but in the case you cite that have a fadeout animation:

enter image description here

More generally, your questions seem related to onboarding and teaching the user. There's an article on UX Planet, which discusses coach marks and similar patterns.

Mobile Onboarding: Interact, Don’t Tell

When designing tips and any other types of hints for mobile applications, keep them as short as possible. Focus on primary user tasks and design for maximum interactivity by using visuals and progressive disclosure.

Improve this answer
3
  • I never heard about the term 'coach marks', thanks for pointing out! Regarding onboarding I thought (please correct me if I am wrong) it was more about full view screens such as here dribbble.com/shots/2474369-Intro-Screen .What I meant in my post was more about a sort of tooltip appearing on top of UI and disappearing after a certain time, like in the picture I added by Greg Wilkinson. For the scenario 2 I still didn't find any suitable gif to post as an example.
    – Antonella
    Commented Aug 13, 2017 at 13:54
  • You are right in that 'Onboarding' often refers to a series of screens (such as first time gettting a registration and first key task). Coach marks can be used at key moments. I've seen them used where there are several on a screen overlay you swipe through, and also like the example above where there's one primary action. Your case seems to be related to the latter. It's a single coach mark with a set timeout so it fades.
    – Mike M
    Commented Aug 13, 2017 at 21:38
  • Thank you for your valuable input, you've been extremely helpful.
    – Antonella
    Commented Aug 15, 2017 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.