List animations come in many varieties, which can be confusing.
We wrote about list animations while summarizing some of the different types available and explaining how layout affects animation choices.
Animations vary depending on the type of list
When there is multiple content
This is often used for options or character menus to navigate between items.
Since all items are main elements, UI animations should appear equally regardless of usage frequency.
List animations entering from the top or bottom of the screen.
Lists appearing from above or below makes it clear that scrolling up and down is possible.
List animations entering from the left or right sides of the screen.
This creates an impression of moving forward to the next scene, or returning back.
For advancing scenes, flow from right to left is preferred; for returning scenes, flowing from left to right is common.
(Since we read text from left to right, the left side represents the past and the right side represents the future.)
When there is one content but multiple lists
This is used when selecting a list within a single piece of content, such as choosing quests.
If the latest quest or event needs to stand out more than others, discuss with design staff whether to animate that item prominently or treat it equally.
To make it easier for users to understand what action comes next, add a “New” tag and highlight the list of items you want them to press with an animation.
Additionally, transitioning from above helps users easily grasp their progress.
Grid Display (Springboard)
This is used when displaying a large number of items, such as character lists or log bonuses.
Since there are no priorities and all items are treated equally, apply animations that treat them uniformly.
List animations for log bonuses are rare; they often transition with all items already displayed.
(The focus is on the rewards available today, not on showing a long list of many rewards.)
For character lists, you might apply scaling or opacity animations from top-left to create a staircase effect, or reveal them via scrolling from above and below so users know they can scroll.
Pull-down
This displays a list of sub-items below the parent item after pressing the main button.
To make it clear that there is a relationship between the parent and sub items, animating them as if they appear from the parent item makes this easy to understand.
List Animations Come in Many Types
Since there are many types of lists, you have a lot to consider regarding animations.
If development allows time, experimenting with them can be quite interesting.
List interfaces tend to become cluttered with text (such as character enhancement, evolution, formation, encyclopedia in the Character menu; options, rankings, title navigation, and integration links in the Menu), making them difficult to understand. Adding a dropdown there would only make it even more text-heavy, distancing players from the game itself. Personally, I believe that designs which soften this “list-like” feel help increase player immersion.
While having lists occupy most of the screen is less ideal than showing an illustration first and then changing elements upon selection—which makes development harder—I am excited about pursuing such approaches.
Thank you for reading this far!
Please share your opinions and feedback via the Contact Us page or on Twitter!