Principle 4: Transformation

Creates a continuous state of narrative flow when object utility changes. Much has already been written about the UX in Motion Principle 'transformation.' In some ways, it is the most obvious and penetrable of the animation principles. Transformation is the most discernible, largely because it stands out. A 'submit' button changing shape to become a radial progress bar and finally changing shape again to become a confirmation check mark is something that we notice. It grabs our attention, tells a story, and has completion. Credit: Colin Garven What Transformation does is seamlessly transition the user through the different UX states or 'is's' (as in this is a button, this is a radial progress bar, this is a check mark) which eventually result in a desired outcome. The user has been drawn through these functional spaces to the ultimate destination. Transformation has the effect of 'chunking' cognitively separate key moments in the user experience into a seamless and continuous series of events. This seamlessness results in better user awareness, retention, and followthrough.