flip transition for standard fiori launchpad tile

Discussion Forum Design & UX flip transition for standard fiori launchpad tile
Viewing 9 posts - 1 through 9 (of 9 total)

Is it possible to activate  flip transition for a standard fiori launchpad app tile,

or some kind of visual effect when clicking on a app tile?

 

thanks for your help

 

 

Profile photo of Marc Ziegler
SAP SE

Dear Ms. Tegethoff,

Thank you for sharing your ideas here.

To help us get a better understanding of your requirement, would you be able to explain in more detail what you or your client are looking for?
Are you aiming for visual effects or hints to provide feedback for the user (such as “This tile was pressed.”)?
Or was the idea to flip the tile to display more content on the other side?

It would be great if you could share more of your thoughts on how you envisage improving the tile so that I can give you a more precise answer.

Thank you for your feedback,

Marc Ziegler
Lead UX-Designer Tiles

Thank you for your reply mr. Ziegler and please excuse my delayed answer.

Yes, its more the animated visual effect that i had in mind. When the flp tile is clicked, it starts flipping into the next view (eg. the overview page, or directly into the app). An example can be seen in the following link when clicking on “Flip to Resume” in the right to corner:

https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.core.tutorial.navigation.08/preview

Thank you

and best regards

Karin

Profile photo of Justin Ismond
Tata Consultancy Services Ltd.,

Hello, you can transition from a tile press by passing the “flip” property when issuing the navigation method.

You can find a working example I made here:

http://jsbin.com/zejote/1/edit?html,js,output

Hi Karin

I am the animation Lead for Fiori. I didn’t know we still have flip effect on the explorer, which as far as I am aware, is out of use for Fiori.

First reason is that, the visual feedback is not been delivered clearly , the fliping effect has been proven to mislead the user’s orientation. Plus design community has banned the effect for its perceived performance. When an app takes long to load, this represents a problem.

Currently we use the scaling in/out+Fade, which is a fair visual feedback when you click on a tile. It will be replaced soon by the placeholder concept to load floor plans.

 

Why would you like to use this effects precisely? Are you not getting any visual feedback when you open an App? and if so it may be because the app is loading so fast that there is no need for animation.

Best

Sebastian

Profile photo of Mustafa Bensan
iPerceive Pty Limited

Hi Sebastian,

Thanks for the explanation of the most current animation design.  Your two links for scaling and placeholder examples are not accessible though.  Can you check please?

Regards,

Mustafa.

 

Hi Mustafa

I show better images because the links wont work.

Placeholder :  An effort to achieve performance was to find the way to optimize loading indicators, which works until now but the general idea is to replace all busy indicators for dummy objects (grey bars and wireframes) while the content is loaded to create a smooth transition dedicated to the content.

Current Loading transition : This one is the one that Fiori is using now. When you click on a tile this happens

 

Best

Sebastian

Profile photo of Mustafa Bensan
iPerceive Pty Limited

Thanks Sebastian.  That makes it clearer.

Many thanks for this discussion. I am quite happy for the explanations and suggestions.

Viewing 9 posts - 1 through 9 (of 9 total)
 

You must be logged in to reply to this topic.