Question: How and when do you describe the animation effects (or rather gimmicks) in your interaction design?

Description: With animation effects/gimmicks i mean stuff like, "When i hover my mouse over the button, it will glow, and when it's clicked it will shoot stars and rainbows from the top".

How would a description of such animation effects look like in your design documents? And in which phase do you decide which animations you will use and how they will look like or affect your User Experience.

Here's an example of the animation effects i'm referring too:

Selecting a whine will make it float and it will fly to your "bag" when clicked "add to cart"

I'd imagine a user-story in the above example would look like: "As a customer, i can add a wine bottle to my cart"

And a use-case: Clicking the add button will add the item to the cart

And a mock-up will have a static image of the page

But where/when do i describe the fact that the bottle will float when the mouse hovers over it and flies to the cart box when "add to cart" is clicked?

  • How do you mean describe them? Do you want the wording for it or you mean how a design specification details these effects? – RobbyReindeer Oct 16 '18 at 12:11
  • You described one perfectly well in your question. It describes the series of actions and what triggers it. If your developers need more detail, ask them what they need. (Or are you looking for a glossary of these doo-dads?) – Ken Mohnkern Oct 16 '18 at 12:41
  • 1
    Not an exact duplicate but highly related: ux.stackexchange.com/questions/100605/… – locationunknown Oct 17 '18 at 9:11
  • 1
    It's not really about terminology. It's more about, how you would describe all the effects and in what phase of your interaction design. I mean, i can set in my stories "User can add a bottle of wine in the cart" and in the Use case "User clicks on the "add" button to add the wine to the cart" and create a mock-up page with the wine bottle and the add button. But where (and how) would i describe "When the user hovers over the cart, it will float, and when the user clicks "add", the bottle will fly to the cart on the left side of the screen" – DennisW Oct 17 '18 at 9:28
  • 1
    This question is NOT to Broad and should not have been closed. It's a clear question about writing design documents – DennisW Mar 7 '19 at 7:56

I would call this affordance.

Affordances provide strong clues to the operation of things. Good affordances in UIs usually leverage our knowledge of the physical world, and how we interact with physical objects.

In the first example the animation shows that the item can be interacted with (the bottle lifts like you picked it up), and then when clicked it shows the item going into the shopping cart. There is a strong analogy there with the physical world.

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