交互设计:如何设计友善易用的手势操作?

触屏手机给交互设计带来的一大突破,就是更加自然、更接近现实生活的手势操作,比如双指捏屏幕来缩放图片(pinch to zoom)、拖拽图标来整理桌面(drag and drop)等。

交互设计:如何设计友善易用的手势操作?

在app设计中,这些精巧的手势操作也会给用户体验带来趣味感,被设计师们津津乐道。

交互设计:如何设计友善易用的手势操作?

滑动删除手势,来自Dribbble用户Jason:在电商app的收藏单中,用户可以滑动一项商品,从滑块背后展示出删除按钮

交互设计:如何设计友善易用的手势操作?

下拉刷新手势,模拟Apple Mail,来自Protopie用户Leah:在Apple Mail中,用户可以通过下拉刷新邮件

交互设计:如何设计友善易用的手势操作?

拖拽手势,来自Protopie用户Leah:在转账app中,用户可以把转账对象的头像拖拽到某个金额的按钮上进行转账

其他常见手势操作还有:滑动解锁、拼图验证码、屏幕边缘滑动返回、全面屏手势操作、长按进入编辑、双指缩放/旋转、Tinder风左滑/右滑表示喜欢/跳过、拖拽展开卡片、…

但是,在我们欣赏这些有趣的微交互的时候,也需要意识到,这样的操作对于很多残障用户来讲是非常困难、或者是完全做不到的。

这里的残障,不止包括传统意义上的“残疾人”(永久性残障),也包括所有人都会在生活中经常遇到的临时性残障。

  • 肢体障碍的用户(比如手抖、手指缺失、单手用手机、一边走路一边用手机、在颠簸的公交上用手机等)可能无法准确完成手势。
  • 视觉障碍的用户(比如眼花、白内障、眼盲、阳光强烈、屏幕摔碎等)可能因为看不清或看不见屏幕、导致没法在准确的位置进行操作。
  • 认知障碍的用户(比如智力障碍、儿童用户、老年用户、不擅长操作科技产品的用户)可能因为手势操作的affordance不明显、导致“不知道还能这么操作”或者“记不住这种操作方式”。

当然,当你针对障碍用户的需求改进手势设计、避免误触时,不只是残障用户会受益,所有用户操作起来都会更简单、更方便。

那么,怎么能让你的手势操作设计更加友善易用?

我要在这里提出一个测量手势操作易用性的框架。这个框架主要针对触屏手势,但VR/体感/多媒体装置等手势操作也同样可以参考。

这个测量框架部分参考了我的同事Melissa Barnhart(谷歌安卓无障碍用户研究员)的工作。

交互设计:如何设计友善易用的手势操作?

手势易用度测量框架图;内容描述:以下每项考量按照易用性从高到底排序 – 触发面积:全屏幕、半个屏幕、屏幕边缘、大块区域、小号按钮;操作距离:零距离、半屏或更长;方向限制:方向不限、180度以内、90度以内、45度或更窄;时间要求:无要求、需要持续操作;提示:清晰提示、隐约提示、无提示。

01、触发面积:越大越易用

这一项指的是手势开始和结束的的时候,触发这个手势需要触碰的范围。范围很小的话,对手指操作的精准度和视力清晰度的要求都很高,易用性就比较差。

比如,下拉刷新的手势,在屏幕上任何一个地方拉都可以,所以触发面积大。拖拽图标的手势,因为图标本身很小、触发面积也很小。而且,拖拽起始和拖拽结束的触发面积都非常小,难度更是翻倍(反正我一个手眼健全的人,每次整理手机桌面的时候都折腾得想爆粗口)。

交互设计:如何设计友善易用的手势操作?

下拉刷新可以全屏触发:触发面积大 = 易用性高;拖拽图标的触发点只有一个小图标:触发面积小 = 易用性低。

02、操作距离:越短越易用

这里指的是在进行手势操作的时候、需要持续操作的距离。如果距离很长,对手指的力道和灵敏度要求就会比较高、对有肢体障碍的用户非常不友善。

同样是下拉刷新,如果把触发需要拉动的距离设定得短一些,就更容易操作。不过,下拉刷新这个手势的触发面积非常大,所以设定得太短也容易导致用户并不想刷新的时候频繁误触,需要找到比较好的平衡点。

交互设计:如何设计友善易用的手势操作?

下拉刷新的拖动距离:操作距离短 = 易用性高;操作距离长 = 易用性低

03、方向限制:越宽松越易用

这项指的是在进行手势的过程中、对操作方向的要求。

当“下滑”这个操作的检测范围是正下方的180度以内时,用户即便滑得斜一点也可以触发(尤其是单手操作时,滑动方向会非常斜)。方向限制更严格的时候,自然就会更难操作。在VR/体感领域,还需要考虑三维的方向。

交互设计:如何设计友善易用的手势操作?

下滑检测范围180度:方向限制宽松 = 易用性高;下滑检测范围45度以内:方向限制严格 = 易用性低

04、时间要求:越低越易用

这一点指的是 是否需要持续较长时间的操作才可以完成手势。

比如iPhone的全面屏手势操作中,从屏幕下方上滑返回主页这个动作,只要滑一下就好、需要触摸屏幕的时间很短,但是切换app的时候,需要从屏幕下方上滑并且持续按住,这就需要用户的手指足够灵敏、能够持续按住屏幕才可以用这个手势。

交互设计:如何设计友善易用的手势操作?

边缘上滑:无时间要求 = 易用性高;边缘上滑并持续按住300毫秒:持续操作要求 = 易用性低

05、提示:越清晰越易用

这项指的是affordance,或者说是否有清晰的提示来告诉用户如何进行这个手势操作。

很多手势操作都是“隐藏功能”(比如滑动删除邮件):UI上没有任何提示来告诉你可以这么操作。这对于有视觉障碍或者是认知障碍的用户来讲都很不友善。

交互设计:如何设计友善易用的手势操作?

全面屏手势操作:屏幕边缘有色块提示用户可以滑动 = 易用性高;滑动删除一条邮件:在滑动之前没有任何提示表明这里可以滑动 = 易用性低

除了以上5项常见的衡量标准之外,还有一些别的方面可以纳入考量,请结合自身设计判断:

  • 手指数量:单指操作的手势比双指和多指手势更易用(比如电脑触控板的多指手势)。
  • 触碰次数:单击屏幕比双击、多击更易用。很多手指不灵敏的用户无法在指定时间内连续点击屏幕两次。
  • 超时:有的手势必须在指定时间内完成、否则就会自动取消。没有超时、或者超时限制比较长的手势更容易操作。
  • 力道:有的手势需要用更强的力道才能完成,这些不易操作(比如苹果在iOS13之后已经撤掉的3D touch)。
  • 身体部位限制:有些设备开始加入指关节手势、手掌手势等特殊操作,体感设备的操作也会对指定身体部位的动作有比较高的要求,这些易用性都较低。

那么,我们可以用上面这个框架来评测一下文章开头给出的3种手势范例的易用性。以下打分只是个粗略的参考分,非严谨评价。

左滑删除

易用性 – 3.0/5

主要痛点 – 操作面积偏小、无提示

交互设计:如何设计友善易用的手势操作?

左滑删除的打分:触发面积2分、操作距离3分、方向限制4分、时间要求5分、提示1分

下拉刷新

易用性:3.8/5

主要痛点:无提示

交互设计:如何设计友善易用的手势操作?

下拉刷新的打分:触发面积5分、操作距离4分、方向限制4分、时间要求5分、提示1分

拖拽图标

易用性:2.2/5

主要痛点:操作面积非常小、方向限制严格、无提示

交互设计:如何设计友善易用的手势操作?

拖拽图标的打分:触发面积1分、操作距离3分、方向限制1分、时间要求5分、提示1分

如何拯救易用性差的手势设计?

手势操作带来的自然交互和趣味性,对于大多数情况下的大多数用户都是能够提高用户体验的。即便你设计出一个酷炫有趣但易用性不高的手势操作,也并不意味着这个手势没有价值。

当你发现手头的手势设计易用性并不理想的时候,可以考虑以下两个对策:

1. 在不影响设计的情况下提高易用性

考虑扩大触发面积(可点击区域可以比视觉面积更大、提高容错度),放宽操作方向的限制,或者添加提示图标和动画、让用户知道可以进行这样的手势操作,这些细微的改进都能给所有用户带来更好的操作感和易用性。

2. 提供其他方式做到同样的动作

除了手势操作之外,考虑增加其他的操作方式,比如按钮或者菜单选项,让不喜欢使用手势的用户可以通过别的办法做到同样的事情。

这一点对视障用户尤其重要,因为很多常见的手势操作(比如拖拽图标)对使用读屏软件操作手机的盲人来讲是完全无法完成的,但是按钮或者菜单就会好用很多。

比如下图中,Gmail的滑动归档邮件手势就是一个不容易发现、易用性也不高的手势。但是,在打开邮件后,界面中也有一个归档按钮。这样,喜欢用手势操作的用户可以通过手势更快地完成归档,但是不习惯用手势的用户也可以直接点击按钮来归档。

交互设计:如何设计友善易用的手势操作?

左图:Gmail的滑动归档邮件手势;右图:打开邮件后,UI上方的导航栏里也有一个归档按钮可以代替手势

希望以上这些案例能够帮你在设计手势操作的时候考虑到更广泛的用户需求和使用场景。

当我们为了障碍用户做出改进的时候,所有用户都能享受更简单好用的设计。

业界动态

跨平台营销,让品牌广告更效果化!

2020-6-21 17:59:13

业界动态

直播带货的再再思考

2020-6-21 20:21:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索