To update ourreport on UX design for children,我们最近在笔记本电脑和移动设备上使用3到12岁的孩子进行用户测试。我们为最年轻(3-5)和最古老(9-11)年龄组的个人会话,以及6至8岁的参与者的二元。我们之前写过基于他们的物理发展的儿童设计。An equally important consideration is the dramatic cognitive development that occurs between ages 3 and 12. By considering the cognitive capacity of different age groups, designers can make websites and apps usable and appealing to younger audiences.

皮皮的发展理论

据吉安·皮卡,孩子们cognitive ability to reason, infer, and make connections is still developing。这种发展发生在不同的阶段:

  • preoperationalstage: children (between the ages of 2 and 7) can think in terms of symbols, but they aren’t yet able to effectively take other people’s perspectives. Language skills are still developing.
  • concrete operational阶段:在7到11岁之间,孩子们学习如何使用逻辑来制定世界的推论和理性。

In both stages, other key cognitive capacities are also immature: thetheory of mind(understanding the intentions and emotions of others),认知灵活性(处理相互冲突的信息和切换视角),和executive function(planning and monitoring their own behaviors).

设计建议

网站和应用程序应考虑孩子的认知 - 发展阶段,以便最佳支持其目标,具体取决于目标年龄范围。以下是五种设计建议:

1。Give kids clear and specific instructions by stating the goal of a game (or other online tasks) and how to achieve it

使命爪子游戏在nickjr.com使用音频和视觉instructions to explain the goal of the game and how it’s played. For example, in the second level, animated instructions showed the goal (three fully-assembled armored knights), the current status (three partially-assembled knights), and the required operations in sequence (a cursor dragging one part to put the knight back together). The visuals were clear enough even without the simultaneous audio instructions. During our testing, 6-year-olds easily understood how to play the game.

p1_nickjr_clearimstructions.
这game Mission PAW on the Nick Jr. site used clear visual animation and audio instructions to explain what kids need to achieve and how to accomplish the puzzle task. First, the game showed the goal state: all three complete armors (the left image). Then, the game showed the start state and how to play by using the mouse to drag the pieces to where they belonged (the right image).

当没有关于游戏的信息时,孩子们可能会感到困惑。例如,Counting to 100Starfall.com上的游戏没有显示关于游戏目标的指示或如何玩它。在我们的研究期间,一个5岁的男孩想到了挖掘开关导致硬币下降。但是,他不明白游戏如何工作或目标是如何。(游戏教导孩子们通过加入便士并将10便士转为一毛笔等)没有明确指出不同游戏元素之间的连接;因此,孩子们很困惑,游戏未能教授计数技能。

p2_Starfall_WeakConnection
STARFALMY.com:计算到100的游戏没有任何有关游戏目标或如何播放的指示。年轻的孩子们不了解便士,模棱两可和屏幕左侧显示的数字之间的连接。

2。指示应根据孩子们的理解水平量身定制。

提供指示还不够;设计师还应该确保孩子能够理解它们。例如,在一个名为Panda Restaurant 3的应用程序中,儿童烹制了动物人物的食物。当玩家选择一种成分时,动物角色通过制作面孔和噪音来表现出他们的偏好。但是,在我们的测试期间,6岁以下的孩子无法理解这一反馈;他们只是让食物成为他们自己的喜好。那是因为,在这个时代,孩子们在不同物体或角色之间建立连接的能力(在这种情况下,将动物与食物连接的能力)仍在开发。此外,他们的思想理论技巧是萌芽的:他们无法熟练地推断出别人的思想和情绪,特别是当这些不同的时候。更具体的视觉和音频提示,如夸张的面部表情或说“百胜,我喜欢胡萝卜”可以更好地帮助孩子在成分选择与客户的偏好之间的联系。

During our testing in China, we found that kids aged 6 began to understand the feedback expressed by subtle facial and sound cues, but cultural differences limited them. For example, a character said “Hooo” to show his preference for tomatoes, and a 6-year-old girl asked, “What does he mean when he says ‘Hooo’?”, as that expression doesn’t have any meaning in Chinese.

p3_pandarestaurant_subtleinstructions.
Panda Restaurant 3 App:当孩子选择的成分时,这些人物使微妙的噪音和面孔展示他们的偏好。6岁以下的儿童未能注意到在测试期间的反馈。在中国,6岁以上的儿童注意到提示,但由于与各种情绪相关的声音的文化差异,未能完全理解它们。

3.Use existing mental models and knowledge about the world to help kids accomplish tasks

Although kids’ cognitive capacity is still developing, they already have mental models and tacit knowledge about how the world works. Referencing their existing knowledge reduces the effort required for kids to understand how websites or apps work.

A common example is the coloring book metaphor in drawing games. When presented with an interface that looked like a coloring book and crayons (e.g., 123Draw), our study participants immediately chose colors and tapped or clicked the areas they wanted to color in the painting. Any variations from their familiar environment, such as “redo” and “undo,” had to be learned. During our testing, every child used the eraser instead of the “redo” and “undo” buttons to recover from a mistake. Young kids didn’t know what the “redo” and “undo” buttons did. Even older kids who showed total understanding of the “redo” button when specifically asked, naturally turned to the eraser tool. This is an example of good use of existing心理模型那as well as redundancy.

p4_123Draw_MentalModels
123draw应用程序:孩子们知道如何使用该应用程序,因为它遵循他们的彩图的心理模型。他们喜欢使用橡皮擦从错误中恢复,即使他们知道撤消/重做按钮的含义(可视为箭头)。

利用孩子的现有的另一种方式心理模型is to build on the common knowledge they already have from their daily life. The Panda Restaurant 3 app used children’s familiarity with cooking activities to help them play a game of cooking and serving food. Skeuomorphic-design elements such as household foods, tools, and gestures made the game easy to learn and play.

During our testing, even a 3-year-old girl was able to make a pasta dish by herself: she put pasta in the pot by dragging the bag of noodles to the pot. She also knew she should turn on the stove switch in order to heat the pasta.

p5_pandarestaurant_mentalmodels.
这Panda Restaurant 3 app’s skeuomorphic design took advantage of kids’ existing knowledge about the world. Even a 3-year-old girl was able to successfully make pasta in the app: first, she put some pasta in the pot by dragging the bag to the pot, and then turned on the burner switch in order to cook it.

4。通过设计自我解释性接口并防止可能的错误来降低认知负荷。

一个良好的设计(无论是针对儿童还是成人)都会减少认知负荷and minimizes the mental resources needed to understand and interact with the system. When the users are young, theirworking memorycapacity is even smaller than that of adults, so it is crucial to pay attention to how much information your users need to carry around to use your interface.

When an interface is not transparent and self-explanatory, cognitive load can increase dramatically. For example, during our testing, two pairs of 7-year-olds were confused by a game called小狗追求on the PBS Kids site. The visual instructions told them how to operate the controls (drag the items to attract the puppies’ attention), but there weren’t any on-screen instructions for how to win the game. The game showed a golden pad with a large number above, which represented the number of puppies that kids needed to rescue to that position. A 7-year-old girl kept asking, “What does this ‘2’ mean? It’s annoying!” The kids didn’t connect that number with the game’s objective. Putting a puppy icon or the outline of 2 puppies next to the number “2” would be worth testing. We should note that the game did provide audio instructions, which explained: “this number shows how many puppies it requires to open the door.” But, the sound was blocked by the browser, so our participants never heard that explanation (and even if they had heard it, it’s not clear that they would have remembered it later on).

p6_PBSKids_LackInstructions
的视觉指示 小狗追求game on the PBS Kids site didn’t state the goal of the game clearly. They showed how to operate the game (drag items to attract the puppies), but our study participants didn’t understand that the number 2 (displayed in the bottom left corner) meant that two puppies needed to get to the golden pad. An audio explanation tried to help, but the browser blocked the sound from playing.

对于孩子们,与成年人一样,弄清楚某些事情出了点问题,然后如何固定它涉及很多心理资源。由于儿童往往具有比成年人更少的界面知识,因为发生错误时,它们可能会比成年人更沮丧和困惑。因此,防止可能的错误缓解了它们的认知载荷。

Let’s take search as an example. During our testing, we found that kids aged 5 to 11 relied heavily on the autocorrect function of the search engine, because they often made typos and struggled with spelling. The search engine was usually tolerant of such mistakes and corrected them appropriately. For example, when searching for “children mesuem phoenix” in the search engine, it showed the results for “children museum phoenix” instead.

p7_Google_AutoCorrection
Google’s autocorrection feature prevented kids from failing to find their desired search results when they made a typo

Unfortunately, many in-site search tools failed to support autocorrection and partial matching, which increased kids’ cognitive load as they tried to recover from errors. For example, during our testing, a pair of 8-year-olds tried to find a video related to “exploding toads” on the National Geographic Kids site. However, they failed to spell the word “exploding” correctly and typed “expolding toads”, which resulted in zero search results. They even tried to shorten the query to “expolding”, but still got a “No results” message. The kids were upset; one of them was sure that she had watched that video on the site before. She shouted, “I know there were exploding toads! But how do you spell exploding?”

Clearly, just like adults, children were frustrated byzero-search results。Offering feasible and attractive next steps could reduce their frustration. Not long after testing, the site did return a related result. However, there were still two usability problems: 1) the word’s spelling was not corrected; 2) there was no indicator of how the search terms related to the search-result listing. A better solution would be to show search results for the corrected keyword, as well as highlight the keyword in the search results.

p8_NatGeoKids_NoAutoCorrection
在我们的测试期间(顶部图片),搜索结果页面降息蟾蜍在返回的全国地理童网站很抱歉,找不到任何结果; on a more recent version (the bottom picture), it showed a search result, but didn’t correct the spelling or show if or how the search result related to the keyword.

5。说明应该是清晰的,具体的,但不是太规范。

儿童预级叶的不成熟意味着它们与成年人相比能够处理复杂和矛盾的信息。因为孩子们的推理技能仍在开发,因此他们更有可能以字面意思采取具体指示。例如,在我们的测试期间,一对7岁的孩子试图在尼克Jr.网站上播放绘图游戏。音频指令专门告诉她“使用鼠标单击桶”。然而,使用TrackPad的女孩更舒适地玩(我们发现9岁以下的孩子们因他们而喜欢鼠标上的触控板物理发展阶段)。但是因为说明specifically told her to use the mouse她从踏板板切开了。由于她对鼠标的缺乏,她很快就沮丧了,离开了网站。

当有多种可能性时,更好的解决方案是避免命名特定设备。如果游戏只是说“点击桶”或“触摸桶”,那么这个女孩就可以继续使用TrackPad并能够播放游戏。

p9_nickjr_prescriptiveInstructions.
Coloring Book game on the Nick Jr. site had audio instructions, but asked kids to use the mouse to operate. In testing, a 7-year-old girl preferred using the trackpad but turned to the mouse because of the instructions. Her inexperience with a mouse frustrated her, and she left the site quickly.

儿童设计的道德考虑因素

Because kids’ ability to plan and execute is still limited, they are more vulnerable to attractive games and may develop addictions to games or apps easily. Recently, the Chinese government announced a plan to curb the time that kids spend online because of growing fears over addiction.

During our usability testing in China, we found some apps for young kids enabled parents to limit the time kids could play. For example, the婴儿公共汽车为2至8岁的孩子提供游戏和歌曲的应用程序有一个父母中心父母可以为孩子们持续发挥可能的最长时间的部分,孩子们在玩一定的时间后休息的时间长度,以及孩子们不能使用该应用程序的休眠时间。

p10_BabyBus_ForceToRest
这Chinese app 婴儿公共汽车for kids aged 2–8 enabled parents to specify the amount of time kids could continuously play. When the child had used the app continuously for the set amount of time, the app told them to take a break and stopped showing content.

在禁止的时间期间,该应用程序呈现了一个内容墙,阻止孩子们自己更改设置。内容墙要求用户识别数量的传统汉字,这对儿童来说非常困难,而且很容易成年人。这些技术尚未在美国应用程序中尚不常见。然而,鉴于营销对儿童的伦理问题并增加屏幕时间活动,设计人员应考虑提供此类父母控制的好处。

p11_BabyBus_ParentCenterSetting
在这一点父母中心婴儿巴士应用程序的页面,父母可以设置睡眠时间(20:00-6:00in the picture) and force kids to take a rest for3,5,10, 或者15.分钟定期分钟(15,30,45, 或者60.分钟)的比赛。
p12_ContentWall
A content wall prevented kids from changing the settings on their own. It required users to recognize the traditional Chinese characters for numbers, which was extremely difficult for kids, but easy for adults. This is one case where knowledge of children’s limited cognitive development can be used advantageously to deliberately design a UI that’s not for kids.

Conclusion

在为孩子设计网站,应用程序和游戏时,请记住他们的认知能力仍在开发。陈述目标以及如何用具体说明清楚地实现目标。工艺说明,以确保他们在儿童的理解程度内,但不是太规范。利用他们的先验知识和精神模型来让他们熟悉网站或应用程序。最重要的是,请记住,即使是几年的人对儿童的认知能力有很大差异,那么一个年龄组的工作就是另一个人的工作。未能考虑孩子的认知能力的设计不会带来快乐,而只是挫败感。

了解更多:full 399-page reportUX Design for Children (Ages 3-12),第4版,有156个设计指南可供下载。