Recently, I decided to give Order & Chaos on iOS a try. I took a picture of virtually every tutorial screen and did an analysis of each.

I’d like to apologize in advance for the images not being the same size – I did the resizing manually for each image so it would look decent on my blog.

photo 1

The O&C tutorial begins with an explanation of creature cards. Note that it does not explain that a creature is destroyed when its health becomes zero – instead, this is implied. Also notice the pattern of only 2-3 lines of text and less than 20 words per dialogue.

In the tutorial, the resources start at a high number and the player is prompted to play a card BEFORE costs are explained.

The tutorial is very specific in regards to what the player can do. Requiring the player to do specific actions means the tutorial experience is the same for each player.

The cost of playing a card is introduced AFTER a card is played. In this same dialogue is an introduction to how resources can be increased, and the following steps in the tutorial are about doing that.

The blatant gap in my hand kind of bothers me, since most CCGs move the cards to fill gaps after a card is played.

After resources have been increased, we return to creatures and discuss a common CCG pattern known as summoning sickness.

I wish there was a better transition than just prompting the user to move into combat, but the tutorial has a lot of dialogue and transitions were probably cut as a result. Later on, we will see an identical screen to this, except ‘Enter Combat’ is replaced with ‘End Turn’. When making a game, DO NOT give different descriptions for the same button, as this can be misleading.

A purely flavor dialogue to give the impression that the player is actually fighting someone in the tutorial. IMO, this should have been the very first dialogue box in the tutorial to set the scene. Having it appear after the player hits the ‘Enter Combat’ button and is presumably already in combat with something doesn’t make much sense.

Right before this dialogue box, the AI enemy played a creature to the field (now seen in the opposite row). While the previous dialogue didn’t make much sense, this screen is well timed since it only makes sense to talk about combat before a live demonstration.

This is the part in the tutorial where I got lost, because I had already hit that button earlier. Notice that the enemy Hero has 2 health and that we have an unblocked attacker. As soon as I pressed the Enter Combat button, damage was exchanged and we won the game.

At the main menu screen, I was prompted to play a practice game vs AI. This dialogue is shown at the beginning of the practice game.

This screen should have been somewhere else, since we add cards to the deck later on in the tutorial. The inclusion of it here doesn’t feel right to me.

Why my AI opponent starts with 6 mana while I start with 2 is a bit beyond me. I do appreciate the highlighting, however. This practice game was very easy to win and had no dialogue screens in it. After winning, I got some ‘treasure’ as a reward and was taken to the main menu, where the only clickable option was the ‘Shop’

This is the shop screen, where I’m allowed to spend my ‘treasure’

I like the fact that this card is free because it allows me to purchase a card from the shop and learn how it works without forcing me to use my tutorial game winnings.

After this screen, I was taken back to the main menu and the only clickable option was ‘Deck Edit’

The new card I received is the one above my deck. My deck sits in the blue area below. This separation is nice and intuitive. Notice that a card was either removed from my deck beforehand or I was playing with a 29-card deck in the practice game (this is completely unknown).

After adding the card, my collection is now ‘empty’ and I’m prompted to save. Note that this is ONLY for the tutorial screen. The next time I came back to the deck editor, the cards in my deck were also a part of my collection, which means I don’t need 2 copies of a card to use it in two different decks. After this screen, I was prompted to play another practice game against AI.

At the beginning of this game, the AI started by playing a creature and then discarding a card to gain a resource. The dialogue box above is shown as soon as my turn starts. But what are heroic abilities? IMO, the tutorial should have presented them BEFORE talking about equipment. Heroic abilities are demonstrated later on in this game, but the order can be confusing for players who (at this point) have no idea what they are.

This is the FIRST time in the tutorial where the user is told that tapping on a card in the hand brings up the full view. In the other practice games against AI, I did this without any tutorial screen help and was able to intuitively figure out that tapping = view card. If your card game does not have equipment or need to explain other types of cards, it’s probably fine to leave out some more intuitive aspects of games.

This screen is important, since equipment cards on other ccgs are played to the field and can be ‘equipped’, so telling the user that these cards don’t enter play but are instead played like ‘spell cards’ in other CCGs is vital. Players will come from a variety of backgrounds and some will have prior CCG experience.

This is shown after the player elects to play the equipment card.

This dialogue box feels a bit redundant, but it doesn’t detract from tutorial flow so it’s fine.

The reinforcement of a previous action is excellent because it drills a pattern of play-card, sacrifice for resources, play more cards, which is likely how the game is supposed to be played.

Further reinforcing how the game is meant to be played (see caption for above image).

I figured out from the previous practice game that Enter Combat = End Turn. This is actually bad tutorial design – two dialog boxes that refer to the same button should NOT have different descriptions.

This screen is shown after the AI plays a creature on its turn.

It’s good to let the player know that actions that pertain to one type of card (creatures) also pertain to other types of cards (Heroes), such as tapping the card to view it.

A solid description. Note that we never cover creature abilities in the tutorial, but it can be assumed that creatures with activated abilities work just like the Hero’s unleash ability. However, not everyone is smart enough to transfer this sort of learning from Hero cards to creature cards, so it would be wise to also include activated creature abilities in the tutorial.

The amount of text on this Hero ability is insane. I had to read it multiple times because there’s just so much. I recommend having a simpler example for use in the tutorial.

This is a good demonstration of how to use an ability, because it requires the player to select a target in the same way a zone on the field is selected in order to play a creature.

This violates the “show, not tell” preference. After using our hero ability, we were able to see the effects of it, so the dialogue box should instead say something like “Now that the path is clear, enter combat and destroy the enemy Hero!”

With nothing stopping my 2-attack creature in the leftmost lane, the enemy Hero (whose health is 2) died that turn. I was shown a victory screen and taken back to the main menu, where my only option was to click a campaign button.

Despite the weird transitions and multiple practice games that led up to this point, this is an excellent place to end the tutorial.