OpenMW Android Controls UI Redesign and Case Study

For new and upcoming OpenMW branches and ports; move fast and break things!
Post Reply
treio
Posts: 13
Joined: 07 May 2019, 00:30

OpenMW Android Controls UI Redesign and Case Study

Post by treio » 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:

Image

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:

Image

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.

Image

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/

sandy0099
Posts: 11
Joined: 21 Apr 2019, 12:43

Re: OpenMW Android Controls UI Redesign and Case Study

Post by sandy0099 » 15 May 2019, 10:14

where are the hot-keys? the feature that i really miss is a snap grid while custumizing buttons. currently they becomes a mess when rearranging.

treio
Posts: 13
Joined: 07 May 2019, 00:30

Re: OpenMW Android Controls UI Redesign and Case Study

Post by treio » 15 May 2019, 16:29

sandy0099 wrote:
15 May 2019, 10:14
where are the hot-keys? the feature that i really miss is a snap grid while custumizing buttons. currently they becomes a mess when rearranging.
I didn't include the hotkeys yet. I figured they might be infrequently used enough on mobile that if necessary, you could reach them through the on-screen keyboard, but if that assumption was wrong I could add them back in. I left enough space at the top that they could be included. They could also go down the left side vertically.

Jodiwe
Posts: 20
Joined: 16 Sep 2014, 12:10

Re: OpenMW Android Controls UI Redesign and Case Study

Post by Jodiwe » 15 May 2019, 17:13

I must say this does look a lot better, and I will admit to also having issues with the controls. That's probably the main reason this isn't on my phone anymore. I haven't tried any recent releases though.

Just a few comments which might not be too justified:
- The jump still isn't super-obvious. I don't know what symbols might be better. What do games where you can vault over things use on screen? How about a symbol like this: https://www.amazon.com/GreatShirts-Long ... B07L2SW6QD
- The analog controls are quite close to the use, jump, and attack controls

I've found PPSSPP's controls on Android to be quite good (I'm playing Ratchet and Clank), and they are even more sparse. Here's my layout:
https://photos.app.goo.gl/yiuPSAUXn4DQo4Aa8
In this case, the main controls are the analog stick (I've changed the settings in-game so it strafes without moving the camera) and the weapon select/weapon attack/spanner attack/jump buttons (triangle/circle/square/x). The camera movement is via the paddles (L + R) on PPSSPP, and are less important than the other controls. I think in Morrowind the camera controls are important during combat, so I don't really know what to say there, as you only have 2 thumbs.

treio
Posts: 13
Joined: 07 May 2019, 00:30

Re: OpenMW Android Controls UI Redesign and Case Study

Post by treio » 15 May 2019, 17:29

Jodiwe wrote:
15 May 2019, 17:13
I must say this does look a lot better, and I will admit to also having issues with the controls. That's probably the main reason this isn't on my phone anymore. I haven't tried any recent releases though.

Just a few comments which might not be too justified:
- The jump still isn't super-obvious. I don't know what symbols might be better. What do games where you can vault over things use on screen? How about a symbol like this: https://www.amazon.com/GreatShirts-Long ... B07L2SW6QD
- The analog controls are quite close to the use, jump, and attack controls

I've found PPSSPP's controls on Android to be quite good (I'm playing Ratchet and Clank), and they are even more sparse. Here's my layout:
https://photos.app.goo.gl/yiuPSAUXn4DQo4Aa8
In this case, the main controls are the analog stick (I've changed the settings in-game so it strafes without moving the camera) and the weapon select/weapon attack/spanner attack/jump buttons (triangle/circle/square/x). The camera movement is via the paddles (L + R) on PPSSPP, and are less important than the other controls. I think in Morrowind the camera controls are important during combat, so I don't really know what to say there, as you only have 2 thumbs.
Thank you very much for the feedback. I agree that making a clear jump symbol is difficult, but I really like your example pic, since it might be better to show a person's body doing to action. I figured since all of the other buttons are very clear (hopefully), then you could pretty easily figure it out by process of elimination. I will do some user testing on it though and see how people respond.

And yes, the middle controls are all fairly close. At first, I had the jump and activate controls closer to the middle, but in doing a physical test of it, I found it was much easier to move your thumbs down from the controls than over to the middle. I have also intentionally placed the two buttons on the respective sides, because you generally need to be using their opposite stick to use them. For example, to pick up an item, you need to be able to move your camera stick around freely and activate it with your other hand, so I placed them on opposite sides. Same with character strafing and jumping.

As far as combat and the sticks, I agree it isn't easy. It is hard to decide which stick is opposite the attack button. On PC, you can attack, move, and swing your camera around all at the same time, but one has to go on mobile. Having the attack button on the right side means you are able to strafe your character while attacking, but can't move the camera particularly easily. I figure that most times you are in combat, your camera stays fairly still, because at least in melee combat, you and the opponent just kind of stand still. But this raises an excellent question, and I will do some user testing (read: watch youtube videos of people playing Morrowind) and see if it is more common to be strafing and attacking, or moving the camera and attacking. Being able to switch which side attack is on in options would be nice too.

xyzz
Posts: 134
Joined: 14 Jan 2018, 22:25

Re: OpenMW Android Controls UI Redesign and Case Study

Post by xyzz » 18 May 2019, 15:58

treio wrote:
15 May 2019, 17:29
On PC, you can attack, move, and swing your camera around all at the same time, but one has to go on mobile.
You can do the same on android: the attack button, when held down, moves the camera in the newer builds.

treio
Posts: 13
Joined: 07 May 2019, 00:30

Re: OpenMW Android Controls UI Redesign and Case Study

Post by treio » 18 May 2019, 20:49

xyzz wrote:
18 May 2019, 15:58
treio wrote:
15 May 2019, 17:29
On PC, you can attack, move, and swing your camera around all at the same time, but one has to go on mobile.
You can do the same on android: the attack button, when held down, moves the camera in the newer builds.
Awesome, that's a great solution!

Post Reply