UI设计:按钮的召唤行为和优先级表达

“行动按钮”作为连接用户与产品的交互触点,在产品设计中扮演了至关重要的角色,一个优秀的按钮控件可以有效的提升交互体验,引导用户,提升产品转化率。本文是我在设计环节遇到问题并寻求解决方案过程中总结沉淀下来的几点小结,希望能为设计师伙伴们提供一些启发或帮助。

背景

需求源于一款产品意在提升桌面图标的生成率,所以业务侧希望在用户退出该产品时以弹窗的形式引导用户创建图标。 针对该需求,在弹窗行动按钮的优先级表达、行退操作布局设计中产生了疑惑,主要体现在以下4个方案中,页面示意如下:

发现问题

1、按钮的优先级该如何表达?

2、行进、后退该如何放置?

3、业务侧与用户侧该如何权衡?

问题聚焦

1、行动按钮的优先级表达规范

2、行动按钮的召唤行为分析

3、行动按钮的本源分析

Part 1.行动按钮的优先级表达规范

通过对 Material Design、简书、IXDC、MicroUX及设计相关文献的查阅归纳,对中行动按钮的规范、经验总结提炼如下:

1、按钮 的优 先级表达可划分为三个层级

具备高度强调作用的“填充(包含)按钮”、中度强调的“轮廓(概述)按钮”、低度强调的“文本按钮”。

2、正确表达

1)单个突出按钮:布局中应包含一个突出的按钮,以使其他按钮在层次结构中的重要性降低。此高强调按钮吸引了最多的关注。

2)多个按钮:一个应用一次可以在(模态弹窗/底部栏)布局中显示多个按钮,因此高强调按钮可以与执行次要功能的中强调按钮和低强调按钮配合使用。

a、可以在填充的按钮(高强调度)旁边放置一个轮廓按钮(中等强调)。

b、可以在轮廓按钮(中等强调)旁边放置一个文本按钮(低强调)。

c、使用多个按钮时,指示更重要的操作时,请将其放置在填充的按钮中。

d、文本按钮通常嵌入在包含的组件(如卡片和对话框)中,以使其自身与出现它们的组件相关联。

e、文本按钮间又可以通过颜色,粗细进行优先级区分。

3、尽量避免

避免同时并列使用两个填充按钮(高优先级按钮)。

Part 2.弹窗中行动按钮的召唤行为分析

1、 用户惯性认知:左后退,右行进

论据说明:

1)头部平台情况

a、iOS的移动、电脑设备绝大所述情况下行进按钮都在右侧,后撤在左侧;

b、早些时候,win与Android都为左前进,右后撤。而 Android 在4.0版本发布后也将按钮调换为了“左后退,右行进”,顺应了设计的大趋势 。

2)A/B test数据结论

早在 2004 年,就有 Walker 和 Stanley 的两人针对这个问题做了对比研究实验,实验选取定量测试者对程序进行操作,进行两轮测试并分别在按钮位置与问题上做了调换;

实验结果:在第一次实验中,A、B两实验组行进与后退的正确率相差无几,未达到(统计学中)“有感”;第二次实验(A、B组调换位置,并问相反的问题),A组变化不大,B组错误率高出三倍。(资料来源:《体验进阶》)

结论:该实验告诉我们一个道理,即不要轻易违背用户习惯。为了提高效率,人们通常只会在第一次接触新事物时,启用大脑,之后大部分情况都处于“无意识状态”。

3)行业情况

a、PC端

源于眼动视觉轨迹: 自左向右的浏览习惯,因此行动按钮一般为: 左行进,右后退。

PC端(win系统):左行进,右后退

b、移动端

·便于大多数右利手用户单手持机操作;

·符合古腾堡法则: 左上角是视觉的第一落点区,而右下角是视觉最终落点区,右侧行进可避免阅读视线顺序造成无意识的回跳。

移动端:左后退,右行进

2、按钮的召唤行为

1)通常,我们在产品中会为了达成某种指标,需要在界面上引导用户去完成我们希望其完成的操作。且这类操作是可以达成某种目的的,我们把这类操作称为「召唤行为」,该按钮成为召唤按钮,又称CTA(Call To Action),即从元素的角度引导用户完成任务,提升产品转化率。

召唤行为:取消

召唤行为:取消

召唤行为:继续选座

召唤行为:继续选座

( 调换位置虽然能暂时解决用户的退出行为,但容易产生误操作,与用户的期望不同,导致在产品体验上会被用户排斥)

2)在模态弹窗下,还需要配合不同 弹窗类型 的 标题文案/说明文案意向 以及 使用场景 ,来进行召唤按钮的设计,举例示意如下。

弹窗触发场景用户主动触发用户被动触发

弹窗标题文案是否确认执行当前操作是否执行新的操作

行进操作执行当前操作执行新操作

按钮召唤行为行进操作或回退操作,一般为回退操作行进操作

方案示意

小结: 在移动端产品行动按钮设计中,一般回退操作在左,行进操作在右,召唤属性根据场景、弹窗标题等对按钮做突出处理。

Part 3. 模态弹窗下按钮的召唤行为优先级程度评估

以上是站在用户体验角度对按钮设计的分析,那么,在实际的方案设计到落地过程中,我们不仅要满足用户体验,同时也要站在业务方的角度看待问题,综合评估业务价值与用户体验,最终权衡两者得到的最优方案。 那么如何评估召唤行为的强弱以及权衡业务价值与用户体验关系呢,小编有以下几点建议。

1、依据产品业务性质

2、依据产品生命周期

归纳&总结

1、【召唤按钮优先级表达】:包含的按钮>概括按钮>文本按钮(文本颜色、加粗)。

2、【行动按钮位置循序】: 左回退,右行进,核心是建立并遵循用户惯性认知,不随意打破。

3、【召唤行为内核】召唤行为不是用户想做的事,而是我们应该要让用户做的事,但不是强迫。

4、【召唤行为优先级程度评估】:需要结合需求的触发场景,区分所处的产品业务性质,确定所处的产品生命周期。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容