Design Tips for Great Games

From first launch to your tutorial through your user interface, there's a lot that people experience in addition to your game's gameplay. So, in the next few minutes, I'm going to cover 10 design tips to create great experiences as soon as someone taps your app icon.

And many of these tips can be applied to apps that are looking to be just as immersive, engaging, and fun. So, let's start. First up is first Launch.

This is the first experience people have with your game and your first impression matters. So, no matter what you need to say first, whether it is Accept Terms, or Headsets Recommended, design the first screen to fit within the style of your game.

That way, they're immersed immediately. This edge to edge illustration from Pokemon Go does a great job, and it communicates just as much as the text on screen.

So, take the time to design what people see first as soon as they launch your game. When this is done well, it'll make a lasting impression and set the tone for the rest of your game.

Next, is Loading because sometimes it takes just a few seconds to pull data through space. So, why not take advantage of what we all know to be true, time flies when you're having fun. So, during Loading, make it fun by educating or entertaining; then, Loading won't see to take as long.

This is Don't Starve Pocket Edition, and in this game Loading is masked by this beautifully creepy animation, players are entertained, and time seems to fly by.

Loading is also a great time to educate. In Clash Royale, as you prepare for battle, a gameplay tip is shown on screen. Now, if you choose to do this, make sure that players have enough time to read the tip and also be intelligent about what you show people. If someone's already seen a tip, don't repeat it in the same session. And finally, to show Loading progress, always favor progress bars over activity indicators because they do a much better job communicating what's happening and how long it will take. So, no matter when your game needs to load, entertain, educate, and show progress.

All right, next is Quick Start. Being able to start quickly and jump into your game is key to a great game experience.

This is INKS, and it's an Apple Design Award winner from last year. It's really fun that you're able to get a feeling for the game right from launch, but also they do a great job making it obvious on how to start the game with this large turquoise Play button. And as soon as you tap it, there are only two screens before you're in and playing the game, which is awesome. So, let people get into your game easily and quickly.

Don't ask players to make too many choices before they understand what it means in your game.

And for more complex games, I know there are important things that you want to show your players.

And game Main Menus have become increasingly busy with news, tournaments, stores, and more. And these can all be on your interface, but make sure that the main call to action to play, start, battle, or begin a new game is the most dominant in your Main Menu UI.

All right, tip 4 is all about our game's interface, and before we jump into this tip, you should know something about me, and that's, I have a soft spot for classic arcade games. So, this fake alien monster game is going to help us with a few user interface best practices, starting with consistency.

Consistency improves usability because it helps people mentally map your interface. It's much easier to play and navigate when controls are in predictable locations. So, be consistent in the layout of your game's menu. That way, people can spend their energy playing your game versus trying to recall where was that Settings button. So, let's look at this exact same flow with an inconsistent UI.

The Back button is all over the place, and Settings disappears on the Choose Character screen.

This inconsistency disrupts a player's experience because it takes more effort to mentally map the interface. So, when you're designing, to accommodate for consistency, lay out all of your screens and check them. That way, you'll be able to tell whether the controls are in the same place.

Okay. The next UI best practice is all about clarity.

It needs to be clear to players what's interactive and what's not. If people have to think too much about what to tap, they're going to be taken out of your game's experience.

So, items that are tappable need to look different from items that are not tappable. So, in the top center of this screen, my Lives is actually just status, but with this visual appearance, it could be confused for something that's interactive. This is common in a lot of games, and there is an easy fix.

Make non-interactive elements look different by using color and shape, like this or this. Or you can remove and put status items away from interactive elements.

In your interface, for clarity, it's important always to include three visual states for buttons and controls because a lack of visual feedback can confuse players.

Be sure to use a Normal state to show people that something's tappable. Use a Press state when something has been tapped. And finally, use a Disabled state for control that's not currently active or enabled.

Many developers struggle if they should remove or hide a control if it cannot be activated, but if you do that, when it does pop back it could be really confusing to players, especially if this happens during gameplay.

So, for a much better user experience, use a Disabled state. This lets people know the control's location and action that will be possible soon when that control is enabled.

And finally, make sure that everything that's interactive on your game's interface meets the minimum tap targets on iOS which is 44 by 44 points.

Your interface is a tool to make sense of your game's world, so make it consistent and clear. That way, people will be able to stay engaged in your game. All right, I hope you all enjoy that fake alien monster game. It'll come back in a bit to help us with a few other design tips. We're already halfway through at number 5. This tip and the next few are about game tutorials. Successful tutorials teach gradually and in context through progressive disclosure.

Your tutorial should be made up of three basic parts that align to the core loop of your game. For example, it might be that you have to fight monsters to get some gold, and then buy some stuff to fight more challenging monsters.

But be sure, in your tutorial, it stays to those three basic parts. If you have to keep, if you have to teach about economy in your game, keep it simple because remember you're teaching somebody something brand new. So, avoid overwhelming people and including information in your tutorial that is not essential to gameplay.

All of this, such as upgrades, tournaments, messages, and your store can all be discovered after your tutorial.

And also, in your tutorial it's really important to provide clear direction. If you have characters in your game, it's pretty common to have a character walk you through the tutorial.

So, let's say we have this adorable alien monster, keep directions short and simple to be effective.

So, whether you teach with a character or through in-game instructional text, a single clear direction is going to be the most effective.

And please, don't repeat directions. Respect your players and treat, and don't treat them like children. Even if your players are children, kids are smart. So, repeating directions unnecessarily lengthens your tutorial, and that makes it less effective and less fun.

And learning is really fun, especially when the teacher is engaging, creative, and inventive. So, be the cool teacher. Don't just do what you've seen others do. If your game is unique, your tutorial should be too.

For example, think about how you can teach before your game begins.

This is Splitter Critters, and in this game you split the world with a swipe of your finger and then rearrange it to guide critters back to their spaceship. And from the Start screen, you're taught this key game mechanic.

And one of the least effective ways to teach is with a bouncing arrow. It's not effective because people just end up playing tap the pointing arrow game and not learning. And the same goes for the floating hand.

Not only do you not learn, but this method is really problematic because it hides you from the interface that you're trying to be learning about.

So, there are much better attention-getting devices that are way more natural and immersive, such as animation.

This is Reigns, and I was really excited to hear that the developer is soon updating to remove the floating hand.

On the right, is the new experience and, as you can see, it's much more immersive; it's just as effective, and it does a great job getting you right into the world of Reigns.

And being in the world of your game is the best.

So, if you can let people jump right in and learn through play, that is going to be the most effective way to teach them your game. So, this is Mars: Mars on Apple TV.

And it is really fun to be able to jump right into the game.

So right now, I'm on Mars, and the controls are intuitive, so I'm going to start clicking around. And after one hilarious death, I quickly realize that the objective is to land safely on the stations.

So, for the best experience, teach people through play. All right, we're already at number 9, which is all about letting people skip and get right into your game.

Give the player control, and that way Skip can create a much better user experience.

Now, I love this opening sequence from Icycle: On Thin Ice. It's clever, has a striking style, and it provides you with the motivation of the main character, Dennis. But when you tap on the screen, a very subtle Skip button appears. And that is great because revealing Skip on tap is a wonderful technique. Players who are ready to jump right into your game can, and people who want to watch the entire sequence can stay immersed with edge to edge playback.

Now, letting players Skip also applies to tutorials.

This is Zombie Gunship, and check out the upper left-hand corner. It's awesome. There is a Skip Tutorial button, and it feels great to be able to jump right into the game.

Just be sure if you allow people to Skip your tutorial, they're able to relaunch or replay the tutorial in case they need a refresher on the rules. Now, I understand that this may not work for every game. So, if it's critical to your game's progression to include a tutorial level, teach the basics, gradually adding context through progressive disclosure, and then get out of the way.

Letting players Skip is about putting the player's experience first because you don't know someone's skill level or how much time they have to play your game.

And I'm sure we have all button smashed and clicked as quickly as possible to get through a tutorial just to get into the game. So, for a much better user experience, provide a Skip Tutorial button. So, respect the player and that way, they will be able to have a much better user experience.

The final design tip today is about being inclusive.

There's a lot that you can do to make your game more accessible, such as adding Closed Captions or supporting Dynamic Type.

You can also, just like in Mushroom 11, support Left and Right-Hand Mode, or you can support Color Blind Mode, like in KAMI 2. And one of the coolest Accessibility updates that I have seen is from Blackbox, which is a visual puzzler that now includes sonic interfaces to let players with low or no vision play through solving puzzles with sound.

With 285 million blind or low-vision people in the world, everybody should be able to play games and have fun. All right, with these 10 design tips, you'll be able to create great experiences from the moment someone taps your icon. But remember, of all things, respect your players, include everyone, and put their experience first. Thank you. [ Applause ]