Designing Text UX for Effortless Reading

[Music] okay hello everyone welcome my name is Joe nice to meet you thanks for coming to my talk especially on a Friday that's really appreciated I'm going to be talking at length about how to make bored Millennials play your text games instead of shooting aliens in the heads but before we begin if you could please silence any devices and small children you have with you and if you really enjoy my talk please fill out your evaluation forms if you don't enjoy my talk just that's fine don't worry about it so text in videogames it all sound a little bit in 1977 doesn't it but as we know text games have been making something of a comeback in no small part because of the rise of mobiles and and tablets a great form factor for reading that we're seeing text games everywhere on PC and we as a company are even

making a tinkle we're making text game for console so a text game that you read on a TV on the other side of the room what could possibly go wrong so we're best known as a company for making two games eightydaze and sorcery each of which have hundreds of thousands of lines of words of interactive prose and we like to think that if we've done our job correctly then it will feel much more like a playing experience not a reading experience people talk about playing our games and so if I if I have my UX hat on which is the fact that I usually have on when I'm not programming I like to think that our primary goal is to make sure that every word is absolutely effortless to read if you think about the experience of browsing Twitter it's similar you know you're

you're browsing Twitter but you're still reading texts people are reading huge amounts of text when they're reading Twitter when they shop online when they're even when they're watching film with subtitles but they don't really talk about that as a reading experience and that's the way we think about our games as well the player goes on an adventure in which they happen to read quite a lot of text so we like to think of effortless reading is a combination of two things really and they're both very closely related great writing of course and great UX design and those two things are really really closely related a well worded sentence or a well structured paragraph allows for a great user experience and I'll talk a little bit about the read that the writing but I'm not a writer myself my co-founder John is sitting here in the front he's he's the main writer of our company but my focus to dinkle is as a developer and as a UI and UX designer so really this

this whole talk is gonna be a nice bag of tips and tricks as some suggestions on how to improve the the text UX in your in your game but they all contribute to what I see is the two main pillars of what we do with our text you exit inkle focus and pacing focus is making sure that the player isn't distracted in any particular moment it's making sure that there isn't anything that's distracting them from the main tasks that they're meant to be doing of reading assuming that reading is the main task ideally the play should never have to think the words simply drop into their brain and it's nothing to do with the the player having to focus it's about the game being focused so the player doesn't have to do any work at all it's just effortless for them so to start with a quick example I'm a big fan of using very tiny amounts of text in presentations it means that you're listening to what I'm saying and not

spending ages looking at the bullet points on my slides but if I do want you to read something I can be sure that there's if there's a small amount of text on the screen you'll definitely read it it's effortless but to give you a counter example and I apologize if you worked on this game here's the witch so on the surface this looks like a it's a really pretty screenshot the aesthetics are great the character arts lovely even the layout is kind of it's harmonious the the icons are pretty there's really nice kind of color balance and I like all the icon design I like I even like the font choice but that's a wall of text do you really feel like reading it you've popped open this book you see this wall of text and you go oh I won't bother this time unless you're really trying so let's try a really quick redesign of just the text flow okay that's a good start

we've wiped the slate clean no distractions we're gonna start by revealing the title to the player but just the title and that will give it a sense of significance are you just read it and so it goes on but what if the player doesn't want to read the text go on then we'll add a back button but we're definitely not going to draw any attention to it but maybe but maybe just maybe they'll actually want to read the players will want to read the text anyway and not want to dismiss it because it's just boring in-game text content of course it takes a little bit longer to design and build than a simple dialogue box but let's be honest this stuff isn't rocket science and if you really if if you if you hide writers in the first place to produce really great

text content wine why not devote a little bit of developer time to make it really pleasant to read so you might have noticed I've started to touch on pacing already after wiping the slate clean to remove all the distractions I revealed a little bit of text at a time initially and then more and more allowing players of just a little bit of a climatization time getting used to the fact that they're no longer juggling inventory items and instead settling into a bit of reading focus and pacing are really closely related and in fact quantity of text is a really good example of that the amount of text that you show at a time affects both the focus and the pacing and never more so than at the start of the game but other things that affect the pacing are the timing of any text animations you have as well as the structure of the writing is the structure of the writing is a really core part of the UX it affects the flow of how you consume the text and the timing of how you read it so I'm

going to focus on two main areas in detail and they kind of correspond to focus and pacing respectively so I'm going to talk about typography and animation so great typography is really about reducing friction and therefore improving focus choosing the right fight typeface laying out the text really beautifully and with exactly the right spacing that makes it really clear to read and just at the right size it's all important when choosing a typeface for text that the players going to be reading a lot of the most important thing is readability and one aspect of this is legibility what's the difference between readability and legibility well legibility is how easy it is to make out the shape of the individual letters so to take a slightly extreme example this fantasy lettering is perfectly legible you can see exactly what it says you can pick out every

single character and you even in isolation you'd know what that character is but would you want to read fifty thousand words in it I certainly wouldn't it wouldn't be as readable and this this is kind of an extreme example obviously even though even a game you I wouldn't use this font for fifty thousand words of text and you would certainly wouldn't typeset an entire book in this typeface but game artists and designers seem continually tempted to push the boundaries of what slightly just a bit to over stylized in my opinion use it in practice all the time for example I love elder scrolls by the way I love oblivion but this text is not designed to be read this is just this is basically just a prop in the world that happens to have some text written on it to give you a sense of the tone of the world but I don't think anyone would really feel like this is this is really pleasurable to read the the characters yeah they're totally that beautifully kind of within the tone of

Skyrim's world but it's just not it's just got that little extra amount of friction that prevents you from really get getting drawn in I mean some intrepid players myself included might really make an attempt to to read some of it but it's just a lot of hard work isn't there another example this one from oblivion excuse me if the screenshot looks a bit low resolution so that for example this if you look at the initial on on the second page the the stylized gee that's beautiful I love illuminated manuscripts and that's gorgeous but it just makes the text just a little bit harder to read overall the font isn't bad but it's just a little bit extra work so here's what I would do if I was going to change the font and just play with the layout a tiny bit so what I've done is I've duplicated the text 10 on the right page onto the left page so you can see them side by side and obviously the first thing you notice is there's just less text on the left-hand

side so they're not totally equivalent you might think I'm cheating so what's the other things I've done I've I've changed the typeface to a variant of castle on which originates from the 18th century even if you don't know anything about fonts that'll just give an instinctive slightly aged feel and I feel like it's got a nicer it's got nicer proportions than other serif fonts like Times New Roman the main thing though is it's not quite so alien to your eyes is the overlays overly stylized version on the right and in fact the most important thing about readability is familiarity there's nothing specific about an overlay overly stylized font that makes it hard to read necessarily it's just the fact that your type is not familiar to your eyes I've also widened the margin which really just gives the text a bit of room to breathe this allows you to really focus on the words so the margins can really really kind of allow your eye to just

concentrate on just the paragraph and nothing around it but wide margins can also give sort of convey a sense of importance if you think about the way poetry is typeset is kind of really narrow with huge margins that just gives it this kind of air of confidence and importance and it can make a message just feel significant even if the words aren't how profound I've also had a lot of paragraph spacing you might have noticed I've also broken up that first paragraph to playing with the structure of the writing is a core part of the designing the UX and even if you know your writer isn't responsible for the UX ultimately they are contributing to it I've also indented the paragraphs I mean this sounds like a really minor thing but anecdotally on eightydaze as soon as

we put in that indent on the on the first line of every paragraph it sort of acts as this little anchor that lets you feel like you're you're not getting lost in the text and it helps you kind of skim skim down I should say this is in general a pretty contrived example if I was designing everything from scratch I wouldn't I would almost certainly not lay it out on the pages of the book even though that feels very in metaphor with what the players doing we'd probably do something like what we do on sorcery with pieces of paper that slide up so what are my top five typography and typesetting tips we've already talked about typeface in the margins and paragraph spacing which helps focus on in on the text and give a sense of importance next on this list is text size I could probably rant for an hour just about text size alone the number of console games that you see with this tiny tiny tiny text probably

because developers just sitting next to their TVs that's definitely the way it was when I was working in triple-a and they just they just don't care that you can see the text is right next to there they're sitting right next to the TV so they don't care please don't do that as a rough guide just take a look at film subtitles is the most ridiculously simple UX in the world but even some titles on cheap DVD players work fine if you're working on both mobile and console a nice rule of thumb is that those screen sizes are actually surprisingly similar if you take him to get into account the view distance so the fonts are likely to be a bit more chunky than on PC for example where you can afford to have a smaller font but if you're developing for PC and one of those other platforms you may as well just design the console order or the mobile UI first because then you'll be sure that you've got enough space on PC and you won't squash it in at the last minute so a rough rule of thumb mode

safe a number of words per line and this stuff is really important is it you should aim for around 5 to 15 words per line at the lower ends you have an effect a bit like a newspaper column which can actually be really quite easy to read because you know your eye doesn't get lost but as soon as you go over some around 15 it just becomes that little bit harder for your eye to scan back to the star to the next line I've seen a few narrative games on PC particularly that put narrative down at the bottom of the screen in a tiny font and stretcher the full width of the screen giving well over 20 words per line sorry which I don't mean to pick on you how many words is that part a line I lost count around 30 and I know this is cheating because this is just subtitles but all of this stuff counts finally the text positioning if in the same way as when you're reading film subtitles you might find that you you when you aren't reading you sort of find

yourself not being able to pay attention to the visuals quite so much it's kind of splitting the players attention so ideally you want to try to place the text contextually where it belongs next to the gameplay within the scene I know that can be different depending a difficult depending on the genre and finally there's one more point that I'm making on this slide and that's that you can use the text brightness itself or the color in order to draw the players attention to what's important right now what they should be reading at this very moment and and while also showing the the previous text for a for some context and this this is definitely something that we did on 80 days and it really helped focus the players eye so all of these typography improvements can help with focus they help the player concentrate on the text that's important and help them to absorb it easily and I've been showing some examples of some static pages of text but one of the things we've been most happy ating with

a tinkle is the timing of the way that we would reveal text the pacing so I like to think of focus and pacing a bit like harmony and melody and music harmony is like the way that the text appears in a particular moment and how how you perceive it and how it how it looks on the screen whereas pacing is more like melody it's how is how that text is presented over time as a sequence and pacing is critical right from the beginning of the game or right from the beginning of a particular section where you want to protect present some text I think everyone knows that in the in the first few seconds or minutes you have the opportunity to either capture your player or make them just feel that a little bit of apathy about what that what they're looking at because text is boring right just as people judge books by covers or decide in the first couple

of pages that the book doesn't seem to their taste you want to convince your players that your text isn't intimidating or boring so the first thing that we do when we when we do the pacing for text content is we just we break it down to smaller digestible chunks like I said it showed earlier the BBC News website puts every single sentence on its own paragraph to make it a little bit easier to read but being game developers we can play with animation timing and interactivity as well so this is really a matter of balance showing small small sections of text in isolation it can help the player focus on those specific words slowing them down it forces them to pause and think whereas when showing a single larger section of text assuming the player is already focused on those words it allows them to consume the content much more

quickly hang on what smaller sections slow you down and larger sections speed you up so to be clear I'm talking about these sections in isolation when you have a pause or you have to press a button in order to go to the next section so necessarily inserting those gaps will slow the player down and if it becomes too slow it can become boring or frustrating if the player can't read fast enough it can definitely be surprising while working on sorcery we tried making a text-based action scene by having little snippets like you leap forward or you make a dash for the door separated by choices and sometimes that works but we were surprised at how having a rapid succession of choices we thought it would speed the game up actually of course it slows it down because it slows down the reveal of the content itself so what can I say pacing is really really hard to get right the only way you can

solve this kind of thing is by testing and iterating since pacing is inherently time-based it's like an animating a character you wouldn't expect a character artist to produce a character animation purely in theory by by inserting all the keyframes and just assuming that it's going to work they have to keep playing it back keep trying it going back and making small modifications and trying again and that's what we do that's what we do is part of our core writing process and as we develop the writing and the UX hand-in-hand so I'd strongly suggest that you get your writers up and running with the game and in the habit of playing as they write it's and it's also very platform dependent in that depending on whether you're looking on a mobile screen or on a console or on a PC you're going to get a totally different flow so in a moment I'll show some examples and how the animation factors into this balance but first we talked so

far about splitting up the content into small sections but that's really only the short-term pacing in the long term the main thing you have to contend with is fatigue imagine a book with note with paragraphs but no chapter breaks or a kindle e-book with no page numbers or progress bar or a children's book with no illustrations so this is really dependent on the design of your individual game so far we've really been discussing focus and pacing across the span of just a few seconds so it's been applicable whether your game is purely text-based or whether it's a game that has happens to have some text-based sections if your core mechanic relies on reading text then it can really help to introduce some ancillary mechanics where the text-based or not just to break up the flow and give the players a sense of contrast and given a sense that every time they change activity it feels new and fresh and it's going to be satisfying each time they enter a new

tactic text section it can also help if you give the player control over when you switch this type of activity or use it as a reward in 80 days we used to have an identical flow to sorcery in that when you arrived in a location the story flow would just pop up immediately but as soon as we put it on the explore button suddenly that felt like a reward and there is this much stronger motivation to just start reading because they they click the button and they wanted to see what the result was so putting the player in charge of the decision to read gives them a sense of ownership over the content for longer sections especially it can really help to give the player a sense of their overall progress and if for 80 days in sorcery this wasn't really necessary because we like to just show small sections but if you if you've got a longer text game that might really help

on the flip side you have to be careful though sometimes when the players get past a halfway point being given the sense that they're nearly done can cause them to rush and pay less attention to the text this is definitely something that happened in 80 days and it was exacerbated by the fact that they were meant to be hurrying as part of the main game mechanic even though we paused the clock every time you read a story section there was still this really strong instinct just as you're getting closer to London to just just push push a little bit faster and skim read the text so finally let's talk about animation do the settings can draw the player in games the gamers are used to having their attention drawn in by eye-catching visuals so some pretty text animations can give them the feelgood factor before they get drawn in by the story and make them feel like they're getting something high-production that feels like high production is worth their time even though the true value is really in the content to a point of

course but animation isn't all about aesthetics it can also be functional - and this is where things get really interesting so this is the story flow flow from sorcery when the player reads a choice their eye is down at the bottom of the screen and when they pick a choice the piece of paper that the choice text is written on slides up and joins the bottom edge of the story flow above and the body text is revealed so what this does is it actually leads the eye up from the bottom where the choice was right up to where they're just about to start reading again then the animation is doing this for them so they don't have to lose their place they know exactly where they're going to start reading from similarly this is the text flow in 80 days where we want to step further often the choices you make here at the start or an end of a sentence and that's the case and when that's the case the choice text itself can be reused and sometimes rearranged slightly as body

text so we animate it into place and then animate the rest of the content in word by word so how are we manipulating the pacing our word by word animation is really quite quick the idea is that fast readers shouldn't be ever slowed down I'm a slow reader my co-founder John is a very fast reader my wife is a fast reader and so you know we just got to keep testing it with it with all different reading speeds just to make sure that it's it's it's it's great for everyone you definitely don't want to have to hold down a button to speed up the text however we do deliberately delay the appearance of the choices while less than a second so that the point the player is unconsciously deciding what to do next they immediately start reading the highlighted text and are discouraged from jumping straight down to look at the choices also the fade in speed of the choices is slow enough that they don't accidentally distract the player from reading the body text which is what

they're meant to be concentrating on so every animation detail on a really fine grained level has the ability to either break or wear it make or break the flow of your story when you're testing the most important thing is to really just Piper conscious of those tiny little moments where your eyes getting lost or where the weather you just have a little moment of apathy just for a list for a split second while you're waiting say for an animation to complete our best aha moments have come when we've jumped into again into the game to test a feature and then realize that we've forgotten what we were testing and ended up just subconsciously just reading and playing the game and getting involved the story that's when you know that the UX is working and so I'd like to show you one final example of one of the changes that we've made recently well a few months ago now to our latest game heavens vault in many ways this is just another tiny subtle thing but then I think the tiny subtle things is pretty

much what describes UX UX in a nutshell our interactive script engine produces character dialogue on a line by line basis which is then presented to the game initially we just showed one line at a time giving the player just enough to read it time to read it before moving on to the next one let me just show you a quick recording from the game's editor what what that looks like when it ran in the game so it's okay the pacing is just a little bit sluggish here the problem is everyone reads it to different speeds so he can't really display the text much less time then than that so the small fix we made was to allow multiple lines of dialogue to overlap and cascade so new dialogue bubbles can appear while old ones are still on screen again it's

quite subtle but take a look at another recording with this mode switched on so this meant that the whole game actually sped up and it just felt so much real with more refreshing to play it also the previous Texas on the screen can help with a bit of context as well so that's that's a nice bonus and this tiny subtle tweak worked miracles for the pacing of the game overall and is these tiny little changes that can make or break the experience so what can I say it's really really hard but you just got to keep testing iterating keep trying little subtle tweaks pay attention to those tiny fractions of a second way waiting around for a little delay or or an animation or those tiny moments of apathy when you look at a block of text that's just a little bit too long and when you end up reading

absent-mindedly that's a pretty good sign and there's one final side note one thing that we find is invaluable and producing beautiful dynamic UI is having just the right set of tools while working natively on iOS we had access to apples core animation framework which is fantastic and basically is a big part of the reason why I OS itself has always had pretty UI animations it's certainly what allowed us to build the text below in 80 days so we've created a similar system when we moved over to unity and now we've open sourced it and it's available right there so I hope some of you might find that helpful as well thank you very much [Applause] and we might have one minute left for questions possibly hello also can you talk a little bit about the typesetting and the pacing test iterations when

doing localization so the truthful answer to that is that we I'm afraid we've never been able to localize our games for almost unrelated reasons that our texture engine varies the text on a word by word basis so localization has been all this impossible so far hello I started with a graphic design degree then animation degree now I'm in serious simulations for the military well I'm sure you know more than I do then well I'm always flirting around UX design I'm always wanting to get into it but then I kind of am I am NOT and I don't know how to get started is there a UX design for dummies who what do they have out there where do I get started for me it was a completely self-taught I was I've always been interested in graphic design and I've done the the graphic design on our games but to be honest I've only actually been doing it professionally for the time since we started our company so I've completely learned on the job Wow okay I get that a

lot but it seems the best way to learn cool thank you hello do you have any ideas for in game like player 2 player chat or no I'd have to give that a lot of thought I think I'm I haven't had a thought about it I'm afraid ok thanks very much you