交互学堂
专注分享专业知识

【译文】为儿童设计Web界面

这篇译文主要针对儿童网站设计的,虽然不同地区的儿童会有不同的特征(语言、教育状况、电子产品的熟悉程度等),但仍具有普遍意义。

————————————————————————————

当儿童在网络上花费大量时间的时候,认知上和身体上的限制会给他们带来很大的挑战。再加上不当的内容设计和暗模式(dark patterns),那就更加糟糕了。作为网站设计师,我们创造的东西,应该能够帮助儿童使得他们更加聪明,而不是相反。

这篇文章将会从心理学的角度解释儿童的特征,以及这些特征怎么影响他们使用网站的方式。另外我们将会提出一些设计准则,帮助设计师更好地设计。

模式的转变

1989年3月12日,第一个因特网的浏览器Mosaic诞生了。正如我们所认识的,它标志着因特网的诞生。这个日期如此重要的原因,在于民用因特网的诞生代表了一种模式的结束和另一种模式的诞生。相比起那些没有被因特网伴随着长大,没有把因特网看做获取信息和娱乐的基本途径的人,今天的儿童将会生活在另一种不同的模式里。

前因特网模式

那些不是通过网络来记住时间的人,大概都生活在相似的年代。我还能生动地回想起当初在高中的时候(1995-1998),在学校和公共图书馆里面寻找那些对我学习有用的书。

【译文】为儿童设计Web界面

在我们的心智架构里面,有这么一个概念,对于某一行动所用的时间,我们都能控制,就想从书桌走到书柜,我们能选择走快一点,或者走慢一点。无论怎样,都在我们的控制当中。这种心智架构解释了为什么当一个网站上的内容加载得很慢的时候,我们中的大多数都会很不耐烦。

因特网模式

说到时间控制,那些把因特网看做信息的主要获取途径的人,会有不一样的心智框架。他们认为网站加载就应该是这么快,他们不能强迫速度加快。他们认为,他们没有办法控制这一行为所花费的时间长度。

在这个问题上,我(作者)已经做了很多观察儿童使用电脑的研究了。如果内容加载得很慢,大多数的儿童只会在等待的时间里去做其他的事情,比如看电视,跟其他儿童聊天。

我帮我7岁的儿子在他电脑上安装Google Earth。它需要长时间下载,我觉得太慢了,所以我离开了房间。但是我的儿子只是在下载的过程中,打开电视机,看动画片。当应用下载完了,他才把我唤回房间。

“数字化的本地人(Digital Native)”其实不存在

我不相信有所谓的“数字化本地人”。当然,iPad、智能手机以及电脑都伴随着儿童长大,但是这并不意味着他们会自动地成为一个使用电子产品的专家。实际上,恰恰相反。对于小孩来说,iPad是一个封闭的、限制的环境,他们并不能对它造成多大的伤害(除了买一些吃的和删除里面的照片以外)。而且iPad并不能教会儿童任何关于“技术是怎么工作的”、“电脑是怎么工作的”或者“怎么使用电脑创造新的东西”这类知识。

【译文】为儿童设计Web界面

尽管上述的观点很难让人相信,我还是认为,儿童生活在一个完全不同的年代这一事实,会使得他们在网站的交互方式和感知方式上产生很大的影响。从小在各种触摸屏的环境下玩耍会对他们的心智模型产生巨大的影响。

另外,他们是儿童。他们还没有完全开发大脑和身体。所以当我们为儿童设计的时候,要考虑到儿童和成人的不同点。

7到12岁儿童的设计准则

这些设计准则是面向7到12岁的儿童的。理由是,很多研究指出,7岁以下的儿童大多数只使用触摸屏和APP,不使用基于浏览的应用和网站。

7岁以上的儿童慢慢地以一种更加传统的方式开始使用因特网——使用浏览器打开网站或者web应用。这是最基本的论点。而12岁以上的儿童,会慢慢地学会更多成人浏览网站和web应用的方法。

最终,我的目标是让儿童尽量避免网站的垃圾,以及提供一个更有质量的界面。坦白地说,儿童在网站上接触到的大部分垃圾都非常让人惊讶。就拿下载Pixelmon Mod这个应用来说吧。它花费我几分钟的时间,而且我不得不等待两次“时间延迟”的广发(我需要一直等到时间倒数完,才能点击)

【译文】为儿童设计Web界面
这是一个当你下载文档的时候必须要经历的复杂而又令人迷惑的路径。

上面的图片解释了用户在下载Pixelmon Mod时所经过的路径。在网站的下载页面,会呈现一个大大的、绿色的“下载”按钮,但事实上,当你点进去,会发现其实是一个广告。如果我是小孩,正盼望着下载东西,我当然会点击它。

再往下页,我可以选择其中的一些文档进行下载。(对于小孩应该比较容易分辨出来,对吧?其实并不真的是这样!)而且你可以选择点击两个相同的下载按钮中的其中一个。(我仍然搞不清楚为什么会有两个。)

当这两个下载按钮被点击的时候,他们都会跳转到不同的广告网站页面。当我点击“跳过广告”的时候(其实要等待5秒之后才能点击),我被引导到一个带有视频和倒计时按钮的页面。在10秒之后,我就可以下载那个文档了。你觉得儿童能够在不按任何一个跟广告相关的按钮的情况下,下载到那个文档吗?根本不可能。

这对儿童来说是不公平的、邪恶的。作为设计师和开发者,我们的设计应该要比这样的网站更好。为了做到这点,我们不得不了解儿童的特征以及他们是怎么和周围的世界交流的。

儿童的大脑

让我们来看看人类的大脑是怎么发展的吧。

在2岁左右,儿童将会学会自我认知,但是在他们的大脑里,只形成了非常少的心智模型。他们有粗略的运动技能,知道怎么在触摸屏上滑动和轻点。最近一个由80个儿童的父母参与的研究表明,平板电脑是4岁以下儿童主要使用的设备。

在6岁左右,大脑前庭开始慢慢地成熟和发展。大概也在这个时候(男孩要比女孩稍晚),父母就可以教小孩怎么更长时间地专注于一件事了,而且儿童也开始学会同理心。在这个年龄段,大多数小孩就能够精确地使用剪刀了。但是在没到10岁之前,他们是不会完全开发出运动能力的,这也是其中一个影响儿童与界面交互的因素之一。

所以,一个10岁的儿童拥有所有操作键盘和鼠标的技能。但是仍然有一个特征使得10岁的儿童和成人有很大的不同。他们仍然没有发展出抽象思维。这种思维能力要到12岁才会发展,而且知道26岁才会完全发展。

抽象思维是非常重要的,因为它使得人们能够预测行动的结果,以及对这些结果做出反应。当然,一个8岁的儿童能够预测出把一杯水倒在电脑上会把电脑弄坏。但是我保证,两个星期后,当电脑维修好了,儿童还是会把一杯水放在电脑的旁边。(我只是从个人经验中了解到的。)

同样地,如果儿童点击了一个广告,从而把他们引导到另一个新的网站上,他们会很生气,因为目标被延迟了(目标指的是下载文件)。但是儿童并不能预测到点击这个广告会对电脑造成多大的伤害。

所以,当他们下次又去下载东西的时候,他们大概又会犯同样的错误,并且一次又一次地犯同样的错误,直到电脑由于安装了太多的恶意软件而导致返修。维修完后,儿童还是会犯相同的错误,因为他们的大脑没有完全意识到点击那个广告的后果。当然,小孩知道由于他们的犯错,目标的路径会被延迟,但是没有完全意识到会延迟多长时间,多少人力物力将会花费在维修这台电脑上,或者有多少数据会被黑客盗取。

哪些因素会影响儿童使用网站

因此,从认知的角度上看,我们知道儿童跟成人是很不一样的。并且随着他们慢慢长大,认知能力会极大地发展。但是还是有很多其他的因素会影响设计师为儿童设计网站的方式。让我们来了解其中的一些。

心智模型

我的研究相当地精确:正如上文阐述的,儿童第一次与数字界面接触,是在触摸屏的环境下。而他们使用平板电脑做的第一件事是玩游戏和上YouTube。

这是他们早期使用数字界面的原因。而且这些使用的经历会塑造他们的心智模型,这是我们设计师在设计网站界面的时候需要去考虑的。

【译文】为儿童设计Web界面

儿童深受触摸屏界面的影响(iPad 游戏、YouTube)

一般来说,这类界面有比较少的文字,使用很多按钮和图标来支撑导航。

但问题是,儿童能不能从这类界面转向传统的网站界面?某种程度上,他们基于自己的心智模型来转化,但我们都知道他们的心智模型跟成人的很不一样。他们习惯了那些有很多图像、很大的导航按钮以及很少文字内容的界面。而且他们对于那些核心的视频控制元素十分熟悉,比如“继续”、“停止”、“全屏”按钮,同样对于一些关键的交互元素,他们也很熟悉,比如轻点按钮的操作。

语言和阅读

语言本质上是一系列的符号,人们需要先对它解码,然后才能运用它。

从出生开始(实际上是在没有出生之前!),小孩就学习怎么去使用语言。但是在能够控制舌头和嘴巴之前,他们不能很好地运用语言。但是这并不意味着他们不能理解语言或者不能交流,只是他们还不能很好地使用语言的工具而已。

就以我自己的小孩作为例子。当我最小的儿子13个月大的时候,他知道怎么去说去一些东西。但是他知道大约20个符号语言的词汇,因为我们都是通过这些简单的符号跟他进行交流的。他可能会对我们说“橄榄”,然后我们就知道其实他想看书。我想说的是,身体上(指舌头和嘴巴)的限制是我们能够解决的,我们只要给他一些可代替的工具,就能帮助他解码和运用语言了。

对于使用一个界面来说,阅读技巧是必须的。大概在6岁左右(至少在丹麦是这样),儿童会用自己本国语言来学习阅读,到了8岁就能够解码一些简单的书面语言了。他们学习阅读要比学习写作和拼写来得快,而这在设计诸如搜索、导航和内容的时候需要重点考虑。

所以,一旦小孩到达了他们能正确阅读的年龄,那语言和阅读就不会成为障碍了,对吧?并不是这样。除非你设计的东西只是服务于一个特定的地理区域。如果你在为全球的用户群设计,你就不得不换个角度思考了。比如对于那些英语不是本国语言的小孩来说,他们要到更晚才会学习英语。

所以,如果你的用户群不能阅读或者解码一种语言,他们能够借助什么工具来阅读呢?他们借助手头上的工具,通过图表和图像来理解意义。这就是为什么一个三岁的儿童在一定程度上能够浏览YouTube,以及为什么一个非英语为母语的儿童能够在学会阅读之前玩游戏。他们会去寻找类似按钮和图像的东西,从而理解界面的意思。

一旦他们领会了怎么去操作系统,这些信息就会储存在他们的肌肉记忆里面,从而他们就能过界面元素的样子和位置,判断出它们究竟是干什么用的。

当你进入下图展示的这个网站(阿里巴巴,一个非常火的中国电子商务网站)时,你的体验就跟儿童的体验差不多。除非你能阅读中文,否则你完全不知道下一步要干什么。所以你需要借助一些传统的网站元素,比如全局导航、图像、图标,来理解网站的意思。如果儿童不能“阅读”这个界面,他们就会做这些相同的事情。

【译文】为儿童设计Web界面

到这里,我们已经知道一些关于大脑怎么发展的基础知识,以及一些影响儿童使用和理解数字界面的因素。

基于这些知识,我得出了10条准则,帮助设计师更好地为儿童设计网站界面。

准则

简单的数据输入

与界面进行交互是一个身体技能。我们都知道,儿童要到10岁才能完全发展出运动技能,所以对于一个8岁的儿童来说,打字输入是很困难的。我曾经观察过一个男孩在学校登陆网站。他花了15秒去输入用户名和密码,而且他仅仅使用一根手指。他的交互方式与一个10岁的儿童形成鲜明的对比(一个10岁的儿童会使用双手输入而且会快很多)。如果你在为10岁以下的儿童进行设计,那就需要简化基于键盘的数据输入要求了。对儿童来说,输入是很困难的。

按钮,而不是文字链接

一个两岁的儿童不能控制鼠标或者触控板,但是他们能够在平板上浏览。虽然大多数6岁的小孩能够使用鼠标,但是过去三年,他们更多的是在平板上玩。所以他们习惯把按钮当做导航键。而且他们早期发展的心智模型会影响他们感知界面的方式。另外,记得他们的运动能力知道10岁才能完全发展。因此,10岁以下的小孩,相比起更年长的小孩,需要更大的按钮面积。

国家地理杂志的儿童网站是一个很好的界面设计例子。他们使用了按钮和贴近自然的图标。他们也认识到儿童会受到触摸屏环境的影响,所以他们把儿童熟悉的元素按钮作为主要的导航入口。

【译文】为儿童设计Web界面

使用图标和图像

图标和现实世界的连接应该是清晰的,因为小孩仍然不能发展出更多关于抽象图标的心智模型。用户群越年轻,图标和现实世界的连接就应该更直接。随着他们慢慢地长大,他们会学习到更多的传统网站元素。

Y8是一个很火的儿童游戏网站,它使用了很大的图像作为导航。从我自己的调研中已经发现,那些不能阅读的小孩可以通过观察图像来导航。

【译文】为儿童设计Web界面

当重新设计网站界面的时候,不要重新定位关键的导航元素

一些视觉的指标,比如图像、图标和按钮,对于理解一些难懂的界面是非常关键的。记得阿里巴巴吗?对于一个6岁的母语非英语的小孩来说,一个英文网站就长得跟阿里巴巴一样。你必须接受这一个事实——儿童通过肌肉记忆和通过视觉记忆是一样多的。

使用旁白

几年前,我建立了一个网站帮助6到8岁的小孩发展同理心,从而避免他们欺负别人或被欺负。我做了很多可用性测试,发现那些不能阅读的小孩确实能从网站内置的旁白中获得帮助。但是那些具有初级阅读技能的小孩更喜欢阅读文本而不是等待旁白的指令。

所以,我们应该使用旁白帮助那些较小的小孩,而让那些较大的小孩选择关掉声音(如果他们能阅读的话)。否则,这些小孩很有可能会出现心智过载,因为对于他们来说,在同一时间阅读和聆听是很难的。

搜索:为较小的小孩提供自动完成和图片搜索(较大的小孩可以使用更复杂的搜搜)

小孩学习阅读比学习拼写要快得多。虽然他们知道怎么去阅读那些词汇,但是拼写这些词汇对他们来说完全是另外一回事。

Allison Druin(儿童人机交互和技术领域的研究院)发现儿童在搜索的时候会出现很多问题。例如,如果搜索框没有自动完成搜索的功能,较小的小孩(以及非母语的小孩)就会很难正确地搜索。如果没有其他人帮助他们搜索,那基本就不可能成功地完成搜索了。在她的文章(Children’s Roles Using Keyword Search Interfaces at Home)里面提到:

一些复杂的鼠标、键盘和屏幕之间的运动和视觉交互对于小孩来说是很困难的。儿童必须决定要搜索什么,然后输入它(并且需要拼写正确),然后阅读和决定搜索的结果是否有效。

这一场景解释了小孩在搜索过程中遇到什么困难。因此,需要把搜索功能做简单,提供自动完成的功能,并且使得搜索的结果能简化呈现(比如可以使用可视化来呈现结果)。一般地,研究表明较小的儿童(7岁)在搜索的时候通常都是漫无目的的,而且通过键盘来搜索对他们来说很困难(相对于那些能够使用更多负责搜索模式的较大的小孩(11岁)来说。)

为社交而设计

在研究当中,超过30%的儿童会跟其他的小孩一起使用电脑或平板。但是社交行为并不真的需要,如果他们已经在同一个物理空间里面。我曾经在学校里对一群8岁的小孩做研究。毫无疑问,他们都会以一种社交的方式一起使用电脑,他们一起玩,一起看其他人玩。

但是社交环境要可以意味着把视频上传到YouTube或者联网玩游戏。对于较大的孩子来说,评分和评论是很重要的,比如一个叫DIY的网站就很能说明这个问题。在这个网站上,小孩能够分享他们的DIY作品,也可以对别的小孩的作品进行评分和评论。所以,当你为孩子设计一个网站的时候,考虑一下交互和社交的元素吧。

【译文】为儿童设计Web界面

提供信息和说明

较小的孩子(8岁以前)不会等待网站的指示说明年。(实际上也没有人想去阅读说明!)他们都形成了从探索中学习的行为,但是如果他们没有立刻获得成功,他们就会放弃。所以,我们仅仅需要在他们需要说明的时候,提供说明(记得旁白的帮助吧),以帮助他们学习。另一方面,较大的小孩喜欢失败后的提示信息,他们并不会因为犯了相同的错误而气馁和放弃。

【译文】为儿童设计Web界面

在BrainPOP的学习型游戏上,小孩能够在他们需要的时候得到提示

【译文】为儿童设计Web界面

Wonderville的学习游戏Fossil Master是针对较大的小孩的,它提供很少的说明,但是会提供失败后的信息反馈。

寓娱乐于设计:游戏化

儿童最喜欢玩游戏。他们把所有东西都放到游戏里。使用问答和奖励系统以及其他的游戏特性引导小孩吧。

The Fossil Master game是一个很好的游戏化的例子。等级和分数也会是很好的补充。如果想让小孩沉浸其中,那就游戏化你的网站吧。

测试!测试!测试!

最后这一条准则并不真的是一条准则,但仍然很重要。对于任何的项目,测试都是必须的。对如果测试的是孩子,那就完全是另一回事了。因为你不能期望小孩会遵循你的测试说明。

责任

我想用责任这个词来结束整篇文章。儿童很容易被引导去做一些对他们没有好处的事情。他们很容易会被利用。而且他们不能预测行为的结果。作为设计师和开发者,我们有很大的责任。尽管我们基本上是在为他们设计一些东西,但事实是他们没有要求我们这么做。我们所创造的东西,必须能够改善他们的生活,帮助他们变得更加聪明,而不是使他们生活变得更困难。

我们也有责任拒绝那些让我们制造垃圾的客户,比如仅仅是为了从那些无辜的儿童中赚钱。尊重每个人理应是设计的准则。

 

原文:Designing Web Interfaces For Kids

作者:Trine Falbe

译者:ManUx

赞(0) 打赏
未经允许不得转载:IAMUE » 【译文】为儿童设计Web界面

评论 抢沙发

评论前必须登录!

 

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏