首页 > 建站资源 > 网站运营 > 弹窗设计的5项优化原则!用户“满意”才是王道

弹窗设计的5项优化原则!用户“满意”才是王道

时间:2016-07-04    来源:产品100

当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时,弹窗却会困扰你的用户。知晓如何设计弹窗,会帮助你在使用时避免那些可能对用户造成的困扰。

什么是弹窗?

弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息,要求用户去做决定,抑或是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中,它可以在不把用户从当前页面带走的情况下,指引用户去完成一个特定的操作。

1.webp

图1,会话过期弹窗

现在让我们来看看有哪些优秀的弹窗设计和使用方法。

原则1. 减少干扰

由于弹窗会中断操作,要尽可能地少使用弹窗。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务,并转而专注于弹窗中的内容。在继续之前,用户 必须要面对这个弹窗,否则将无法对弹窗之下的页面进行操作。当这个用户必须要确认一个关键的操作时,这就是好的,但是在大部分情况下弹窗是不太有必要的, 甚至会引起用户反感。

需要确认

在你需要用户去互动才可继续时,或当犯一个错误的成本会很高时,使用弹窗是最合适且最合理的。

2.webp

图2,这里告知了用户一个情况,需要用户确认

不要突然打开弹窗

在用户没有做任何操作时突然打开弹窗,是非常糟糕的设计。许多网站用订阅框来轰炸它们的用户,就如下面的例子:

3.webp

图3,诸如此类的弹窗给没有键盘的用户造成了数不清的麻烦

弹窗的出现应该永远基于用户的某个操作。这个操作也许是点击了一个按钮,也许是进入了一个链接,也可能是选择了某个选项。

小结

  1. 不是每个选择、设置、或细节都有必要中断用户当前的操作。

  2. 弹窗的备选方案有菜单以及同框内的扩展,这两种控件都可以保持当前页面的延续。

  3. 可不要突然跳出弹窗,应该让用户对弹窗的每次出现都有心理预期。

原则2. 弹窗应与现实世界相关连

弹窗应该使用用户的语言(用户熟悉的文字,短语和概念),而不是一些系统特有的专有名词。

表述清晰的问题和选项

在弹窗的内容区域,应该使用一个表述清晰的问题或陈述,例如“清除您的存档?”或“删除您的账户?”总之,应该避免使用含有歉意的、模凌两可的、或者是反问式的语气,如“警告!”“你确定吗?”

4.webp

图4,左边的弹窗提出了一个很模凌两可的问题,并且这个操作可能影响的范围并不明确;右边的弹窗提出的问题相当明确,它解释了此次操作对用户的影响,并且提供了指向清晰的选项

尽可能不要给用户提供可能产生混淆的选项,而应该使用那些文意清晰的选项。大部分情况下,用户应该能够只通过弹窗的标题和按钮,就了解他们有哪些选项。

反例:这个按钮的文字“不”的确回答了弹窗内的问题,但是并没有直接告诉用户点击后会发生什么。

5.webp

图5,安卓的系统弹窗 来源:Material Design

改成这样:肯定的操作文字“放弃” 很明确地指示了选择这个选项的后果。

6.webp

图6,安卓的系统弹窗 来源:Material Design

提供重要的信息

一个弹窗不应该把对用户有用的信息说得含糊不清。举个例子,如果一个弹窗要让用户确认删除某些条目,就应该把这些条目都列出来。

7.webp

图7,这个弹窗很简要地指明了这个操作的结果

另外,避免使用“了解更多”按钮去连接到帮助文档;在弹窗同一页面展开则是更好的选择。如果还需要显示更多的信息,则将其放在进入弹窗之前的页面。

提出有(关键)信息的反馈

当一个流程结束时,记得显示一条提示信息(或视觉反馈),让用户知道自己已经完成了所有必要的步骤。

8.webp

图8,在完成一个操作后成功的例子

小结

  1. 在弹窗中使用语意清晰的问题和选项。

  2. 设计促进操作完成的弹窗。

  3. 在操作完成后,提示用户操作已经完成了。

原则3. 讲求极简

别试着把太多东西挤在一个弹窗内。要保持干净和简约(遵从KISS原则)。然而极简主义并不意味着被局限住,你提供的所有信息都该是有价值并且与之相关的。

元素与选项的数量

弹窗绝不应该只是部分显示在屏幕上。因此不要使用有滚动控件的弹窗。

反例:巴克莱银行的付款处理弹窗包括了许多的选项和元素,部分的选项只有滚动后才能看到(特别是对于屏幕通常较小的移动设备)

9.webp

图9,来源:巴克莱

相关推荐
网站用户体验必须注意的76个要点
信息架构之网站导航设计浅析
网页问卷入口设计的几种常见问题小结
Google 用户体验的十大准则
用户调查究竟有多大的价值?
社交网站的另类营销:故意设计得“不够完善”
网站该如何做才能引导用户消费?
如何提高社区运营的用户体验?
运营分析:看影评网站时光网用啥黏住用户?
从网站运营的角度去分析知名B2C商城用户体验的过人之处
从瑞士网络超市的营销细节看用户体验
用户再次访问你博客的三十个理由
网站内容的个性化与用户信任感
20个提高网站用户体验的方法
网站用户体验分析:关于好乐买的意见以及建议
用户体验之网页板块设计深度解析
用户体验之情景反射陷阱
谷歌中文站长博客:构建优质网站的一些建议
网站的分页设计如何做得让用户体验更愉悦?
电商网站的产品陈列设计和细节体验分析
案例分析:19楼不影响用户体验的banner广告
案例浅析国内三大B2C网站首页的信息架构设计
从携程艺龙酒店产品终页比较分析看用户体验小细节
从点点网与tumblr的差异谈轻博客类网站的用户体验
电商网站的用户体验之关联销售
用户体验:如何让用户更简单地使用网站
WEB产品设计须理清脉络 引导用户做正确选择
B2C网站的“捆绑销售”设计用户心理研究
创造卓越用户体验的五个要点
用户注意力与交互设计的简单分析
站在搜索引擎角度上分析互联网页面价值
7个方法改善网站跳出率过高 提升用户粘度
从吸引用户角度分析SEM广告标题撰写的7个技巧
13个国内知名互联网公司的产品设计团队博客网址
网站页面重构中如何创建良好的用户体验
网站设计如何让菜单导航更轻便一些

分类导航

教程推荐

热门特效

热门教程