CHI2017 交互设计在较热门的研究领域如何继续创新?

什么是CHI?

今天跟大家分享一个学术会议SIG CHI,全称Special Interest Group on Computer-Human Interaction,顾名思义,这是研究人与计算机互动的一个学术会议。但希望大家别被「学术」两个字吓到,因为这个会议是我见过最有趣的学术会议之一,为什么我会这么说呢?

类似这样的会议也有很多,当时我在念研究生的时候,我们主要投的是CHI,UIST,CSCW,TEI等,他们特点都各不同,CHI的成立成立时间比较早,所以东西都很全,有界面设计,服务设计之类的,其他几个则各有特点,UIST(User Interface Software and Technology)主要聚焦于硬件的界面设计,CSCW( computer-supported cooperative work and social computing)偏向计算机如何服务于日常生活,TEI(Tangible and Embedded Interaction)则是更偏向于有形的交互设计。

交互设计怎么理解?

说到交互设计,其实大家都不陌生,大部分互联网公司都会有交互设计岗,主要关注的是数字产品、环境、系统和服务。引用Alan Cooper在About Face里面说到的一句话是:

交互设计在于如何设计行为。

这是很多传统设计学科不曾探讨的,比如建筑关注的是人民如何使用物理空间;平面设计是为了优化信息传递;工业设计在于优化功能、价值与外观。

交互设计与工业设计其实有千丝万缕的关系,工业设计一开始是设计布局,操作方式和机械,主要聚焦的是物理结构层面的东西。随着产品的操作复杂度变高,汽车,电话到家电,计算机,并非所有的设计都只是聚焦在物理结构上,比如信息,服务等等都没有物理表现的内容。所以随着设备结构的复杂度增加,就需要新的一种设计,通过对界面的设计,去影响人的行为。

那怎么样去设计人的行为呢,有很大一部分是需要用户界面来传递的,所谓交互界面就是一种可以让双方传递信息的边界。以我们人类为例,我们人与这个世界的界面,就是眼睛,鼻子,嘴巴,耳朵,皮肤等。那我们常见的电脑,就是显示器,音响,键盘,鼠标等。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自wiki,user interface:Linux_kernel_INPUT_OUPUT

界面的演变

1945–1968: Batch interface(批处理界面)

早期的计算机计算能力不高,当时的执行方法还是拿着一大叠这样的卡片到当地的电脑中心,一张卡片代表一行程序,然后排队等着自己的程序被电脑中心处理、编译并执行。执行完以后,就把一堆bug信息或者执行结果返回给程序员,然后再执行。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自wiki,user interface:Paper_Tap

1969–现在: Command-line user interface (命令行界面)

这种交互界面是在图形界面普及前,应用最广泛的界面。它一般只是使用键盘输入,计算机接到指令后,予以执行。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自wiki,user interface:DEC_VT100_terminal

1968–现在: Graphical User Interface(图形界面)

图形界面也就是我们现在常用的界面,所见即所得,这里不多做介绍,但是其实图形界面依然和命令行界面有千丝万缕的关系,比如我们常见的搜索框,就是图形界面和命令行界面的很好组合。我们输入一行字,界面能马上反馈输入结果给我们,让我们可以用其他的设备去选择与点击。

CHI2017 交互设计在较热门的研究领域如何继续创新?

CHI2017

讲了一些背景知识,我们回到正题,这次CHI2017 我主要分享的三大块的内容,是近几年比较热门的研究领域,第一个是智能手表的交互设计,第二个是触觉的交互设计,第三个是有形的交互设计。

智能手表的交互设计

关于智能手表,这个离我们已经非常近了,很多公司都推出了自己的主打产品。苹果手表支持触屏交互,Pebble Time watch则是一款不支持触屏的墨水屏手表。但是目前而言关于这种非触屏的手表输入还是非常困难的。

这篇获奖论文 ,COMPASS: Rotational Keyboard on Non-Touch Smartwatches ,这篇讲得是在非触屏的智能手表,仅仅靠旋转和点击来输入文字。但如果只是通过旋转来一个一个选字母显然太太慢,通过实验,他们发现屏幕上有三个光标是最快的。

可以看这个图,一开始有三个光标,旋转来选择,通过点击来选择其中一个字母,然后推荐出接下来可能的字母与可能的单词,通过长按来切换字母和单词的选择,在通过旋转转盘和点击来进行选择。在输入过程中如果想删除,就轻甩手表了删除刚输入的字母或单词。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自COMPASS

这篇论文让我觉得很有趣的就是3个光标的策略选择上,首先他们探究了光标的相对位置,相对位置是静止(S-COMPASS)和动态(D-COMPASS)的,S-COMPASS好处是,用户可以预测下一步旋转后光标会指向什么,D-COMPASS则是根据概率来预测下三个字母是什么,减少旋转距离。在光标的数量上他们也测试了1-5个光标。最后得出3个光标的动态COMPASS是最合适的。

COMPASS这种输入方式,对于新手来说大概是10WPM(WPM,word per minute,单词每分钟),练习了90分钟后,能提高到12.5 WPM。

智能手表的痛点在于屏幕很小,Chris Harrison(这次CHI上了4篇),有一种衡量交互能力的方法,交互能力 = 交互空间 * 交互模态(interaction power = interaction space * interaction modality)。交互空间很好理解,比如iPad>iPhone>iWatch,所以智能手表最蛋疼的就是输入输出空间变小,这时候交互模态的多样性就变得尤为重要。这里先要解释一下啥是输入模态,输入模态就是界面的独立传感输入输出通道,包括视觉,听觉,触觉,味觉,平衡。也可以理解成输入的维度,维度越高,线程就越高。

这次另外一篇关于智能手表的论文,就是尝试去增加智能手表的交互模态,来增强智能手表的交互能力。Float: One-Handed and Touch-Free Target Selection on Smartwatches 。这篇的主打的l两个点是One-Handed和Touch-Free。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自float

为什么是这两个点呢,因为手表移动属性要大于手机,可以提供随时随刻地信息交互。但很多时候手表的输入是得依靠不戴手表的另一只手,而且如果用另外一只手输入,也会遇到fat-finger(手指太粗,挡住了大部分的屏幕)的问题。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自google:Fat_Finger

这样在一定程度就抹杀了手表很方便的属性。所以这篇论文把输入的维度寄予在手腕的倾斜(WristTilt)于手指的手势(Finger Gesture)。手腕的倾斜像控制杆一样负责选择,手指则负责点击。这样的设计在一定程度上增加了输入的维度,拓展了手表的输入能力。解决了我们在外面行走,手里撑着伞,骑车时候的交互问题。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自float

触觉的交互设计

这几年另外一个研究热点就是皮肤上的触觉回馈,触觉这个维度的感知通道有几个好处,它的反馈代表真实物体,它的反馈无处不在,所以这两年的热点都聚焦在当我们带上VR设备的时候,需要触觉反馈。或者当我们非常忙的时候,眼睛没空,环境太嘈杂的情况下,今天主要讲一下第一个方向。

首先是这篇,Fingertip Tactile Devices for Virtual Object Manipulation and Exploration 。这篇探究的是在vr环境下,指尖上的触觉反馈,包括抓、挤、压、抬等。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自Fingertip Tactile Devices

这几年有好多触觉的反馈是通过震动来实现的,但是震动只能让人感知接触事件和材质变化,如果想提供力量的反馈,还是需要新的方法。这篇论文设计了戴在指尖上的设备,提供了3个自由度触觉反馈,可以在指尖上移动和按压。经过实验表明,这东西可以在「欺骗」人感知物体的重量,还甚至会因为这种反馈的欺骗,主动改变自己的握力来适应这样的改变。

有形交互设计

最后一个是Tangible Interaction(有形交互设计),这个是我最最喜欢的一个领域,其实当时去台大有两大块领域可以选,一个是虚拟现实,一个是有形设计,之所以不喜欢虚拟现实,其实是个人的执念,觉得这东西太神奇,就像黑客帝国那种感觉。所以还是选择到有形的交互设计。

这个领域最好的实验是是MIT的tangible media group。他们对未来界面的憧憬是这样的:他们把世界分为虚拟世界与现实世界,他们的最小单位分别为Atoms(原子)与Bits(字节)。而tangibe的目标就是让bits尽量用atoms的方式来表达。

所以图形界面我们只能从水面上看到水面下的一些信息,而有形界面就是让bits突破屏障用atoms来表现,这样我们就可以直接控制真实物体来控制虚拟信息,这让我觉得界面有种返璞归真的感觉,以前的交互设备是遥控杆,旋钮,都是真实的,但这些控件只能针对某种操作无法适应复杂的交互需求。而随着目前传感器,驱动器的能力的变强,体积变小,对真实物体的直接操作又变得有可能了。而Hiroshi Ishii(实验室的老大)希望未来所有的原子都是Radicals Atoms都是可以直接为人所操作,成为现实世界与数据世界的桥梁(界面)。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自mit tangible group

这个领域最出名的一篇论文也是这个实验室在UIST2013发表的inFOMR(Dynamic Physical Affordances and Constraints through Shape and Object Actuation )

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自inFORM

这张图就是这篇论文的精髓,第一张图讲得是可以示能的交互控件,这里涉及一个概念叫Affordance(示能),所谓示能就是一个物体的特性来决定这个物欲的预设用途,与它和主体之间的能力。举个例子,门的把手,门可以推也可以拉,那好的门把手应该是,在能推的时候,只提供一个金属门板,在能拉的时候,只提供一个门把手。第二张图讲的是通过对维度的限制,来指导人操作物体,比如一个洞,就意味着要放在上面,比如一个凹槽,就以为这可以在上面移动。 第三张图是一个动态的界面是可以操作物体移动,第四张图是动态的界面可以渲染出真实的物体(虽然像素很低)

这个领域最出名的一篇论文也是这个实验室在UIST2013发表的inFOMR(Dynamic Physical Affordances and Constraints through Shape and Object Actuation )

这张图就是这篇论文的精髓,第一张图讲得是可以示能的交互控件,这里涉及一个概念叫Affordance(示能),所谓示能就是一个物体的特性来决定这个物欲的预设用途,与它和主体之间的能力。举个例子,门的把手,门可以推也可以拉,那好的门把手应该是,在能推的时候,只提供一个金属门板,在能拉的时候,只提供一个门把手。第二张图讲的是通过对维度的限制,来指导人操作物体,比如一个洞,就意味着要放在上面,比如一个凹槽,就以为这可以在上面移动。 第三张图是一个动态的界面是可以操作物体移动,第四张图是动态的界面可以渲染出真实的物体(虽然像素很低)

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自google:affordance door

通过界面的物理变化提供affordance这里我在详细讲下,作者这里把TUI与原来的GUI做了一个类比。比如一个凸起来的柱状体,就意味着按钮,让人想要按压。条状带意味着这当做一个触控条。这二维面板意味着像一个触控屏让人可以移动。单独的条状,就像一个把手,让人希望在z轴方向上下移动(挊)。

示能这个概念是一个心理学家吉普森(J.J. Gibson)提出的,他认为这个世界充斥着线索,大家只要用直接知觉就可以把它们捡起来。我的理解是,示能的好处是当我们使用的时候是不需要学习的,很直接,就像门把手一样。但示能的使用还是需要设计师对人类的一些经验很好地总结,因为示能的能其实还是需要之前的学习的。就像这里的2D Touch Surface,如果以前不知道触控板,其实还有一点点难以理解。

CHI2017 交互设计在较热门的研究领域如何继续创新?

图片来自inFORM

今年这个实验室也发了一篇神奇的论文,我还没看,感觉有点超出我的认知,这里我先把视频贴在这里,大家有兴趣可以看看。这篇论文叫Transformative Appetite: Shape-Changing Food Transforms from 2D to 3D by Water Interaction through Cooking 。

我目前对交互设计还有我自己的一个理解。在大学的时候,有一门设计课,老师问设计是什么,我当时的回答是,设计是为了美化,然后老师的回答是设计是为了「传递信息」,这句话当时刷新了我的三观,也一直成为我职业生涯的一个准则。

所以,从这个准则,我同样把它们适用于交互设计,就是交互设计师通过界面来传递两边的信息。不管是现在很多公司的交互设计师,他们是通过GUI界面来传递信息。还是未来VR AR,TUI界面,变得是界面,不变的是信息。

[1]Cooper A, Reimann R, Cronin D, et al. About face: the essentials of interaction design[M]. John Wiley & Sons, 2014.

[2] Yi X, Yu C, Xu W, et al. COMPASS: Rotational Keyboard on Non-Touch Smartwatches[C]//Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems. ACM, 2017: 705-715.

[3] Sun K, Wang Y, Yu C, et al. Float: One-Handed and Touch-Free Target Selection on Smartwatches[C]//Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems. ACM, 2017: 692-704.

[4] Schorr S B, Okamura A M. Fingertip Tactile Devices for Virtual Object Manipulation and Exploration[C]//Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems. ACM, 2017: 3115-3119.

[5] Follmer S, Leithinger D, Olwal A, et al. inFORM: dynamic physical affordances and constraints through shape and object actuation[C]//Uist. 2013, 13: 417-426.

[6] Wang W, Yao L, Zhang T, et al. Transformative Appetite: Shape-Changing Food Transforms from 2D to 3D by Water Interaction through Cooking[C]//Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems. ACM, 2017: 6123-6132.

作者:林龙飞

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/19623/

(0)
iouedioued
上一篇 2017-05-31 10:12
下一篇 2017-05-31 11:20

相关推荐

  • 价值重估的狗和鱼 一 有趣的哲学文章

    来源:经济观察报    李冬君 有人将庄子与古希腊哲人第欧根尼相比。两人同时,一个在东方,一个在西方,一个喜好在河边钓钓鱼,一个喜欢躺在街上像野狗那样晒晒太阳,在同一个天空下玩耍。   希腊是哲学的国度…

    交互设计 2014-09-21
  • web图像的常见应用策略与技巧

    本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。data-src
    data-srcset
    在加载到的时候更换为
    src
    srcset容器元素的尺寸:elW * elH
    单张图片的尺寸:imgW * imgH
    Sprites图片的尺寸:spritesW * spritesH
    单张图片在Sprites图上的位置:imgPosX, imgPosY点的位置为 (x, y)
    容器上的(x, y)点与容器左上角的距离为 cX, cY
    Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
    cX = sX, cY = sYcX = elW * x
    sX = spritesW * x – imgPosX
    elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
    y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

    2017-05-01
  • 【Sketch切图】系列教程之sketch切图基础教程

    sketch切图效率是ps的几倍,几十倍。因为大部分公司没能给设(qie)计(tu)师(zai)配mac电脑,所以用sketch少,不然我相信大部分设(qie)计(tu)师(zai)都会转移到sketch。 先说说最基础的,在sketch中,一个项目的…

    2015-12-03
  • 《用户体验要素》读书笔记:要理解为何这样做产品

    《用户体验要素》是一本实用类书,试图回答如何以用户体验为中心进行产品设计。作者通过构建自下而上的五层模型:战略层,范围层,结构层,框架层,表现层;来将以用户体验用户需求为中心的设计方式层次清晰的表达出来。并指出;一开始对战略层的深思熟虑,会帮助我们在整个产品设计中节约大量的时间。作者这本书写于pc时代,大多案例都是网站的建设。但是整个思考产品的思路,直到今天;都没有过时。一、 以用户体验为中心设计产品用户体验是指产品如何与外界发生接触,...

    2018-04-08
  • 交互新人眼中的交互设计

    从一开始选择做交互设计这个岗位,我就一直在思考:“交互设计究竟是什么东西”。近段时间以来参加了一些面试,每次面试都会让我去重新思考一下这个问题。加上最近又做了一些工作,看了一些资料,对这个问题又有了一…

    2015-12-25
  • 抽丝剥茧做设计:结构化思维初体验

    我们面对熟悉的问题能迎刃而解,陌生的问题却无从下手。原因是什么?其实是大脑对熟悉问题有已存在的解决结构,而对陌生问题,需要抽丝剥茧重新建立。结构化思维带你快刀斩乱麻,只需四步,建立清晰结构,完美解决未知问题。结构化思维是指一个人在面对工作任务或者难题时能从多个侧面进行思考,深刻分析导致问题出现的原因,系统制定行动方案,并采取恰当的手段使工作高效地开展,取得高绩效。(引自百度百科)

    2017-04-28
  • #UX第四课 我学会了玩玩具

    在同一时间,我成为一个父亲,刚进入UX的世界我,试图弄清楚,如何让我的产品,图象,可以理解的,易于使用的,直观的。我是一个巨大的玩具风扇,还是玩弄他们之前,我的儿子回来了,不过他在家里意味着更多的玩具和更多机会和他生命中的第一个月他观察他的互动玩具。看着他让我想起了和界面设计的普遍经验在我们的生活从一开始,我们如何如果我们打算建立一个可以理解的产品从那些经验特别是学到很多。

    2014-12-28
  • iOS 9设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰(Provide Clarity) 1.1.3 用深度层次来进行交流(Use Depth to Communicate) 1.2 iOS应用解析(iOS App Anatomy)…

    2016-05-18
  • 收福利!5个不为人知但干货超多的交互设计公众号

    这两年随着自媒体时代到来,越来越多的设计师开始注重个人品牌运营,比如发作品到各大平台,总结项目经验,翻译国外文章等等。无论哪种方式,对提升国内设计学习氛围都大有裨益。

    2017-07-08
  • 交互体验设计师竟选择不能抛的捧花 | 真实婚礼

    新娘:@Seiya大鲍鱼婚礼场地:北京阿根廷庄园婚礼人数:120总花费:24w策划布置:6.5w策划:@华尔兹婚礼服务婚礼vendor:5.1w摄影:@ShengVision胜男摄像:@PerfectFilm视频记录化妆造型:@魏臻WeMakeup主持:@李伟MIC甜品:@乡田小墅服饰:3w出门纱:Willowby主纱:Catherine Deane新郎礼服:@殷小小爱喵咪新娘婚鞋:@RogerVivier_罗杰维维亚@Charlott...

    2018-01-30