Transcript
>> 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 ]