Good evening lads,

I've been developing mobile game for some time and i have issue with tutorial level. Game uses Tap'n'drag'n'dontreleasethefinger functionality, kind of same as analog stick, and i have no idea how to present it properly.

I managed to explain where to place the finger, and what to do, but "testers" are just trying to drag it through the whole screen.

Its important to note that none of those people ever used analog sticks in their live.

Maybe someone saw mobile games that use such features and have a descent tutorial level?

Or maybe someone has any ideas?

The only game i recall is Heavy Gunner 3D... and it has no tutorial...

How do you present the touch area? Perhaps some sort of bounding circle might convey that the control only operates within that limit? Otherwise, perhaps the tutorial might place a little graphic of a joystick/thumbstick in the control area to illustrate that the drag operates like one.

You could "model" the actions with an NPC, and represent on-screen what your fingers would be doing. The NPC says something to get the player's attention, and maybe get their hands off the screen, like "Watch me!", and then runs left, runs right, jumps, etc., finally getting to a place where the player can't get to without understanding the controls. Meanwhile, finger actions that would accomplish this are shown in the appropriate places. (You could do it abstractly, or with "fingers".)

Then the NPC says something like "Catch up with me!", the camera moves to the player sprite. If the player doesn't do anything for a few seconds, then flash the "circle" or whatever into existence, to get them thinking about it.

Ultimately, if no one gets it, change the input (its easier than changing people).

Games I've seen use this mechanic don't actually show a stick. They have a circle, as Thaumaturge mentioned, and tell you to drag inside it to control movement (or whatever). Seems like people figue it out from there.

Here is a sketch pretty much how it looks now

That White circle slowly blinks and finger sort of shows touching and the dragging to right corner and afterwards to top left corner.

When it was just "tap and drag" text blinking. Test subjects kept taping center of the screen and asking why it wont move.

When i added some text and indicator where to tap (bottom corners). Two of text subjects eventually understood what to do. Others said "i dont like reading i want to understand right away".

After that, i made current sketch and programmed it. I also made it so, some enemies spawn behind you, and indicate it with red arrows, so player knows that you have to move back in some cases and you can move in limited area.

I tested it with two test subjects. One of them kept saying "I don't understand what to do" and kept swiping the screen. Second test subject, who was given to test it out for the first time, observed bottom corner and understood what to do perfectly, without any guidance, also killed all the spawned enemies that where indicated with arrows.

In the end it can be assumed that 3 out of 7 non gamers will figure it out.

But others are sort of stubborn and have this "i don't WANT to understand it". And thus i am kind of stuck.

definitely needs work. i don't use touchscreens, but i understand the concept of click and drag, and i still don't quite understand how it works. you have a touchpad action area in the bottom left corner that is a virtual joystick emulator?

definitely needs work. i don't use touchscreens, but i understand the concept of click and drag, and i still don't quite understand how it works. you have a touchpad action area in the bottom left corner that is a virtual joystick emulator?

Yes and no.

I didn't want to limit player to just to one side. You can touch anywhere on screen and it becomes a "virtual joystick".

But yes, i highlighted that area and put a dragging finger there, because people kept tapping and dragging "character" and blocking field of view with their hands. So now, everyone puts their finger there.

Edit:

I made a recorded animation by itself, how it looks like.

quite the interface design challenge: implement a touchscreen joystick emulator on a mobile screen so small the player's fingers block the view....

your "floating" emulation area is one approach...

perhaps the only one. the screen is so small, its not really suitable for such interaction. 1/8th or more of some part of the screen is obscured by even the small action area you are using.

perhaps a different input method is called for.

This isn't my area, just some armchair UI design thoughts - feel free to rip them apart!

When it was just "tap and drag" text blinking. Test subjects kept taping center of the screen and asking why it wont move.

When i added some text and indicator where to tap (bottom corners). Two of text subjects eventually understood what to do. Others said "i dont like reading i want to understand right away".

After that, i made current sketch and programmed it. I also made it so, some enemies spawn behind you, and indicate it with red arrows, so player knows that you have to move back in some cases and you can move in limited area.

I tested it with two test subjects. One of them kept saying "I don't understand what to do" and kept swiping the screen. Second test subject, who was given to test it out for the first time, observed bottom corner and understood what to do perfectly, without any guidance, also killed all the spawned enemies that where indicated with arrows.

What about anticipating common user behaviour and building animations to help train them? For example, if they tap or swipe at the centre of the screen, show them a dedicated animation to try get them to tap the corner, e.g. flashing arrows of some kind.

I didn't want to limit player to just to one side. You can touch anywhere on screen and it becomes a "virtual joystick".

But yes, i highlighted that area and put a dragging finger there, because people kept tapping and dragging "character" and blocking field of view with their hands.

I think it might be a poor idea to allow the user to control the character with the centre of the screen, given that this will result in them being unable to tell what is happening due to their hand obscuring the screen. I'd strongly consider limiting the touchable area to the outskirts, otherwise you're just reinforcing their preconceived ideas by giving positive feedback in the centre.

So now, everyone puts their finger there.

Where? Do you mean your new animation is testing much better?