最近做了不少产品的竞品分析,执行一些操作时不免遇到各式各样的模态弹窗,有些弹窗总是意想不到的出现,令我抓狂,导致我不得不认真阅读弹窗内的文字信息,并作出选择;有时候我会习惯性点击右侧的按钮,发现操作后页面并没有按照我的预想做出变化。
大约需要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 informationAlerts 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 用户点击意图
其次看弹窗中的信息对用户来说是否重要。第一个弹窗为用户提供了一个标题【要返回编辑吗?】三个文字按钮【返回编辑】【保存并退出】【取消】,其中突出显示了【返回编辑】。为用户传达的信息是:
- 重新编辑视频——返回编辑页;
- 帮用户保存已编辑好的视频,并告知所保存的位置——退出当前流程并保存已编辑的视频。
图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 (二维码自动识别)