为极端情况而设计

2024-5-15    前端达人

前言
为极端情况而设计
 
 
当我们在进行产品设计的时候,设计师会优先考虑理想状况下的各种场景,而理想的用户流程是没有任何问题和障碍的。但是人们很少按照我们期望的方式使用我们的产品。超出预期之外的情况,就是我们通常所说的「边缘情况」,或者说「极端情况」。
事实上,针对不太理想的情况进行设计同样重要。如果没有计划界面如何处理异常情况,整个体验可能很快就会令人崩溃。
作为一名职场中合格的用户体验设计师,避免在工作中遗漏各种边缘情况的考虑,与规避在方案评审的时候会遭到评审会中其他同学的各种diss的尴尬,有时候业内也会将“解决边缘情况问题”的能力作为一个产品经理或交互设计师是否有经验是否资深的一个评判标准。。
所以,
设计方案的完整程度需要看是否有对边缘情况的对应处理方案。
产品设计其实是“向好避坏”并行的设计过程
,向好设计是要追求绝对的好,结合实际情况尽可能保证产品体验的舒适和惊喜,这是产品设计一定要为用户的极致体验需要负责的;避坏设计是相对的坏,结合实际情况尽可能为一些低频场景的极端情况做好容错方案和机制,这就是产品设计中常常提到的边缘情况处理设计。
为极端情况而设计
 
 
为什么要重视极端情况?
针对用户体验中的边缘情况进行设计至关重要,
因为这些特殊场景虽然不太常见,但可能会对用户体验产生重大影响。
通过解决边缘情况,可以确保产品设计能够满足更广泛的用户需求和情况,从而提高可用性、可访问性和用户满意度。主要有以下几个方面的好处:
  1.  
    提高产品质量和可靠性
    : 考虑边界情况可以帮助发现并解决潜在的问题和漏洞,从而提高产品的质量和可靠性。通过深入挖掘极端情况,可以发现在正常使用中可能不会遇到的问题。
  2.  
    增强用户体验
    : 处理边界情况可以确保产品在各种情况下都能提供良好的用户体验。当用户遇到边界情况时,如果产品能够正确处理并给予合适的反馈,用户将感到满意,并且对产品的信任感会增强。
  3.  
    降低风险
    : 不考虑边界情况可能会导致严重的问题,甚至是安全漏洞。通过在设计和开发过程中考虑边界情况,可以降低产品出现故障或安全漏洞的风险,从而减少潜在的损失和责任。
  4.  
    满足法律和标准要求
    : 在某些行业中,产品必须符合特定的法律法规或行业标准。考虑到边界情况是满足这些要求的一部分,因为它们通常要求产品能够在各种情况下都能够安全可靠地运行。
  5.  
    增强产品竞争力
    : 在当今竞争激烈的市场环境中,提供稳健、可靠的产品可以帮助企业赢得用户信任并提升竞争力。考虑到边界情况可以帮助企业开发出更具有吸引力和竞争力的产品。
所以考虑边界情况对于确保产品的质量、用户体验和安全性至关重要,并且有助于降低风险并提高产品竞争力
 
常见的极端情况有哪些
一、文本极限值
处理文本极限值在 UI 设计中是一个重要的考虑因素,特别是当设计涉及到文本输入框、文本区域或文本标签等元素时。以下是一些处理文本极限值的常见方法:
1、限制输入长度。
对于文本输入框,可以设置最大字符数限制,以确保用户输入的文本不会超过预期的长度。这可以通过前端或后端验证来实现,避免用户输入过长的文本。
2、提供字符计数器。
在文本输入框旁边或下方显示一个字符计数器,实时显示用户已输入的字符数和允许的最大字符数。这可以帮助用户了解他们输入的文本长度,并且知道何时达到了极限值。
3、友好的错误提示。
当用户输入超过最大字符数限制时,及时向用户提供友好的错误提示,说明他们已经超出了文本长度限制,并且指导他们如何进行修正。
4、自动修剪或截断文本。
对于一些 UI 元素,可以自动修剪或截断超出限制的文本。例如,可以在显示文本的区域中截断超出限制的字符,并在末尾添加省略号。
5、动态调整输入框大小。
对于可调整大小的文本输入框,可以根据用户输入的文本长度动态调整输入框的大小,以确保用户能够看到他们输入的所有内容。
6、提供预览功能。
在用户输入长文本时,提供一个预览功能,让用户可以在输入之前查看他们输入的文本在 UI 中的最终显示效果,从而避免超过极限值。
7、
多行文本框。
如果用户需要输入大段文本,可以提供一个多行文本输入框,允许用户自由输入任意长度的文本,但也需要在适当的时候提醒用户输入的文本长度限制。
综上所述,处理文本极限值需要综合考虑用户体验和界面美观性,通过设置限制、提供实时反馈、自动修剪或截断文本等方式,以确保用户能够方便地输入和管理文本内容。
为极端情况而设计
 
 
二、空状态
处理空状态是指在应用程序或网站中,当没有数据或内容可显示时所呈现的界面状态。这种情况下,用户可能会感到困惑或失望,因此设计空状态界面非常重要,以提供清晰的信息和引导。
以下是常见的空状态使用场景以及处理建议:
1、
用户主动触发
主要分为「内容被清空/已完成」和「搜索结果为空」两种情况。
1.1、内容被清空/已完成
这种空状态是用户自主删除所有数据或完成了所有任务的情况。一般此类场景不需要进行操作引导,只需要用「插图+正文」或「仅正文」的形式说明情况即可
为极端情况而设计
 
 
1.2、搜索结果为空
当用户搜索关键字后没有对应的结果显示时出现的空状态。此场景需要用「插图+正文」的形式说明情况,并视情况增加行动连接引导用户进行下一步操作,例如:添加、查看等
友好的提示信息: 当搜索结果为空时,向用户显示友好的提示信息,说明搜索未返回任何结果,并且可能提供一些建议或建议用户修改搜索条件。
相关建议或推荐: 在搜索结果为空时,向用户提供一些相关的建议或推荐,以帮助他们找到他们感兴趣的内容。这可以是热门搜索、相关主题、或类似内容的推荐。
为极端情况而设计
 
 
2、
用户被动接受
主要分为「暂无消息/内容/权限」、「初始状态(新手指引)」两种情况。
2.1、
暂无内容/消息/权限
这种情况表示页面暂时无数据的状态,一般情况下使用「插图+正文」的形式,必要时可增加行动连接来引导用户进行下一步操作
为极端情况而设计
 
 
为极端情况而设计
 
 
2.2、
初始状态(新手指引)
对于首次使用复杂流程功能的用户来说,一个新手指引可以帮助用户快速上手,也可以填充原本为空的界面。
除了空状态之外,向用户提供有关如何开始的说明非常有帮助。
教程是让人们轻松了解应用程序功能的好方法。在普通用户界面中使用微妙的动画或提示可以让用户开始执行一些关键任务。
最好的教程是不引人注目的。与其展示超长的视频或幻灯片说明,不如将提示置于体验本身的背景中,这可能非常有效。这有助于用户边做边学,而不是被动地接受大量信息。
仅在必要时才应使用教程。如果您的界面是不言自明的,则可能不需要它。是否包含教程是您需要考虑的设计因素。另一种方法是引导用户直接进入他们的第一个任务,让他们“边做边学”。
为极端情况而设计
 
 
多邻国的这个很棒的示例展示了如何将教程构建到应用程序体验中。它有助于指导用户设置应用程序,并直接进入使用过程。
 
三、
用户和系统的错误
1、用户操作错误
每当发生某种用户输入时,通常都有可能出现错误。考虑一下输入长表单的时候。这些是潜在用户错误的雷区。
即使我们尽力让事情变得直观,也很难完全消除发生错误的可能性,这些都需要在设计阶段进行规划。
有许多不同类型的错误值得我们思考。
验证。
用户没有按照系统期望的方式输入信息。
提交。
出现的问题不是用户的错,但我们需要让他们知道。
内容。
用户请求了我们无法提供的东西。
在设计产品时,您需要考虑可能发生错误的每种情况。然后,您应该为其设计一个状态,以确保系统正常处理该错误。
这可能很耗时,但正是对细节的关注才造就了设计精良的产品。
这里有一些不同的事情需要考虑......
错误是如何出现的。
我们应该使用动画或对比度来吸引用户的注意力。
样式和位置。
错误通知应直观地链接到问题发生的位置。
语言。
错误应该以清晰、用户友好且品牌化的方式编写。不惜一切代价避免“技术演讲”。
明确的解决方案。
在通知用户错误之后,我们还应该提及解决方案。这可能是一条说明,或者是其他可能对他们有帮助的内容的链接。
为极端情况而设计
 
 
输入错误的密码后,该字段会左右轻微晃动(就像有人摇头一样)。这会引起用户对问题的注意,但不会显得突兀
2、系统错误
服务器异常、无访问权限、 网络异常(断网、网速过慢、加载失败、网络连接失败)、浏览器异常、数据出错;
异常状态用来提醒用户发生了未指定的系统错误,需要用户了解此情况,并且提供下一步引导或解决建议,为用户解释异常状态的原因,解决困惑,提供解决办法,引导用户继续产品流程而不是关闭窗口离开
为极端情况而设计
 
 
四、
页面内容过多时的加载方式
还有一种情况就是页面内容过多的情况,这里我们不考虑页面展示只考虑进入页面的加载,大家平时估计遇到过点开一个列表页面,就一直在观看“菊花转”(页面内容加载状态),等的时间如果超过5秒可能就会产生焦虑了,再多点时间直接就和产品说拜拜了,那么这种极端情况一般怎么处理呢?
1、
骨架屏
骨架屏是一个可选方案,也就是说不一定要有,有了会更好。
骨架屏适合页面布局固定的页面,目前很多APP都会使用骨架屏,常用的页面有列表页、详情页等。
一般骨架屏由开发写,如果我们要做骨架屏,需要定义好骨架屏的样式,让开发照着写,骨架屏实现难度我也跟开发同学咨询过,很简单,所以可以放心大胆用。
2、
占位图
占位图应该是许多新人容易忽视的地方,提及占位图就不得不提到加载,为了减少用户感知加载时间,应用加载一般会先加载文字后加载图片,可以缓解用户等待的焦虑情绪。
如果这么做就涉及到一个问题:原本放图片的位置拿什么来占位?
所以就出现了占位图这个东西,当图片还没有加载出来的时候,使用一个占位图进行占位,让用户知道这里是有东西的
占位图一般有带logo的图片和纯色图,如果是加载视频,一般还会在图片上做一个视频的图标,让用户知道这里是视频。
为极端情况而设计
 
 
五、页面上滑处理
当一个页面向上滚动时,页面的元素会发生什么变化,场景的变化有导航栏置顶、标签栏置顶等,这些都是我们需要提前定义好的。
处理页面上滑的交互是指当用户向上滑动页面时所触发的交互效果或行为。这种交互可以增强用户体验,并使用户更轻松地浏览页面内容。以下是一些处理页面上滑交互的方法:
1、导航栏
1.1、固定导航栏
即将导航栏固定在顶部,其余内容上滑,我个人比较倾向于这种方式,当页面比较长的时候可以让用户随时可以看到导航栏,不仅仅是给习惯了导航栏的用户增添一份安全感,更是因为当导航栏有功能入口(比如设置)的时候,用户可以随时看到并随时点击
1.2、内容迁移
这就是一种内容迁移到导航栏区域的情况,这种交互方式不仅能提升用户的操作体验,也能提升产品的数据,比如当关注入口曝光更多,点击关注的概率就会有一定上升。
为极端情况而设计
 
 
2、筛选栏
筛选栏的固定方式也极为常见,很多地方为了用户可以方便做切换,都会把筛选栏固定在顶部,那么这时候就需要我们对交互进行详细的定义。
2.1、第一种是筛选栏本身就在顶部
当筛选栏在页面顶部时:
如果此时我们需要让筛选栏固定在顶部,那么可以这么说明:
页面上滑时,导航栏和筛选栏固定在顶部,其余内容向上滑动。
2.2、第二种是筛选栏在页面中间
这时候有两种情况,一种是筛选栏随页面一起上滑不做固定,另一种是筛选栏需要做固定。具体使用哪种需要视具体场景来定,下面说一下当筛选栏需要固定时我们该如何描述交互。
我们可以以筛选栏为基准
① 当筛选栏位置未到达顶部时
页面整体上滑(一般情况下导航栏当然始终固定在顶部)
② 当筛选栏的位置到达导航栏下方时
筛选栏固定,筛选栏下方内容继续向上滑动
为极端情况而设计
 
 
如何找到极端情况
有些设计师认为,极端情况往往是意料之外的情况,但是实际上,绝大多数的极端情况是可以提前预测的。有两种方法可以帮你找到极端情况:
1、
设计评审。
为了创造出色的设计,你应当主动寻找极端情况。设计评审是一个非常有用的环节,它可以帮助产品团队找到许多潜在的优势案例。在产品设计的早期,就应该进行设计评审。为了获得更好的结果,最好邀请开发人员和其他的团队成员参与此类会议。
2、
使用真实用户测试。
尽早在其他的团队成员的帮助下寻找极端情况是一种很好的办法,但是它不能保证你会发现所有的问题来源。只有在真正的用户进行测试的时候,才能帮你了解用户使用你的产品的时候所面临的问题。同时,值得一提的是,严格且有节制的可用性测试,用户可能会因为经常被指示要做什么而很难暴露极端情况的存在。所以,最好创建一个让用户可以尝试和探索的体系,在灵活的测试和充足的时间下,更容易找到问题。
 
结语
为各种可能发生的情况进行设计
好的设计就是注重细节。
正是这种针对每种场景进行设计的承诺,才使出色的体验与普通体验区分开来。作为设计师,你有责任针对这些边缘情况进行规划。无论您是否为它们进行设计,它们都会发生,所以最好做好准备!
以上仅仅举了几个极端情况的例子,实际上还会有很多,若想尽量覆盖全极端情况,在设计时可以多多思考,将自己切换成“找茬儿模式”,也可以寻求QA同学的帮助,因为他们在写用例时会考虑的更多。即使努力去想可能发生的极端情况,但是有些极端情况还是可能会遗漏,到真正遇到了才知道,不过其实也说明了那些想不到的极端情况可能发生的概率更小。
总之,有些极端情况一定要处理,尽量做到给用户一个好的体验,但是有些情况其实并不需要投入过多精力去思考该如何提升体验,因为本身就不是正常的产品使用场景,只要在发生的时候保证产品可用性即可,因为还有更重要的产品主线体验需要不断去迭代提升。
 


作者:王不二君
链接:https://www.zcool.com.cn/article/ZMTYxOTY5Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档