★ TouchArcade needs your help. Click here to support us on Patreon.

Need help with game tutorial screens

01-17-2012, 05:33 AM
Joined: Dec 2009
Location: Flensburg, Germany
Posts: 72
Need help with game tutorial screens

Hi there,

it would be great if someone could check out my tutorial pictures. My English is nothing to be proud of, so it would be nice if a native English spreaker could check the phrases . I can offer a German translation or proof reading in exchange...

It is just 14 pictures with some short explanations like the screens below. The pictures pop up when the player starts the tutorial levels.

Link to the all the pictures is here: Tutorial Screens

Do you think the player will get a clue whats going on after checking the pictures?

Thanks for your time!
01-17-2012, 08:11 AM
Ah yes, the dreaded tutorial system. I'll give some advice I wish I had known before doing the tutorial for my own game:

I would say the problem isn't the grammar or phrasing so much as how the information is presented to the player.

If it's just a bunch of static screens that the players can scroll through at the start of the tutorial most players will just skip them all eager to get to an interactive part, and then wonder what to do.

So the key is to present each tutorial element in individual interactive stages (ideally with a visual demo). So you need to tell them one thing they need to know and (ideally after showing them) let them physically try it out before moving onto the next thing. (With extra help if they do it wrong).

Assuming you are aware of all this and you are thinking "yeah yeah but what about my English!" then here's some points about that:
  • The second sentence on the first screenshot doesn't make sense
  • I can't really tell whether you move the wizard or the sphere
  • It doesn't say how you make or break a block (I am guessing this is a fundamental part of the game mechanic)
  • Animated demos for each aspect would avoid any confusion and also mean player is more likely to pay attention to what it's saying
  • "Build a safe path by make and break blocks" should be "Build a safe path by making and breaking blocks"
  • Instead of "Screen borders can be used to move left and right. Press both borders to jump", maybe say "Move left and right by touching the sides of the screen. Tap both to jump."
  • The font isn't that east to read particularly against some background areas
  • If those screens are in order you need to have the one saying how to move first or second (not fourth)
  • Maybe show actual items (e.g. the hourglass) within the text instead of (or as well as) the actual word hourglass. Just in case the player doesn't know what one is.

Apps: Lead Wars (TA Thread) | Super Grav (TA Thread) | 3D Spinner (TA Thread)
DemonStudios Ltd | Indie Game Dev
Follow: Facebook | Twitter

01-17-2012, 07:31 PM
Joined: Jun 2011
Location: Melbourne, Australia
Posts: 286
Gotta agree with DemonJim here...

People don't like to read, they want to play :-) I've found very very simple interactive hints shown in game like animated arrows indicating a swipe or touch possibly with a few simple words work well.

Feed them the information as they need it. Don't introduce all game elements at once, feed those in too...

Good luck!

Check out our iPhone games Zombitsu and Superflick or find us at Ruma Studios.
01-17-2012, 08:42 PM
Joined: Sep 2011
Location: Brisbane, Australia
Posts: 491
Send a message via Yahoo to EvilDucktator Send a message via Skype™ to EvilDucktator
If you'd like to, I could help design them with proper English & looking really good.

I want to do little things for devs with a view to building up some contacts for my own projects I want to get off the ground. So I'd be happy to help you out in a direct method.
01-18-2012, 05:03 AM
Joined: Dec 2009
Location: Flensburg, Germany
Posts: 72
Thank you for your advice/correction!

I also agree with the interactive/animated tutorial. For a really complex UI it is a must have. In my case ( jump&run / platformer ) I hope some static screens will do the job. I will ask the beta testers about this issue.

I also try to use a good combination of static pictures -> game play mix like:
  • display tutorial 1 intro screen
  • let the player play tutorial 1
  • display tutorial 2 intro screen
  • let the player play tutorial 2
  • ...

I updated one picture with DemonJim suggestion. The black frames need some work but I like the idea of inserting the actual item instead of the 'name':
01-18-2012, 07:46 AM
Joined: Jun 2011
Location: Melbourne, Australia
Posts: 286
The icons in the text and surround help, but it still looks like a lot of info at once. Even games with simple UI and interactivity should have great tutorials.

It's basically the instruction manual. But think of it like this. You're buying a new gadget, there are 50,000 to choose from, some are free and some are a dollar or two.

You spend a minute or two trying out a few gadgets. But do you read the manual of every gadget you try out? Or do you just take the one that has a green button for go and a red button for stop?

The first five minutes is critical to user retention, if you present lots of text then you create a barrier and will loose some users :-(

Have you played Temple Run? The tutorial in that is really simple and gets the message across on how to jump, how to slide, how to turn and how to move left/right. I suggest you take a look, because from the sounds of things users can perform the same movements in your game.

Perhaps you can do what they did and present the very minimum required info for a user to get playing?

Also, a really great test to see if whichever tutorial you decide upon works. Show 3-5 friends, family or colleagues who have never played you game before (now thats the most important part, your testers know how to play already).

Hand them the game at the first level w/ tutorial active and see what happens. This is absolute gold and will tell you if the tutorial works or not :-)

Good luck!

Check out our iPhone games Zombitsu and Superflick or find us at Ruma Studios.
01-18-2012, 10:20 AM
Quite honestly players don't read (at least players I've talked to about our games). If your tutorial has more than 3-4 words per message and more than 3-4 messages total then the average app store player will say 'I'll just try it and see what it does'.

You can simplify your tutorial a lot. Take the potion lines for example, you could just say '[picture of potion] prevents making and breaking blocks'

Looking for a writer? PM me

Game Designer of:
Family Feud Live A Synchronous Multiplayer Gameshow in a Phone!
Family Feud 2 My First Huge Apple Feature!
And more!
01-25-2012, 04:05 AM
Joined: Dec 2009
Location: Flensburg, Germany
Posts: 72
Here is my next attempt

There is a simple 'help' screen ( like in arcade games ) that introduce the most important items with a brief description like this:

When starting the first level of the game there is a short introduction of the controls and important stuff:

If interested the player can find more information in the AppStore description or on the website...

Thanks again for your comments