图解交互设计UI设计师的必修课
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

3.3 交互设计的8大策略支柱

下面将介绍的,就是交互设计师必须了解并且善加运用的8种交互设计策略,它们分别是:制约(constraint)、反馈(feedback)、关联对应(mapping)、能见度(visibility)、惯例(patterm)、一致性(consistency)、个性化(personalization)以及脆弱环节(weak link)。这8种策略能够预防错误、提升功用直觉、增加效率、缩短学习曲线,因此也可以说是交互设计的8大支柱。

3.3.1 制约

制约是一种防止使用者犯错的机制,它的另外一个说法,就是防呆装置。防呆是一种预防矫正的行为约束手段,运用避免产生错误的限制方法,让操作者不需要花费注意力,也不需要经验与专业知识即可准确无误完成正确的操作。广义来讲,防呆就是如何设计一个东西,而使错误发生的机会减至最低的程度。避免工作错误的发生,进而达到“第一次就把工作做对”之境界。

如图3.15所示,这款iF获奖作品“微笑钥匙”就通过防呆设计解决了关于钥匙的4大难题。自然的弧度,更加贴合拇指和食指,用着更舒服;更容易分辨钥匙的朝向—不用再去记忆哪面是正确的朝向,自然贴合拇指与食指的那面,便是正确的;钥匙平放的时候,因为这弧度,更容易被拿起来;钥匙上面有数目不等的凸起小颗粒,用于区分是哪儿的钥匙,比如说,1个小颗粒是办公室的,2个是自家大门的。这在晚上看不清的时候尤其方便,不用再一串钥匙挨个尝试了。

防呆设计经常使用感官替换的方式来进行设计。如图3.16所示,这款杯盖,

图3.15 微笑钥匙

图3.16 通过视觉替代触觉进行防呆的咖啡杯设计

通过视觉替代触觉进行防呆。可以感应杯中液体的温度显示不同的颜色。通过视觉的警示提醒人们此时的饮品很是烫口,避免一时糊涂拿起就喝了。

“人非圣贤,孰能无过”,就算是再熟练的专家,也有失手或闪神的可能,因此制约机制的建立,是交互设计过程中非常重要的一项工作。我们还可以进一步细分,把制约分成强制性、极限性和保险性三种。

强制性的制约,完全不让使用者有任何犯错的可能,例如,计算机内存模块上有一个凹洞,借此确保只有正确的安装方向才能够将它插入记忆槽。数码照相机记忆卡上的切角也有相同的功能,让用户只能以正确的方向插入。许多的数字器材的接头和组件,都会有这种设计,但这并不是一个起始于数字时代的观念,旧式的录音带上也有防呆装置,只要把“预防再录孔”上的塑料片折断,就可以防止将录音带内容洗掉。如图3.17所示为USB防呆卡口设计。

图3.17 USB防呆卡口设计

极限性的制约,则是在系统超载之前,就用自动性的机关去制止系统继续运作。马桶水箱以浮球来侦测水量,在水漫出水箱之前会自动停止供水,这就是极限性制约的典型(图3.18)。这种机制在软件设计也很重要,在程序运算出现超载情况时,必须能够自动停止该程序的运作,以免造成系统性的“停摆”。

保险性制约的概念,则是刻意将操作程序复杂化,减少失误发生的可能性。例如,为了防止孩童不懂事吃错药,许多药品包装设计,会让盖子必须先向下压之后再用力旋转,才能够将盖子打开(图3.19)。为了防止孩童玩打火机,因此使用者必须先按下保险钮之后才能点火,也是同样的保护功能。枪支的保险锁、手榴弹的保险插销,都是这种形态的制约。将保险性制约概念运用在软件界面上,则是在执行关键或无法恢复的动作前,会先以对话窗口来提出警告,让使用者多经过一道确认的手续,之后系统才会开始执行。

图3.18 马桶水箱以浮球来侦测水量

图3.19 药品包装设计要防止小孩能随意打开

谷歌邮箱(Gmail)有这样一个功能。为了防止用户在心情不好、精神不济或者酒过三巡之后,会不小心发出让自己在清醒之后悔不当初的电子邮件,Gmail让使用者可以选择开放“邮件防呆装置”,设定在按“传送”之后,马上会跳出一个询问“确定传送”的视窗。询问内容,是几则必须在60秒之内回答完毕的数学问题,透过这个缓冲程序,一方面可以确定使用者的头脑是清醒的;另一方面也让使用者借机好好想一下,这封信件到底该不该发出。这个防呆装置,就是有趣的软件制约范例。

3.3.2 反馈

另一个交互设计师常用的策略,就是让使用者在操作的过程中,每一个动作都得到适当的反馈反应。用户在按下按钮之后听到一个声响,发出邮件后得到一个确认信息,或者是将点选的档案用醒目的颜色凸显,这些都是常见的反馈机制。它的主要功能在于让用户肯定自己的动作已经产生了效果。如果按了一个选项之后没有得到任何反馈,用户将无法确定系统是否接收到指令,可能会让使用者连续再按几次,甚至因此而造成不必要的错误。

反馈对于软件接口设计特别重要,因为对于用户而言,软件系统的运作是完全隐形的,因此接口必须负责随时对用户提供信息。数字反馈反应设计的最高指导原则,就是反应的及时性。根据研究报告指出,对于使用者而言,在0.1秒以内得到的是实时反馈;若是在0.1~1秒内才得到反馈反应,会让用户感觉系统运作并不顺畅;如果在1秒以后还未得到反馈反应,使用者会认为运作可能已经受到干扰,并且开始臆测系统运作是否不正常;大多数的人,如果在10秒之后仍未等到任何反馈,会认为系统运作已经终止,并且开始尝试重新登入或开机等障碍排除。

在产品设计上,许多的反馈反应会自然发生,例如,开关发出的声响、键盘的触感甚至于东西拿起来的质感,等等。值得注意的是,这种反馈其实还带有暗示质量的功能。例如沃尔沃(VOLVO)的高级房车,连关车门时的声音和重量,都会传达出一种扎实和信赖感。因此,交互设计师一定要了解,反馈除了实际的功能之外,也是建构使用体验的重要一环。

另外一种反馈,则是向用户通报系统运作的进度。最常见的例子,就是在下载文件、安装软件或者执行复杂的运算功能时,电脑屏幕上经常会出现的进度条。还有一个常见的例子是地铁车厢内显示已运行站点的灯带。这种进度的反馈功能,在于让使用者确定系统是否运作正常,同时也会缩短使用者认知中的等待时间。根据相关研究报告显示,设计成功的进度条,能够有效地给使用者系统运作比较顺畅的错觉。而且尽管两者等待时间完全相同,过程中持续加速的进度条,会让使用者感知的进度比较快,反之,进度条如果在过程中出现明显停顿,使用者所感知的速度就会慢(图3.20、图3.21)。

图3.20 设计可爱的进度条

图3.21 地铁车厢内显示已运行站点的灯带

无论你在设计怎样的产品,总会涉及“用户行为与反馈效应”这样的循环。

很多时候,良好而有效的“反馈循环(feedback loop)”是决定一款产品能否取得成功的重要因素。那么,怎样通过精心打造的反馈循环对用户行为产生影响呢?

“反馈循环”在我们的现实生活中是无处不在的,它可以揭示出人们是否做了正确的选择。一个人吃了不好吃的东西会觉得恶心难受,并在未来产生排斥行为;而吃了好吃的东西则会感到幸福香甜。

如果你善待他人,而对方也以同样的方式进行反馈,你就会觉得很开心;如果一个人损害自己的身体,身体就会出问题—我们的大脑似乎就是有一套这样的奖惩机制。

图3.22 反馈循环

反馈循环由以下几个环节组成(图3.22):

① 一个人发起行为;

② 该行为产生一个或多个效应;

③ 其中一些重要的效应会以某种方式反馈给行为发起人;

④ 行为发起人根据收到的反馈继续产生新的行为,规律地如此循环下去。

3.3.3 关联对应

关联对应的概念,就是要设法让操作方式与效果产生正确的联结。如果要将光标移到左边,使用者就必须将鼠标往左移动,这就是很直接而且正确的联结;但如果你故意把鼠标往右转90°,事实上你还是可以操作光标,但鼠标和光标之间的关联对应就会变得很奇怪,鼠标必须往上,光标才会向左移动,因此操作上就会变得很困难。Apple公司的圆形鼠标,因为正圆本身没有方向性,在握的时候不容易找到正确的角度,因此操作就会很困难。

另外一个常见的关联对应例子,就是以位置做联结。如图3.23所示,汽车驾驶座旁边的车窗控制按键,左前按钮控制驾驶座的窗户,右前的按钮控制副驾驶座的窗户,左后方的按钮控制驾驶座后方的窗户,右后方的按钮控制副驾驶座后方的窗户。如此一来,在前、后、左、右的位置上,就得到了合理的关联对应。如果四个按钮排成了一条直线和其所控制的窗户丧失了对应,就很容易造成使用时的错误和操作的困难。如图3.24所示,电梯按钮也是相同的道理,楼层愈高,按钮就排在愈上面,如果反过来把一楼排在上面而顶楼排在下面,这就会造成关联对应的混乱。

图3.23 汽车驾驶座旁边的车窗控制按键

图3.24 电梯按钮的排列

以上所提到的方向和位置的直接对应,是属于自然的关联对应(natural mapping)。另外一种,则是逻辑上的关联对应(logical mapping)。逻辑的关联对应,指的是一种逻辑上的合理转换,比如:高和大、低和小、重和多、轻和少之间,在逻辑上是合理的转换。所以把控制钮往上推的时候声音会变大或者灯光会变亮,这都是合理的联结,反之则违反了常人的逻辑习惯。

如图3.25所示,天猫电器城界面标示,在“综合”选项旁边有一个向下的箭头,在逻辑上,这个箭头代表什么意义呢?它是代表在哪方面上的排序由高到低呢?我们无法确定。这种不确定,就是逻辑关联对应策略错误所造成的混乱。如图3.26所示,国外的梅西购物网站的界面,会发现他们直接用文字标示出“Price:Low to High(价格:低至高)”或“Price:High to Low(价格:高至低)”,这种做法就避免了逻辑关联对应错误所造成的困扰。

图3.25 天猫电器城界面标示

图3.26 梅西购物网站

错误的关联对应,并不会让产品无法使用,但一定会增加使用者的记忆负担和延长操作的学习曲线,这些都是交互设计必须避免的。因此,交互设计师必须非常细心,认真检视每一项关联对应的策略,让使用者能够毫无疑虑地凭直觉操作。

3.3.4 能见度

唐纳德·诺曼(Donald Arthur Norman)在1988年讨论“能见度”的时候指出:功能愈明显,用户就愈容易知道下一步该怎么做。对功能简单的软硬件而言,这很简单,只要把所有按钮都清楚地放在使用者能够一目了然的位置即可。而为功能复杂的系统设计互动,能见度就成了一门高深的学问。因为,如果让所有功能的操控都出现在接口的表层,那为数众多的各种按钮和选项,反而增加了使用上的困难度。

在设计复杂的软件接口时最常见的争议,就是浅宽信息架构与窄深架构的可用性比较。浅宽式的信息架构就是一次看到的选项数量很多,但减少了层级的分隔;窄深式信息架构就是每次看到的选项数量比较少,但却分为很多个层级。一般而言,浅宽式信息架构比较容易使用,因为人类辨认的能力很强,因此很快就能够找到需要的项目;窄深式的架构则会强迫使用者不断做选择,因此可能会花较多的时间。

如图3.27所示专业录音室的控制台将所有的控制键展开在表面,是典型的浅宽式信息架构。如图3.28所示购物网站一般为窄深式信息架构。

图3.27 专业录音室

Microsoft公司在1998年曾经做实验比较三种信息架构:架构一,8个主选项,每项各有8个副选项,每个副选项各有8个内容物(8×8×8=512)。架构

图3.28 购物网站

二,16个主选项,每项有32个内容物(16×32=512)。架构三,32个主选项,每项各有16个内容物(32×16=512)。实验结果发现,架构二比架构三有效率,而架构一则是最没有效率的一种。信息架构的宽度与深度均衡,还应该要考虑内容形态与视觉策略规划。以乔许·贺恩(Josh Hearn)所设计纽约指南网站为例,它虽然是标准的窄深式架构,但选项展开时的视觉变换饶富趣味,而且能够正确地将用户导向需要的页面,因此使用经验上是优美的。

唐纳德·诺曼是单纯地从可用的角度来讨论,因此我们如果从设计策略的角度来讨论能见度,还必须注意的是:使用者在每一个阶段最有可能需要的下一个功能是什么,并且让那些功能适时浮出台面。亚伦·库伯将这种手法称为:顺应使用者需求去变化你的接口(inflect your interface to match user needs)。亚伦·库伯还进一步表示,能见度编排的考虑依据为:使用频率、变化度以及危险度。使用频率高的功能,当然要放在明显的位置。会对接口、内容信息和整体运作造成全面更新或调整的功能,则可以放在比较深的位置,因为这种功能需要时间执行,如果使用者因为不小心按到,而造成不断来回切换,容易造成系统运作上的错误。风险比较高的功能,例如将硬盘重新规格化或是清除记忆体等。这种具有高危险性的功能,也应该放在接口系统的深处,以免误按造成不可挽回的后果。

3.3.5 惯例

有一句谚语:You don't have to reinvent the wheel(你不用重新发明轮胎),意思就是既然已经有人发明了轮胎,你需要这个工具时,就不需要浪费时间和精力重新再发明一次。对于惯例的认识与运用,具有相同的意义。惯例可以从以下两个方向来节省时间增加可用性。

① 从目前市面上类似的产品或接口设计中去芜存菁、找出惯例,能够让设计团队快速地架构出一个设计方针。

② 惯例的运用,让使用者在第一次接触这个设计时,可以倚赖他们过去使用类似产品的经验,不用重新摸索,因此可以缩短学习曲线。

大多数的惯例都有其来由,例如,许多网站都会把按钮设计成具有立体感的图样,这是网络设计常见的简单惯例。而这个惯例的起源,则是因为有立体感的图像,会让用户想起家电用品上的按钮,所以它的功用直觉就很明显。如图3.29所示,许多网站都会把公司商标放在左上角,这也是网站设计的一个常见惯例,而它的来由,则是因为左上角的图标,最不容易因为窗口改变大小而被切掉,而且,大多数人的阅读习惯由左至右,所以左上角是最有效的宣示位置。

图3.29 各种网站

遥控器选台按钮往上按会跳到数字高的台,往下按会跳到数字低的台;音量控制旋钮往右拨声音会变大,往左拨声音会变小;往右的箭头代表放音,两条直杠代表暂停(图3.30),正方形代表停止。这些都是交互设计中的常见惯例,如果改变它或者是逆势而行,就有可能增加使用上的困难。因此,在与利害相关人面谈之后,研究流程里的下一个步骤,就是竞争产品稽核(competitive product audits)。从这个过程里面,除了要找出市面上现有产品设计上的优缺点之外,也要列举出一些常见的惯例。

图3.30 两条直杠代表暂停

但是惯例这个设计策略,可以说是一把“双刃刀”。它的坏处,在于如果你完全依循惯例,这个设计本身就很难有独特性。因此运用惯例策略的重点,在于将它分成以下三个步骤:

① 找出惯例;

② 分析形成惯例的原因;

③ 寻找改进的可能性和合理运用这些惯例的方法。也就是不要一股脑地照单全收,而是要用智慧将既有的惯例提升到另一个层次。

要记住,站在巨人的肩膀上,才可以比巨人看得更远。绝大多数的时候,认识惯例之后将它升华,比从头做起来得更有效率。

3.3.6 一致性

一个国家或机关,最怕的就是朝令夕改,因为这样会让大家无所适从。同样的,在交互设计中,最怕的就是整体设计没有一致性。这样的做法,会让使用者产生混淆。例如,在同一个网站架构之内,字体、用色、构图、文字撰述的态度甚至于照片的形态和风格,都必须有一致性。这个策略有以下三个好处:

(1)能够快速地建立一个明确的用户心智模式

用户心智模式,就是用户对于系统功能和使用方式的认知。这种心智模式的建立,能够让使用者将精神集中在内容或其他需要注意的事项,而不是一直尝试去了解和学习新的互动规则。例如,如果在首页中红色的字是超链接,而黑色的字是内文,在子页面中,这个规则就应该要一直延续下去。如果每一页都有不同的规划,那使用者每一次进入新的页面都必须重新学习,因此大量增加了理解性工作和记忆性工作。

(2)能够快速地建立产品或公司的形象

以统一的设计策略来强化使用者对于公司或产品的印象,这个就是品牌营销的概念。这种一致性,还可以延伸到串联同一个公司的不同产品和服务。例如Adobe公司的软件,不仅在视觉辨认系统上有一致性,而且在操作接口配置上,也运用了相同的逻辑和规则。这种整体性的串联,能够建立专业的气势和风格。

如图3.31所示是谷歌产品的包装设计,一份完整的系列产品,采用了谷歌的颜色调色板,是所有客户都希望拥有的收藏品,产品使用了一种独特的艺术形式、松散的插图,给人一种清新的感觉,从而获得更多的关注。

图3.31 Google系列完整的包装设计

(3)能够突显重点

许多人误以为,改变能够突显每一个视觉元素的独特性。事实正好相反,一致性,其实才是突显重点的第一要件。如图3.32所示,平面上每一个元素都不一样,结果所造成的是一种混沌的平面效果,因为所有的不一样相互抵消,反而丧失了聚焦的功能。如图3.33所示,在一致性中突然出现一个特例,它马上会成为视觉的焦点。这个技巧,被称为是“智能性的不规则”(intelligentinconsistency)。

图3.32 每一个元素都不一样会造成混沌且没有重点的平面效果

图3.33 规律中突然出现的特例会成为焦点

3.3.7 个性化

在讨论优秀交互设计的标准时,资深交互设计师劳拉莉·艾尔本(Lauralee Alben)曾经提出一个称为可变性(mutability)的概念。艾尔本认为,设计师应该要针对将来可能的改变,预留了适当程度的延展性,以及容许使用者用超出预期的方式与产品互动。在科技快速变迁的时代,延展性其实并没有那么重要,因为一个数字系统或产品,在市面上的寿命大多不超过五年。因此,和可变性概念相似但比它更重要的,就是个性化的概念。

个性化这个设计策略,能够让使用者依据自己的需求,来调整互动产品的功能和操作方式。对于初学者而言,个性化并没有特别的意义,因为他们还在摸索的阶段,因此无法有效地理解应该如何运用个性化来提升使用经验。但个性化对于经常使用产品的中级使用者以及专业使用者来说,却是一项非常重要的功能。因为专业使用者喜欢掌控,因此个性化的设定能够让他们得到所需要的操控感。这也就是为什么绝大多数的软件,都会有参数设定(preference setting)这一项功能的主因。

对于经常使用产品的中级用户而言,因为他们知道自己常用的功能或需求是什么,因此个性化的设计策略会让他们的操作更顺畅。如图3.34所示以英国BBC天气网站为例,允许使用者依照个人需要和爱好来添加、来安排版面,这就跳脱了传统用一份设计满足百样人的缺陷,允许科技以更人性、更自我的方式,来服务每一个使用者。

图3.34 英国BBC天气网站

Android和iPhone手机平台的成功,也必须归功于个性化这个设计策略。苹果著名的App Store(苹果应用商店),让使用者可以下载各种不同的软件,以符合自己需要的方式来运用到智能手机上(图3.35)。

图3.35 苹果应用商店

3.3.8 脆弱环节

脆弱环节的概念,就是在系统架构中刻意留下一个弱点,因此在意外状况不幸发生的时候,这个环节会首先故障或损坏,借此保护系统的其他重要部分。旧式电箱中的保险丝,就是一个脆弱环节机制的典型,在电力超载的时候,不耐高温的保险丝就会首先烧断,因而终止继续供电,避免酿成火灾。现代的汽车结构设计中也有类似的机制,在车祸撞击发生的同时,引擎下方的脆弱环节会让引擎往下掉,避免沉重的机件往后方推挤,造成驾驶者的伤亡。整体而言,脆弱环节这个设计策略的终极目标,就是以牺牲脆弱环节来保障使用者的安全。