Leveling Up Readability & Accessibility
Where We Were
Before we get started on what we’ve improved we’ll first set the scene a little for context. Readability and accessibility on Röki is something that we know is massively important. However, so is the visual style and dynamism of the game.
We have a fair amount of experience in this area and the challenges it poses. I spent a considerable amount of time whilst working at PlayStation improving and art-directing UI/UX on RIGS (and to a lesser extent Killzone: Mercenary). RIGS posed a significant challenge as it was a UI heavy game in VR, where the player could be looking anywhere they wished. Suffice to say we learned a large amount about readability and accessibility during that time so we weren’t entering this area of the project completely cold but had a fair amount of prior experience to draw from.
Caveat
As always with our Blog, what follows are are own our thoughts, process and conclusions. Our choices may not be right for other games/teams and there is often no global ‘right’ or ‘wrong’ approach for many aspects of game development, so it is important to research, experiment and find what works best for you.
What We Liked
In our first pass on the dialogue/text systems we got a lot of things right, but we always knew there were some things we wanted to go back and do a second pass on. Some of the things we were pleased with from the first pass were:-
Dialogue Text Bubble - This allowed our text to cleanly ‘pop’ out against the background irrespective of whether they were light or dark
Dynamic Size of Text Bubble - We got it working so that the text bubble scaled depending on how long the line was so it didn’t take up screen real-estate when it didn’t need to.
Consistent Screen Space of Dialogue Text - We liked having the dialogue text appear in a consistent screen-space. Rather than using speech bubbles. This meant that we were free to make the text as large as we wanted, which is obviously a big win for readability.
Speaker Label - As we didn’t want to use speech bubbles we decided to add a ‘Speaker Label‘ to denote who was speaking.
Short Dialogue Lines - A decision we’d made early on was to keep our dialogue lines short, if we needed longer lines we’d split them into two separate lines. This means that lines can be read at a glance and we’re not cluttering up the screen with super long sentences.
Feedback
One of the things we love about openly sharing our progress on Twitter is that we’ll get feedback from people. As we’re a teeny-tiny studio getting fresh eyes from outside of the core team can be really helpful. As it was in this case!
We’d shared a movie of our dynamic cutscene bars on Twitter and had some feedback on the dialogue text that appeared in the video. The feedback (and subsequent conversation) was from/with accessibility advocates and specialists Mark Sweeny and Ian Hamilton.
It’s really important to be open to receiving criticism. It might be a little painful at times but it can be crucial in helping to shine a light on areas that might need attention. You need to put your ego to one side, take a look at your work again and evaluate it honestly. After doing this, you don’t have to always agree with the criticism, but it is important to evaluate it openly and without prejudice, or ultimately you’re just doing yourself a disservice!
We’d previously had some feedback on the font we were using, so already had that down for ‘further work’, but we hadn’t considered the text ‘scroll-in‘ as an issue. The conversation we had was really informative, so we made a note to do another pass at a later date.
Second Pass
As part of the build up to AdventureX we decide to take another run at the dialogue visuals. It was going to be the first time we had showcased the game at a major event and we wanted to make sure we made a good first impression. Here are the main points we hit in the second pass:-
Found a Killer Mixed-Case Font - We knew that a mixed-case font was going to be more legible. However, we didn’t just want ANY mixed case font. We’d spent quite a while finding our current font and knew that if we were going to replace it is would have to be with a mixed-case option that still delivered on style and wasn’t dull as ditch-water. When we talk ‘style’ it’s important to note that we’re talking subtle style. We didn’t want an overly characterized font that would quickly get repetitive and annoying or impact the readability. Specifically because that was the whole reason we were doing this pass in the first place. Finding a new font was the most time-consuming part by a long way! It’s a really key part to how the game feels, people will be looking at it a great deal so we knew we had to get it right.
Bold and Italics - We were already using bold and italics to emphasise certain words in our dialogue lines but in sourcing the new font we kept and eye out for option where they had more impact. Using bold and italic variants in dialogue lines is actually really powerful and we’re kind of surprised their use isn’t more widespread in games.
Ditched Text ‘Scroll-In‘ - One of the key bits of feedback was to try getting rid of the text ‘scroll-in‘. Mark described it as the equivalent of the sound of having nails dragged across a black board for deaf people. Hands up, we hadn’t really considered this before, we just liked the dynamism it brought, so we went and did some tests. When we tried it without, it was an instant win. The game felt less sludgy to play and whilst we lost a bit of visual finesse, the play experience ultimately is king.
Emote Library - We already had the speaker label to clarify who was talking but since then we’ve also added the audio emotes (see here and here) which add a further qualifier along with animation to further clarify which character is voicing the line.
Impact of Mixed-Case and Bold/Italics Example
Outside of readability/accessibility you can also consider the impact of the meaning and delivery of a read line. Having the option of mixed-case and bold italics give you more tools to add personality, clarity and impact to the delivery of (when someone is reading) your lines. As an example:-
THAT THING, IT’S EATEN ALL THE PIE AND NOW I’M PISSED.
That thing, it’s eaten all the pie and now I’m really pissed.
That thing, it’s eaten all the pie and now I’m really pissed.
That THING, it’s eaten all the pie and now I’m really pissed.
Hopefully from the above you can see that using bold/italics and mixed case can make your lines less flat and give them more impact and humanity.
That’s All She Wrote
That’s it for this week. Hopefully you found that look at our pass on text readability and accessibility interesting. We’ll be back again next week with another Röki blog. Until then,
Alex & Team Röki