模态指主页面上临时弹出的弹窗,让主页面处于不可操作的状态,在弹窗层进行相应交互后方可返回主页面。模态弹窗最初应用于PC端软件、网页,如今模态弹窗在移动端也得到广泛应用。但模态一直是产品设计者有争议的话题之一,不恰当的使用会对产品用户体验产生破坏。
模态模态存在本身就是破坏用户操作流。流(flow):当人们全身心投入某个活动时,会对周边视而不见。这种状态称为“流”。(摘自《流:最优体验的心理学》)而模态出现就是在用户操作流过程中被打断。因为用户按照这样的流进行操作流程不符合程序的输入规范或者达不到自身预期结果,还有程序目前不能让用户进行操作的状态等。例如一些被动的模态在注册账户时会有提示账户名称必须是多少位,密码错误会有提示错误或者是否忘记密码,程序在加载中等等。再例如一些主动的模态,用户在用手机买东西在主屏上找不到想要的物品,这时会主动调出模态窗进行筛选(亚马逊就是这么做的)。
不恰当的模态破坏体验
不恰当的调出模态弹窗,尤其是在用户被动情况下非常让人恼火。当我的设备网络不佳进入到一个页面总有一个大大的加载黑框挡在页面前面,难道你就是想让我看这个?登录一个账号时又出现一个大大的黑框“正在登录中”,难道我不知道我在登录吗?当我输入信息错误又弹出个模态窗,作为一个为我服务的软件为什么要这么强势的数落我?
不要站在实现模型上设计产品
有些程序不停的告知用户当前程序的进度,“正在登录”“记录已保存”“内容已更新”等等。这些对于程序来说十分重要,出现了这些提示表示一切运行正常,输入信息执行操作返回信息,程序员们很喜欢看到这些。但这些程序上的琐事用户并不关心,他们只想看到结果。所以不要频繁的用模态来告知用户当前程序的进程如何从而打扰用户使用过程。
面对模态弹窗无所事事
用户在等待加载的过程中只会看待一个大大的“正在加载”模态弹窗无疑增加了用户等待时间。人在忙碌、有事情做的时候感觉时间过得很快(《100 Things Every Designer Needs to Know About People》里面对这个理论有很好的证明),所以不要在屏幕中只显示一个单调的模态弹窗让用户无所事事的等待,这样等待3s用户都会觉得是一年。
蛮横的模态让用户交出了控制权
人们需要感受到一些尽在控制中,并且希望有更多选择。人都会犯错而不恰当的模态抓住用户错误不放,错一次我弹你一次让用户觉得程序凌驾于自身来数落自己而不是用合理的引导来改正错误;更有甚者用户操作后弹出模态,之后只能等模态消失并不能进行其他操作极大的限制了用户使用自由(当然这种情况有些是必要的,如在进行汇款付费的时候),这都会让用户觉得他已经丧失了对软件的控制能力。
使用其他方式替代不恰当的模态
多使用状态来报告进程
不要一遍遍的用弹窗来报告用户现在程序进行到哪了,用户用软件是有事情要处理没空看你的报告,多使用页面不同状态的样式来告知用户。如:“无法连接服务器”不要报告给用户,在页面内容上体现无法连接的状态样式,把网络关掉看看微信是怎样提示网络故障的。
让用户有内容可以看
有趣味性的加载样式
很多软件采用有趣味性的加载动画,在设计平台上搜索这些内容会有很多(设计师们仿佛乐此不疲拿加载动画来炫技)。目的就是让未加载的空页面有内容可以看,打发这无所事事的等待时间,优秀的动画显示三秒消失后可能用户还觉得没看够。
Flicker Drippler显示一部分缓存内容或采用分步加载
当页面内容很多往往先显示出来一部分内容让用户有东西可以看,别急,接下来的内容马上就加载出来了。Medium是个典型的例子。
Medium个人主页第一步先加载出title 第二部加载出个人的历史记录更高级的空白页展示样式
页面没有加载出来并不显示空白的页面,而是显示内容前期的雏形和结构样式,产生一种内容已经加载出来只是没完全显示的错觉。
Facebook的加载过程中显示了内容的结构样式 Pinterest的加载过程中显示了图片的主色调提供无模态反馈
综合以上几点其实通知用户的最好方式就是无模态反馈,将提示状态直接在页面中显示。并不刻意将用户的注意力强行拉到跳出的模态弹窗上,而是保留在操作的页面上,直接在当前界面反馈结果。用户可以修改,可以返回可以掌控程序的进程。
Facebook的登录请求 Tumblr的邮箱验证提示 MD的报错设计规范最后在产品设计中谨慎使用让用户跳出当前页进入模态的情形会大大提高产品的友善度。
网友评论