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

文章目录[隐藏]

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

作者:李逍遥(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

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21022/

(0)
震天下震天下
上一篇 2023-03-03
下一篇 2023-03-03

相关推荐

  • 用户运营 | 《破茧成蝶 用户体验设计师的成长之路》读书笔记

    1. 设计师如何参与一个具体的项目需求分析,了解需求,清楚我们要做一个什么样的产品,目标用户是谁,要达到什么效果,具体有什么内容、功能…然后我们开始进行设计,在草图上梳理信息架构,设计任务流程,设计界面,确认没有问题后再用专业的软件工具把设计方案呈现出来。经过设计评审后,设计师要去跟进后续的视觉、前端、开发、测试环节,确保最后的产出物和自己的设计方案一致。2. 在项目中设计师容易遇到的问题团队成员的专业能力外界因素的影响团队凝聚力3. ...

    2018-04-25
  • 屏幕尺寸越来越多,“首屏为王”还有效么?

    作者:Amy Schade@nngroup,翻译:小球娘   几句话概述:把什么内容放在页面顶部(第一屏的位置)以及把什么内容藏在第一屏位置之后将始终影响用户体验——无论屏幕大小。有平均84%的用户会区别对待页面第一屏内容和…

    交互专题 2017-08-07
  • 搜索结果页优化的10条最佳实践方法【UXRen译#175】

    作者:Nick Babich   |  翻译:猫猫DE爪,校审:兔兔瑶   搜索就像是用户和系统之间的对话:用户键入他们的信息需求作为问询关键词,系统则展现出它的回答作为一组结果。搜索结果页是搜索体验的一个重要部分:它提…

    交互专题 2023-03-03
  • 信息架构与导航系统,还傻傻分不清楚吗?

    作者:Jennifer Cardello,翻译:小球娘   几句话概述:信息架构是支撑网站的骨架;导航指的是网站交互界面上,用来让用户到达具体信息内容的元素。 人们有时会把信息架构(IA)和导航系统的概念混淆到一起,这些概…

    交互专题 2017-08-07
  • 我总结的一套表单设计指南

    作者:jakd007(UXRen会员)   表单在移动端设计中最常见的界面,每个手机系统及应用对表单都有不同的设计,本文目标是总结出一套表单设计指南,以提高日后工作效率。 表单在移动端设计中最常见的界面,每个手机系…

    交互专题 2017-08-07
  • 使用app真正给你快乐体验的是微交互设计

    在我们日常生活中所使用的比较多的优秀APP中,真正给我们动心和吸引的细节是在于那些小小的微交互,整个app整体的排版和线框图的的用心制作是可以提高用户对app的操作性与整体感觉,从目前的情况来看看,交互设计师…

    2015-11-03
  • 前Apple员工谈交互设计的未来【UXRen译#177】

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing   现在,有很多流行的有关未来交互设计的想象。 机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏…

    交互专题 2017-08-30
  • 交互设计师的60日计划第二十天

    这几天觉得好像没有什么可写了,会不会是姨妈所以脑子比较迟钝→_→昨天初中闺蜜突然叫我十一去秦皇岛玩,因为找不到人陪我去台湾所以果断的买好了所有票订好了房和她们去玩玩,晚上同事为了犒劳自己这几天准备晋级的…

    交互专题 2015-08-20
  • 腾讯MXD:资讯app为什么都长一个样?

    作者: Celine Wang@腾讯MXD   打开手机,国内的资讯 app 除了品牌 logo 外,几乎都长一个样。就如你敲开不同的门,发现房间不光装修风格一样,还住着品味雷同的主人。是什么造就了它们? 资讯产品的本质是连接内容…

    交互专题 2023-03-03
  • 交互设计师的60日计划之第六天

    今天去公司加了一天班,然而并没有做完该做的事情。恰好昨天看了一篇有关拖延症的文章,今天加班的过程中发觉自己已经病入膏肓...有deadline的东西可以做完,没有deadline的东西永远都做不完,这是一件很可怕的事情…

    交互专题 2015-08-20