1. 主页 > 设计资讯 > 行业动态

交互设计师应该理解的预判断设计

编辑指南:预期设计是一种有效的设计方法,可以引导用户,缩短他们的行为路径。预判设计可以让功能根据用户的行为/用户的场景主动找到用户,让用户自然地与之交互。本文从七个维度对预判设计进行深入分析,希望对你有所帮助。

一、关于预判设计

本文的内容是“预判设计”。在此之前,我想说说我们日常生活中常见的用户操作路径。用户在使用产品时,往往会产生操作目标——找到操作对象——执行相应的操作——完成操作。

这种运营模式符合我们对大多数产品的认知。交互设计师在设计用户行为路径时,往往以功能为出发点,按照功能的优先级进行排列,让用户在界面中找到功能并进行操作。本质上取决于用户的主动触发。一般来说,如果用户不主动触发,就不会有后续行为。

设计心理学中提到,用户在操作一个设备时,会面临两个心理缺口:一个是实现缺口,用户试图弄清楚如何操作;另一个是评估的差距,他们试图找出设备处于什么状态,他们采取的行动是否达到了目标。

交互设计师应该理解的预判断设计(图1)

预测性设计侧重于解决第一个缺口:实施的缺口。随着产品功能的复杂化,界面中的功能元素和信息元素越来越复杂。有时候,用户在一个界面中找到并操作某个功能并不容易。预判设计可以让功能根据用户的行为/用户的场景主动找到用户,让用户自然地与之交互。

交互设计师应该理解的预判断设计(图2)

比如我们经常会遇到填表的场景,填写信息的过程往往繁琐费时,不愉快。

交互设计师应该理解的预判断设计(图3)

按照常规操作方式,即填写收货人、手机号码、地点、详细地址等。,设计师会在设计表单的过程中优化输入方式,但这些都只是基于先用户操作再交互反馈的设计。

交互设计师应该理解的预判断设计(图4)

在此基础上,预判设计在创建新的投递地址时考虑了场景的多样性和用户的行为。比如你给朋友买过东西吗?朋友通过微信发了收货地址,如果我通过来回切换淘宝/微信复制/粘贴输入收货信息,这种体验一定很绝望。

并且如果复制了发货地址,打开新的发货地址界面,App会弹出提示“要不要粘贴新复制的地址信息?”点击“确认粘贴”,将投递地址粘贴到对应的列表项,用户自然愉悦。这个设计现在已经被广泛使用,比如JD.COM,淘宝,顺丰等等。

第二,区分预判设计

首先,预判设计是基于用户的,即系统预测用户会做什么,帮助用户缩短操作路径。虽然整个过程是由系统发起的,但符合用户的整体预期。但如果只是由系统触发,与用户当前行为无关,则不是预判设计。

交互设计师应该理解的预判断设计(图5)

比如操作弹出窗口会在用户第一次进入App时弹出,只符合系统主动触发的特性,但用户对弹出窗口没有期望,容易形成干扰,不符合预判设计的特点。

交互设计师应该理解的预判断设计(图6)

同样的弹出窗口在app打开时出现,但淘宝的好友分享弹出窗口不一样,是常见的预判设计链接。手机淘宝不能通过微信直接调好。微信上的朋友看到一个产品,复制淘宝密码通过微信发给你,你复制淘宝密码打开淘宝,App自动弹出分享弹出窗口。这个行为路径是相关的,可以预测为“打开淘宝,查看好友分享的产品”。

三、行为和场景的预判设计

用户的交互行为是多样的,如复制/剪切、截图、手势(如晃动)等。理论上讲,可以为用户的各种行为提供预判设计准则。

预判设计与用户行为和功能场景密切相关。换句话说,系统可以根据用户的操作行为或用户的场景形成合理的预判;否则,很容易引起用户的反感。同样的行为,在不同的场景下,会有不同的预判设计方向。

1.淘宝截图在搜索场景中预判

交互设计师应该理解的预判断设计(图7)

淘宝有强大的图片搜索功能。我们在使用淘宝的时候,会有用图片搜索东西的习惯,但是淘宝并不是单纯的提供一个图片搜索的入口。用户截图或保存图片到手机后,短时间内触发搜索功能,搜索框中的图片搜索按钮会自动提示“您可能搜索的照片”,点击即可直接搜索。

淘宝会判断用户想搜索最新图片,因为“保存图片/截图-搜索”的行为具有潜在的强关联性。基于预判设计,用户无需点击图像搜索按钮——选择图像,缩短操作路径。如果用户手快或者自己点击图片搜索按钮进入图片搜索功能页面,提示依然会出现。

这种形式的预判是非阻断性的,只是作为辅助建议,而不是强制提示。即使用户不想点击预测图片,也不会影响操作过程。

2.淘宝截图在其他场景中预判

交互设计师应该理解的预判断设计(图8)

同样是截图操作,淘宝其他场景有不同的预判互动。比如淘宝的产品列表页面截图,截图的提示已经不仅仅是搜索同一个图片,还有“好友分享”、“问题反馈”等操作。

原因是用户在这个场景中有复杂的潜在交互行为,而搜索场景更侧重于图片搜索行为。可以看出,行为与场景密切相关,即使是相同的交互行为,在不同的场景中也有不同的预测方向。交互设计师在设计时要注意行为和场景的关系。

在某些特定的场景中,预判设计并不一定要通过用户行为进行预判。

交互设计师应该理解的预判断设计(图9)

以广东省为例,广东省保存小程序的很多功能都与地理位置有很强的相关性,不同的地理位置会影响显示信息的可用性和准确性。当用户所在城市的位置发生变化时,即使用户不做任何交互行为,广东省也会假设用户需要基于正确的地理位置才能正确执行相应的操作。

一般来说,即使位置信息跨省/市变化,用户也不会意识到在小程序中切换自己的城市,如果不切换,小程序的体验也会受到影响(广东省社保基金等信息与城市有很强的绑定性)。因此广东省省事,通过获取地理位置信息主动提示用户是否切换到当前城市。

支付宝信息推荐的数据也是基于地理信息。它检测用户所在城市的变化,并给出主动提示,但提示水平较弱。它采用底部提示栏的形式,不遮挡用户的主要行为路径。

四、预判设计的作用

预判设计对体验和业务都有积极的作用,比如帮助用户缩短运营路径,关注价值信息,促进业务转型,下面用常见的设计来说明。

第五,缩短运营路径

预测设计是一种主动交互,最明显的作用是缩短用户交互路径,降低操作复杂度,最终目的是降低用户操作成本,改善交互体验。

1.Chrome浏览器搜索时主动提示

交互设计师应该理解的预判断设计(图10)

搜索是浏览器的核心功能。在搜索这类场景时,需要仔细挖掘出微妙的交互细节。当用户在Chrome浏览器中搜索时,浏览器会检测到用户是否刚刚复制了文本,如果是,则以轻量级搜索关联的形式提示“你复制的文本”,用户可以直接点击进行搜索。

用户复制了文本——点击搜索框,这两种行为之间存在关联。Chrome预测用户会搜索贴纸的文字信息。这种主动提示比用户手动点击搜索框两次再粘贴文字更方便,降低了操作成本。

2.网易云截图分享

交互设计师应该理解的预判断设计(图11)

用户通过网易云截图后,App会主动提示用户与好友分享截图,提供分享的渠道和方式,让用户一键分享,然后手动切换到与其他应用分享的繁琐流程,无需截图。

截图后提示用户分享的设计形式在各大互联网产品中已经非常普遍,也属于预判设计。网易云音乐重视社交,很多用户都有截图后分享的习惯,比如分享歌词。截图+分享的模式对于缩短用户路径或者分享产品曝光度有明显的好处。而且这种模式通用性很强,可以被很多产品使用,所以这种设计在很多产品中都可以看到。

3.iPhone闹钟关闭提示

交互设计师应该理解的预判断设计(图12)

当用户在iPhone上设置唤醒闹钟时,如果系统检测到用户在闹钟响起前一段时间正在操作手机,会弹出一个弹出窗口,提示“你好像醒了,要不要关掉闹钟?”,询问用户是否关闭尚未响起的闹钟。

作为上班族,估计很多朋友会设置几个闹钟,避免一个闹钟吵醒,还会因为白领迟到而买单。但是,如果你一觉醒来,发现身后的闹钟忘了关,洗漱的时候闹钟突然响了。IPhone通过检测用户使用手机的行为(很多人在起床前玩手机是一种习惯),可以预测用户是醒着的,并弹出相应的提示,可以避免用户忘记关掉闹钟,帮助用户缩短关掉闹钟的路径。

4.iPhone验证码粘贴设计

交互设计师应该理解的预判断设计(图13)

IOS 12推出了短信验证码粘贴功能,这是一个网民的功能,然而我们在她开始向我们走来之前打了一千次电话,催促了一千次,也就是说,当你的iPhone收到短信验证码时,IOS的输入法上方会出现“来自短信”和验证码的提示,你可以直接点击粘贴。

在iOS 12之前,iPhone收到验证码后只能手动输入,而Android很早就可以直接复制验证码。虽然这是输入的一个小细节,但是对于很多用户来说是非常不舒服的。用户接收验证码——输入验证码应该是一个非常清晰的过程,是一个很明显的预判路径,所以使用起来特别方便。

5.微信输入手势取消

交互设计师应该理解的预判断设计(图14)

用微信打字的时候,如果想清除空所有的文字,不需要一个字一个字的删除,只要摇一下就可以撤销。

这是一种隐性的互动。当用户输入字符时,手机处于相对稳定的状态,所以在大多数状态下不会触发这个操作。当出现抖动手势时,App预测用户的输入行为已经中断,然后以弹出窗口的形式提示用户是否取消键入的内容。

6.微信发图片提示

交互设计师应该理解的预判断设计(图15)

用户截图手机/保存图片后,用微信升起输入框,然后点击右侧的[+]按钮,会提示是否发送当前图片。

微信的这个操作类似于上面淘宝搜图指南。如果每天截图后点击输入框,就不会有发送图片的提示,因为输入文字信息/发送语音是常见的操作。当用户点击[+]按钮时,发送图片的潜在行为被激发,有明显的可预测性。

7.Evernote

交互设计师应该理解的预判断设计(图16)

Evernote有素材库的功能。用户在素材库中存储图片时,可以在Evernote的多端同步。用户截图后,如果打开Evernote,会弹出是否将截图添加到素材库。

App会预测用户的目标是采取与图片相关的动作。对于不了解素材库的用户,可以通过这种自然的提示交互,了解素材库的功能,增强用户对产品功能的理解。

第六,关注关键信息

预判设计除了缩短用户路径外,还可以通过用户行为对用户关注的内容进行预判,帮助用户关注关键信息,避免分散用户注意力,使有价值的信息得以充分展示。

1.野生动物考察

交互设计师应该理解的预判断设计(图17)

当用户通过Safari浏览器向上滑动时,浏览器会隐藏顶部导航栏和底部操作栏;当用户向下滑动时,导航栏和操作栏同时出现。

在这个设计中,预测用户在滑动浏览行为(正常浏览)中关注界面内容。此时,为了聚焦关键内容信息,充分展示内容,隐藏了与当前行为相对无关的信息。然而,当用户停止正常滑动行为并执行反向操作(向下滑动)时,所关注的目标改变,并且此时可能执行其他操作,因此正常显示导航栏选项卡和其他信息是很自然的。

2.夸克

交互设计师应该理解的预判断设计(图18)

用户在通过夸克搜索精确词时,会根据词优先推荐关键信息卡片,这样用户就可以快速关注这类卡片,不需要在很多联想词中找到符合搜索目标的词。

夸克的搜索关联状态经过特殊处理。如果用户搜索不精确的词,App无法准确判断用户的搜索目标,因此只显示文本关联信息。当用户的搜索词能够被准确预测时,关键信息卡将重点放在关键信息上,以提高用户搜索的效率。

3.淘宝搜索关键词

交互设计师应该理解的预判断设计(图19)

用户在淘宝搜索关键词时,这些产品除了搜索关联外,还会根据搜索词给出更准确的搜索预测,这在风格上有别于普通的搜索关联。

该设计基于搜索词算法本身的关联预测,帮助用户快速找到有价值的信息。

第七,加强业务转型

预判设计对商业化的影响是毋庸置疑的,因为这种设计可以将行为与商业推荐紧密联系起来,让用户产生“与我有关”的感觉,减少用户的反感、突兀感和广告感。

1.淘宝信息流卡

交互设计师应该理解的预判断设计(图20)

用户在淘宝信息中点击感兴趣的商品卡,返回信息流后会根据用户对卡的点击推荐该卡,并推荐邻卡。

理论上,用户的触发与动机密切相关(偶然触摸行为除外)。所以在浏览淘宝信息流的时候,如果用户点击了一个产品,就可以说明用户在一定程度上被当前的产品所吸引。因此,点击查看产品后,通过用户的行为来预测用户喜欢的产品类型,并进行相应的显示,这也有助于产品推荐的转换。

2.美团外卖

交互设计师应该理解的预判断设计(图21)

美团取出的信息流卡与淘宝的预判设计逻辑一致,也是根据用户行为推荐的。

3.TapTap网站

交互设计师应该理解的预判断设计(图22)

当用户在taptap中浏览视频时,如果他在视频流中播放游戏视频时停留几秒钟,视频下会以动画的形式显示一个清晰的跳转条目,用户可以点击查看更多。

这种设计最早应该出现在ins等产品中,在国内绿洲等产品中也有采用。奇妙的是,一开始并没有直接显示门户,而是在预测到用户对当前视频感兴趣后给出了轻量级的提示。

八.结论

本文介绍了预判设计的常见形式,但实际上它被广泛使用。预判设计并不神秘,在我们的日常产品中经常可以找到。

预判设计更注重交互过程的优化,在显示上往往不是“正常状态”,而是“暂时状态”,让功能在合适的场景中找到用户,而不是依靠用户主动去寻找功能,从而降低用户的运营成本。也正是因为如此,这种设计形式非常巧妙,让体验更加流畅。

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/jhsj/563.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息