TRANSITIONS IN VIDEO GAMES
example 1: Hearthstone
Hearthstone is well known for feeling like it's a physical thing inside your computer screen. Blizzard has given talks about the UI of Hearthstone (like the one here from GDC). They really wanted to drive home the "immersive UI" feeling by giving everything in the game weight. The transitions between more frequently used screens are meant to give you that sense of immersion. For instance, when you press the Play button or the Open Packs button the Hearthstone board opens up and you zoom inside to do your thing. It doesn't need to do this, the deck selection screen could've just popped up like the quests screen does but Blizzard wanted the game to feel like your opening up a magical box filled with all sorts of cardboard (and metal and wood and lava and cake) adventures.
I would say that Hearthstone is a good example of good transitions. Things flow in and out of the screen you understand exactly where you are now and where you have been. Having the board open and close also gives a good sense of how back buttons are supposed to work. Sure some of their more recent additions to the game don't have as much motion polish as the more established features (I'm talking about you Modes Button). But despite that, Hearthstone still maintains it's idea of immersive UI with solid and weighty transitions from one screen to the next.
example 2: the legend of Zelda: Ocarina of Time
Image Sources from Nintendo Movie on YouTube. Video link here
Ocarina of Time is a classic in my book and I'll take any opportunity I can to talk about it (or play it!). The folks from Nintendo took a unique spin on the start menu. They decided to really drive home the fact that this is their first 3D Zelda game by putting their menu on the inside of a cube! Cycling through the menus will rotate the cube left and right and exiting is done through the controller buttons instead of a button on the menu. Other transitions, like going from outside to inside is just a simple fade or cut. You can still understand what's going on even though it's not a fancy box opening or screen wipe or anything. I bet you didn't even notice that picking up a item and doing the 'I-got-a-new-item' pose zoomed the camera in smoothly but the moment before opening a chest it cuts to the chest turn around.
I think the most important transition in Ocarina of Time is the transition from World to Inventory. Having that tiny moment where the menu box collapses in and spins a little helps you understand where you are now compared to where you were. If this menu did a quick cut I bet most people who played the game would be super confused the first few times they pressed the button and might not even explore the other sides of the menu cube.
example 3: fable 3
Image Sources from Loopy Longplays on YouTube. Video link here
I love the hell out of Fable 3 and the Fable franchise as a whole. However, Fable 3 is often regarded as having one of the worst menus in video games due to the constant loading and travel time between 'submenus'. Doing a simple task like swapping your weapon or checking your gold might take as long as 30 seconds! Although one might call travel time and loading a 'transition', let's take a step back and see how they handle taking you from one place to the next.
A lot of Fable's transitions between screens are a cut-to-black and fade-in. This gives you immediate feedback in input while gently placing you where you are now. This does not accomplish the transition goal of easing the player from where they are to where they are going. A better way to transition them from the world to the menu might be to open a portal and have it wave over top the player or something. Inside the menu there's even a portal that you can use to exit the menu! Why not use something like that to give you an idea that you used that portal to enter the menu too. Opening the map is a simple fade too. Although, they did try a little zoom action when looking closer at a town. This could have been another opportunity to pan the camera over the map and zoom in while it's opening. A transition like this might give the map a chance to load too so you don't have textures popping in like they did in the video above.
Overall, I guess the transitions in Fable 3 really didn't do it any favors in the Menu department. I originally chose to study this game because I thought the transitions weren't that bad and I hoped they would have been the shining jewel in Fable 3's menu system. But after writing about it I think I convinced myself that the transitions could've been better and they're just another reason why people don't like Fable 3's menu.
Here are some key take-aways from my quick study on Transitions.
Comments are closed.