OpenMW Android Controls UI Redesign and Case Study
Posted: 15 May 2019, 01:00
TL;DR: Before: https://i.imgur.com/GtopLsv.jpg After: https://i.imgur.com/pmjtjq8.jpg
Intro:
After looking at the OpenMW Android port of Morrowind, and seeing some comments and feedback about the original UI, I decided to try my hand at doing a redesign of the controls interface. I am not the original designer or developer of the UI or port, just a fan of Morrowind, OpenMW, and UX design.
Focus:
Clarity is an important part of choosing icons in a user interface design. If the user does not recognize the symbol or image, it is very hard to use at first, and can still be frustrating after some time. Symbols, when chosen well, are meaningful and communicate the action intuitively. There is little guessing or learning, just ease of use. I focused heavily on the meaningfulness of icons in my design.
The OpenMW Android port interface has many, many buttons on screen. Translating an old PC RPG onto mobile is difficult for many reasons, one of which being the controls. A user can reach dozens of keys at once on a keyboard, but on mobile, button real estate is at a premium. Being able to focus down on just the most important interactions is very important when designing a beautiful, intuitive UI. Because of this, I have also focused on simplicity in my interface design.
Challenges:
The OpenMW Android port uses many icons that are either confusing, busy, or communicate nothing. For example, look at the current UI:
Which button would you press to wield your magic? What about to talk to someone? Go into sneak mode? Change the camera? If you couldn’t immediately answer, you are not alone. I couldn’t either.
I did some tests with 4 other users, 2 of which had played Morrowind before, and none of them could identify any of those buttons. This is because those buttons do not communicate their function. For example, to activate the third person camera, you press the button in the top left corner with three people in it. An icon with three people does not communicate “third person”, because those two figures of speech have nothing to do with each other, even if the words themselves are similar.
For another example, watch the video clips here: https://youtu.be/Kepz5ae4d8k?t=645
and here: https://youtu.be/Kepz5ae4d8k?t=864.
In the first clip, the user cannot remember which button is activate and which button is select. This is because both of their icons are confusing, and it is not clear when to use which, despite having played the game before.
In the second clip, the user attempts to attack, but presses the ‘equip weapon’ button repeatedly. The icon for attack is the crossbow button, which I assume is to communicate “fire”, but because the user is equipping a sword, that is not obvious at all. The icon to attack should communicate action, and the crossbow does not.
Solution:
Morrowind almost solely revolves around 3 repeated primary actions:
• Movement
• Combat
• Interaction
Of course, there are other controls and actions, but they are mostly secondary, or are not time sensitive. Controls like move and attack are time-sensitive in game, and need to be done quickly and at a moment’s notice, so they should be extremely easy to activate. Secondary actions, like ‘wait’ and ‘journal’, are less frequent, and usually done at safer, slower moments, so can take longer to get to. That is why I have put the secondary buttons in a bar menu at the top left corner.
Control Breakdown:
Attack: Was a crossbow, has been changed to a swinging sword to communicate action.
Magic: Was a meaningless illustration, is now a universal gaming image for magic, a bolt.
Weapon: Remains a sword, but is now juxtaposed with the magic symbol to contrast the two, and is further contrasted by clearly not being an attack button next to the swinging sword.
Inventory: Was a collection of a helmet, sword, and shield, is now the well-established RPG symbol for inventory, a backpack.
Activate: Was a back arrow, which possibly was meant to communicate taking something, but now is a pointing hand, which illustrates choice, whether it be a door to open, a person to talk to, or an item to take.
Jump: Was a very decoration-heavy arrow, but is now a curved up arrow, which shows the action more clearly.
Pause: Is still a pause button, but is now simpler.
Camera: Was previously the 3 people icon, is now an angled camera, communicating clearly what will happen when you press it.
Sneak: Was previously a down arrow, possibly to communicate crouching, is now the TES-established symbol for sneaking, an eye that can’t see.
Save / Load: Simplified. Load seems to have been taken out of the latest patch, but I think it should remain if you are going to give a quick save option.
Journal: Still a book, just simplified.
Wait: Simplified hourglass.
Conclusion:
I believe that my chosen symbols and their organization will significantly help users understand the controls, and will make the overall experience much more intuitive. The symbols are now all meaningful and communicate clearly the intended action, and the icons themselves as well as their placement is now simplified.
Thank you very much for reading, and I welcome any feedback or criticism. This was my first prototype, and I would be happy to work with the OpenMW Android devs to make it better, or even implement it into the game!
Bonus: Just for fun, a working interactive prototype of my design: https://xd.adobe.com/view/99620dc9-6272 ... 88dc-ef53/
Intro:
After looking at the OpenMW Android port of Morrowind, and seeing some comments and feedback about the original UI, I decided to try my hand at doing a redesign of the controls interface. I am not the original designer or developer of the UI or port, just a fan of Morrowind, OpenMW, and UX design.
Focus:
Clarity is an important part of choosing icons in a user interface design. If the user does not recognize the symbol or image, it is very hard to use at first, and can still be frustrating after some time. Symbols, when chosen well, are meaningful and communicate the action intuitively. There is little guessing or learning, just ease of use. I focused heavily on the meaningfulness of icons in my design.
The OpenMW Android port interface has many, many buttons on screen. Translating an old PC RPG onto mobile is difficult for many reasons, one of which being the controls. A user can reach dozens of keys at once on a keyboard, but on mobile, button real estate is at a premium. Being able to focus down on just the most important interactions is very important when designing a beautiful, intuitive UI. Because of this, I have also focused on simplicity in my interface design.
Challenges:
The OpenMW Android port uses many icons that are either confusing, busy, or communicate nothing. For example, look at the current UI:
Which button would you press to wield your magic? What about to talk to someone? Go into sneak mode? Change the camera? If you couldn’t immediately answer, you are not alone. I couldn’t either.
I did some tests with 4 other users, 2 of which had played Morrowind before, and none of them could identify any of those buttons. This is because those buttons do not communicate their function. For example, to activate the third person camera, you press the button in the top left corner with three people in it. An icon with three people does not communicate “third person”, because those two figures of speech have nothing to do with each other, even if the words themselves are similar.
For another example, watch the video clips here: https://youtu.be/Kepz5ae4d8k?t=645
and here: https://youtu.be/Kepz5ae4d8k?t=864.
In the first clip, the user cannot remember which button is activate and which button is select. This is because both of their icons are confusing, and it is not clear when to use which, despite having played the game before.
In the second clip, the user attempts to attack, but presses the ‘equip weapon’ button repeatedly. The icon for attack is the crossbow button, which I assume is to communicate “fire”, but because the user is equipping a sword, that is not obvious at all. The icon to attack should communicate action, and the crossbow does not.
Solution:
Morrowind almost solely revolves around 3 repeated primary actions:
• Movement
• Combat
• Interaction
Of course, there are other controls and actions, but they are mostly secondary, or are not time sensitive. Controls like move and attack are time-sensitive in game, and need to be done quickly and at a moment’s notice, so they should be extremely easy to activate. Secondary actions, like ‘wait’ and ‘journal’, are less frequent, and usually done at safer, slower moments, so can take longer to get to. That is why I have put the secondary buttons in a bar menu at the top left corner.
Control Breakdown:
Attack: Was a crossbow, has been changed to a swinging sword to communicate action.
Magic: Was a meaningless illustration, is now a universal gaming image for magic, a bolt.
Weapon: Remains a sword, but is now juxtaposed with the magic symbol to contrast the two, and is further contrasted by clearly not being an attack button next to the swinging sword.
Inventory: Was a collection of a helmet, sword, and shield, is now the well-established RPG symbol for inventory, a backpack.
Activate: Was a back arrow, which possibly was meant to communicate taking something, but now is a pointing hand, which illustrates choice, whether it be a door to open, a person to talk to, or an item to take.
Jump: Was a very decoration-heavy arrow, but is now a curved up arrow, which shows the action more clearly.
Pause: Is still a pause button, but is now simpler.
Camera: Was previously the 3 people icon, is now an angled camera, communicating clearly what will happen when you press it.
Sneak: Was previously a down arrow, possibly to communicate crouching, is now the TES-established symbol for sneaking, an eye that can’t see.
Save / Load: Simplified. Load seems to have been taken out of the latest patch, but I think it should remain if you are going to give a quick save option.
Journal: Still a book, just simplified.
Wait: Simplified hourglass.
Conclusion:
I believe that my chosen symbols and their organization will significantly help users understand the controls, and will make the overall experience much more intuitive. The symbols are now all meaningful and communicate clearly the intended action, and the icons themselves as well as their placement is now simplified.
Thank you very much for reading, and I welcome any feedback or criticism. This was my first prototype, and I would be happy to work with the OpenMW Android devs to make it better, or even implement it into the game!
Bonus: Just for fun, a working interactive prototype of my design: https://xd.adobe.com/view/99620dc9-6272 ... 88dc-ef53/