I was excited about Baldur’s Gate: Enhanced Edition (BG:EE) coming to iPad. I had only heard good things about it throughout the years – Sadly, I missed it the first time around.
But as soon as I spent my $9.99, sat down, and started trying to play the game, a plethora of UX problems jumped out at me. I couldn’t even make it through the tutorial before I was ready to throw my iPad out a window. The game’s design for a touch interface is a usability disaster – it’s a poorly done port of a PC game that didn’t have a great UI to begin with.
While throwing my iPad out a window may have been satisfying, I decided to instead channel that rage into this blog post, which takes a few moments to point out the most egregious UX problems and identify a few possible solutions. As Leeroy Jenkins would say: let’s do this.
Welcome to Icon Hell
If there’s one thing that makes an interface difficult to learn, it’s an overabundance of icons. Labels require no special training or memorization to use, so where possible, it’s a good idea to use them instead of icons.
For the main game view, the millions of of icons on screen don’t bother me. To be able to quickly access many different actions with a minimum of taps, icons are great.
Of course, on a menu screen used for selecting which spells to memorize, is making everything accessible in one tap a priority at all? Nope.
What does it all mean?
This was the first screen that made me angry with its masses of incomprehensible symbols. Being a fearless iPad user, I tried tapping icons at random. This moved them into and out of my list of memorized spells, but didn’t tell me what they were.
For this screen, it would have been much better to implement it as a table view with the spell icon, spell name and short description shown in a single row. In addition, a giant question mark could provide one-tap access to the full description:
Unsucking spell memorization in 5 minutes flat. I spent more time coming up with silly spell names than doing the design, and it’s still better that what Baldur’s Gate offers. The spell “Shitty UX Design” does only 1 point of damage to non-designers, but will teleport a designer straight to the 7th circle of Hell.
There are a million other ways you could design this screen to make it suck less. Instead, what we’re left with is indecipherable.
The don’t-call-it-long-press
At some point in trying to select my spells, I tried the long press. After all, it’s never failed me before. I placed my finger down on a spell icon and waited what seemed like an eternity. Nothing happened. Tried it again, thinking I might have missed the small touch target. Still nothing – until I gave up and lifted my finger – and then the spell information appeared. What, a long press that works unlike every other long press? WHY WOULD YOU DO THAT!?
If you’ve ever used any native iOS app, or one of the hundreds of thousands of other apps that happens to implement the long press, it works like this in all of them:
- You place your finger down on the screen.
- You wait until a popup appears.
Here’s the experience in Baldur’s Gate for iPad:
- You place your finger down on the screen.
- You pick your finger off the screen. Nothing happens, because you only waited .249 seconds when you needed to wait .250 before removing your finger. You curse loudly at the god of technology, Technarius, pull out a stopwatch so you can carefully measure your press time, and try again.
- You place your giant, meaty finger onto the tiny icon again. This time you wait a good 5 seconds, because dammit, you’re not going to let some arbitrary timer beat you. You hold your breath, lift your finger and… nothing happens because your sausage finger was 1 pixel off of the icon’s hit target. You curse the god of meat, Porkarious, file your fingers down to a manageable size, and try again.
- You tap and hold as accurately as possible… wait what you think is a long enough time… and lift your finger. You cry tears of joy as you finally learn what a spell does!
- You switch to Mail and long press reply to bring up the action menu, tap reply all to that company-wide email and send a cat picture. Standard gestures and grumpy cat are awesome!
- You come back to Baldur’s Gate, and don’t understand why your long press is not working.
- You remember that Baldur’s Gate uses a shitty, proprietary long-press-that-isn’t-a-long-press just to make you swear at made-up gods and waste your time. DAMN you, Longus Pressicus, god of non-standard UIs!
This goes back to a point I made on Twitter earlier: custom UIs for games are not ok unless you have a really, really, really, really good reason to abandon the wisdom of thousands of man-years of learning on the right way to do human-computer interaction. Baldur’s Gate has no excuse.
My favorite part of emailing a cat picture to your entire company is the inevitable 10 reply alls that state “Don’t reply all”.
So, uh, what are you guys doing?
This one is so egregious that it boggles my mind that the app was shipped with it.
Basically, if you pause the game, and try to issue commands to your characters, you get either zero or almost zero feedback.
Trying to figure out what changed on the screen after issuing a command is like a shitty version of Where’s Waldo.
Best case: the circle around the monster flashes for a fraction of a second.
Average case: a little tiny icon indicating your next action appears on your character portrait.
Worst case: nothing happens. Literally, nothing. No change in the pixels on your screen whatsoever.
When not paused, if you tap a target, the circle will sometimes change into more of a crosshair. That’s not too bad, though it could be better. It’s still not good.
Here’s one way it could be made a lot better: simply show an arrow from each of your characters to their current target.
Arrows, arrows, everywhere. (Not the stabby kind.)
Another way this could be greatly improved: As soon as you select an action, show it in on screen so the user knows what they need to do. As soon as they tap an enemy, display some text briefly that says what they did (targeted imp!) along with making the imp flash and drawing an arrow from the unit to the enemy.
My theory: the UI and UX designers on BG:EE debated icons vs. labels hotly for three days and three nights. Afterwards, the UX designer died in a suspicious accident, and the decision was made to use only use labels as a last resort.
Am I on the verge of death? Eh, it’s probably not important.
For games where your characters have a finite amount of life, video games typically use three primary ways of displaying this information:
- Health Bars! Either over your character or close to their portrait.
- Numeric quantities! Same placement possibilities as health bars.
- A color, ranging from green to red, to indicate overall damage.
In addition, some games do crazy things, like making the health bar be color coded. Or making the health bar be a pie (like in Mario 64). The really fancy shamncy ones might even hide your health bar if you’re at full health, or show both a health bar AND a text readout AT THE SAME TIME!
A pie instead of a bar? BRILLIANT!
Baldur’s Gate eschews these conventions and displays NOTHING AT ALL. So you have no way of knowing if that character you’re sending in to check the room for traps will die if he steps on a pin.
I’m slightly exaggerating – you can actually see your character’s health but pressing and holding (no toggle available) the little magnifying glass icon. Sadly, you can’t do anything else while holding this incredibly useful button down. The interface will detect a pinch gesture, zooming in or out the view into the game world. Argh!
I am reminded of the Robin Williams bit about the invention of golf. Paraphrasing: “It’s kind of like pool, except there’s a really fucked up, curved stick you use to play it, and you have to hit the ball 400 yards rather than 3 feet.” Not having the “highlight” feature be something you can simply leave on is kind of like that.
What exactly is interactive?
On a touch based interface, interactive elements need to be obvious, because you don’t have a hover state. Otherwise, you’re going to be endlessly tapping at random until you develop RSI on your pointer finger and need to spend thousands of dollars on therapy.
In Baldur’s gate, that lovely magnifying glass icon is the only way to reveal interactive objects, and it doesn’t show level entrances/exits (I’ve read that you can see them by mouse hovering in the PC version, but haven’t confirmed this). It took me 5 minutes to find my way to the basement in the tutorial level:
Where’s Waldo: Round two. I ended up walking the entire circumference of the room until I found the exit. Yes, I must be a masochist. Otherwise, I would have exited the room by simply deleting the app off of my iPad.
This issue and the previous one can be mostly fixed with one change: Make the magnifying glass icon (actually called Highlight) be a toggle. Leaving it on all the time would solve (though poorly) all of the issues related to exploration and health display except for showing zone exits.
If you wanted to actually apply some design with your UX overhaul, you could accomplish the same thing without much work. First, add health bars to your character portraits so they don’t clutter up the game world. Make tappable crates sparkle like interactive elements do in World of Warcraft and zone exits have a subtle, animated reflective effect around their frames, like doorways do in Assassin’s Creed 3. People smarter than you or me have already invented this stuff – just copy it.
More on the long death… I mean long press.
After mastering the faux-long-press — ok, mastering is a strong word, but I could at least make it work almost 50% of the time – I was confident I could muddle my way through the interface.
I noticed a question mark button on the left side of the screen and started using it judiciously. Suddenly, the jumble of icons started having names! However faint, I felt the first tremulous feelings of joy creeping into my Baldur’s Gate experience. Even better, the help menu was context sensitive, bringing me to relevant help no matter what I had selected.
So I selected my Druid character by tapping her portrait. I tapped the spell icon to pull up her spells, then launched the help. Amazingly, I could see multiple spell names in one place! As far as I know, this is the only place in the game you can see a labeled list.
Hallelujah! Spells! Beautiful, labeled spells!
Being the optimistic fool that I am, I tried Baldur’s-stupid-long-press-implementation on the Entagle spell to pull up more details. Nothing happened. Assuming I simply didn’t get the timing right or finger placement correct, I tried again. And again. And again. Still nothing. Apparently, it’s not possible to get to the the detailed spell description from the help screen, which is the one place you would think it would be most useful.
All was not lost, I thought, maybe I can tap the spell icon to cast it. Still nothing. The entire help screen is completely non-interactive. Ugh. Did the people who designed this ever watch a beginner try to play?
In summary…
Nobody gives a damn. Despite its crimes against humanity, Baldur’s Gate is still in the top ten on the iPad app store a few days after launch despite its (relatively) high price tag. It has managed to maintain a respectable 4 star rating. However, looking at the most recent ten reviews at the time of this writing, a full 7 of them mention UI or usability problems as major issues.
If there’s one thing a touch interface needs, it’s the ability to adjust the keyboard and mouse scrolling speeds.
Oh, and one last thing. That Entangle spell that I couldn’t get to the description of? I found out what it does. It makes your UI extremely laggy and unresponsive for about a minute, slows down an iPad 3rd generation to rendering about two frames per second, and as a side effect, roots both enemies and your characters in place:
This Entangle spell is so meta.
.
