查看原文
其他

用户行为引导

UI设计达人 2022-05-22

The following article is from AQ思考笔记 Author AQ乔啊

转自:AQ思考笔记(ID:MrKKi_)

作者:AQ乔啊


(图片来自豆瓣网页@渡口无边)


本该是昨天写的,奈何昨天心情稍微有些沉闷,也是静不下心写点东西。今天补上。


还是从做的新需求说起吧。


上周做了一个关于项目配置的需求,具体说来是用户通过平台对项目过程中的文档和交易模式进行个性化配置的功能。下图是产品经理给到的初步原型:


【图一】


大致需求是,在资产发行时可以对【贸易合同】、【发票】、【履约凭证】等等文档/文书进行相关的配置,文档可以多选,上传方唯一,同时可以选择该文档是否必传。


产品经理主要关注的是功能的实现和完整性,给出的原型会相对比较简单粗暴,作为交互设计师,我当然更关注的是用户使用该功能时的体验,具体说来是进行项目配置时是否对配置界面较易理解和学习,是否能在最短的时间内完成相关配置并且完成配置后心中无疑虑。


说回图一,用户第一眼看到的是高密度的信息文本和大量的选项,并且这些选项由复选框和单选按钮组成,无形中又增加了页面的复杂度,整个界面无形中给人复杂且选项过多的压迫感,并且让人不知从何处开始。


拿到这个需求时,“如何简化页面?如何对用户的配置行为进行合理的引导?”是我主要考虑的问题。


针对「简化页面」,当前页面上呈现的内容是用户进来时就必须看到的吗?我们细看各信息要素之间的关系,发现用户在开始配置时并不是需要看到全部信息要素的,比如文档配置中,用户关心的第一要素是文档,第二要素才是文档的上传企业类型;又比如在确权配置中,用户首先关心的是大的确权模式,其次才是该模式下的具体配置。按照这个思路,我们完全可以将次级信息或者叫做二级关联信息隐藏起来,这样一来界面简化 了很多。


再多说一点,如果我们对信息不做层次的区分,将「一级信息」和「二级关联信息」一次性全部展示给用户,我们就要考虑更多。比如当用户没有勾选某文档时,该文档关联的企业类型是否禁用不允许用户选择,还是允许用户选择--且当用户选择企业类型后同时默认勾选相关的文档?这些不仅是设计需要思考的问题,同时也增加了产品的复杂度,且容易在用户使用的过程中造成不必要的理解成本。


再说一点关于信息分层的问题,该案例中的资产发行配置,「文档类型」和「企业类型」就是两个层面的信息要素,将哪种信息作为第一层次的信息是我们需要考虑的。在这次的需求设计中,最初我们将企业类型作为第一层次的信息,却发现在这种设计下会无端增加操作的复杂性,遂调整了两种信息的层次。


上面我通过对信息进行分层对次要信息进行隐藏实现了简化页面的目的,但同时我发现当我对信息进行了必要的分层和差异化的展示后,简化后的页面已经能够自然地对用户进行适当的操作引导了。


通过理解各个选项之间的差异,对不同性质的选项做差异化的处理,比如“必传”和“非必传”是不同于“供应商”、“核心企业”、“项目公司”等企业类型选择的,所以我们就可以对必传和非必传做差异化的处理,从而进一步简化页面。


重新设计后的页面如下图所示:

【初始状态】


【渐进式呈现】


将必传选项和企业类型选项在空间上进行隔离,使用户更加直观的对两者进行区分,同时根据实际场景中的惯例,对必传项进行了默认值的分配,简化了用户的操作。


上面截图中我有说到【渐进式呈现】,这是一个老生常谈的话题了,今天重新提,除了渐进呈现可以简化页面减轻用户的心理压力,同时也是一个用户引导的利器,渐进的信息层级引导用户一步步深入,从简到繁、由易到难。


说了这么多,好像和标题【用户行为引导】相关的内容并不很多,其实并非如此。


以前我总觉得用户行为引导是很显性很强化的模式,比如用一个呆板的蒙层配几句文案或者几幅插图告诉用户如何操作,比如通过弹窗指引用户如何进行下一步,这些确实很容易让人感知到,但总显得很刻意,且常常让人反感。


通过这个案例的设计,我体会到对用户行为的引导其实是渗透到交互设计中的每个环节的,并非需要我们每次打开一个“开关”然后告诉用户:“现在我要开始对你进行引导了”,小到一句文案一个词语,大到流程设计和页面布局,都是我们对用户行为进行引导的绝佳时机。还有很多对用户的引导就融在我们日常的设计中,因为太过于平常反而容易被忽略,比如对用户从上至下、从左到右的阅读习惯的利用,比如对用户对于色彩敏感的视觉效果的利用,都是对用户进行的一次又一次的行为引导。这些很平常却很实用的用户行为引导优化了我们系统的整体用户体验。


大道至简,设计也是如此吧,将对用户的体察融入到每一个细微之处,让用户在不知觉中顺滑的使用。





推荐阅读

(点击标题可跳转阅读)

移动端和PC端交互设计上的区别

独家揭秘淘宝折叠屏设计内幕与适配开发

带着疑问学配色?CMYK配色法,UI高级进阶必备!!!




关注『UI设计达人』

看更多精选UI设计文章

↓↓↓

好文章,我在看❤️

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存