最近做了不少产品的竞品分析,执行一些操作时不免遇到各式各样的模态弹窗,有些弹窗总是意想不到的出现,令我抓狂,导致我不得不认真阅读弹窗内的文字信息,并作出选择;有时候我会习惯性点击右侧的按钮,发现操作后页面并没有按照我的预想做出变化。

大约需要5~8分钟~

系统规范层级——Alert弹窗的定义

图1是我遇到的两种Alert弹窗(IOS系统)类型。左图是取消发布视频,点击返回按钮后居中出现的弹窗,右图是清除红点消息时居中显示的弹窗。

图1 弹窗

从系统规范层级,IOS将Alert弹窗定义在App Architecture中的Modality之一,也就是我们常说的模态弹窗或者Alert弹窗。

Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information

Alerts convey important information related to the state of your app or the device, and often request feedback. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.

同时,IOS系统规范定义了Alert弹窗中按钮的合理位置:

Place buttons where people expect them.
In general, buttons people are most likely to tap should be on the right. Cancel buttons should always be on the left.

从IOS对模态弹窗-Alert弹窗的定义,可以用一句话描述:当需要用户专注于重要信息提示时,需提供一个临时视图并让用户作出明确的操作。

图2 Alert弹窗定义

从规范层面,两种Alert弹窗的交互方式是没有问题的,同时也是从一定程度上告知用户现在执行的操作需要特别注意,可能会影响到结果;但是,第二个弹窗中文字按钮的顺序并不符合用户的认知顺序,从而导致结果反馈与用户意图不符。

用户语境——Alert弹窗的应用

从用户语境,我们回头看下图1中两个弹窗包含的信息及可能要发生的状况是否需要用户重点关注,首先需要了解用户为什么点击【返回】和清除消息气泡?

用户触发【返回】&【清除】控件时不外乎是想退出/改变页面现状,如下图所示。

图3 用户点击意图

其次看弹窗中的信息对用户来说是否重要。第一个弹窗为用户提供了一个标题【要返回编辑吗?】三个文字按钮【返回编辑】【保存并退出】【取消】,其中突出显示了【返回编辑】。为用户传达的信息是:

  1. 重新编辑视频——返回编辑页;
  2. 帮用户保存已编辑好的视频,并告知所保存的位置——退出当前流程并保存已编辑的视频。
图4 返回弹窗

1和2中用户操作后的页面/用所处位置发生了变化,同时需要保存用户可能丢失的数据,因此弹窗的出现是有一定必要的。

通常情况下,我们认为点击返回自然是返回流程中的上一个页面,而这里点击后出现了一个模态弹窗,在我看来主要是在用户意图的基础上增加了产品策略而导致的(用户需保存视频后才可退出流程),如下图所示。

图5 用户意图+产品策略

从弹窗元素之间的关系出发,目前标题与内容关联性不是很明显,且弹窗会让用户产生强烈的压迫感,所以简单易行的优化方案是可以将现有的Alert弹窗调整为Action Sheets的方式,隐藏标题,减轻用户使用负担,如下图所示。

图6 Action Sheets样式

第二个弹窗中为用户提供了一个标题【忽略未读】、内容和两个文字按钮,为用户传达的信息是:只会清除消息上的红点,消息不会丢失。对用户来说,红点的重要程度远远低于消息,而且过多的红点(非用户主动触发产生的红点)会使用户感到焦虑。

同时,文字按钮中【确定】在左侧,是完全从产品角度进行的设计:不希望用户清除这些红点。产品认为这些红点对应的信息非常重要,希望用户逐个阅读后清除。

图7 清除弹窗

从用户角度来看,用户执行操作后的反馈结果并不会有破坏性变化,不影响用户的数据,因此,这里的弹窗是可以隐藏不显示。

小结

在IOS Human Interface Guidelines 中阐述了应减少使用Alert弹窗的设计理念,但实际产品或应用中依然存在着很多与用户预期不符的弹窗突兀地出现在屏幕中央,弹窗的出现及其信息的传达反而增加了用户认知负担。

Alerts disrupt the user experience and should only be used in important situations like confirming purchases and destructive actions (such as deletions), or notifying people about problems. The infrequency of alerts helps ensure that people take them seriously. Ensure that each alert offers critical information and useful choices.

在使用Alert弹窗前我认为需思考以下2个方面:

http://weixin.qq.com/r/ozqhucDEIJ1frYTa92_x (二维码自动识别)

如何主动触发时间选择器弹窗_请合理使用Alert弹窗相关推荐

  1. 添加弹窗_阻止电脑广告弹窗窗口让电脑桌面更清洁

    在使用计算机上网过程中,经常会弹出一些广告弹窗,这些弹窗或者会干扰到我们的使用计算机的体验,有的则会对桌面内容进行一些遮挡,非常可恶. 那么我们怎么对广告弹窗进行拦截不让它们干扰我们使用计算机呢? 我 ...

  2. html弹窗_对付流氓广告弹窗:彻底告别,这一招最有效

    关注我们,获取更多精品资源哦现如今,只要我们在使用电脑或者移动设备,都会有这样的瞬间:用着用着,突然之后弹出了一个广告(PS:双11快到了哦)!所以,今天小编为大家带来了一款对付流氓广告弹窗最有效的方 ...

  3. avue 文字点击 弹窗_经验 | UI设计师必懂的App弹窗设计方法

    本文总结了App弹窗设计体系,以及不同弹窗的使用方法和误区.案例丰富,适合UI设计师进阶学习. 这一篇你将看到: 1.弹窗的定义 2.不同类型弹窗的特点及使用场景 3.常见使用误区 一.弹窗的定义: ...

  4. UIDatePicker | 时间选择器

    一:UIDatePicker的介绍 UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入. 日期选取器的 ...

  5. vue 一个组件内多个弹窗_论如何用Vue实现一个弹窗-一个简单的组件实现

    前言 最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文 ...

  6. 小程序确定取消弹窗_小程序开发之弹出框

    小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框 wx.showToast() title:显示的提示信息,在没有图 ...

  7. flatpickr功能强大的日期时间选择器插件

    flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...

  8. 时间管理专题_软件篇03

    本文属非商业用途,文中借鉴他人处均已注明出处,若侵犯原作权益,请联系删除,谢谢 接上一篇 时间管理专题_软件篇02 标题:一年多的GTD和自我管理之路(上) 作者:褪墨・时间管理 地址:http:// ...

  9. 日期时间选择器bootstrap(手机适应)

    使用的是开源的架构 可以git clone git://github.com/smalot/bootstrap-datetimepicker.git 截图 十年视图 年视图 月视图 日视图* 小时视 ...

最新文章

  1. Python 正则表达式各种特殊符号 重点
  2. Go语言调度器之调度main goroutine(14)
  3. 综述|深度学习在SLAM定位与建图中的应用(近250篇参考文献)_3D视觉工坊的博客-CSDN博客
  4. linux 关闭网络防火墙设置方法,CentOS Linux防火墙配置及关闭方法
  5. SilverLight开发系列第2步:使用vs2008和Blend 2.5打造Hellow World程序
  6. .NET 6 预览版 7:新功能已完成 ,将专注于改进
  7. Apache 查看连接数
  8. hdfs和日志业务系统
  9. Python实现共现语义网络
  10. 2021秋招总结(器件方向转行数字IC设计)
  11. ST板块大幅下跌 不少ST股逆势上涨
  12. 【美港探案】百度Q2:需要重新定义
  13. 8086CPU寄存器全称
  14. UVa OJ 126 - The Errant Physicist (粗心的物理学家)
  15. 拉新、复购、供应链,双11中小商家“三难”如何破?
  16. NPC 也有了生命?当 ChatGPT 注入游戏你能想象吗
  17. 太乐地图下载器 V5.0.5 破解版
  18. 深度学习:图像的卷积原理和本质(详解)。
  19. 前端学习者应该知道的前端学习方向
  20. Warning: Failed to parse host xx.xx.com

热门文章

  1. 【jvm】java jvm 报错 OutOfMemoryError: GC overhead limit exceeded
  2. registry:NoSuchMethodError zookeeper.server.quorum.flexible.QuorumMaj
  3. Spark structured 记录一次kudu扩容导致无法写入数据的问题
  4. 【Flink】Flink如何传递JVM参数给JobManager和TaskManager
  5. Spring : Spring @Transactional-事物回滚
  6. Spring : spring基于xml配置Bean
  7. 03-windows下Oracle的下载与安装
  8. 《spring-boot学习》-06-thymeleaf详解
  9. data-ajax=“false“
  10. python3 提取url中域名部分_python 从网址(url)中提取域名和path