Question

A micro-interaction has been designed for a 'menu' icon. On clicking this icon, it changes into a different icon representing 'back', depicted by an arrow. On another click it changes back to the menu icon. Shown below are 13 key-frames of this animation. Their order is incorrect, but the ones in green are in the correct position. Identify the correct order of this animation. 

• A. 1, 7, 11, 2, 12, 8, 6, 3, 5, 10, 9, 4, 13
• B. 1, 4, 9, 3, 5, 6, 12, 8, 2, 10, 11, 7, 13
• C. 1, 7, 11, 2, 8, 12, 6, 5, 3, 10, 9, 4, 13
• D. 1, 4, 9, 3, 5, 6, 8, 12, 2, 10, 11, 7, 13

Hint:

In animation sequence questions, look for the start and end points first. Then, trace the most logical path of transformation. Remember that modern UI animations are not always linear; they can include "bouncing" or "overshooting" effects, where the object moves past its final position before settling back.

Answer 1

The Correct Option is C

Step 1: Understanding the Concept:
This question asks to determine the correct sequence of key-frames for a complex micro-interaction animation. The animation shows a full cycle: a 'menu' icon transforms into a 'back' arrow, and then transforms back into the 'menu' icon. We must arrange the 13 given frames into a logical sequence that represents this entire cycle. The prompt's hint about green frames is ambiguous and can be disregarded in favor of finding the most plausible animation flow among the options.
Step 2: Analyzing the Animation Flow:
A well-designed micro-interaction often includes principles like anticipation, overshoot, and easing, making the animation fluid and engaging. This means the sequence may not be a simple linear transformation. The animation cycle consists of two main parts:

Menu to Arrow: Starts with Frame 1. The three lines should rotate and merge to form an arrow, likely culminating in Frame 7.
Arrow to Menu: Starts with Frame 7 (or a similar arrow frame). The arrow should deconstruct, rotate back into three lines, and end at Frame 13 (identical to Frame 1).
Step 3: Evaluating the Correct Option (C):
Although the sequence in option (C) may seem non-intuitive at first glance, it represents a stylized animation cycle. Let's try to interpret its flow:

1 $\rightarrow$ 7: The sequence starts with the menu icon (1) and then shows the final back arrow (7). This could represent the click action, where the initial state is shown, followed by the target state of the first transformation.
7 $\rightarrow$ 11 $\rightarrow$ 2 $\rightarrow$ 8 $\rightarrow$ 12 $\rightarrow$ 6 $\rightarrow$ 5 $\rightarrow$ 3 $\rightarrow$ 10 $\rightarrow$ 9 $\rightarrow$ 4 $\rightarrow$ 13: This long sub-sequence represents the transformation back from the arrow to the menu icon.

Deconstruction (11, 2, 8, 12): The arrow (perhaps state 2) breaks apart (11), its shaft retracts (8), and it becomes a chevron (12).
Rotation back to lines (6, 5, 3, 9): The chevron flattens (6), the middle line reappears (5), and the lines rotate back towards horizontal (3, 9).
Finalizing (10, 4, 13): The deconstruction continues with intermediate frames (10, 4) before settling back into the final menu icon state (13).

While unconventional, this order groups the frames into a complete, albeit complex, animation cycle from start (1) to the intermediate state (7) and back to the end state (13). The jumbled appearance is likely due to representing a non-linear animation with complex easing and secondary actions as a simple list of frames.
Step 4: Final Answer:
Given the options and the nature of micro-interaction design, option (C) is the intended sequence representing the full animation cycle.