令人厌烦的种种模态

作者: MitchellMi | 来源:发表于2016-01-17 11:58 被阅读2710次

    模态指主页面上临时弹出的弹窗,让主页面处于不可操作的状态,在弹窗层进行相应交互后方可返回主页面。模态弹窗最初应用于PC端软件、网页,如今模态弹窗在移动端也得到广泛应用。但模态一直是产品设计者有争议的话题之一,不恰当的使用会对产品用户体验产生破坏

    模态

    模态存在本身就是破坏用户操作流。流(flow):当人们全身心投入某个活动时,会对周边视而不见。这种状态称为“流”。(摘自《流:最优体验的心理学》)而模态出现就是在用户操作流过程中被打断。因为用户按照这样的流进行操作流程不符合程序的输入规范或者达不到自身预期结果,还有程序目前不能让用户进行操作的状态等。例如一些被动的模态在注册账户时会有提示账户名称必须是多少位,密码错误会有提示错误或者是否忘记密码,程序在加载中等等。再例如一些主动的模态,用户在用手机买东西在主屏上找不到想要的物品,这时会主动调出模态窗进行筛选(亚马逊就是这么做的)。

    不恰当的模态破坏体验

    不恰当的调出模态弹窗,尤其是在用户被动情况下非常让人恼火。当我的设备网络不佳进入到一个页面总有一个大大的加载黑框挡在页面前面,难道你就是想让我看这个?登录一个账号时又出现一个大大的黑框“正在登录中”,难道我不知道我在登录吗?当我输入信息错误又弹出个模态窗,作为一个为我服务的软件为什么要这么强势的数落我?

    不要站在实现模型上设计产品

    有些程序不停的告知用户当前程序的进度,“正在登录”“记录已保存”“内容已更新”等等。这些对于程序来说十分重要,出现了这些提示表示一切运行正常,输入信息执行操作返回信息,程序员们很喜欢看到这些。但这些程序上的琐事用户并不关心,他们只想看到结果。所以不要频繁的用模态来告知用户当前程序的进程如何从而打扰用户使用过程。

    面对模态弹窗无所事事

    用户在等待加载的过程中只会看待一个大大的“正在加载”模态弹窗无疑增加了用户等待时间。人在忙碌、有事情做的时候感觉时间过得很快(《100 Things Every Designer Needs to Know About People》里面对这个理论有很好的证明),所以不要在屏幕中只显示一个单调的模态弹窗让用户无所事事的等待,这样等待3s用户都会觉得是一年。

    蛮横的模态让用户交出了控制权

    人们需要感受到一些尽在控制中,并且希望有更多选择。人都会犯错而不恰当的模态抓住用户错误不放,错一次我弹你一次让用户觉得程序凌驾于自身来数落自己而不是用合理的引导来改正错误;更有甚者用户操作后弹出模态,之后只能等模态消失并不能进行其他操作极大的限制了用户使用自由(当然这种情况有些是必要的,如在进行汇款付费的时候),这都会让用户觉得他已经丧失了对软件的控制能力。

    使用其他方式替代不恰当的模态

    多使用状态来报告进程

    不要一遍遍的用弹窗来报告用户现在程序进行到哪了,用户用软件是有事情要处理没空看你的报告,多使用页面不同状态的样式来告知用户。如:“无法连接服务器”不要报告给用户,在页面内容上体现无法连接的状态样式,把网络关掉看看微信是怎样提示网络故障的。

    让用户有内容可以看

    有趣味性的加载样式

    很多软件采用有趣味性的加载动画,在设计平台上搜索这些内容会有很多(设计师们仿佛乐此不疲拿加载动画来炫技)。目的就是让未加载的空页面有内容可以看,打发这无所事事的等待时间,优秀的动画显示三秒消失后可能用户还觉得没看够。

    Flicker Drippler

    显示一部分缓存内容或采用分步加载

    当页面内容很多往往先显示出来一部分内容让用户有东西可以看,别急,接下来的内容马上就加载出来了。Medium是个典型的例子。

    Medium个人主页第一步先加载出title 第二部加载出个人的历史记录

    更高级的空白页展示样式

    页面没有加载出来并不显示空白的页面,而是显示内容前期的雏形和结构样式,产生一种内容已经加载出来只是没完全显示的错觉。

    Facebook的加载过程中显示了内容的结构样式 Pinterest的加载过程中显示了图片的主色调

    提供无模态反馈

    综合以上几点其实通知用户的最好方式就是无模态反馈,将提示状态直接在页面中显示。并不刻意将用户的注意力强行拉到跳出的模态弹窗上,而是保留在操作的页面上,直接在当前界面反馈结果。用户可以修改,可以返回可以掌控程序的进程。

    Facebook的登录请求 Tumblr的邮箱验证提示 MD的报错设计规范

    最后在产品设计中谨慎使用让用户跳出当前页进入模态的情形会大大提高产品的友善度。

    相关文章

      网友评论

      • CC123:学习了,666
      • 53c2c981723e:很好!
      • 胡小椒:问个扫盲问题,模态=弹窗?为啥会叫个模态?
        胡小椒:@简叔 谢谢
        MitchellMi:@啤酒泡沫 'In user interface design,a modal window is a graphical element subordinate to an application's main window which creates a mode where the main window can't be use' 感觉就是音译过来的'Modal'
        MJGA:@啤酒泡沫 modal
      • 4b9d7006720c:写得很好
      • sayaku_E:但有很多情况是使用弹窗更好不是么 比如让用户明确感知所处当前的界面,告诉他们只有操作完毕后,才能回到原来的页面上,我觉得比保持处于当前页面的情景比在原界面上不停跳转操作有时候更好 ,你觉得呢
        MitchellMi:@没错我就是精神分裂了 当然还要看实际情况了,模式本身没有好坏,只是设计者没有使用恰当。
        sayaku_E: @米亓 我的意思是:一个完整操作肯定要在几个不同的界面上实现 而弹窗相当程度上减少了跳转的次数
        MitchellMi:@没错我就是精神分裂了 取消弹窗并不代表要跳转到别的页面啊
      • 花前月下:一切为了用户体验。不错。
      • MJGA:有道理,好文
        MitchellMi:@简叔 谢谢简叔:smiley:

      本文标题:令人厌烦的种种模态

      本文链接:https://www.haomeiwen.com/subject/soxkkttx.html