Visualize next step in learning application?

Question

I have an application where a younger audience can improve their math skills. It is still in development phase and I have made some usability tests observing users getting their hands on the application for the first time. I have to tell them how to interact with the application at a certain step, before they get going in learning math. I need to improve the interaction design and explain to the users how to do - and I need to know which option that could do the trick.

From my point of view I have three main options:

1. Introduce a wizard which explains to the user how the application works. This wizard can later be found in the about screen (which is not built yet)
2. Let the user view a video, which lets the user see how the learning game is played
3. Use an explanatory callout after a certain amount of time. This callout can be turned off in the settings screen (which is not built yet)

How the application works

The user opens the application and sees an expression to solve. If the user clicks the textbox (image 1), the soft keyboard opens and the user can enter their answer. If the length of the answer is equal the correct answer (calculated in the background) - the answer is checked. If the answer is correct a green circle visualize below the expression, the textbox is disabled and a green border is visible on the expression (image 2). If the answer is wrong, the circle is red and the textbox is still enabled letting the user have another try at the expression. So far every user follows the flow.

The problem

When the textbox is disabled, the user is supposed to click the expression text (having a green border on image 2) to get a new expression and enable the textbox for answer again. Users tend to get stuck here, and I really need to in some way tell the user to click the label. Are my options above good enough, or is their another way to let the user know what to do?

Answer 1

Your immediate question of progressing to the next math problem is solved with a Next problem button, as Jørn has suggested.

As for a way to teach users how to interact with the program, teaching by doing is the best. You need to create a step-by-step walkthrough with tool-tips/call-outs that explains the workflow to the user in a controlled fashion (i.e. Touch here to begin -> user touches the screen -> Enter answer here -> user enters answer -> Touch here to correct -> user touches the screen -> etc.), like this:

For more examples, take a look at Mobile Design Patterns Library section on "invitations" (first time user experience): Tip and First Time Through.

Your video isn't as helpful for teaching purposes because it's just a silent recording of someone clicking through the application. However, it uncovers several other issues with usability in your application:

• Right & wrong answers aren't indicated well. A green border and green/red circles won't tell much to a colorblind person and they're too subtle to mean anything to anyone. Consider changing them to check marks and crosses in the list of past questions on the bottom and implementing toasts for immediate notifications.
• The order of items in the history of answers (the circles under the problem) is unnatural. You're adding a new one to the left of the existing ones although they're aligned to the left edge and the default language is English (left-to-right). Thus, change it so that the most recent answer is on the right.
• The current workflow of submitting answers is mildly confusing. The application doesn't allow users to submit an answer with more or fewer digits than the correct one and it doesn't tolerate typos (same number of digits but wrong result because of a finger slip). This can be solved with the introduction of a Submit button. (I've looked at some Windows Phone documentation but couldn't find whether it's possible to include such a button into the on-screen keyboard, like Android and iOS allow.)
• Tapping the answer box might not be the optimal way to correct a wrong one. You need to do some usability testing to see whether users will figure out how to correct wrong answers without training. If they don't, consider adding a Try again button that would refocus on the answer box (the label can be something different).
• There's no way to skip hard questions. I realize there must be a difficulty setting but some problems will be harder than others and a user will get stuck on them. To fix this, the Next problem button should be permanently visible and should let users advance regardless whether the answer being wrong or blank.
• You use _x_ for multiplication instead of the proper symbol _×_ (× or ×) and / instead of ÷ (÷ or ÷).

Answer 2

Why don't you add a "Next" button under the expression?

It's generally not a good idea to use GUI elements as something it's not. (Wow. That was not very well expressed...). What I'm trying to say is that a label is a GUI element to display information, not an input element or an action element.

Answer 3

I think you are on the right track. I would vote for using a wizard (method #1), and then when necessary use call-outs (method #3) that are simple like "slide to continue" or whatever.

If you do a wizard/tour intro make sure to keep it simple. You don't want it to feel tolling to the user. Remember you don't have to explain every feature, just the basics.