交互专题

从一个弹窗的关闭按钮引发的讨论和思考

0
登录或者登记去做吧。

文章目录[隐藏]

作者:李逍遥(UXRen翻译组管理员,UI设计师)

 

弹窗的右上角有个关闭按钮,功能好像跟下面的取消确定差不多,都是操作完成后弹窗关闭。咋的一看好像很多余,是不是多余呢,因为设计规范的时候碰巧遇到这个问题。开发也说在结果上看来好像很多余。

我自己作为一个界面设计人员,对于其后面说隐藏更深层的原因其实了解并不多,不过好在认识很多朋友,于是就在UXRen群里面问了下baozhu同学,作为资深的用研人员,果然给出了合理的答案。

 

发现问题

我先前觉得可能这只是一个习惯性的用法。见图。

点击取消跟确认的效果跟上面的关闭确实没啥区别。

摘录群里对话如下:

李福东@UXRen 10:53:1

其实本意还是有所不同的,上面的关闭是关闭窗口,下面的“取消”是取消操作。 只是从体验上讲,关闭窗口的同时也没有执行操作。

 

Baozhu 10:54:32

知乎这个弹窗里面,确认和取消2个操作是针对删除草稿这个命令的2个选择,用户也可以跳出这个框框,直接点击右上角的关闭按钮。

虽然点击右上角的关闭和点击取消的结果一样,但是用户的需求和心理体验是不同的。(baozhu同学露出了得意的微笑)

 

UX-Ying 10:56:15

苹果是左上角。而且下面没有关闭,为什么要做这种相反的?

(积极热心的ying同学随后登场)

 

Baozhu 10:59:22

回复李逍遥同学:窗口右上角的关闭,是指我中断这个弹窗,比如:我不想进行删除这个操作了,我是误操作点进来的,所以我关闭掉,终止这个行为。

回复Ying同学:win qq和mac qq的窗口关闭相反,是因为2个操作系统的历史沿袭的原因(windows右手操作更便捷,mac左手操作更便捷);而mac qq之所以没有下面的关闭按钮,是因为当初做的时候就没有考虑设置。

之前win qq 的2个关闭,内部还有一个争论:为什么需要2个关闭入口呢?设计师觉得右上角那个就可以了,为什么下边还有一个?然后内部就做了一个后台数据的监测,发现2个关闭的使用好像差不多是5:5;因为右下角那个关闭,属于早期qq版本就做的,已经培养了用户习惯,很多人就习惯用这儿,操作也离文字输入更近。最后结果是:win qq保留了这2个入口。其实我们还可以用esc来关闭窗口的。

现在win qq的右上角x其实是关闭所有窗口,而下面那个关闭,只是关闭当前窗口的。

 

继续探索

告一段落,问题差不多有答案了,两个看似差不多的操作实际上却是隶属于不同的层级。

两种操作的用户动机是不同的,期望不同。可能误点进来,然后点击关闭,完成整个关闭操作。关闭窗口,取消操作行为。

不过回头看手机的弹窗,其实也差不多,但是是没有关闭这个按键的。

我们可以继续探究这个问题。于是我找来尘封已久的#about face 3。对应章节是一个叫做对话框的家伙。

 

对话框

对话框有两种,一种是模态对话框,一种是非模态。

  • 模态对话框(Modal Dialogue Box,又叫做模式对话框)
    是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。
  • 非模态(Modeless)对话框
    又叫做无模式对话框,当用户打开非模态对话框时,依然可以操作其他窗口。例如,Windows提供的记事本程序中的【查找】对话框。【查找】对话框不会垄断用户的输入,打开【查找】对话框后,仍可与其他用户界面对象进行交互。用户可以一边查找,一边修改文章,这样就大大方便了使用

这种模态和非模态的翻译过于的学术话,一点都不好理解。简单说模态对话框出现会打断中止你当前的操作,直到你做出选择才能继续之前的行为。非模态就是不干扰当下的行为。

 

下面列举一下对话框的类型:

  • 功能对话框,属性对话框,进度对话框,公告对话框
  • 标签对话框,扩展对话框,级联对话框
  • 错误对话框,警告对话框,确认对话框
  • 一般用的比较多的是功能对话框和下面的错误警告确认对话框。

 

对话框的组成:

  • 标题,说明文字,操作按钮、确认、取消、关闭。

 

这次先到这里,后面会继续分享。

文章由作者李逍遥授权发布在UXRen社区官网。

 

 


推荐阅读

再谈Google的HEART框架(产品体验评价指标模型)

从“注意力”的角度谈体验设计如何避免入坑

APP小红点如何使用与实现逻辑

聊天缩略图背后的故事:你不曾注意的那些细节

【案例解析】设计思维方法赋能设计落地

 

UXRen公众账号
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

熊先生做原型之 - 四款常用原型设计工具预览功能PK
从“注意力”的角度谈体验设计如何避免入坑