Troubleshooting UI: Case Study
In this post, I critique the UI of a Nintendo DS game, and use Justinmind Prototyper (free version) to prototype three features that will eliminate or reduce these problems.
Avalon Code is an action RPG created by Matrix Software in late 2008. The player's job is to record everything you encounter before your world is destroyed in a few months. You record something by hitting it with a giant, magical book that gives the object/person its own page along with a set of "codes," which control attributes of the object. You can replace codes on a page to change features of the object. For example, removing a Stone code from a monster's page makes it weaker.
This book is the game's central feature. There are a number of interrelated issues with the book's mechanics. I'll give each one a subheading, explain the problem, and explain my solution.
Too General Navigation/Tiny Table of Contents
In addition, characters' pages are not added to the section as you scan them. For example, if I walk into a town and hit all the people there with the book, their pages won't appear in the town's section in the same order I hit them. They'll appear in some arbitrary, pre-determined order.
Solution
The obvious solution is to expand the table of contents and add the pages within each section in chronological order:
I added the "Humanoid" term (upper right) to classify the monster for the player's future reference. In the real game, if you scanned a new monster, there was no way of telling what kind of monster the book categorized it as unless you flipped through a specific section trying to look for it.
At first, I thought the player could click on the Humanoid designation in the monster's page to take them to the second panel above, the Humanoid list of monsters. That would make it easier to find another Humanoid monster, but I don't think players would want to do that often enough for the feature to be appreciated.
Another option would be for the Humanoid text at the top of the page to take the user to the first Humanoid monster (which is the Goblin, so if you're on the Goblin page to begin with it wouldn't do anything.) That would reduce the number of taps it would take to get to that particular monster's page by three, since the alternative would be to tap Index > Main table of contents > Monsters > Humanoid subheading.
I preferred the first option, navigating to the Humanoid sub-menu, because the player would probably want to choose the monster to navigate to instead of using the Humanoid text as a shortcut to the goblin page.
User testing would determine which of the two options, if any, should be implemented.
Code Bank
Thus, most of your time is spent flipping through the book. This huge issue is exacerbated by the fact that you can only carry up to four code pieces at a time across pages.
The makeshift solution is to make an informal "code bank" where you put all of one type of code on a specific page, and then remember what those pages were. I put all my copper codes on a specific character, ice codes on two different spiders, etc. This requires tedious amounts of upkeep, and can be dangerous when you encounter a monster full of health-giving Iron codes you stored on its page.
Solution
An actual Code Bank could act as a bin for unused codes, sorted by type of code and size (codes come in different amounts--a 2x2 square, an L-shaped 4 piece, etc.)
This final iteration of the Wisdom code's bank page has several features. The left page lists all the codes the player puts in the bank, with a running total of the amount of wisdom, in this case, the player put in the bank. The right table lists the wisdom code pieces contained in a specific page, with the total amount of wisdom in the entire book at the bottom. As the game progresses, there will be more than five pages with wisdom in them; accordingly, the "total amount in book" line will appear below the last listed page so the player knows to keep flipping to see the full table.
Similarly to the monster pages, this Wisdom page contains the heading "Concept" to remind the player which category the page is in, and/or possibly navigate back to the Concept sub-menu.
To take out a code from the bank, simply tap on the appropriate row and drag the code into the 4-code holding pen. To visit a specific page containing a wisdom code, tap on the page's name (Barrel Bomb, Pog.)
For example, you can tap the Pog name to visit the Pog page:
In the actual game, tapping on the square with the codes lets you move them and take them out:
In the original game, the long, subdivided rectangle holds up to four code pieces and lets you move them around the book. But in my iteration, I added a "+ Bank" feature. You can drag and drop codes to the "+ Bank" to add them to the Bank quickly and easily, instead of putting the code in one of the four carrying spots and then flipping to the specific code page in the Bank and dropping them. This way, when you scan a new object, you can simply drag and drop all the codes into the Bank until you need them again. This gives you greater control over what codes you put on what objects, since you're not forced into the awkward "put all my Copper codes on this one monster and then remember that page" system.
*When in the Code Bank, the four-code-holding pen will not contain the "+ Bank" feature.
In addition, the small brown rectangle on the left, with the tetris-like symbol on it, is the button to visit the Code Bank. Since the button is accessible on every page, it's easy to access the Code Bank at all times, which will cut down on page-flipping.
An Old Iteration of the Code Bank's wisdom page
The lines under the big wisdom symbol would contain information about the wisdom code attribute (the Book also functions as a Wikipedia of sorts.) This old version also showed the player all the codes in the bank instead of showing only one row for each shape. I thought it would become inconvenient and cluttered for the table to show all the codes put in the bank--if the player had fifteen of one shape, there would be five rows of that one shape! I considered only expanding the row when the player tapped the row to take one out, but that would also be unnecessary. Hence, the final version (the picture above this one) says there are five big square codes in the bank, but shows the player only three.
Recording a Recipe (This is the Last Section)
As you play the game, you gain recipes called "metalizes." These are combinations of codes that, when used on a particular item in the book, turn the item into the recipe's item.
The problem is that if you want to make a certain recipe, it's difficult to remember the recipe while hunting for codes in the book. There is a Notes section where you could write the recipe down, but this would still require you to flip to the Notes page to read it, so you may as well flip back to the recipe page instead.
Solution
I prototyped a screengrab feature that would follow you across pages, for easy reference.
To record a recipe, tap on the right-hand page. A small, blue button would appear...
...and follow you across pages, where you can click on the button to reveal the recipe:
Clicking again will collapse the text. To remove the recording and the button, I'm debating between:
Previous Iteration
At first, I thought the button should exist regardless of you recording a recipe with it. Upon recording, the button would lighten in color. Eventually, I realized that if you weren't recording, having the button around would be a nuisance.
Conclusion
These proposed features would solve the three main problems I encountered in Avalon Code: difficulty navigating to specific pages, an inability to find or organize codes without affecting in-game objects, and forgetting recipe specifics. I hope that this long post gives you an idea of my design process and problem-solving capabilities.
Avalon Code is an action RPG created by Matrix Software in late 2008. The player's job is to record everything you encounter before your world is destroyed in a few months. You record something by hitting it with a giant, magical book that gives the object/person its own page along with a set of "codes," which control attributes of the object. You can replace codes on a page to change features of the object. For example, removing a Stone code from a monster's page makes it weaker.
 |
| The page for the Sword object. Codes come in different shapes and sizes, and you can carry up to four at a time across pages. |
This book is the game's central feature. There are a number of interrelated issues with the book's mechanics. I'll give each one a subheading, explain the problem, and explain my solution.
 |
| Notes on the game's issues |
Too General Navigation/Tiny Table of Contents
In addition, characters' pages are not added to the section as you scan them. For example, if I walk into a town and hit all the people there with the book, their pages won't appear in the town's section in the same order I hit them. They'll appear in some arbitrary, pre-determined order.
Solution
The obvious solution is to expand the table of contents and add the pages within each section in chronological order:
 |
| Adding page numbers to each section of monsters would help the player remember how to navigate to a specific page |
 |
| When you click on a section, a list of all the monsters grouped under that section should appear. In the actual game, tapping on the "Humanoid" line just takes you to the Goblin page, since it's the first page under that heading. So in this prototype, it's okay that clicking the Humanoid line gives you this monster list instead of taking you to the Goblin page, because here you can just tap on the Goblin line directly. |
I added the "Humanoid" term (upper right) to classify the monster for the player's future reference. In the real game, if you scanned a new monster, there was no way of telling what kind of monster the book categorized it as unless you flipped through a specific section trying to look for it.
At first, I thought the player could click on the Humanoid designation in the monster's page to take them to the second panel above, the Humanoid list of monsters. That would make it easier to find another Humanoid monster, but I don't think players would want to do that often enough for the feature to be appreciated.
Another option would be for the Humanoid text at the top of the page to take the user to the first Humanoid monster (which is the Goblin, so if you're on the Goblin page to begin with it wouldn't do anything.) That would reduce the number of taps it would take to get to that particular monster's page by three, since the alternative would be to tap Index > Main table of contents > Monsters > Humanoid subheading.
I preferred the first option, navigating to the Humanoid sub-menu, because the player would probably want to choose the monster to navigate to instead of using the Humanoid text as a shortcut to the goblin page.
User testing would determine which of the two options, if any, should be implemented.
Code Bank
Thus, most of your time is spent flipping through the book. This huge issue is exacerbated by the fact that you can only carry up to four code pieces at a time across pages.
The makeshift solution is to make an informal "code bank" where you put all of one type of code on a specific page, and then remember what those pages were. I put all my copper codes on a specific character, ice codes on two different spiders, etc. This requires tedious amounts of upkeep, and can be dangerous when you encounter a monster full of health-giving Iron codes you stored on its page.
Solution
An actual Code Bank could act as a bin for unused codes, sorted by type of code and size (codes come in different amounts--a 2x2 square, an L-shaped 4 piece, etc.)
 |
| The Code Bank menu, with the tapped-on list of all the codes in a certain group. As you play the game, it'll become fairly obvious which codes would belong to which category. |
This final iteration of the Wisdom code's bank page has several features. The left page lists all the codes the player puts in the bank, with a running total of the amount of wisdom, in this case, the player put in the bank. The right table lists the wisdom code pieces contained in a specific page, with the total amount of wisdom in the entire book at the bottom. As the game progresses, there will be more than five pages with wisdom in them; accordingly, the "total amount in book" line will appear below the last listed page so the player knows to keep flipping to see the full table.
Similarly to the monster pages, this Wisdom page contains the heading "Concept" to remind the player which category the page is in, and/or possibly navigate back to the Concept sub-menu.
To take out a code from the bank, simply tap on the appropriate row and drag the code into the 4-code holding pen. To visit a specific page containing a wisdom code, tap on the page's name (Barrel Bomb, Pog.)
For example, you can tap the Pog name to visit the Pog page:
In the actual game, tapping on the square with the codes lets you move them and take them out:
In the original game, the long, subdivided rectangle holds up to four code pieces and lets you move them around the book. But in my iteration, I added a "+ Bank" feature. You can drag and drop codes to the "+ Bank" to add them to the Bank quickly and easily, instead of putting the code in one of the four carrying spots and then flipping to the specific code page in the Bank and dropping them. This way, when you scan a new object, you can simply drag and drop all the codes into the Bank until you need them again. This gives you greater control over what codes you put on what objects, since you're not forced into the awkward "put all my Copper codes on this one monster and then remember that page" system.
*When in the Code Bank, the four-code-holding pen will not contain the "+ Bank" feature.
In addition, the small brown rectangle on the left, with the tetris-like symbol on it, is the button to visit the Code Bank. Since the button is accessible on every page, it's easy to access the Code Bank at all times, which will cut down on page-flipping.
An Old Iteration of the Code Bank's wisdom page
The lines under the big wisdom symbol would contain information about the wisdom code attribute (the Book also functions as a Wikipedia of sorts.) This old version also showed the player all the codes in the bank instead of showing only one row for each shape. I thought it would become inconvenient and cluttered for the table to show all the codes put in the bank--if the player had fifteen of one shape, there would be five rows of that one shape! I considered only expanding the row when the player tapped the row to take one out, but that would also be unnecessary. Hence, the final version (the picture above this one) says there are five big square codes in the bank, but shows the player only three.
 |
| A later iteration, almost the same as the final. Some of the lines were moved, and the two tables were labeled |
Recording a Recipe (This is the Last Section)
As you play the game, you gain recipes called "metalizes." These are combinations of codes that, when used on a particular item in the book, turn the item into the recipe's item.
 |
| This recipe turns an ordinary gun into a Dragoon. It requires so many ingredients. |
The problem is that if you want to make a certain recipe, it's difficult to remember the recipe while hunting for codes in the book. There is a Notes section where you could write the recipe down, but this would still require you to flip to the Notes page to read it, so you may as well flip back to the recipe page instead.
Solution
I prototyped a screengrab feature that would follow you across pages, for easy reference.
To record a recipe, tap on the right-hand page. A small, blue button would appear...
...and follow you across pages, where you can click on the button to reveal the recipe:
 |
| The text of the recipe will be more nicely formatted, of course |
Clicking again will collapse the text. To remove the recording and the button, I'm debating between:
- the game auto-detecting when you create the recorded recipe, and deleting the button until you want it again. This could work, as a player wouldn't record a recipe unless they were making it then and there. On the other hand, auto-detecting could glitch.
- navigating to the recipe page and clicking on the right-hand page to delete the button. This is a toggle function.
Previous Iteration
At first, I thought the button should exist regardless of you recording a recipe with it. Upon recording, the button would lighten in color. Eventually, I realized that if you weren't recording, having the button around would be a nuisance.
Conclusion
These proposed features would solve the three main problems I encountered in Avalon Code: difficulty navigating to specific pages, an inability to find or organize codes without affecting in-game objects, and forgetting recipe specifics. I hope that this long post gives you an idea of my design process and problem-solving capabilities.
Comments
Post a Comment