Microsoft-ui-xaml: Discussion: TeachingTip v2 Features and Improvements

[mdtauk]

This is a question more than a Bug or Feature, but is there behaviour in this control to handle situations like a narrow window where the control does not have enough space to show as intended?

Also with the close button requiring a tap or click - when this control is used on the XBox how is this handled? Will the control default to a timeout? Does it take focus (and display a focus reveal glow) with the B button to close it? Does the close button become a B button glyph? Does this have a sound associated to its opening or dismissing?

[mdtauk]

@StephenLPeters Just making sure you are aware of this post, as the TeachingTip control seems to be your baby

[jevansaks]

Also @SavoySchuler to answer these questions.

[SavoySchuler]

Hi, @mdtauk, I have just returned to the office after Build. Thanks for your patience on these questions.

• "…is there behaviour in this control to handle situations like a narrow window where the control does not have enough space to show as intended?"

There are a few options here. If you are expecting a smaller app window by default, TeachingTip can have its Min/Max/Height and Min/Max/Width adjusted accordingly. On Windows version 19H1 and above, you can also make use of TeachingTip’s ShouldConstrainToRootBounds property to allow it to escape the bounds of the xaml root. As a fallback, you can also manually check to see if IsOpen is returned to false right after it is set to true as a test on whether the tip was ever made visible. This would provide you the necessary information to know whether your app should try showing it again later. Beyond these options, there is nothing baked into the V1 of this control to ensure that it shows or has alternatives. If you have ideas on what more TeachingTip could do in these situations, I would be eager to see them proposed as an improvement request as we consider possible V2 features.

• "Also with the close button requiring a tap or click - when this control is used on the XBox how is this handled?"

Whether TeachingTip is used on Xbox _or_ a gamepad is being used to navigate apps on Windows, gamepad navigation is automatically mapped directionally. This includes navigation to/from a TeachingTip and also navigation within a TeachingTip. For this reason, the Guidelines Recommendation section for this control links to the relevant section of Gamepad and remote control interactions to help ensure instances of TeachingTip are integrated in a gamepad accessible space and tested appropriately.

• "Will the control default to a timeout?"

This can already be achieved by adding an asynchronous delay to setting IsOpen = false, but I encourage developers adding this to be cognizant of the experience it creates for Narrator and keyboard navigation users. A timeout feature is not yet baked into TeachingTip but remains a top contender for V2. Should that happen, I would be looking forward to further conversations with our Accessibility and Settings teams to ensure we create a timed-dismiss feature that properly avoids creating new pain points for Narrator and keyboard navigation users.

• "Does it take focus (and display a focus reveal glow) with the B button to close it?"

This does not happen automatically but could be implemented at the app level.

• "Does the close button become a B button glyph?"

I believe re-templating could achieve this for you.

• "Does this have a sound associated to its opening or dismissing?"

There are no sounds baked into TeachingTip, but they could also be added in your app.

Apologies for the light answers on the Xbox compatibility of this control. TeachingTip is available to be leveraged by Xbox, but I received no specific interest or requests from the Xbox team or Xbox app developers throughout V1 development of this control, so we focused specifically on serving our interested audience of Windows and Windows App developers. Should there be specific requests or interest from the Xbox team or Xbox app developers, I am more than happy to take all of those through Feature Requests for V2. 😊

Thanks again for the questions, @mdtauk. Does this answer everything?

[mdtauk]

I was just wondering what thoughts had occurred with these scenarios. The app bar secondary menu changed to be the full width of the screen on Windows Phone, so thought Teaching Tip may do something similar when space is constrained.

As for Xbox, it's as much for the next Xbox as the current, and if the control should behave or look differently when used. For a V1 it makes sense that mouse keyboard and touch are the focus, and this was less about has work gone into these things now, and more about how much work should go into these scenarios for V2, or even WinUI 3.0, which is going to be a huge thing. And may impact the Xbox team, as they build the next console's dashboard and UX, and how it may decide to adapt these controls in the future

[SavoySchuler]

@mdtauk, agreed, I am eager to refine TeachingTip with requirements for Xbox as needed. Are you planning to develop any apps for Xbox that need TeachingTip?

As for the internal team, they not expressed interest yet. I know they have their own official UI design and style guides that were developed in the absence of TeachingTip, so I am not sure if they will end up needing it. We are channeling both our internal and external requests through this repo, so you will be able to see if or when they ask!

[SavoySchuler]

Coming back to this, have I answered all of your questions, @mdtauk? I would be open to starting a TeachingTip V2 proposal if you have actionable scenarios or a discussion if you have ideas that you would like to start working toward something concrete? 😊

[mdtauk]

@SavoySchuler I guess this topic would be better served as a Discussion for now. TeachingTip just seems like a very obvious control to include in most apps (I'd like to see Office and Groove Music standardise their popups as TeachingTips) but as for how Xbox may need to handle this control, is a question only the Xbox Shell and Inbox apps teams can answer, and I think this is something that can't be actionable until they wish to use the control, and find themselves needing to customise it.

[SavoySchuler]

100% agree. For now, I will convert this to a discussion topic as to preserve our conversation so far and create an avenue for exploring V2 TeachingTip features and improvements!

[XamlBrewer]

I believe that a large part of the use cases of the TeachingTip would require some form of auto-closing. I have played with these concepts in this blog post: https://xamlbrewer.wordpress.com/2019/09/10/a-lap-around-the-winui-teachingtip-control/.

• Auto-hide after time-out

It would be nice to be able to specify a time-out interval after which a TeachingTip automatically closes. This would bring the user experience of using a non-targeted TeachingTip for in-app notification in line with other notification types.

• Auto-hide on navigation

It would be nice to be able to specify that a TeachingTip should automatically close when the user navigates to a different page. In fact, this should even be the default behavior - especially for targeted controls, since their UI and actions may refer to controls that don't exist anymore after navigation.

• Animated Auto-hide

Optionally, a TeachingTip could announce its automatic closing with a subtle animation (fading, flashing, showing a decreasing timer or other type of progress indicator).

[chingucoding]

• Auto-hide on navigation

It would be nice to be able to specify that a TeachingTip should automatically close when the user navigates to a different page. In fact, this should even be the default behavior - especially for targeted controls, since their UI and actions may refer to controls that don't exist anymore after navigation.

This is something that #509 tracks and that will be fixed with #1327.

Well partially. With the PR accepted, a TeachingTip will close and get removed once it gets unloaded from the visual tree e.g. by navigating to a different page.

[mdtauk]

Is there scope for a Collapsed/Minimised state, that is not a dismissal? Perhaps shrinking down to a 32x40 size with an info glyph, that still has a tail and still attached to a UIElement.

This could allow for a single fully open Teaching Tip, and Collapsed/Minimised ones. Or just minimise as you move the cursor around or interact with the app.

[yaichenbaum]

I am interested in seeing a timed dismiss property that will hide the teaching tip after a specified amount of time. I spoke about this with @SavoySchuler and he mentioned it needs to be done in a way that is accessible for users, one of the thing he said was the possibility of having an option in the system settings to control how long teaching tips show for. There is also the possibility of having a minimum low that developers can set for this value to ensure there is enough time for anyone to see the teaching tip but still give customization to the developer to adjust the control for their use case.
However it will be done I am looking forward to implementing this in teaching tips across my apps.

[emiliano84]

I'd like the following feature when light dismiss is disabled:

• A property to remove the X button
• A property to block the rest of the UI (it's possible to click only on the teaching tip)
• A property to add some opacity to the rest of UI behind the teaching tip
  Thanks

[mdtauk]

Could there be a succession of Teaching Tips, used similar to a product tour, moving from feature to feature, with back and forward buttons.

Take a look at the TeachingBubble with multi-steps
https://developer.microsoft.com/en-us/fluentui#/controls/web/teachingbubble

---

Is there any value in looking at what Coachmark does?
https://developer.microsoft.com/en-us/fluentui#/controls/web/coachmark