Proposal: Remove Button Tilt #242
Comments
|
Is there any knowledge of why the tilt is being removed? Is it just a developer preference?
Has there been any analysis of apps in the store? Just because 46% of a small sample do something isn't reason on its own to change the default. Is it? |
As far as the knowledge to why tilt is being removed - it's mostly because of both a developer and a designer preference. In many cases these design choices are made to imitate their web versions. Of which many buttons are more "flat" and don't involve animations.
Apps that do not remove tilt tend to have a less branded experience.
It was originally added as a cosmetic statement for our design system at the time.
The analysis was done on apps in the store. I pulled out a small example for the sake of keeping the rational section concise - that one app itself had re-templated buttons for the sole purpose of removing tilt and had done so to 46% of the buttons in their app. This is a pattern we've seen elsewhere, though. The same study also looked at our "utility" apps - which consist of: calculator, alarms, camera, settings, messaging, photos, voice recorder - of which 65% of them had re-templated buttons and all removed the tilt. Aside from that, the only additional changes made to the template were color alterations. However, this study was done before the introduction of Lightweight styling so availability to more easily customize colors was limited. I have also personally conducted sit-downs with our internal teams about the reasoning to why they removed tilt and most responded with either it did not fit their brand, or design did not want it. That being said, it could be that our internal reviews do not reflect what the community and our general developer base wants. Hence the desire to proposal a removal to everyone for debate. Edit: Added more info from the study mentioned here to the main feature proposal post. |
|
Tilt first appeared in the Windows Phone UI, and came about because of the IRIS UI they used in that, which was in 3D space, so tilt and tile flipping all worked with a scene camera. There were tutorials at the time for devs to implement the same tilting in their XAML silverlight apps. I guess it was some time in Windows 8 or early Windows 10 that they introduced theme animations to WinRT. Rather than remove the effect, you could always add a property to override the effect on Pressed state |
|
I have been a big fan of the tilt effect since the Windows Phone days. When done right (e.g. dribbble & Timeline design), it just feels so alive and futuristic. However, I no longer use it on buttons in any of my new projects. Here's why:
Having said this, I think it's probably much safer to disable it by default, but offer an option to enable it. After all, just like the ripple effect in Material Design, it does remind people that this design comes from Windows, which to me is a good thing. |
|
Is the proposal to just remove tilt? I was under the impression design wanted to refresh the animation -- do away with tilt but still have some kind of press effect? We've talked about removing tilt for a while but we never did it because there wasn't a proposal to replace it with and it feels worse to remove it and have nothing (even though it feels dated as other commenters mentioned). |
|
If Buttons are going to be given depth and a shadow - the tilt effect would ruin that illusion. I guess Microsoft Design internally have plans which are not discussed publically. |
Yes the proposal is to simply remove it. Last we spoke to design they had some plans around a different animation, but nothing concrete. They did agree that it needed to be removed altogether because of the outdated-ness of it's appearance. However, there was no better solution proposed since, so we've let the animation sit. Another way/alternate solution we could do, is to allow disabling it without completely getting rid of it. We could template bind that animation so an app-developer can toggle it outside of the template: <VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" IsEnabled="{TemplateBinding TiltOnPress}" />
</Storyboard>
</VisualState>A result to the effect of what @mdtauk was referring to. |
|
Ha, reminds me of early WP7 days when I spent ages adding the tilt effect to controls because it didn't get added by default. |
|
@kikisaints - I have not received official request to remove the tilt from the design team. As far as I understand, some button retemplate was due to the lack of flexibility to turn off tilt without retemplate and some buttons like title bar buttons did not make sense to have tilt. Today, tilt is used as a press state equivalent on Xbox where the button depresses so we cannot just remove it without considering what the removal means to the press and hover state on all the platforms we support. |
|
I'd suggest making it easy to opt-out of tilt via "lightweight styling" on a global, per-control-type, or per-control-instance basis: the more we can do to prevent the need for re-templating the better. I'd also maybe take the opportunity to allow devs to use lightweight styling to supply custom theme animations. |
|
@kikisaints - the tilt animation is provided as a visual affordance that is specified by PointerDownThemeAnimation. I agree with @chigy that we'll need some sort of press feedback by default, so we could consider modifying the animation provided by PointerDownThemeAnimation. |
|
@stmoy and @chigy - I'm somewhere in the middle. I don't believe we should replace the animation with another, unchangeable/un-customizable animation. That feels odd. @bschoepke - I like this line of thinking, my only worry is that lightweight styling relies heavily on your knowledge of resource keys and names. Which can become cumbersome and explodes generic.xaml considerably. My reason for complete removal is that if the majority do not use tilt, maybe it's causing more issues than it's solving. That being said, perhaps the crux of the issue here isn't the tilt itself, but how we've structured our styling system all-up... |
|
I think we still need a signature visual feedback on pressed state for most our interactive controls (e.g. It's like whenever I click a button and see the ripple, I know it's from Material. Currently, we have reveal and tilt. But the former is not turned on by default and only works well with dark background. The tilt just doesn't look good anymore. However, I am just concerned that if we removed it completely without a replacement, the controls could lose their Fluent design identity. I did some experiment in the past and would love to see if our design team can come up with something that embraces Fluent features like light, depth, material and motion. ;) |
|
Most importantly, if I'm "pressing down" on a button, how do I know it's recognizing that touch or identifying that the thing I think I'm touching is the one that's actually going to respond, if there is no visual indication? |
|
@mrlacey there will still be some color changes on the background, foreground and border, but I don't think they are enough... |
|
I'm going to chip in and say I don't see a need for removing it, but an easy TemplateBinding or even global toggle for it for those who want it wouldn't go amiss. One thing I will say when I've done client projects is they generally preferred it if the animation only affected the content of the button and not the border / background, so I usually ended up retemplating for it to affect the ContentPresenter instead. Still obvious depression, but a little nice. Depression is also quite nice when using physical keys (like keyboard, media remotes, gamepads). Or, even if it is removed, as long as PointerDownThemeAnimation still exists at least I can still put it back in easily - so in that case I'd like to chuck in a vote for not changing the default PointerDown/UpThemeAnimation but replacing it with a new one? |
|
Whether you keep the tilt or remove it/replace it I think there is something to be said for adding a ThemeAnimation property, which is changable in XAML or codebehind - without a need for re-templating - would suffice until the Fluent Team know exactly what they want to do for button pressed animations across all MUX controls. |
|
@JohnnyWestlake interesting that there is a desire to have tilt on the presenter but not the border, it would seem that even if we had a toggle for the animation (either through lightweight styling or a property) it wouldn't really solve your scenario where you need to alter what the animation affects, not whether or not it's there... thanks for the insight! |
|
@kikisaints This could be solved by having an enum TiltMode: { Disabled, Control, Content } ;) Not sure if it is a relevant scenario though. Personally, I'd prefer a clean "move down/shrink, move up/grow" animation instead of tilt. Having a ThemeAnimation property would make it easy to change that animation. |
|
Asking for the last time, please don't remove this. Although it's not nice plainly with reveal effect it is really good and would like to see it more on the web and mobile. Don't remove this from Windows. |
|
They are not removing this feature |
|
The intent is to remove the tilt effect when pressing these controls, because it was a Windows Phone and Windows 8 metro effect, and they are moving to a new Fluent Design across Web, Windows, and Mobile Cross-Platform. |
|
I assume the Tilt effect will remain in the WinUI repo, but you would have to retemplate to re-add it to the controls. Maybe @chingucoding, @chigy, or @anawishnoff will be able to clarify that. |
|
Yes you would need to retemplate controls to add the tilt effect to controls as you need to have the PointerUpThemeAnimation and PointerDownThemeAnimation. The steps necessary to remove the effect are outlined here and also requires retemplating so adding the effect back will need retemplating too. |
|
Retemplating to add/remove this effect is way too much code. |
|
Unfortunately, because how XAML works, beside adding a new API on the button itself to toggle this, there is no other option. With styling concepts like CSS this would be a lot easier, but the animations are part of the VSM and can't be changed without retemplating unfortunately. |
|
@chingucoding You may want to keep a mental note of that. It should not be that hard to alter any of the default Theme Transitions for controls - it may be worth trying to add these as lightweight overridable values. ButtonPointerDownThemeAnimation Both of these can be set to a blank Animation by default, but you can assign a bundled Fluent Animation, or a custom animation to these states. |
|
The issue is that there doesn't seem to be a way to make this a lightweight styling resource. StoryBoard doesn't expose anything that we could bind to a resource, you have to set it's children in XAML. Either you set the children or you don't, however you can'T have an animation resource and use that in there from what I can tell. I'm afraid VSM needs to expose more properties for this to work. |
So, it looks like WinUI 3.X will need to create a new API to allow for re-usable Animation or Storyboards - which can be applied to a control's VisualStates |
|
Yes, this needs changes in VSM and Storyboards so will need to wait until WinUI 3.X. |
|
If this is removed but lots of people want it, it should be simple enough to add a |
Very nostalgic, as there was a Windows Phone custom control/behaviour released to simulate the 3D camera perspective tilts that the DirectUI internal APIs supported in the Windows Phone UX - And later the concept of Theme Animations added to the Windows 8 controls by default. TiltEffect from the Windows Phone Toolkit |
Agreed, though you would need a |
The tilt effect is also used for the List and Grid Views, which I believe is also going to be removed when they update. |
@mrlacey The community toolkit is in C# and therefore I can't use it (my program is in C++). I feel like this might be better suited as a built-in WinUI style |
|
Please don't remove this |
Why can't they make it part of Fluent? I checked Windows 8 and tilt was present only on the tiles and Windows 10 did add tilt to other controls like buttons while Windows Phone already had it. This is an excuse not a real reason. And if you add reveal to tilt it does look good |
|
Why can't they change or improve this? If not tilt at least provide a replacement Z index-based effect for visual feedback |
There are some concerns about how the text rendering gets distorted as the control tilts. It is an effect that would mess up the ThemeShadow if it was based on the Z-index. Like the indeterminate Progress Bar and Ring, moving away from the dots to a different animation - it is a Metro and MDL2 (Microsoft Design Language 2) feature, and it is not a feature they wish to continue using, or bring over to their FluentUI and Fast frameworks. The ThemeAnimations will still be there if individual developers wish to continue using them.
If you wish to "improve" or change the Pressed state for Buttons, you could make a clear proposal - but the Tilt effect does seem to be going, so just asking for it to remain will not be very persuasive. You also have to remember, there has been vocal complaint about this effect, and developers have been asking for ways to remove it. Making it an option for devs, rather than "forcing" it on them, may be a welcome change. |
|
@mdtauk What's the point of open source if MS doesn't listen to feedback? I'm not telling I don't like design refreshes but this is something unnecessary to remove |
|
Tilt can go away but there needs a click effect for touch feedback. Google has ripple for this but doesn't feel that well on a mouse. I'm not an expert but a plain color change on the pressed state but does not do much |
I'm suggesting that there may be more feedback asking for it to be removed, than there is asking for it to stay |
There is a pressed state, s change in colour. You are suggesting it may not be enough or strong enough a change. I think I may agree, but that would need to be a new proposal. |
|
I really view tilt as part of what makes fluent unique and would hate it if went. |
|
This can likely be closed. Fluent v2 Removes the Tilt effect. |
|
@bpulliam This can be closed, yes? |
Proposal: Remove Button Tilt
Summary
Remove the Button tilt animation in the control's default template.
Rationale
Internal analysis of first party and third party apps have shown that the majority of re-templates for button are made simply to remove the button tilt behavior. In a large study of our internal apps - which consisted of: calculator, alarms, camera, settings, messaging, photos, voice recorder - 65% of them had re-templated buttons and all had removed the tilt - even on buttons that were not altered in any other way besides the animation removal.
The utility apps in many ways are an example of default design system at work, however these apps are opting out of the tilt animation as they don't feel it add anything to their apps' overall experience.
Re-templating can incur a lot of extra overhead for a developer when they have to take ownership of a control that they largely do not wish to maintain outside of this one animation change. Not to mention the fact that re-templated controls add-up in terms of performance on load.
The text was updated successfully, but these errors were encountered: