系统要让用户时刻知道发生了什么,也就是快速让用户知道自己处于什么状态,过去发生了什么,现在的目标是什么,未来要去哪里。一般的方法是在适当的时候给用户适当的反馈,防止用户在使用中出错。
我们知道,用户在与页面交互时会遇到各种状态。这时候就需要通过一定的界面反馈把信息反馈给用户。“反馈”是人机交互最重要的原则。无论是视觉(界面变化)、听觉(声音提醒)还是触觉(振动),都可以帮助用户了解自己页面的状态,以及接下来会发生什么,如何去做。
讨论“状态可见性原理”其实就是讨论如何更合理地设计“反馈”。下面,我就从产品常见的几种异常状态入手,讨论出现异常状态时相应的解决方法,让错误状态“可见”。
目前已经整理出以下9个常见异常,以后会不断补充:
一、网络异常状态提示 当设备失去网络连接,导致网页/APP无法传输数据而导致的异常状态。网络异常通常有两种触发场景:
在没有网络的情况下打开APP,需要刷新页面。这时候就需要提醒用户网络问题了。常见的提醒方式有四种,分别适用于不同的应用场景:
对于这些提示类型,除了本文讨论的断网提示,还有很多其他的应用场景,比如操作提示、进度提醒、程序提醒等。我们来看看各种提示形式的特点和应用场景。
1。默认页面提示 在内容更新频繁的内容型产品(如视频、动态帖)中,经常使用默认页面显示无网状态,直观明了,有个性化的插图和提示文案,同时有【刷新】或【解决方案】条目,引导用户点击查看原因,解决问题。
2。tips tips tips tips通常固定在页面的顶部或底部,比较适合信息列表页面,比如图中所示的钉子等。它们是提示的形式,在风格上更接近列表形式,比较和谐。单击跳转到系统设置或帮助页面。
3。toast提示类 toast(无交互性)
Toast提示的特点是弹出后自动消失(一般至少1s),视觉层次高,能吸引用户的注意力。消失后,用户可以继续软件中的其他点击动作。但由于存在时间短,容易被用户忽略,过多的文字和重要信息一般不会放置。
这种方式非常适合不联网就能查看/使用部分功能内容(缓存)的产品,比如网易云音乐。没有网络的时候还是可以选择听本地的歌。
在表现形式上,吐司主要出现在中间和顶部,因为出现在动作之后,所以其位置不能偏离动作发生的位置太多,避免视觉跳跃。
Snackbars(具有交互性)
在材质设计(Android)中,有一个类似于常见吐司的提示——snack bars,这是一个轻量级的操作反馈机制。一般出现在页面底部,级别最高的地方,过了一定时间也会自动消失。
与toast最大的不同是,它允许用户之间进行交互。用户可以手动点击页面或幻灯片的其他部分来关闭snackbars,有时使用操作按钮来提供继续或取消的功能。
小吃店的使用原则:
Snackbars演示示例:
感兴趣的同学可以去matreia design官网了解一下snack bars https://www.material.io/components/snackbars/#anatomy
4。模式弹出窗口(警报)
模态弹出窗口中断用户的操作,用于提供重要信息或要求用户做出决定。当它出现时,所有应用功能将被禁用并显示在屏幕上,直到用户选择确认、关闭或采取必要的措施。但是会打断用户,所以要慎用。
模态弹出窗口的使用原则:
因此,模态弹出窗口更适合以下两种情况:
网络异常反馈表汇总:
二。空状态提示 由于空状态下没有实质性的页面内容,需要向用户反馈相关信息,以添加或重新提交数据请求。
一般来说,我们所说的空状态有两种触发场景:
1。空状态
这种空状态一般有时候会通过文案提示引导用户创作内容。比如上图中的“下厨房”APP,用俏皮的文案和操作说明引导用户创作菜谱。
设计形式要注意:遵循产品整体风格,文案插画形式,共同美观。
2。用户在APP中的搜索、删除等操作导致的空状态 。
在这种被动空状态下,就更需要提示用户了。
从上面的例子可以看出,当功能系统相对完善的产品出现被动空状态时,往往会给用户其他的选择来避免目前的“尴尬”,而不是冷冰冰的空白页。不知道的还以为在搜索或者被卡住了!
空状态反馈机制概要:
三。服务器异常状态提示
网络或服务器问题导致的页面加载失败的问题也需要反馈给用户,告知用户当前的状态问题,比如最近各种服务器因疫情隔离而崩溃的软件。(爱奇艺↑)
服务器异常导致的加载失败等问题可以通过上面讨论的网络异常问题来解决,但是对于不同的异常场景仍然需要采用不同的设计方案:
需要注意的是,提示的题型文案描述要清晰。毕竟网络问题和服务器问题不一样,以免误导用户做无用的修复。如果我知道是因为服务器崩溃而不是我网络的问题,我可能会去微博看看是不是热搜而不是重启网络对吧~
服务器异常反馈机制汇总:
四。用户观看视频、下载文件、播放歌曲等时流量模式 的预警状态提示。在流量模式下,会消耗大量流量。这时候就要提醒用户当前处于流量模式,避免应用先消耗大量流量而导致欠费的问题。
此警告有以下几种提示形式:
1。播放区/加载区的文字提示 主要适用于视频播放和直播软件。把提示和播放区结合起来的好处是用户进入播放页面后会立刻播放视频,所以这个提示非常自然直观,可以直接看到需要消耗多少流量。
2。简单的吐司提示,在切换WiFi之前会持续消耗流量。 常见于Tik Tok等短视频软件。这款软件对用户体验流畅度要求很高,单个短视频并不会消耗太多流量,播放下一个视频之前也不需要提前缓存。
整体来说,采用吐司的形式不会过分干扰用户观看视频的体验,而且中央显示的提示也容易被用户注意到,所以在下一个短视频播放时可以及时改变流量模式。同时,在网络不稳定的情况下,WIFI流量互切时,也不会中断用户观看视频。
3。模态弹出提醒
现在软件一般都内置流量模式设置。用户可以根据自身情况开启流量模式下的观看/下载功能,一般默认关闭流量模式下的下载功能。
以腾讯视频为例,可以看到当你点击下载时,从开始提示到设置过程中,出现了两次模态弹窗提示,并辅以详细的文字说明。可以看出,模态弹窗更适合用在用户主动触发、消耗大量流量的“下载”动作场景中,可以减少用户的误点击,提供设置按钮入口。
4。贴心的“预装WiFi”[h/]
在一些用户体验较好的产品中,我们还可以看到设计师在一些加载和广告页面中添加的温馨提示,比如“进程不消耗流量”、“WiFi已预装”,这也是对状态可见性原则更细致、更贴心的应用。
交通模式预警反馈机制总结:
五、不兼容版本状态提示 不兼容版本一般有两种触发场景:
1。邮件等内容类别显示不兼容的提示
我们使用较低版本的产品接收来自较高版本用户的消息。如果此较低版本产品与此消息的显示风格不兼容,则应触发此提示,以提醒用户当前版本不兼容,或者通常在消息旁边显示版本不兼容。点击此文本提示,弹出产品升级提示的弹出窗口,指导用户升级版本。
2。非消息内容版本不兼容提示
长期不更新的版本太低,导致产品的部分功能无法正常使用。此时,系统会提示用户立即更新版本。用模态弹出的方式直接提醒用户更新版本更合适。一是因为该功能已经不可用,及时中断提醒用户;第二,可以在弹出窗口中配置下载更新按钮,引导用户更新。
六。操作失败 在操作的过程中,往往伴随着操作失败。这时候要及时通知用户故障状态。一般以敬酒的形式提示。
七。无权限状态提示 无权限常见于B端产品和办公app(如钉钉)。有三种常见的处理方法:
点击后会给出提示。app用toast或者默认页面比较合适,B端常用弹窗提示用户。
直接在页面中隐藏未授权的功能或内容,简单粗暴,但容易给用户造成困扰,因为用户会互相比较。如果他们发现的东西比别人少,难免会打上问号,甚至误认为是BUG。
用户没有权限点击的功能是灰显的,百特无法点击。用户尝试点击后,可以给toast或tips一个提示,通知他没有权限。
八。功能建设状况 一般情况下,未开发的在线内容不会显示在页面中,但部分用户对功能的期待较高。我觉得可以配合怎么操作的思路。在页面相应区域提示用户“功能建设中,敬请期待”,可以增加用户的期待感和参与感。
九。查看内容删除违规导致的异常 1。内容删除导致的查看异常 此时如果要查看内容,页面需要考虑两种情况:
发布的内容链接转发后,如果删除了原链接内容,建议在后续转发的链接中注明转发的链接内容已被删除,防止用户点击浪费时间。
a发布内容,B在信息流中浏览。这时候如果A删除了,B用户因为缓存的原因还是可以看到内容的。单击打开内容链接时,会出现删除提示。
2。内容违规导致的查看异常 内容违规导致的异常比较特殊。一般用户在打开之前是不知道违规的,所以打开之后以默认页面的形式注明违规,并附上违规法律和细节就足够了。
End…未完待续,下面可能会写出与正常状态相关的“可见状态”原理的应用总结。
作者:阿泽,微信官方账号:阿泽设计笔记
本文由@ Aze原创发布。每个人都是产品经理。未经许可,禁止复制。
来自Unsplash的图像,基于CC0协议。
本文地址:http://www.diemang.com/post/24429.html