Add tutorial/guideline illustrations to first-time start up

[PatriciaMoller]

@Pnella have started to sketch on some instructive illustrations to act as behavior guidelines while playing the game. (Don't be loud, look around, be mindful of your surroundings, etc)

Some of these could be put during the game start up, possibly before the current start box. And for upcoming play sessions, perhaps as a loading screens, akin to earlier versions of Pokémon Go. Others could be put on the home page under the "What is Smartzoos?" header as a "How to play". (Emphasize group play, exploration, etc)

Adding images with a unified art style will help adding personalty to the site and game.

(Sketches will be added soon)

[pjotrsavitski]

Ok. We could even use some animated GIF images to simplify some of the cases.

[Pnella]

Hi,

As Patricia stated above, I've made some instructive illustrations. They're not quite finished, so I'm attatching the sketches at the moment. I'll be adding the finished illustrations here as I finish them (and removing the old ones) EDIT: Finished the illustrations earlier than expected, attatching them here

[pjotrsavitski]

Those looks interesting, although I would need clarifications in what place should each of those be used and how.

[PatriciaMoller]

We have two different examples for the start up tutorial:

1. Have them all listed and scroll to find the "Got it!" button at the bottom:

2. Press a "Next" button to show the next image. At the last image, "Next" changes to "Got it!"

[pjotrsavitski]

A few more questions, if I might.

Would that replace the current Activity information screen being shown at the beginning of the game? The activity screen could be opened by using the icon from the menu.

Should that be shown before/during the loading happens (not really a loading, but mostly getting current position) or after it has already been successful (pretty much the way current modal dialog works)?

We could also try and use the .svg files as much as possible, although that is not very important.

[kaimikael]

Definitely not wait, put it up there so they players have something to look at while waiting for the game to start (or more precisely, they shouldn't perceive the wait).

[pjotrsavitski]

That has one more consequence to be dealt with. If getting the location fails, then the player will only see that once the nice dialog will be closed. Although, that might not be much of an issue.

And I would also need all the texts, so that these could be added into the translation system.

[kaimikael]

I think it should be OK to get a notice about location tracking failure only once you're past the intro screen, but surely it must be possible to interrupt that should it turn out to be necessary?

[pjotrsavitski]

It is possible. The notice could also be shown within the dialog, if that is determined to be useful.

And the last one (I hope), how to define the first-time start up? Is that the first time current device ever plays any game? Or first time current device plays this concrete game? Or just show that every time (this way user always has something to look at before the geolocation is fetched)?

As for the approaches, the first one is just easier and faster to implement.

[kaimikael]

We need something to show while location services are starting, so let's try this for the moment. In truth, I don't know how much replay we can expect anyway.

[PatriciaMoller]

I agree that they should show up during the loading screen.

With "first-time start up" I meant the first time any game is played on the device. Perhaps it could be the first time during that session?

Would it be possible have a location check early? Eg. The first "tip" would be "Make sure your GPS is turned on". Pressing "next" makes the game check if it gets any location data. If it does, the rest of the tips are showed as pictured. If not, the game tells you it needs location data and gives advice on how to turn it on.

[pjotrsavitski]

Any of these are possible. We already require a rather fresh browsers anyway, this should give use confidence of Session Storage being there (if not, then we could fall back to setting up some cookie that would be terminated along with the session).

As for the location check. It starts as soon as one enters the page, it is the first thing the JS code is trying to run. We could change the logic of the initial screens to pretty much anything, yet getting response from the location services would still be there. I do not have any good ideas how to make that better, without introducing a possibility of that new logic backfiring at us.

We could initially roll this one out as "always shown", we still have the testing period. And start gradually changing it and introducing new features and functionalities. Once per session is easy enough.

We could also do a small trick. We could either show this one or the "game information" dialog. This way the user will be occupied either way and the location fetch would mostly go unnoticed. it should not take more that a few seconds.

Both dialogs could also be changed to have an understanding of location fetch failure and show some instructions on what to do (provided the reason is positioning services being disabled and not some GPS error or something of the kind).

[PatriciaMoller]

I take back having a prompt where the player checks if the GPS is working. That's rather redundant. It would probably better to just make the "No location found" screen more instructive on what to do if that happens. My concerns was if it would feel anti-climactic if players went through a build-up (looking through instructions) only to be met with a error message, and if it would be possible to resolve the problem before it could feel like a block.

Been thinking back and fourth. Perhaps after the first startup, the game info could show during loading. Pros would be the player has read the contents of it and as soon as the loading is done they can press "Go" and start. However it's not very fancy to look at if loading is slow and doesn't leave space for much else. Maybe the "Go" button could be changed to a loading icon? (This feels like it should be it's own issue/discussion though. This is treading more into how the whole start up sequence should be structured)

[pjotrsavitski]

Well, all of these are quite interconnected. Change one and you also have to change the others.

We could roll out the simplest solution at first and then change that as it seems fit. Or we could decide how it should be and roll out the one that should cover all bases. I would need that to be concrete and would not want too many loose ends.

[PatriciaMoller]

Would putting the illustrations as shown here during the loading screen be a good starting point? Nothing of what is in the game already really changes, it is put on top of everything else?

[pjotrsavitski]

Yes. Starting simple would be the fastest way to get it released. If that seems like a good starting point to you.

I would also need all the texts you want to add to the images. You can just add those here within the issue body.

[PatriciaMoller]

1. Look around Look closely at your surroundings for clue. You never know where you'll find answers!

2. Look out! Be mindful of where you're going so you don't hurt yourself or others

3. Don't be to loud Victory is nice, but don't scare the animals

4. Help each other Help your friends and have fun together!

Images available here

[pjotrsavitski]

Thanks. I will see if I can make that happen tomorrow or on Monday.

[pjotrsavitski]

The dialog is done, yet it will also require additional changes to make it fit in well.

Current solution is showing that all the time and the game information one is not being shown. There are other issues that need to be addressed.

It should make playing the game or viewing the results a lot more streamlined (a lot faster in case of results, because map will not be loaded and location data is not really required).