Iterating The Tutorial

The tutorial is one of the most important parts of a game. A properly trained player will have a much more engaging experience than a player that’s left trying to figure out what on Earth they’re supposed to be doing. And so, I’ve put a great deal of effort into the design of Hexagone’s tutorial.

In the original release, I gave a brief introduction popup which explained the goals and what the controls were. It was quick, simple, and it got the job done. Then, I let the player start playing. After a few moves, more concepts were introduced with another popup. In playtesting, players that used this tutorial almost always performed dramatically better starting out than those that did not. The tutorial shaved off about 15 minutes on average from the player’s learning curve. This is what it looked like:

 

Do you see what the problem is? A wall of text. Players that actually bothered to read the tutorial would easily jump into the game and know exactly what to do. But some players would just hit “okay”, and then stare blankly at the game, not knowing what to do. You’re not one of these people, because here you are, reading this wall of text. But they exist, and they hate words. Even three sentences, like in the above tutorial.

How do we make the tutorial better for these players? Pictures. And not just pictures… animated pictures!

 

The text has been simplified, and now an animation plays, showing blue expanding from left to right. At a glance, players can now visualize what’s supposed to happen.

This animation actually implies a few things. First, that the player is blue. Second, that they need to expand to adjacent tiles first. And third, that they need not control all the grey tiles – they can skip some to target red. This last one was actually pretty important in playtesting. In an animation where all the grey tiles were conquered, players would always try to take all the grey tiles, even if that wasn’t necesarrily the best tactic for the map. By leaving some in this animation, it implies at least subconsciously that skipping tiles is okay.

But there’s some room for improvement still. This is the current iteration of the tutorial:

 

The introduction fluff has been fully cut. The text is now just seven words, which is far more likely to actually be read. Additionally, the animation has been sped up, with better frame timing.

UX is fascinating to me, and you can always keep iterating and improving upon it. This latest iteration is good, but I look forward to seeing how you guys react and learn when you finally get your hands on it! Have any thoughts? Questions? Ideas on how this could be improved? Let me know!

My Battlestation

After I posted the Hexagone introduction, I got a few comments asking about the giant wall of monitors behind me. Also about what I was using to record the video. So I thought I’d give you a little peek into what I use to make games.

Anthony's BattlestationFirst, let me describe my setup. What you saw was three monitors, which are all hooked up to my primary work machine and gaming rig (I’m not playing games! It’s market research!). Behind the black curtain I used in the video is a CRT hooked up to my file server. (The file server could probably put most gaming rigs to shame, but that’s a story for another day.) All four displays, linked across two computers, are controlled by one mouse and keyboard with Synergy.

Why on Earth do I have all this stuff? The tab key on my keyboard was broken, so I had to get more monitors to show everything! But in all seriousness, the big reason is being able to have everything I’m using visible at once. You would be amazed at how much more efficient and productive you get with multiple monitors. If you have dual monitors, you know what I’m talking about – I just took it to its logical conclusion, and covered my entire peripheral vision. Being able to have your code window up while you have a web browser on another screen to reference is incredibly useful. Alt-tabbing would break up your workflow immensely. This way, I can have my code, reference material, and e-mail/Skype/Steam/Twitter/Facebook/AOL Chat all available at a glance. Or when I’m working on the iOS version of Hexagone, having a virtual machine up on one display while I work on the other two. In my experience, three monitors is ideal – any more and you rapidly get diminishing returns on productivity. I can’t work with just one monitor, the extra real estate is too important.

But that’s the key term: “real estate”. It’s not just about having multiple screens, it’s being able to display all the information you need. 1080p? Only if I was using a cell phone! The monitors on the sides are 1920×1200, and the middle one is 4k (3840×2160, or the equivalent of four 1080p screens). Since the “standard” resolution for most things these days is 1920×1080, having resolutions higher than that allows you to view content at the full resolution and still have space for your tools. More pixels also means you can just plain have more windows up.

4k is a big topic these days, and you might be considering getting a 4k display for your own workstation. The screen I have is the Seiki 39″ SE39UY04, which right now is the absolute cheapest 4k display you can get. This thing only does 30Hz at 4k resolution, and has awful latency. And you know what? I love it. I didn’t think a 4k display would dramatically improve my workspace, but it has made me so much more productive that the downsides are worth it. Do you have a monitor rotated vertically for your code? This thing, laid horizontally, still has more vertical space. You can see everything without scrolling, which again is a huge time saver, and keeps your workflow from being interrupted. If you’ve been debating getting one, I encourage you to finally do it.

So yeah, I’ve made a pretty significant investment over the years into building up a pretty kick-ass workstation. When you’re spending 12+ hours a day in front of screens, aren’t they worth a little love?

What I used to make the introduction video was significantly less high-quality, and the epitome of indie production.

Video Recording EquipmentPictured is my cell phone, mounted on a tripod. Behind that is a giant fluorescent light, with paper towels to help diffuse the light. It’s about as cheap as it gets, but it does get the job done. The microphone is a Blue Yeti with a $10 pop screen, which is a fantastic USB mic for close range recording. (I didn’t really use it all too well for this video, and you can hear the echos and volume peaks if you pay attention.) The total cost of the equipment (minus the cell phone) was about $160, with some good price hunting. If there’s one thing I wouldn’t recommend for shooting a video, it’s the fluorescent light. But it is cheap, and when you’re on a tight budget, cheap is good!

So there you have my battlestation! Any thoughts? Want to share your battlestation? Drop me a line @TheAnthonyBryan.