Dots That Go for Walks: How to Maximize Minimal UI

[Music] hello hi everyone well welcome to room 2016 which is where my talk actually is not room 2024 which is where I thought my talk was and could have caused things to end very very badly had a nice tall gentleman not sent me straight um so I'm glad you're here I'm glad I'm here let's uh do this thing but ceremonial housekeeping before we begin um please turn your phones to silent or face embarrassment when they play atune that you're not expecting um and I think we're good as everybody got seats it looks like we're maybe perfectly balanced in terms of uh habitation it's pretty cool okay so welcome to dots that go for walks um my name is Margaret Robertson uh I'm a game director at a company called

dots um see if you can keep up with me here but um we've made three games uh dot two dots and then the groundbreaking dots and Co um and so I'm currently looking after two dots and and last year J is our biggest game and I'm looking after that at the moment last year I launched doson Co which is our new newest game and that is what I do all day every day is I look at those screens and I think about how to make them different or better um dots are dots are a big part of my life and my brain and that's why I love this um quote so much which is where the title of the talk comes from a line is a DOT that went for a walk um Paul clay who you may know

um makes beautiful paintings like this um I love the I love the quote because it encapsulates a thing that I've found in the last couple of years of working on these games which is that even if you start with this incredibly simplistic object hardly get more Primal in terms of a shape than a circle um the minute you start pushing at the question of what it can do and where it can take you it can grow into far more uh exciting and um interesting objects than you ever dreamed possible but I also love the this unbelievably exciting for me that that quote isn't just a cute line it's a line from Paul clay who I admire so enormously um I'm not enough of a an art historian to give you a kind of full breakdown of where his work fits into um various 20th century trends of of abstraction and minimalism but I am enough of a fan of art that fits those

um descriptores to know that a lot of what is precious to me about that art uh the way that it can accomplish so much with such a restrained toolkit such a limited um use of shape abandonment of Representative figurative uh elements this really meticulous and um Dynamic use of color those are things although it's not it's not a it's not a um a set of kind of resources that we necessarily look at very much in game the game sphere perhaps spent as much time in modern art galleries as we should but I know that whenever I kind of go and spend some time um in those environments I come back with a whole bunch of ideas of things that I would like to see uh kind of brought to life

in the games that I'm making cuz I think that's an important note to hit um before we kind of get into the guts of what does it take to do minimalist design well in a game context and particularly in a commercial game context um which is to make sure that you're really clear about what you're trying to accomplish and why it's worth accomplishing so I wouldn't want anyone to come away with a a kind of with the thought that I'm suggesting any kind of hierarchy here I I get excited about very very minimalist design approaches I think there's a lot of um admirable uh disciplines they require of you in terms of how you work and how you design but I'm also an enormous fan of stupid massive maximalist design I had a bit that I cut because we haven't got time about how good the UI

designning Ascension Chronicle of the godslayer is I don't know if we have any Ascension fans in but it's an absolute I was trying to think of the least minimal UI I could think of in games and that's a strong candidate and it's um it's absolutely masterful so if you can face the learning curve um i' quietly start downloading that now because it'll take most of the session so these are these are the things that I find so resonant in work by Paul clay or Richa or solit or whoever else we might be looking at as a kind of art inspiration for this kind of design and I you know these feel these feel like the kind of bones the things that I'm really trying to um feel out in whatever it is I'm making that I I want my games to have these Hallmarks to have this feeling that they've been made with restraint with self-discipline that whatever elements I put in front of you have this kind of total Clarity um and and crispness so that you you feel their edges really cleanly um I

fundamentally like working in an abstract rather than a a figurative or or narrative environment and all of that needs to be delivered with a very high degree of care or you just end up with something that feels inert and cheap and flat so spent a bunch of time looking at our own games looking at other games that I admire that I think do this well um and try to put together a little kind of shopping list of of uh advice that I found useful um so I thought I should start by trying to live up to this list right okay this is a all nice fine and dandy list but can I show you something that that really delivers those Hallmarks can I can I find a design approach where I just with with a few Strokes with just the the lightest of touch using all of this restraint and reaching for all of this Clarity I can add an element visually to the game that gives me this

impact um so I gave it a go I put something together just before this talk um so you'll have to tell me how I did uh this is what I came up with it's the word boat I'm not it's funny I'm not quite getting the Applause that I was hoping um you but you should be applauding look at this thing look at that thing it's a few beautiful lines it's some perfect curves verticals it looks great it's a really beautiful pattern if you didn't know what that was and I duplicated it on a beautiful piece of fabric and made a dress out of it you would think it was the best thing you'd ever seen it's a complete abstraction and yet entirely represents the entire um concept and visualization of boat it it is boat but it is not boat it is uh the map not the landscape it's

extraordinary the more I look at it the happier I get um because type does this really well type is a very very restrained mode of of of visual communication it has absolute Clarity it delivers that abstraction and it delivers that Precision a boat a boat is a boat is a boat um and because I know that my stupid boat slide wasn't going to impress you enough off it's all right I had something up my sleeve um have you been seeing this guy's work on Twitter this popped up last week and I fell in love with it so powerfully um he's a designer who makes these amazing illustrations out of the Arabic script for the word that they for the word for the thing so if you look in the bottom right of that panel there's the um Arabic script for whale and then he draws out of that these gorgeous illustrations there's a whole collection of them there's foxes and monkeys and castles and cranes and it's the best um and it just was a really useful reminder

to me of just how much a a visual design element type is um and it wasn't surprising that it was in my mind because it turns out that other designers of minimalist games also seem to think that type is a good place to start when you're trying to do this job well so this is the very initial onboarding tutorial screen from three different games in the middle is two dot which um I currently work on but I didn't design this screen uh on the left is spotnik eyes which is a super cute little um spatial um Puzzler that's hard to explain um but you should try um and on the right is noodles that's noodles cuz it has an exclamation mark um which is a pipe um a a pipe them up I don't know what the genre is for those um also so great super satisfying and we all

clearly kind of arrived at the same um conclusion here which is that we wanted to use type to make you know kind of to to set the tone of voice of the game and and Define our initial interactions with the player and that's interesting to me because there's two super good reasons not to rely heavily on typography in games one is that games aren't always the best at type I don't mean to be mean but I was trying to think about games where I felt strongly about the typography in them and made me think of desktop Dungeons and desktop dungeons is a absolute Masterpiece I've put hours and hours and hours and hours and hours into it but the um the typ in this game it's so bad it's

really really bad there's so just look at just keep looking at it and seeing more things you don't like about how oh the things that don't line up and things that aren't they have to have black outlines because they don't oh it's so it's just not it's and it's it's not not good because nobody cared it's it's because it's hard because you're asking that kind of content to do a whole bunch of different things at once uh and you've got a real chance of falling short somewhere along the way and here's the other reason that it's a scary weird uh thing to put your faith in it's like the second thing you learn in this job or whatever species of this job that you have right people don't read nobody reads and I obeyed that rule for a really long time um but I've now spent enough time in um in-house user tests watching people play um talking to them after they play look looking at screens like the ones

we've just looked at that I think I've I've invented a new variation of the rule maybe rule 2.5 which is this um writing is probably at the bottom of most players visual priority list if you give them anything juicier anything else juicier to look at they're going to look at that so the reason that these three screens have all ended up looking so similar is that if you're going to get get this to work it has to be pretty much the only game in t you have to make the text this big pleasing eye-catching attention grabber that's going to pull people's um eye in and their attention in and then hopefully they will tap the thing with the thing which is really all you're ever trying to tell anyone to do please please tap the thing with the thing um and that of all the things I just said is why it felt like a really good starting

point for things to talk about today because type is powerful I love how it looks I want to use it if I'm going to use it well it needs to own the screen if it's going to own the screen I need to make space and making space is probably your single biggest job if you're trying to do good minimalist user experience design in games you're you're taking these very hopefully beautiful simple refined elements you need to give them room to breathe you need to games can be such cluttered busy noisy places you need to find a way to just push all of that to one side find that space and that emptiness the calm and the clarity that your design is going to be able to sit inside so when I'm trying to get myself in the right frame of mind to to do that job um I look for inspiration

to someone whose work I'm just a huge admirer of um I don't think it'll surprise you um to know that I'm thinking of Arnold Schwarzenegger in Predator um there is a man who knows how to get things done um he's he's got some good advice for us stay with me on this one cuz it's going to it's going to work out so in you're in that situation where you simultaneously trying to defeat a kind of cyborg alien bounty hunter in the jungle and overhaul the UI of your minimalist puzzle game the first verb that you might need to think about is hiding crucial strategy that I learned from Predator um it's a a really easy tool to make space there's a bunch of stuff that is

on your screen it all needs to be on your screen because it's all important maybe it doesn't all need to be on your screen all the time because maybe it isn't important at different moments so this is um the beautiful mini Metro I kind of think right everyone in this room must be playing mini Metro otherwise you're in the wrong room who's who's a mini Metro person guys come on super good it's maybe extra super good if you lived in London for a long time but it's is super good um so this is a a very very simple real-time puzzle game where you're trying to build and service a continually growing network of subway stations uh so you have limited resources in terms of carriages and lines and and trains Bridges um but you have an Ever growing pile of passengers um and an Ever growing um number of stations and you need to keep trying to find the best fit solution and then the game does gorgeous things about drawing and rooting the the

train lines that you're putting in place as if it were as a real beautiful uh map um and to help you do that well you can speed up and slow down time as is often the case in games of this sort but they just quietly hide that UI in the top right so if you tap on the clock those controls drop down then they go away again um With A really lovely treatment on the clock uh where the the clock is doing the clock is great it's a button that's also a status readout of whether it's um day or night and it's also your time readout in terms of how fast time is passing and it also shows you whether or not time is paused and it does all of that in a lovely little circle that is also a cute joke about the famous Swiss Railway clock design that um rail design people people love to make jokes about it's super simple but

that this game would feel if it loops around again this game would feel so different if that whole right hand wall was just blocked off all the time with all of those icons it needs that space to give you that curve in the top corner so much um this game has a bunch of really nice tricks up its sleeve I haven't got time to talk about them all today but um the way it handles what happens to you when you lose which is a thing you'll find out fairly quickly when you try it for the first time this is really nicely handled so rnie tip number one hide it's a good way of making space um rnie tip number two merge by which I mean you'll remember that the absolute crucial maneuver in Predator was that he discovered if he gled himself all the way into the mud um then the Predator couldn't see him which was at the Forefront of my mind when we were trying to figure out how to do um hard currency purchase design for Dotson Co so Dotson Co came

out in the middle of last year it was the first uh hard currency game that uh this year had done and so we spent a bunch of time trying to figure out uh how to do it well oh I need to go quite fast now um and to begin with we were really flailing I think a a bunch of talented smart people worked really hard on these screens but I don't think they would mind me saying that they're they are um suboptimal in a lot of their uh designs the the thing on the far left is just so inert and sad and plain we tried to relen a bit with better illustrations in the middle but now that whole thing is just super busy the flashes don't work as flashes it's not clear what is isn't a button everything about it's bad so we threw it all out and started again which is what you have on the far right and things are getting better but there's still a bunch of dislocation between what is and isn't interactive and it's

just visually overwhelming there's too many colors everything is Trixie and the thing that was holding us back was we hadn't listened to wary um merging saved us so this is pretty much the same content uh but now all of the visual elements are just merged with the actual button element so each of those two pink panels is a giant button um and once we saved ourselves the the just the lines the physical lines of trying to delineate all of these different things of like here's an illustration and here's a button and here's a informational panel that's going to sit next to the button was killing us you squidge it all into one thing um and it doesn't always feel like a very minimalist Instinct because piling things on top of each other doesn't seem like a minimal idea but if they're the right things you can kind of clap space um and they all land neatly on top of each other and then you can give yourself far more space space to actually enjoy those illustrations um and then the clarity to really cut down on that color load which is much much

better um Touch Tone does this really nicely as well I don't know I bet fewer people have play played Touch Tone super nice it's it's a like a laser angler reflector game also don't know the genre for that one uh with a super weird Sly story that is going to feel horribly resonant now in a way that it didn't before about the surveillance date um but they do the super simple thing that they uh that color illustration that thing that's giving you a sense of being in the city is the button so that's the play button um and each time you go to a new place that's that's the vision that you have of the new thing and it's it's smart it's so simple it would have taken me forever to see it I would have ruined that screen trying to figure out how to embed the play button around or on top of the bit of illustration that I was trying to add to kind of be evocative of how the thing was going to work um hide merge I I'm not doing a get to

the chopper or any impression because it's not my strong suit evacuation key part of a strategy take the things you don't need that aren't Mission critical get them out the way here's another um doson Co example this is like early like Midway on The Branding work that we done on doson Co we've been a little bit lost and we were so so pleased to get here to this really strong simple shape there's so much smart thinking in this we've got the the solid O's in dots and Co or a call back to the two dots uh logo so we had that nice brand cohesion that went through the shape of the whole thing reinforces the shape of the virtual currency object that we have which is a token the compass Motif in the top was then an element that we were going to be able to repeat in a whole bunch of um like narrative settings elsewhere in the game that we were kind of building out as Adventure Club idea around it the needle

in the middle of the compass is the shape of the special triangular dot that is invented in Dotson Co genius it's there's just so it's so much smart thinking has gone into that so we killed it because it was so busy being clever it wasn't any good um because it was just too much it was far far far too much so despite the fact that we had a bunch of good strategic thought behind it it just wasn't adding up to anything that that really captured the spirit of what we were trying to do so the what you're seeing on the right is basically the current login screen it the the the map behind it changes depending on where you are in the world so that's constantly um evolving but that's the that and the Facebook button if you're not Lo logged in is the only screen furniture that we have and we ended up going with this incredibly typographic uh approach for the logo because it was just the most bang for buck was the it was the biggest impact that we could have with the least

detail that got in the way of us doing anything else so we threw that stuff out sometimes there stuff we didn't we threw out that we didn't even realize that we threw out so this is also a a a doson CO screenshot um every now and again our games get cloned and so you get strange situations where somebody will put a game in the App Store with just like screenshots stolen from your app store but then in a weird effort to try and make it I don't know I don't know why but in a weird effort they sometimes like change the screenshots a bit to try and disguise the fact that they've stolen them so we found this the other day and initially all we could noticed was that basically what they done was it looked like they taken one of the characters from mujo um and stuck it on top of our Companion now mujo side note um is an IRS game made by these guys oink games um I think their digital work is really good I think their paper and tabletop work is spectacular um they make basically I

think the coolest looking tabletop and board games anywhere in the world right now um I love their stuff so much you should go and follow them on Twitter um so yeah it was weird it was like somebody just pulled out a bit of their or and stuck it on top of ours and that distracted us for a bit and it distracted us for so long that we didn't notice this that the other thing they'd done was they put eyes on the turtles and that was really interesting because we never thought about putting eyes on the turtles and now we realized that it was right because it's weird and terrible and they don't need eyes um and it's a kind of useful question as to whether or not when you're talking about gave me a different perspective on the concept of feature culling when we have to start asking whether or not things needed eyes or noses um this is another good example of that this is rains which again you should play if you haven't it's a super cute like uh light wait choice-based RPG you're the king of a country and advisor

has come to you get over and over and over with a simple question and you you make a binary choice left or right um and then your country prospers or doesn't uh accordingly um this is the Archbishop of um cbury not Canterbury have to say that carefully um he doesn't have a nose or a mice for Archbishop and that made me wonder maybe he doesn't need eyes if tles don't need eyes why do archbishops need eyes um and I I think is a really interesting thing which is he does need eyes because he still he still reads as a human character right now he still probably even reads as an Archbishop but without the eyes you lose you lose that sense of connection and you lose that sense of his kind of snorky untrustworthy frame of mind um and so that you're evacuating all of the stuff out of your game that you think you

don't need that's definitely a way to to to be on you know the the the need is to watch out for have you gone too far the turtles don't need eyes because the eyes aren't helping but they do need to be turtles because them being Turtles tells you a huge amount about what to expect out of them as game objects they move on their own they go into their shells when you hit them they come back out of their shells after you hit them a turtle is a hell of a way to communicate what would otherwise be the world's biggest tool tip to take you through all of that so they don't need eyes but they do need to be Turtles um he does need eyes but he doesn't need a nose any questions Arch Bishops no okay right also um if you're obeying your Ry rules look at the nice merge they've done in the top of the UI so the the four icons are kind of the four different Estates um the church the Army the uh coffers each time you make a choice they're impacted um and the degree and the degree to

which they're impacted is is shown by the uh size of the change and the nature of the change is shown by the color of the change so green means better and red means worse and then the icons represent the things themselves and it's just super great they could have garbag that up with a ton of like bars and text and a whole bunch of things but they found a really really simple way to do it Ary hide merge evacuate your Rec call kill I think last I think dson Co example just cuz I've know a lot about it this was the original um character select screen uh in doson Co you have a little companion who goes with you into the game and helps you out each level the original concept was that you would have a rookie and an expert companion available each level the rookie was free the expert cost hard currency but was more powerful uh and we put a ton of work into finding the right way to make this

Choice clean um and we stuck button upon button upon button and tried swiping Paradigm upon swiping Paradigm and we just we got into a situation where we could you know you were you were chasing your tail you would fix this problem and then cause a new problem and run and run R you would go and where we ended up with where we ended up was here um this should animate I think so it's the same mono button solution um so again rather than having to navigate button plus illustrative element plus informational element everything's mled together but the other thing you'll notice is we basically kill the feature this is a different take on the same feature so there's still an option to make a hard currency purchase to up your chances of beating a level but we lost the idea that there would be two separate characters that you were choosing between because that it was just too much of an information burden at a moment in the game where you want

things to be smooth and fast and and uh about anticipation okay so we killed the well we didn't kill the penguin but sort of sorry adita wearing a scarf uh okay I'm definitely over time so these are going to go crazy fast Ary would be Ary without some kind of secret weapon this is our secret weapon I can't recommend this strongly enough um everything we make is 100% color blind um playable um and it's an enormous amount of work and it's prodigiously worthwhile um so this is pretty complex um dots and Co screen we've got a bunch of stuff going on we've got dots that explode into squares we've got dots that autoc connect to other dots we've got dots that auto connect to other dots that are inside dots that only open when you match next them there's balloons that are going up to the top of the screen there's panels that change the color of dots that fall into them um it's all moderately overwhelming from a

design perspective if you're just playing but if you turn color blind on now all of that has to function uh successfully uh with the with the shape system that we have on top of that and every single mechanic that we put in the game even if it seems like we don't know how to do it we won't put in unless we can make color blind work um and we do that because it's nice you wouldn't believe how many letters we get from people you wouldn't believe how many people don't think they're color blind but still find it incredibly useful to have that kind of facility within a game super super worthwhile it's an incredibly good discipline for us as designers um it it it it just forces you to be incredibly restrained and precise um in how you work and um because you figured out all of your color blind design at a formal level it gives you the freedom to do whatever the hell you want with color anywhere else and that may is the thing that is the most vital tool in our

toolbox for doing good minimal design which is that we invest a wildly High proportion of our energy into color so we redo the pallet of the game uh every this is two dots so far doson Co also does this um it's a it's a huge amount of work to to settle on those pallets and then make sure everything works against everything else it's unbelievably worthwhile because it is a way of giving the game a sense of richness and luxury without adding detail or Texture or complex illustration um and so that kind of double whammy of using Color blinders an opportunity to make sure that our designs are really really really restrained and then being to be things with color was fantastic um I got one thing that's cooler than rainbow ink invisible ink um this this is these are the design elements that we

use to make our minimal design work that don't show up on screen um this is the biggest one um music and sound if you're trying to do minimal design and you're not including these as a Cornerstone of how your design is going to work you're making life way harder for yourself than it needs to be um we're unbelievably reliant on how smart our sound team are uh for supporting the the the work that we try and do in terms of the aesthetic that we're trying to hit um and then that also goes for things like vibration did that buzz um yeah the one of the best bits of visual design we have in the game is that when you make a square it buzzes and because it buzzes we don't have to do anything else we actually do do some other things but we have to do so much less because we have that vibration in there so when you're like hitting a ceiling visually you're like there's more I need to communicate but my screen's getting to too busy this thing starting to feel noisy and not minimal

enough remember that you have other tools at your disposal that aren't visual CU I think that's the that's the thing that I've been most conscious of coming to work at this company um we're 50 people now um and if everyone doesn't buy into to the virtue of a minimal aesthetic you're going to have a really hard time holding on to it especially in a commercial setting it's minimalist is is frang you can ruin it real quick just by sticking an extra button in there or a new texture or a dumb keynote animation transition that I should not use but I can't resist you need everybody to be invested in keeping things clear and keeping things clean in figuring out how their discipline whether they're game designers or product managers or um musicians or whatever else they do um can like hold the line and let the work stay uh clean and beautiful as you want it to be w

[Applause]