First of all, i hope this isn't a too general question, but it's something that i always have a bit of trouble with.

How do you describe the effects (or rather gimmicks) in your interaction design. With 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 back".

Or here are some visual examples ripped from Dribbble:

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

enter image description here

How would a description of the above examples 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.

I usually utilize the JJG planes, so i would imagine that this would fall under "Surface Plane".

closed as too broad by Shreyas Tripathy, Michael Lai Oct 19 '18 at 6:55

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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
  • Not an exact duplicate but highly related: ux.stackexchange.com/questions/100605/… – locationunknown Oct 17 '18 at 9:11
  • 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

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.