提高产品状态可见性的4种方法

当前位置:首页>设计文章>UI>提高产品状态可见性的4种方法

如何让用户时刻清楚自己所处的状态、并对当前的目标及去向有所了解呢?这里将提供四种反馈方法来提高产品状态的可见性。

提高产品状态可见性的4种方法

(全文共计1267字,阅读约需要4分钟)

状态可见性原则是人机交互学博士尼尔森发表的“十大可用性原则”中的其中一条。

通过传达系统的当前状态,让用户感觉到产品具有可控性,而这种控制感可以帮助用户建立信任。

文章目录:

1、显示当前位置或进度

2、确认操作

3、显示系统状态

4、触发事件

提高产品状态可见性的4种方法

显示当前位置或进度

1、当前定位
无论是在现实世界,还是数字网络中,都没有人喜欢迷失。让用户知道他们在产品中的位置对于创建良好的导航体验至关重要。
应用程序和网站都应该突出显示当前的导航选项,以帮助用户准确定位当前位置。
提高产品状态可见性的4种方法
2、完成操作需要的步骤
知道完成某个操作需要多少步骤,将有助于用户估计完成该过程所需的时间。
提高产品状态可见性的4种方法

提高产品状态可见性的4种方法

确认操作

为所有的互动提供即时反馈至关重要。即时的视觉反馈表明系统实际上已经捕获了用户的点击,增强了直接操作的感觉,并防止出错(例如同一个按钮按了两次)。
提高产品状态可见性的4种方法
但是在某些情况下,更改按钮本身的状态也很重要。在这种情况下,视觉反馈传达交互的结果,使其既可见又能被理解。以下是一些这样的案例:
点击“点赞”按钮。
提高产品状态可见性的4种方法
打开或关闭按钮。按钮颜色的变化为用户提供了关于对象当前状态的信号。
提高产品状态可见性的4种方法
添加书签。
提高产品状态可见性的4种方法
加入购物车。在这种情况下,视觉反馈将证明该商品已添加到购物车。
提高产品状态可见性的4种方法

提高产品状态可见性的4种方法

显示系统状态

1、等待加载
当系统加载所需时间超过几秒时,应该立即向用户提供反馈。根据等待时间,建议使用无限加载指示(用于少于10秒的操作):
提高产品状态可见性的4种方法
进度条(用于10秒钟以上的操作):
提高产品状态可见性的4种方法
这些状态表明系统正在工作,降低了不确定性。
对于移动产品,可以在加载初期使用闪屏动效。精心设计的开屏将为首次使用产品的用户带来积极的印象,并将他们的注意力从等待中转移出来。
提高产品状态可见性的4种方法
2、内容加载
当需要花费一些时间来加载内容时,可以使用另一种特殊的样式——骨架屏(Skeleton Screen)在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充需要显示的数据内容。
这样的好处在于不会干扰用户操作,并且对加载的内容有一个大致的预期,特别是弱网络环境下极大的优化了用户体验。
提高产品状态可见性的4种方法
电脑端和移动端产品都适用于这样的形式。
提高产品状态可见性的4种方法

提高产品状态可见性的4种方法

触发事件

1、通知/指示
有效通知的目的是为了引导用户注意新的事件。可使用微妙的动效进行通知,因为动效能够很自然地把用户的注意力聚焦在一起。
提高产品状态可见性的4种方法
2、要求用户采取行动
在许多情况下,系统可能会请求用户操作的数据。例如,当用户使用无效数据填写表单时,或者创建了一个密码但不是很复杂,或者提供了无效的邮箱等。
所以最好使用适当的视觉反馈,提前告诉用户存在的问题。
提高产品状态可见性的4种方法

总结

更多控制权可以带来更好的用户体验:
1. 明确定位当前位置或者操作进度;
2. 为互动提供即时反馈;
3. 注意加载状态下的反馈和体验;
4. 合适的动效能更直接地说明问题。
视觉反馈将整个体验结合在一起。用户与产品交互时,他们期望可预测性和可控制性,这正是设计师应该提供视觉反馈的原因。
原文:https://uxplanet.org/4-ways-to-communicate-the-visibility-of-system-status-in-ui-14ff2351c8e8

作者:Nick Babich 译者:Clippp

提高产品状态可见性的4种方法

更多阅读

提高产品状态可见性的4种方法

提高产品状态可见性的4种方法
提高产品状态可见性的4种方法

觉得好看就点一下在看吧

温馨提示:

文章标题:提高产品状态可见性的4种方法

文章链接:https://www.uied.cn/19618.html

更新时间:2023年05月26日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI

可访问性配色的设计实践

2023-5-25 16:42:00

UI

盘点按钮设计的常见问题

2023-5-25 16:42:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索