欢迎大家来到IT世界,在知识的湖畔探索吧!
系统状态的可见性是Jakob Nielsen 用于用户界面设计的十种启发式方法之一。通过传达系统的当前状态,你可以让用户感觉到自己控制着系统,这种控制感可以帮助您建立信任。
你可以使用以下四种视觉反馈方法来传达系统状态:
1.显示用户位置或进度的视觉反馈
没有人喜欢迷失,但它同时也发生在现实世界和数字世界中。让用户意识到他们在应用程序中的位置对于创建良好的导航体验至关重要。应用程序和网站都应突出显示当前选择的导航选项,以帮助用户了解其当前位置。
Google底部栏导航模式—AurélienSalomon的移动用户体验设计
欢迎大家来到IT世界,在知识的湖畔探索吧!
完成此步骤需要多少步骤
知道完成某个操作需要多少步骤,将有助于用户估计完成该过程所需的时间。
SELECTO的调查知识检查应用程序
2.确认用户操作的视觉反馈
为所有交互事件提供即时反馈是至关重要的。即时的视觉反馈将确认该应用程序已收到用户的操作,增强了直接操作的感觉,并防止了用户出错(例如,敲击同一按钮两次)。
在它的基本形式中,重要的是要显示系统实际上捕捉到了点击。
Ali Ali 的按钮悬停和激活状态
但是在某些情况下,更改按钮本身的状态也很重要。在这种情况下,视觉反馈也将沟通作用的结果,使其既可见又可理解。以下是其中一些例子:
- 单击“喜欢”按钮。
- 打开/关闭某物,按钮颜色的变化为用户提供了有关对象当前状态的信号。
切换台XLIV by Oleg Frolov
- 为项目添加书签。
书签互动[SVG动画],作者:Oleg Frolov
- 将对象添加到购物车,在这种情况下,视觉反馈将证明该商品已添加到购物车中。
Nhat M. Tran的咖啡订购动画(星巴克)
3.显示系统状态的视觉反馈
显示系统忙于做某事
当系统需要几秒钟的时间才能加载时,它应立即为用户提供反馈。根据等待时间,建议使用两个无限加载指示符(通常用于少于10秒的操作):
renatorena的无限加载循环
或进度条(用于10秒钟以上的操作):
张扬的加载动画
这些指标表明系统正在运行,并降低了不确定性水平。
对于移动应用程序,还可以在初始加载期间使用动画启动屏幕。一个设计良好的启动画面会给初次使用者留下积极的印象,并将他们的注意力从等待中转移出来。
GlebKuznetsov✈的徽标闪屏
内容正在加载
当加载内容需要一些时间时,建议使用一种特殊类型的容器—框架屏幕。这个临时内容容器用于减少等待时间,一旦数据可用,就应该用实际数据填充它。
Ginny Wood的骨架装载机
该容器对于桌面和移动产品同样适用。
Shane Doyle的骨骼加载动画
4.触发事件
通知/指示
有效通知的目的是使用户注意新事件的事实。建议使用微妙的动画进行通知,因为动画效果自然会吸引用户的注意力-人眼天生就会关注移动的对象。
Aleksei Kipin的通知
用户操作请求
在许多情况下,系统可能会请求用户采取行动的数据。例如,当用户使用无效数据填写表单时。再如,用户创建了一个密码,它的复杂性并不好,提供了一个无效的电子邮件地址等等。使用适当的视觉反馈,提前告诉用户问题总是更好的。
内联电子邮件验证(作者:Derek Reynolds)
更多控制权可带来更好的用户体验
在较大的设计方案中,视觉反馈很容易被忽视,但实际上它将整个体验结合在一起。当人们与UI交互时,他们期望可预测性和可控制性,这正是UI设计人员应提供视觉反馈的原因。
文中所用图片来自网络,如侵权,请联系删除
想要了解汽车更多内容,就留言联系我们吧!
来源:Nick Babich:4 Ways To Communicate the Visibility of System Status in UI
– 服务内容 –
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/105046.html