Game_Reverie.pdf (©2014 Richard Thames Rowan)
For my User Experience class at DigiPen, one of our assignments was to lay out wireframes for a game concept called Reverie. It's a Zelda-like adventure game where your stats are determined by dungeon cards. These cards function as both character stats and playable content for other characters.
I started with a mind map to organize the information the game would need to have. Then I wrote up user scenarios to consider when people would want access to that information. From those I constructed user scenario flows to see how that information should link up. Finally, based off of that, I created wireframes for each UI screen.
Here you can see I've organized the information into five primary states. Outside Game encapsulates menus that exist "outside" of the game world - for example, the main menu. "In-Game" is the core of the gameplay. This covers the various locations you can be, and what information you'd need access to in each one. "In-Game Menus" is similar, but covers the menus you'd need all the time, rather than just at specific points. "Character/Dungeon Management" is the section for...well, character and dungeon management. "Misc Ref" is another set of things the player should always have access to, and probably should have been merged with "In-Game Menus".
All wireframes were developed in NinjaMock.
In-Game/In-Game Menus Wireframes
Here are the wireframes for the in-game menus I developed. I took a very traditional, MMO-like approach here, using the classic NES Legend of Zelda as my stand-in for gameplay. The rest of the menu items are overlays, again, a very traditional MMO approach. The buttons in the corner act as the gateway to the rest of these items.
Character/Dungeon Management Wireframes
Here are the menus for character select/customization. Note the tab-based system I decided on. You can modify the character you have selected after you've created them, so I felt the tab-based system would work well. One modification I could have included is to have a UI element that always displays which character you have selected currently, so you have that context for every other tab.
Outside Game Wireframes
Here are the wireframes I laid out for the "outside game" wireframes. They're pretty simple and straightforward, but note the lack of a "Play Game" button. I opted for the Character Select button instead because the player needs to select or create a character before he can begin playing. However, it may have been a smarter move to replace that with "Play Game" or something similar, as a more familiar entrance for players, and have it retain the same functionality. I believe that change would have improved the player experience, rather than detracted from it.
Miscellaneous Reference Wireframes
Here are the wireframes I laid out for the different reference menus the player would need access to. Here you'll see the presence of a tab-based system again. I really like tab systems, as they allow the player access to a lot of screen space for each thing, while still giving them a lot of context as to where they are, and what they're doing. In addition, it adds a kind of consistency to the information architecture. The players should have a clear idea of which group of information they're in, given the tabs: Character/Dungeon vs Reference.