设计中容易遇到的极端情况

235 阅读7分钟

当我们在进行产品设计的时候,设计师会优先考虑理想状况下的各种场景,而理想的用户流程是没有任何问题和障碍的。但是现实开发很少按照我们期望的方式还原我们的产品。超出预期之外的情况,就是我们通常所说的「边缘情况」,或者说「极端情况」。

为什么要重视极端情况?

针对用户体验中的边缘情况进行设计至关重要,因为这些特殊场景虽然不太常见,但可能会对用户体验产生重大影响。

通过解决边缘情况,可以确保产品设计能够满足更广泛的用户需求和情况,从而提高可用性、可访问性和用户满意度。主要有以下几个方面的好处:

1. 提高产品质量和可靠性

考虑边界情况可以帮助发现并解决潜在的问题和漏洞,从而提高产品的质量和可靠性。通过深入挖掘极端情况,可以发现在正常使用中可能不会遇到的问题。

2. 增强用户体验

处理边界情况可以确保产品在各种情况下都能提供良好的用户体验。当用户遇到边界情况时,如果产品能够正确处理并给予合适的反馈,用户将感到满意,并且对产品的信任感会增强。

一、文本极限值

处理文本极限值在 UI 设计中是一个重要的考虑因素,特别是当设计涉及到文本输入框、文本区域或文本标签等元素时。以下是一些处理文本极限值的常见方法:

1、限制输入长度

对于文本输入框,可以设置最大字符数限制,以确保用户输入的文本不会超过预期的长度。这可以通过前端或后端验证来实现,避免用户输入过长的文本。

2、提供字符计数器

在文本输入框旁边或下方显示一个字符计数器,实时显示用户已输入的字符数和允许的最大字符数。这可以帮助用户了解他们输入的文本长度,并且知道何时达到了极限值。

3、友好的错误提示

当用户输入超过最大字符数限制时,及时向用户提供友好的错误提示,说明他们已经超出了文本长度限制,并且指导他们如何进行修正。

4、自动修剪或截断文本

对于一些 UI 元素,可以自动修剪或截断超出限制的文本。例如,可以在显示文本的区域中截断超出限制的字符,并在末尾添加省略号。

5、动态调整输入框大小

对于可调整大小的文本输入框,可以根据用户输入的文本长度动态调整输入框的大小,以确保用户能够看到他们输入的所有内容。

6、提供预览功能

在用户输入长文本时,提供一个预览功能,让用户可以在输入之前查看他们输入的文本在 UI 中的最终显示效果,从而避免超过极限值。

二、空状态

处理空状态是指在应用程序或网站中,当没有数据或内容可显示时所呈现的界面状态。这种情况下,用户可能会感到困惑或失望,因此设计空状态界面非常重要,以提供清晰的信息和引导。

以下是常见的空状态使用场景以及处理建议:

1、 用户主动触发

主要分为「内容被清空/已完成」和「搜索结果为空」两种情况。

1.1、内容被清空/已完成

这种空状态是用户自主删除所有数据或完成了所有任务的情况。一般此类场景不需要进行操作引导,只需要用「插图+正文」或「仅正文」的形式说明情况即可

1.2、搜索结果为空

当用户搜索关键字后没有对应的结果显示时出现的空状态。此场景需要用「插图+正文」的形式说明情况,并视情况增加行动连接引导用户进行下一步操作,例如:添加、查看等友好的提示信息。当搜索结果为空时,向用户显示友好的提示信息,说明搜索未返回任何结果,并且可能提供一些建议或建议用户修改搜索条件。

2、 用户被动接受

主要分为「暂无消息/内容/权限」、「初始状态(新手指引)」两种情况。

2.1、 暂无内容/消息/权限

这种情况表示页面暂时无数据的状态,一般情况下使用「插图+正文」的形式,必要时可增加行动连接来引导用户进行下一步操作

2.2、 初始状态(新手指引)

对于首次使用复杂流程功能的用户来说,一个新手指引可以帮助用户快速上手,也可以填充原本为空的界面。 除了空状态之外,向用户提供有关如何开始的说明非常有帮助。 教程是让人们轻松了解应用程序功能的好方法。在普通用户界面中使用微妙的动画或提示可以让用户开始执行一些关键任务。

三、 用户和系统的错误

1、用户操作错误

每当发生某种用户输入时,通常都有可能出现错误。考虑一下输入长表单的时候。这些是潜在用户错误的雷区。 即使我们尽力让事情变得直观,也很难完全消除发生错误的可能性,这些都需要在设计阶段进行规划。

2、系统错误

服务器异常、无访问权限、 网络异常(断网、网速过慢、加载失败、网络连接失败)、浏览器异常、数据出错; 异常状态用来提醒用户发生了未指定的系统错误,需要用户了解此情况,并且提供下一步引导或解决建议,为用户解释异常状态的原因,解决困惑,提供解决办法,引导用户继续产品流程而不是关闭窗口离开

四、 页面内容过多时的加载方式

还有一种情况就是页面内容过多的情况,这里我们不考虑页面展示只考虑进入页面的加载,大家平时估计遇到过点开一个列表页面,就一直在观看转圈(页面内容加载状态),等的时间如果超过5秒可能就会产生焦虑了,再多点时间直接就和产品说拜拜了,那么这种极端情况一般怎么处理呢?

1、 骨架屏

骨架屏是一个可选方案,也就是说不一定要有,有了会更好。 骨架屏适合页面布局固定的页面,目前很多APP都会使用骨架屏,常用的页面有列表页、详情页等。 一般骨架屏由开发写,如果我们要做骨架屏,需要定义好骨架屏的样式,让开发照着写,骨架屏实现难度我也跟开发同学咨询过,很简单,所以可以放心大胆用。

2、 占位图

占位图应该是许多新人容易忽视的地方,提及占位图就不得不提到加载,为了减少用户感知加载时间,应用加载一般会先加载文字后加载图片,可以缓解用户等待的焦虑情绪。 如果这么做就涉及到一个问题:原本放图片的位置拿什么来占位?

所以就出现了占位图这个东西,当图片还没有加载出来的时候,使用一个占位图进行占位,让用户知道这里是有东西的 占位图一般有带logo的图片和纯色图,如果是加载视频,一般还会在图片上做一个视频的图标,让用户知道这里是视频。

以上仅仅举了几个极端情况的例子,实际上还会有很多,若想尽量覆盖全极端情况,在设计时可以多多思考,要自己找茬,也可以寻求QA同学的帮助,因为他们在写用例时会考虑的更多。即使努力去想可能发生的极端情况,但是有些极端情况还是可能会遗漏,到真正遇到了才知道。