一个列表

菜单
插图一个人跑步,跳,和下降

插图的苏洛克伍德

设计更安全的网络动画的动态灵敏度

这已经不是什么秘密,很多人认为scrolljacking和视差效果烦人和滥用。但是,如果运动不仅仅是骚扰你吗?如果它也使你生病了吗?吗?

继续下面的条

这是一个现实,visually-triggered前庭障碍患者必须处理。为界面动画逐渐成为常态,越来越多的人开始注意到大规模的动作在屏幕上可以使他们头晕,恶心,头痛,或者更糟。对一些人来说,动画结束后的症状可以持续很长时间。呵。

动画的想法在我们的界面可以让用户晕不是我们不得不面对网络时主要是一个静态的媒介。它实际上是一个相当新的启示在大多数科技圈。甚至苹果公司发现这是iOS 7中的动画过渡开始让一些人得了病。就像其他元素的设计,你用动画的方式会影响如何可以访问最终产品是你的听众,特别是如果他们遭受前庭障碍。

本国vesti -一个采访时表示什么障碍?吗?

任何疾病,伤害,或伤害在我们的内耳前庭系统系统和大脑处理感觉信息参与控制平衡和眼睛movements-falls的伞下前庭障碍。有一长串的特定的前庭障碍,包括良性阵发性位置性眩晕(BPPV)和内耳炎。的a11y项目探讨前庭障碍的定义

这些疾病可以影响所有年龄段的人,个体与个体和严重程度和症状不同。估计一个确切的人数是感动,更不用说多少百分比的你的特定的观众可能受到影响,很难确定。根据vestibular.org,大约有800万美国成年人报告慢性问题的平衡,而一个额外的240万报告慢性眩晕的问题。

同样值得注意的是前庭障碍患者并不是唯一可能引发的动画在屏幕上。动画会影响癫痫和偏头痛患者敏感性。

识别潜在的触发动画

为了更好地了解各种网络动画引发前庭障碍患者,我聊天格雷格·塔尔诺夫负责这事克雷格Grannell了解他们的经历。格雷格,谁经历眩晕和偏头痛,是一个可访问性和用户体验顾问,作家,和扬声器。克雷格,谁经历眩晕,是一个作家和编辑,他曾写过关于iOS的动画等出版物的影响《卫报》。他们两人一直直言不讳的界面动画如何影响前庭障碍患者。

格雷格确认Vimeo的浮雕,,冰和天空,和路建设麻烦由于大面积的运动和背景和前景的parallax-like影响移动速度不同。

克雷格,投影机在Apple.com上构成一个大问题,尤其是电影回到第一张图片。没有控制暂停或停止,特定的旋转木马,所以没有办法避免它。

iPhone产品页面,与其parallax-ish背景动画和scrolljacking(速度与你无关的背景动画滚动工作),导致问题。

克雷格还描述了水平滚动维基百科为“一个令人讨厌的惊喜”如果你不准备它。看到一个巨大的水平转变当你向下滚动当然是一个激烈的偏离预期。

相比之下,,华丽Solarbeat特点是只“有点烦人。”和金刚鹦鹉朱红色网站不是太大的问题超出了小问题打开动画。

不同的人有不同的条件和反应,当然可以。但这些例子表明,触发更微妙的比人们认为如果一个人只是假定任何或所有动画都是有问题的。三个因素,特别是,扮演着重要的角色:运动的相对大小,的方向运动,和感知距离动画对象。

相对大小的运动

动画移动对象在大量的空间是最容易引发消极反应的人遭受前庭障碍。的物理大小屏幕的大小更重要运动相对于与3 d屏幕空间,所以一个小按钮旋转可能不会带来麻烦,但是全屏覆盖整个屏幕可能会擦过渡。移动属性动画只涉及,像不透明,的颜色,模糊了,不太可能是有问题的。

不匹配的方向和速度

夸张的视差和scrolljacking动画极有可能被触发。大部分的时间,这些影响包括背景物体比前景对象,以不同的速度移动有时大大。动画不同于用户滚动的方向移动,或者在某种程度上不直接联系用户滚动的速度,也往往是有问题的。这不是很大的伸展可以迷茫。

距离覆盖

空间距离的数量由一个动画也是一个因素。它的虚拟空间,当然,但动画覆盖更大的感知距离可以触发。例如,,iOS 7的3 d缩放转换造成的麻烦因为虚拟空间的数量如此之快。

你的大脑在动画

这并不是说我们不应该使用动画在我们的网站。没有一个人告诉我,他们想看到所有接口的动画了。事实上,一些人仍然非常感谢从设计的角度来看。

一个好的动画解决方案常常而已感觉喜欢它的易于使用和理解。不仅仅是一个肠道感觉背后的科学,太!!

在一个基本的层面上,动画元素的运动使其路径显示在屏幕上。用户不需要跟踪的运动。相反,这一努力基本上是由专门从他们的大脑在屏幕上创建动画。当你减少认知负荷,你免费用户的工作记忆资源专注于其他美国会衰落学习新技能保留信息

在认知负荷的好处之外,其他的研究表明,动画可以提高决策(PDF)甚至帮助人们学习和记忆空间关系(PDF)。国家间的动画也可以帮助预防变化盲。简而言之:动画可以释放你的脑力,让界面更容易理解的好处是不能忽视的。

设计更安全的运动

有几件事我们可以做一个动画运动对人发现它触发。

是有目的的

UI动画应该设计目的和原因的存在。(这是给定的,对吧?)如果你的部分界面移动,应该有一个等原因。有很多方法可以添加动画用户体验除了讲故事与实证能力。从深思熟虑,有目的的运动也让你访问的动画。

提供有意义的上下文

一个链接被宣传为“有史以来最spintastic WebGL实验”可能包含大量的运动,人们作出明智的决策是否遵循该链接是值得冒这个风险。

但并不是所有的动画都是隐藏在链接。识别上下文时复杂运动变得越来越普遍。没有合理的期望遇到移动content-large运动新闻文章,例子人遭受前庭障碍可能会发现自己处理意外出现症状。

如果你不确定是明确的,添加它明确可能有所帮助。的a11y项目建议提供“的一项指标在网站上运动将会发生什么当用户采取行动。”设置用户的期望是很重要的。

给用户控制

如果你有大量的运动,包括大量的视觉,考虑提供一个选项来关闭,或减少,运动。有很多情况下,大量的动作完美的设计意义。提供什么本质上可以归结为另一个观点,即内容的方式,或一点额外的控制,可以是一个很大的帮助对于任何敏感运动。

这可以通过一个按钮或拨动开关完成减少或关闭动画全球站点上。把它想象成暂停控制WCAG建议对动画和应用他们在全球范围内。这确实需要一些更多的工作在你的一部分,但它提供了一个重要的选择。如果这意味着之间的差异能够花时间和你的内容,即使是少量的用户,那是值得的。

多少工作需要实现基于web的切换不同动画选项(或选择)你用的,当然可以。作为探索这个想法,格雷格·塔尔诺夫负责这事的原型开发潜在的拨动开关可以使用任何网站。

一个简单的切换,一贯在许多网站方便有人敏感动画快速、轻松地减少动画。如果这是你想看的东西,同样的,叉笔和增加了的想法。这种事情只能改善更多的思想贡献。

从浏览器一点帮助吗?吗?

即使你有最好的意图,你可能没有技术技能或完成一个有效的动画切换的时间。虽然它是一个负责任的做法,潜在的工作需要开始让它感觉就像一个临时解决方案。

格雷格的切换的解决方案是一个很好的方法,但浏览器可以提供一个更普遍和容易实现的版本。我们的浏览器可以通知用户高度动画的内容,而不需要任何额外的更改或工作的开发人员。

浏览器通知动画页。

更细粒度的控制可能来自提案用户查询用户上下文。浏览器可以让开发人员自定义所需的行为motion-full和motion-light版本的网站根据用户偏好的API公开。

解决这个问题在浏览器级最初可能不是牵强附会。多亏了网络动画API,我们已经有了一些非常有用的控制在Chrome和Firefox的开发工具在全球范围内暂停和播放动画。一个面向用户的版本,这将是一个大的一步给用户控制他们遇到多少动画。

2015年4月,谷歌发布的可访问性动画控制扩展Chrome的目标图像格式如gif和SMIL动画SVG。结合,与全球控制在开发工具,和基于浏览器的可能性控制听起来并不太遥远。

从我告诉那些真正需要它,iOS的“减少动画”切换亟待改变。浏览器可以做得更好吗?我希望网络解决这个问题的方式显示了操作系统制造商谁是老大。

让美好的新事物,负责任的!!

在网络上,比其他任何媒介,你设计的灵活性和控制有创造性的和负责任的在同一时间。我们绝对可以创新和推进web设计强大的界面动画,同时负责设计师。作为一个网页动画师,你可以有你的动画蛋糕和吃它也有点创造性思维。

11读者评论

加载评论