Design Guidelines for Multitouch Kids Apps

[This post is made for project presentation.]

With all the researches/evaluations we have done during these two months, we would like to present the following - Design Guidelines for Multitouch Kids Apps.

1. Navigational Restriction

Warn users before they are passed on through external links.

Kids tend to have an exploratory behavior. They will touch everywhere on the screen to try everything. They can't distinguish between the app content and advertisements. Sometimes advertisers make use of this behavior and this is not recommended in our opinion. We suggest that, firstly, software developers should not make use of children's innocent act to make profits. However, if it is indeed crucial or important to add such links as extra information, the user should be warned first. The screenshot above from "Spot Goes to School" shows a good example. It should be the same case for links to download page of additional apps (for example, full version of a free game).

Restricted navigation can also be considered in terms of depth and in terms of State Machine, it should be kept to a minimum. Preferably we think a depth of two is quite sufficient, one first or presentation level and a second gameplay–level. An example where restricted navigation has been considered in the design process are those navigational page menus to jump between pages of a children's book. Interactive books require more navigation depth and often several pages or states. If children are supposed to be able to handle an interactive book by themselves, they need menus to overlook and understand the navigational depth and how to swap between them easily. Every page should be displayed in a proper way and jumping between pages , example by touching pictures of pages, should be made easy. Also if a child is exiting/quitting the application or book, it should be supported and easy to go back to the page where they left, without having to go through half of the book or every page of it.

2. Feedback (Positive/Continuous)

It is important to always or whenever possible, use feedback, to encourage and entertain gameplay with learning.

Such feedback could be text, auditory, haptic, graphical/visual/animation or combinations of any and preferably positive. Positive feedback leads to stronger retention of memories, because it is based on positive experience and it invokes emotions, it makes it easier to recall from memory then. Such feedback should be real-time, meaning that it should be not giving out only and the end of a game stage, but after each (correct) action done by the user. Another reason is that kids have no anticipation, and they want feedback on the spot; So if nothing happens after each action taken, they soon get bord. Textual information or dialog windows are not recommended since most kids can't read and sound or auditory feedback should be tested to see if the sound is appropriate and that the cause is understood.





Another example of feedback that should be avoided is loading bars and screens. The programe should do something to entertain the kid and at the same time buffer in the background of the application.Example play music and show video while waiting. Kids don't understand the concept of buffering or loading, so they will most likely not understand what's going on lose their attention.

3. Support Multitouch (Error Prevention)

Due to physical limitation of kids and their interaction style, they tend to be too curious to follow instructions and they want to try things on their own. Most of the time they use several fingers (accidentally) at once instead of one, which is expected by the system and also holding and grasping the device differently than adult users. Therefore it's important to support multitouch but make clear with appropriate instructions, (see below, guideline 4) what action or movement that is expected to complete the task.This is related to error handling as well, it's not their fault that they will try to use several fingers at once and or move/touch several object at once. It should therefore be supported and not considered as wrong or failing. It's also about restricting the number of active controls to the minimum and highlight them (affordance) so that the users understand that something will happen if they are touched.

4. Proper Instructions

Hint users about what is expected by a certain task.

By using metaphors/graphical representations, or animations (for example a demo during which no interaction is allowed), children are well informed about how a task should be completed. In such cases, visual/audio instructions are preferred than text only, since most kids can't read.




A negative example:

(why learn numbers when they can already follow the number sequences?)

Another concern is that, with proper instructions given, kids can be independent from parents' aid and presence, to increase the pleasure of completing a task by oneself. This is important for self confidence and personal development of children, by making them feel more independent.

5. Simplicity

Developers should always try their best to restrict the number of controls available to the most necessary and important functions. Also, graphics should be kept simple, with the most important button made obvious and enlarged. By mentioning simplicity here we don't mean to reduce the use of color/attractive visual elements, what we suggest is that they should be arranged properly to highlight the most (probably the only) important function(s); but still, things should be made interesting. Also they should be used to distinguish between interactive parts from static content display.

6. Graphical Representation/Metaphor

Good graphical representations or metaphors of real world objects would help children to identify with the object better in real life, enhancing their learning process. Conversely, a badly-represented object within the app can only serve to confuse the child and hinders their learning. of the real world.

7. Design for All (Kids)

We are not talking about universal design here. However, designers should try their best to take the greatest common ratio of all kids' interest, regardless of their language, culture.

The key point is, to keep everything simple, bright and interesting.

A good example of "design for all kids" here is Teletubbies, the worldly well-accepted children's programme by BBC&Ragdoll. This is not an application, but has good concepts we can borrow. (By the way, there is an Teletubbies app in store: Teletubbies: My First App. Unfortunately we didn't go through any evaluation of it.)

Teletubbies, it works for all kids!

Here is another good example: Kids' Song with Dancing Cat. It is basically a simple collection of videos,  with not much interaction with user. But it is so interesting and visually attractive that, users cant help dancing with it!

Also, it is good idea to build applications based on existing stories/characters.

8. Concept

A negative example, as shown in one of the earlier post, is a game called "iWriteWords". Where the epic fail is, it is using numbers to teach users how to write numbers!

In general, developers should not take for granted that children know about certain things, like numbers, as well as the default position of home/info buttons (usually top left and right corners of the screen). It is crucial to set up the correct concept at earlier stage of design. Such discussion may be, what are the good things we shall teach a kid? What are good ways for kids to learn stuff through gameplay? Because things appeared normal to adults are not so to kids; they are a piece of blank paper, yet to be painted by what they see.

9. Observe Design

We suggest that when developing a kids application, a developer/designer should follow or use a user-centered design approach, to involve kids and get direct feedback, continuously during the whole design process. Just like "the best way of testing a todo-manager application is to use it yourself", to test a kids application, the best way is to let kids themselves play with it! It is also important for discovering conceptual design, and interaction problem during early stage of development.

iPad App for Kids: "Spot Goes to School"

Spot Goes to School is an iPad app that consists of an interactive a story book and a mini game. It is a simple yet well-designed app for kids. We will go through one round of heuristic evaluation by using Nielsen's Ten Usability Heuristics.

Home screen of "Spot Goes to School"

1. Visibility of System Status

At the home screen, users have three options, "Read", "Play" and "More". It is a rather simple system. We will go through the game first, followed by the book.

As soon as user tap on "Play" button, the display changes as shown in the screenshot below. Without any action taken, the app read out the line "Help...the Nature Table..." by itself, slowly and clearly.

When user shakes iPad hard (yes a small problem here is we really had to shake hard otherwise nothing would happen), the table is messed up, again, with the lines read out loudly and clearly.

What the users should do now is, to tap and drag items to its original place. As shown in the screenshot below, every time the user taps and holds on a item, a white spot appears on the table to hint the user.

Here comes the interesting part. Every time an item is back to its original place, a positive feedback is given right after, in terms of text+audio; And the words change from time to time. For example, "Great!", "Well done!", "Brilliant!", etc.

When every item is back to its place, clear feedback and instruction to replay of game is given.

But we spot a problem here. As shown above, if we move everything back to the table, but not to the designated places (indicated by white spots), no feedback is given since the last correct movement.

As for the story book, every page has good interactive illustration, and well-designed feedback with animated images and audio. At the bottom of each page, there are big, visibly clear page-flipping buttons.

When the user reaches the last page, it is shows "The End", and a "Read Again" button appears.

But there is a problem here of the book. If the user exit halfway reading the book, or (accidentally) taps the home button (located on the top righe corner of each page, this button will be discussed in more details later), when he/she taps again "Read" button from the home screen, a pop-up dialogue is shown. It asks user to choose, either to continue reading, or to start again from the first page, or cancel (do nothing). The instruction (status message) is not very much clear with a only word "Confirm". Confirm what? This is even more confusing when the user goes back to the app after several hours since he/she last quit the app. To improve this, we suggest that, instead of a simple "Confirm", a full sentence explaining the current situation is preferred, such as "You left the book halfway last time. Do you want to continue from the last page were at?". Respectively, the options should be "Yes, bring me to the last page I were at", "No, I want to start from the first page" and "Cancel".

2. Match Between System and the Real World

The app did quite well for this. All text in the book and the game was written in a easy-to-understand, user-oriented manner.

3. User Control and Freedom

As an app for kids, with very limited function/buttons and interaction, it is very impossible that users will go "wrong". The only places here in this app that kids may go "wrong", or got stuck is probably during the game play, and the information page. Bud this app gives good solutions.

As shown somewhere before, during the game play the user may probably reach a stage, where no feedback is given at all. In such case, user has an option to go back to home screen, by tapping the "Back" button, or the Home button located on the top right corner.

4. Consistency and Standards

There is only one stage in the mini game so, nothing much to say about that. As for the book, the ways of interaction are consistent on every page. For example, tapping on lines of words on a page will make the app read them out; page-flipping buttons appear at the same position on every page.

The only problem here is, it uses the same image to represent the "back to home" button on the game screen, and the "back to last page" button on the book screen. And there is a special Home button, located on the top right corner on the screen of both modes.

5. Error Prevention

As discussed above, in this app there are very few places that users can go "wrong". If have to pick one out, that is probably external links. As for external links (or hidden links to promotion pages, which are advertisers' favorite way to make profits, probably), this app act in a smart way. It shows a warning message for external links, and the user may choose to open it or not. This effectively prevents children's innocent act of "accidentally buying a paid app and not being aware of that". More over, leaving the app and opening Safari, looks like "the game is broken" for young kids who have no idea of "web browser" at all.

6. Recognition Rather Than Recall

We noticed that, there is constant background music playing throughout the running of the app. If we want to turn off that music during the reading of the book, the only way is: go back to home screen-tap on mute button-tap on "Read" button-tap "Continue Reading". That's way too long for user to recall every step. We assume that it was due to simplicity concern for the developers to remove the audio control button from each page of the book, making it appear only on the home screen; but this is on the other hand adding troubles.

7. Flexibility and Efficiency of Use

The universal Back-to-Home button.

There is this icon that appears everywhere in the application, on the top right corner of screen. It works as a good shortcut back to home screen regardless of your current state in the app. Novice users may not be used to it (because this icon does not have any indicative label) - but once they do, they will find it very useful. And it is easy to recognize dut to its fixed position and look.

However for the book, there is no option for page navigation like normal e-books. User can only flip one page forward/backward at each time. Again we assume it is due to simplicity consideration.

By the way, this app supports screen rotation on the home screen and pages showing more info only. It does not work for the book and the game.

8. Aesthetic and Minimalist Design

Well, in terms of minimalist design, this app has done its best. Every single page/screen contains no extra information, yet fun to play with.

9. Help Users Recognize, Diagnose, and Recover From Errors

Since there can hardly be an error for this children's app, not much comments here.

10. Help and Documentation

This application is equipped with well-documented instruction page. However obviously this is not for kids to read, but their parents.

iWriteWords (Lite)

iWriteWords is a handwriting game for young children to learn the strokes of the English alphabets and numbers. For the purpose of evaluation, we have downloaded the free Lite version to assess its basic user interface.

Using Nielson's 10 usability heuristics, we present the evaluation of this app:

Visibility of system status

Feedback time is good, not much lag time between action and feedback. Intuitive touch and drag actions most of the time. However, at some stages, alphabets drop down and float around the screen, distracting the user and making the interface messy. As multi-touch is not supported, it is sometimes difficult to control the system in a way the user wants it to be. Also, there is first-time notifications of instructions on how to play the game. This is not good for small children, who, fundamentally, cannot read.

Match between system and the real world

The sequencing of the numbers to guide users in writing alphabets and numbers follow normal writing conventions, which is good. Both touch and shaking actions induces feedback from the system, and motion of free-floating objects are consistent with basic physics. This creates a very real learning environment for the kids. However, we do feel that there is too much animations within the app, creating major distractions for the user and also some usability problems. The buttons rotate and shake along with the other elements in the app, and this does not correspond to the real world as buttons are normally static.

User control and freedom

Supports replaying of previously written characters/words. User can go back to main menu any time., albeit using different buttons in different stages. Settings can be changed from the "Settings" app on the iPhone/iPad. This is both good and bad, depending on the user. On one hand, this prevents young children from accidentally customising certain options and end up in a foreign environment. However, this non-trival way of customising options also limit what a child can do within the app without parental supervision. There is only a replay function for users to view what they have complete so far, but no re-do function for them to go back and retrace a certain alphabet or word.

Consistency and standards

Gameplay is generally consistent. Shake and touch actions are intuitive but we feel that the shaking actions are redundant as the focus of the game is on teaching children to write, which only requires touch actions. The "back" button is inconsistent across different screens. Some screens present a triangle symbol while others present a "no-entry" symbol, although both leads back to the homescreen. Other buttons like the replay (triangle)/ stop (square) buttons are inconsistent with standards and the user have to guess what they mean in each context. The additional effects of spinning buttons do not help in identifying their functions. Overall, this app presents an inconsistent interface which potentially present usability issues for children and even adults using the app.

Error prevention

Good audio and visual feedback when the wrong strokes are drawn. However the feedback might a be a little too fast sometimes, cutting the strokes off before the user finishes drawing. Not much room for errors to be made in terms of settings, since settings are controlled externally and not within the app. However in the information page there is a hidden "email" button that children may accidentally press and end up in a foreign (email) environment instead. Also, there should not be a "more apps" advertisement button in an app for children, for they usually like to explore every single button and would end up purchasing additional apps.

Recognition rather than recall

Recognition-based instructions for children to follow the sequence of numbers to trace a certain stroke. But, the fundamental problem here is that the child needs to be able to recall numbers and their sequences, before being able to follow them. Here, they are assumed to know numbers before playing with this app, which would then defeat the purpose of having this game in the first place.

Flexibility and efficiency of use

The games are easily quittable to return to homescreen. There is much flexibility in the modes of gameplay (easy mode on/off) and several functions within the game. However, making the changes would require parental help. There is also no option to turn off any sound effects.

Aesthetic and minimalist design

Confusing and meaningless design of falling alphabets in the gameplay - this does not present a minimalist design.

The choice of green and red as the basic colours for the app is colour-blind-unfriendly. The sequence numbers to induce users to trace the strokes are redundant, as dots would suffice as affordances to users to trace. There is also excessive animation in the entire app, presenting a confusing interface. We also think that the shaking function in the alphabet song is redundant.

Help users recognize, diagnose, and recover from errors

The notifications are not readable by kids, rendering it useless if the child is left alone to operate the app.

However, the animation of the character + sound effect when a mistake is made when drawing the strokes, is good.

Help and documentation

Help is hidden and the first-time instructions on gameplay in the form of notifications are not readable by kids. As mentioned before, the use of numbered sequencing for each stroke is redundant and might even confused the child.

Some Food For Thoughts

Here's an inspiering article about usability and user experience evaluation considering applictations for entertainment. The article finds that todays evaluation methods can be applied for evaluating entertainment application, but they need to be addapted somehow. Inspiering thaughts for the project. A Measure of Fun – Extending the scope of web usability by Charlotte Wiberg.

Design Review Match It Up 3

Here's our latest design review for a educational application for children 2-4 years old. It's called Match it up 3 and it's supposed to develop children's perception and cognitive skill by letting them look at several icon/ images and select one of them and draw it towards the center image. We have evaluated the application based in Nielsen's heuristics.

1. Visibility of system status

Sound feedback for actions, good visibility of system and states. However, some buttons like the return or back button, aren't clear with it's purpose. The return button is quite small and uses a triangular shape as a icon for return. This looks more likely to a Play button and not a Back button. Also, bad feedback for multitouch, why doesn't multitouch work? It could be confusing for a kid to understand that object sometimes can be moved but when something else is touched the other objects are locked. Kid often have bad skills and could easily touch several items or object at once and therefore lock other objects or the gameplay by mistake. The application should support multitouch or at least give feedback for why it isn't supported. We also thought that the application should provide more positive feedback when a task or a match is done correctly. It should be a feedback for every correct match, perhaps an animation or a sound or a text information also spoken up loud. Example "this is a sun, it has the color yellow". That would create a better meaning for the kids and also explain why their match is correct. Another feedback could be that the background color blinks in example a green color to indicate that the answer is correct.

2. Match between system and the real world

Concept about how to move things, push, pull works well and are familiar to a 2 yr old user. Touch applications are easy to understand, it follows the concept of moving things for a 2 yr. However, the images could be bigger and some of them doesn't even look like example money. The choice of images could have been better, more thought through. Sometimes the images are difficult two understand what they are representing and the "logical" match isn't that logical. The connections can be hard to understand. Further more there are no hints of what to do or what the task is, a simple demonstration would have been appreciated at least for the first-time user. Finally, we find the idea, since some of the pictures are difficult to understand and there is not any clear connection, somewhat limiting the children's imagination. It helps creating stereotypes and that isn't perhaps such a good idea?

3. User control and freedom

Information button and back-button are relatively small, perhaps to avoid kids using it by mistake to frequently or to avoid drawing unnecessary attention. If a user is doing wrong the system has an automatic slide function which slides the object back to its original place. This is good, friendly way of telling the user it was wrong, it supports trial-and-error, so that the user tries again. The return button looks the same in every state, so its consistent and familiar to the user but the choice of icon is perhaps not appropriate. Sound can be turned on/off by pushing the icon one or two times. The problem with children interaction style, mentioned above, is a problem and multi touched should be supported. The kids should be able to move several objects at the same time even if only one object is the correct or matching movement. Also that additional application can be bought by mistake in the information menu/presentation is bad. We think it should be in an additional window. It shouldn't be accessible for kids by mistake download additional games!

4. Consistency and standards

The game play is consisten for all states and familiar. One you have figured out what to do (it's easy to learn and it support trail and error) the game is very easy to play. You can't slide between windows or rooms, nothing happens when the iPad is shaken but the touch interaction is supported and follow conventions. Similar to other touch applications. The place of the return icon is correctly, according to conventions, in the left corner and help or information in the right corner. Information and sound icons are those that are most frequently used. As mentioned previously the consistency between matching objects sometimes aren't that clear and the game content is quite small.

5. Error prevention

Error prevention could be that navigation icons are relatively small compared to the other object in the interface so that they are not as inviting to use. Other function is the slide function that doesn't tell the user that he/she is wrong, just automatically adjust the problem by sliding back to original position. Sound feedback is also telling the user right or wrong in a friendly way. However, in help menu  information is presented with additional information about other similar games provided by the developer and a download link that automatically link the user to apple appstore where additional games can be downloaded very easy. This is most likely confusing for children and they will most likely have trouble going back to the game. Also they will probably by other games when trying to return or be tempted to do so. Not good. Also, in the presentation window or as the first view the game menu is presented with a hidden link in the bottom of the window. This wasn't discovered the first times the game was tried out but when discovered it is considered as bad. This hidden link automatically sends the user to the developers home page and there it can be difficult to go back to game state if the user is not familiar with Internet and computer usage. Hidden links are not recommended and especially not for kids, since they tap everywhere and without consideration. They most likely will not understand why their action transfers them to another web page.

6. Recognition rather than recall

The game is trial and error so there is no recall necessary. It is however a cognitive -and perception-learning-based game so it will demand some memory recall action and understanding of why a certain action is considered as correct. The game is similar to memory, in trying to remember what object that is related to the other. But it is in a good, learning way. If the user is linked to appstore will however demand that the user remembers how to go back or exit that state.

7. Flexibility and efficiency of use

Efficiency isn't really something that is measured in applications for children and it isn't something that is striven for. The game could, however, be more exciting by adding additional levels or complexity based on cognitive skill and previous results. This game is very easy and might be boring if a user has done or finished all charts. The chart doesn't change when you have completed them and if you have completed all charts the game might be boring or fall out of interest. Also, it could make the user feel stupid or that he/she hasn't completed the chart after all since they are put back to square one.

8. Aesthetic and minimalist design

The view is very easy over looking and use color in a interesting and conceptual way. One chart is about color matching and is fun to use but perhaps difficult to understand the conception of. It is probably the most difficult and most covering demanding, chart of the game. The objects are fun and nice graphics they could though been larger in size and more similar in type, some pictures are 3d and some are 2D.

9. Help users recognize, diagnose, and recover from errors

Children apps shouldn't have room for much error, so it is difficult to find errors. Sometimes a object is accepted and sometimes not. It is important to draw the figure in a normal pass and inside the white square otherwise they are not accepted even if they are correct. The white square is good as a perimeter where correct answers are accepted and it help the user understand where to draw it (since it is not the same color as the background) it is also good the application has a automatic slide so if the object is correct and the user drops it within the perimeter the object is automatically drawn into the center. However it is confusing that the right object might not be accepted if you push it to quickly towards the perimeter. It is nice and friendly that the user is awarded with applause and a smile if all objects are correct and the chart is finished.

10. Help and documentation

As mentioned above the documentation is good. However it is written and most likely not understandable by kids in the target age. They will need help to understand. One thing to develop is perhaps to support auditory information, instructions by sound. The information is not however directed towards the children, it seems more directed to parents or buyers. The design is easy though and trial and error is supported so kids (perhaps?!) won't have problems using the app. Also, a bad thing about the design is that information or written help, is mixed with opportunities to by additional games. It probably shouldn't be mixed in the same place.