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

文章目录[隐藏]

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

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

相关推荐

  • 交互设计师的60日计划第十七天

    #交互设计师的每日#20150815 雨天和大学最好的朋友的离别,最后一顿饭吃了王品台塑,果然一分价钱一分货。以用户体验为招牌的海底捞告诉我们要排队2小时等位…但是贵的王品台塑不仅立刻有位,服务也要比海底捞更胜一…

    2015-08-20
  • 【案例解析】设计思维方法赋能设计落地

    作者:百度UE大讲堂   一、什么是设计思维呢? 顾名思义,设计思维就是设计师用来思考问题和解决问题的方法。如何培养设计思维?今天这篇用两个实战案例帮你一窥设计思维的奥妙。 我们先来看一个小测试:以下的方案…

    交互专题 2017-08-07
  • 【案例】菜鸟裹裹如何打造双11极致物流体验

    作者:CNUX设计实验室(菜鸟无线UED团队)   如往年一样,2016年的双十一如期而至。当大多数人都在关注、鼓励你买买买的时候,有多少人关心你盼望包裹的那种期待?有多少人能体会你等待包裹时的焦虑?有多少人理解…

    交互专题 2017-08-07
  • 【笔记】Google设计师传授Whiteboarding新技能(附视频)

    公元2016年2月20日星期六,丙申猴年正月十三。正是广大交互设计师出门聚会交流的黄道吉日啊!紫气东来,应在中城WeWork Madision,此地必有祥瑞!小编掐指一算,原来是UXRen纽约第二期活动啊!(^o^)/~   笔记:JayJ…

    交互专题 2017-08-07
  • 未来交互设计:初心未变,可用的新视角

    Terry Cao是UXPin(一款线框图与原型制作APP)的内容策略专家。要了解如何掌握现在交互设计的艺术,可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及…

    2015-11-08
  • 什么是用户体验文案设计?【UXRen译#164】

    作者: Kristina Bjoran  |  翻译:陈馥丹,校审:小四   有一种新的职业出现了,嗯,也许不是“新”的,但可以肯定的是这种职业出现次数会逐渐增加,像谷歌、亚马逊、Dropbox、Paypal……许多大型科技公司正在寻找UX文…

    交互专题 2017-08-07
  • 电商商品详情页应该怎么玩转?

    作者:电商微频道   电商作为传统商品交易在互联网领域的表现,其商业模式、市场营销思路、消费者心理研究是与传统商品销售行业相通的。但是电商真正颠覆性的价值在于改变了商业市场信息的不对等。 通过海量的、全…

    交互专题 2023-03-03
  • 设计师如何使用用户研究优化A/B测试

    作者:Jennifer Cardello; 编译:霍诗雨@ 点融黑帮   一、A/B 分类测试 A/B分类测试使得网站可以通过比较同一网页的不同设计,来决定其中哪些设计将产生最好的结果。在A/B测试中用到的指标是微观和宏观的转化率。 …

    交互专题 2017-08-07
  • 【笔记】北美大公司里做UX Designer是啥体验?(附视频)

      UXRen北美社区成立至今,旨在聚集华人UX设计师群体,为提供大家一个交流的平台。此外,我们希望大家也能够能线下碰面、聊天、互相认识,分享彼此的UX设计宝贵经验。   本期撰文/Leecy 会议记录/陈若涵 整理/Leecy…

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

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

    交互专题 2023-03-03