确认页html,确认页设计(confirmation alert)(三)——一些注意事项

白话大原则:

让我立马注意到——否则就没必要确认。

必须得与当前页面区分,凸显出来。所以一般二次确认页面弹出时,当前页面应该屏蔽使用。

让我不反感——除非想赶走客户。

视事件本身的严重程度采用适合的图标(信息、错误、问号)、措辞,视觉变化不至于太过突然。

让我一看就知道如何选择——稀里糊涂,词不达意的二次确 认是最要命的

已经干扰了正常流程,再让用户在一个弹出页面上思考不知所措?

短句子,不兜圈,信达雅的文案,与文案相符的操作。

这些大原则有效的前提是:确实是必要的时机。——你的二次确认页真的是必要的吗?

注:以上大原则,heidi原创,不可照搬,谨防出错。

注意事项:

时机——确认是必要的时机(我怎么这么罗嗦呀)

形式——是不是采取了合适的形式(有哪些形式?),注意不要用二次确认页鱼目混珠,我看到很多网站把成功页面做成像二次确认页一样,居然还有个感叹号来警示用户“操作已经成功”……

文案——这个太重要了,呆会单独说。

icon——这个太重要了,呆会单独说。

出错控制——二次确认页本来是为了避免出错,为此需要再注意些什么?

结构——这个页面不需要太多创新,最保险的方式就是照顾用户已有的习惯,用主流的结构去呈现。

文案太重要了:

1. button的文案——需要让用户思考。

很多时候我们发现一个页面很莫名其妙,很不容易理解,仔细看看,原来是文案没有传达清楚。

如果二次确认页面也出现含糊不清,模棱两可的文案,那是最糟糕的事情。

大家看得明白下面三个二次确认页的区别吗?——资料来自《windows vista UX guide》

675f1d170fb0c114b8e76a73ac716abd.png

三者的区别在于button引导文案,先使用官方资料:

第一个二次确认页面:windows认为是不合理的二次确认页,因为它起不到该起的作用,因为用户本身就是通过点击“uninstall”操作看到这个页面,当他看到button上的文案还是“uninstall”的时候,他几乎不会去阅读二次确认的问题和描述,直接就会点击“uninstall”。而windows认为二次确认页至少是需要用户思考一下再做操作的(不然还真的没必要)。——Do make me think。

第二个二次确认页面:windows认为是合适的,使用yes和no作为button的文案,用户在点击前,至少会思考一下yes和no分别对应的后果,因此他会去看描述。

第三个二次确认页面:windows认为也是靠谱的。一个简单的anyway作用很大……体会一下。

Yes/No和OK/Cancel的button文案搭配大家似乎在英文站点上司空见惯了。好像是可以相互替代的是吗?

be78abc00f1dc4d82cb6b9a12545aa5a.png

这是一个被我YY出来的案例,但是实际上确实存在着。现实生活中,某个人负责写二次确认页面文案,但是button上显示的文案有时却得走"规范",统一使用YES或者OK(比如),至于点击了button到什么页面是由设计师和工程师决定的。就会导致以上矛盾的情况:button和文案牛头不对马嘴,点击后却又是另外的情况……

在这个案例中,结合整体文案,button上恐怕是Yes+Cancel的组合更加适合。所以,需要一个人全盘负责alert页面的文案。

Ok这个说法很多时候带有“我明白了,我理解了,就这样吧”的含义,用到二次确认页上会让用户非常confuse。

在以下的案例中,我们能够更加明显感觉到文案的配套如何重要:

确定取消你的预约吗?1. 好的,2. 取消。——what should i do?

cf1082b08004a2c2b95207846633535b.png

补充一个在最近的项目里又发现的案例吧,以提醒各位去审核二次确认页文案的重要性:

3b50e332b639ddcf2b421fc94d36519b.png

对于上图,你,发现问题出在哪里了吗?

2. 页面的文案——足够的信息讲明白后果。

ea1cb4e9c18e33c26a1649ef88fc5dfa.png

你会经常被这种页面搞得很苦恼,你确定吗?你真的确定吗?你考验我的智力还是判断力还是耐力?

ICON可不能乱用呀:

44eaaf6fb4701bbced06f3db0e07c87e.png

icon很美观,似乎很多设计师总是想用一个icon点缀一下二次确认页。

但是我有时不明白,为何经常会出现一些不合时宜的icon倒了我的胃口。

即使不是二次确认页(向左侧的这个可怜的成功页面,却被用了警示的icon,实在匪夷所思)

所以,翻翻《windows vista UX guide》发现还是有一些有用的总结的:

9ae5e1672cd2e9314eaa9df42c3c5bd3.png

还记得routine confirmations和risky action confirmationvs……具体指什么吗?点这里

出错控制——默认的操作

很多时候一个二次确认页弹出来,我们会下意识去关掉它。

我们会点击键盘上的enter键——特别是一些无关紧要的二次确认。

所以一个二次确认页上最好有一些默认的操作,从形式上也高亮显示,像是在建议用户说:点我是最安全的哦。

【注意】:这里的高亮选项一定要和键盘快捷键对应哦。

7d7a98af101ae736bda7508ce36e64be.png

那么,应该将什么操作设置为默认的选择呢?

同样,《Windows Vista UX Guide》给出一些这样的设计指引:

1d2816045cd5b91838089ad0d709f332.png

结构:保持通用性和全站统一性

4054d106bed18f9e72f036f73e731d03.png

其实二次确认页的要素也就那么多了。

值得说明的是button的位置,其实很多时候未必只有两个选项这么简单。

0738c395321b2477c067d3c5423ca3b0.png

1. 继续执行的操作(保存)

2. 反向的操作(不保存)

3. 取消此次操作(取消,再想想)

4. 其他选项(帮助等附加信息)

好像,这几个button若同时出现,各自的位置是有很多讲究的。但是我这里没有具体的详解。因为我发现MAC的OK和Cancel的位置好像和windows是颠倒过来的,所以我不敢肯定直接拿某一个位置去分析能否靠谱。

下面是Apple的某个二次确认页结构:

85299874e5dca71cccfdfdb4111ae684.png

看到了吧,主体结构大同小异,唯一的是button的位置,不知道为何MAC将Cancel和OK的位置和微软的不同。

还有:我觉得这里的OK也有歧义。

——————————————————————————————————————————————————————————

【本文系列】:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值