• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 你设计的图标,能顺利通过图标的可用性测试吗?

你设计的图标,能顺利通过图标的可用性测试吗?

作者:CDX创意设计中心 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含可用性测试,图标设计,用户测试,用户研究,经验分享等相关知识,CDX创意设计中心希望在学习及工作中可以帮助到您

在业务迭代周期内,产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中,有时会出现一些拿捏不定的设计细节。比如,试图推出某个新功能时所设计的图标,它的应用效果如何?如果你还在头疼诸如此类的问题,那现在就可以take it easy了,因为你即将拥有一个得力助手——图标的可用性测试,来帮你排解疑惑。如何拥有呢?还请认真阅读本期内容。

图标的可用性测试,测的是什么?

以下有4个指标,用于判断图标是否可用。

  • 可查找性(Find-ability):用户是否能在某页面上找到该图标。
  • 可识性(Recognition):用户是否能够理解图标所代表的意思。
  • 预测性(Information scent):用户能否猜到点击图标会发生什么。
  • 吸引力(Attractiveness):图标是否美观。

以上这些都是关乎设计是否成功的关键方面,在思考如何改进一个图标的时候,必须分别考虑。

如何进行图标的可用性测试?

图标的可用性测试的方法,可以主要分为2个类别:脱离情境的测试(out-of-context testing)和情境之中的测试(in-context testing )。选择哪种类别,取决于测试时,图标是单独呈现给用户,还是在真实完整的界面之中呈现给用户,前者是脱离情境的测试,而后者则是情境之中的测试。

1. 可查找性(Find-ability)测试

图标需要被展示在完整的真实界面中。

因此,需要采用情境之中的测试,它可以帮助你明确,是否存在多个过于相似的图标,使得被访者需要花较长的时间去区分它们;是否图标被隐藏在相似背景色之中,或者广告很多的地方,使得被访者忽视了图标。

其中,定位所需的时间测试(time-to-locate tests)为最佳方式。

测试中,被访者需要按任务点击图标,你需要计算被访者成功找到目标图标的操作时间,首次点击的正确率。

首次点击的正确率,指的是用户第一次点击即选中目标图标的频率,错误的选择暗示着图标之间的差异不够明显。

2. 可识性(Recognition)测试

用户需要猜出他看到的图标代表了什么,有什么作用。

因此,选择脱离情境的测试,它让图标在没有文本标签,或者其他界面元素的情况下,被单独展示。

从用户的描述中,获得他对于图标的理解。如果用户的理解与图标想要表达的意义不符,就意味着需要重新设计图标。

不推荐的方式:如果图标将伴随着文本(文案)标签,在测试的时候,给用户呈现文本标签,然后让他在几种可能的图标中选择最能代表标签意思的图标。

不推荐的理由:在现实情境中,有的用户会忽略文字标签,只看图标。

3. 预测性(Information scent)的测试

图标的可用性测试目的,不仅是测出用户理解出这个图标的意义,还需要测出用户推断这个图标所代表的功能。

因此,选择脱离情境的测试,询问用户当他点击图标后,将会发生什么。

4. 吸引力(Attractiveness)的测试

增加视觉的吸引力,是使用图标的一个常见原因。

最简单的测试方式:让用户给每一个图标打分,最高分7分,最低分1分.

如果你对同一个图标有多套设计方案,可以让用户从中选择一个最有吸引力的图标,并对喜欢或者不喜欢某个图标给出原因。接着,让用户选择最喜欢的一套方案和最不喜欢的一套方案。

这样一来,能够避免出现如下状况。你的图标大部分是不错的,但离一套最适合的产品图标方案差一点,因为其中存在个别需要修改的图标。

作为一篇「科普文」,上面介绍的内容,都是一些通用性的方法,细节没有照顾得很周到,比如图标的可识性测试中,可能需要结合目标用户的文化背景来分析等。在具体项目中,还需要团队成员发挥主观能动性。

欢迎关注滴滴创意设计中心:

ddqr(1)

「可用性测试好文合集」

  • 《在可用性测试中,如何做好任务评估模型与计量方式?》
  • 《适合小公司!为什么你只需要5个用户去做可用性测试?》
  • 《零基础也能学!超详细的可用性测试方法经验总结》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 为什么你的用户测试是无效的? 来看高手的方法!
  • 我把《设计调研》这本书的脉络和重点都给你划出来了!
  • UX专家如何做设计评审?来看这份深度总结!
  • 用户体验和可用性之间的联系和差异,你都知道吗?
  • 你设计的图标,能顺利通过图标的可用性测试吗?
  • 开发未动,测试先行!告诉你为什么可用性测试如此的重要
  • 在可用性测试中,如何做好任务评估模型与计量方式?
  • 适合小公司!为什么你只需要5个用户去做可用性测试?

相关文章

  • 2018-08-23新鲜出炉!iOS 11中有哪些值得关注的UI 设计细节?
  • 2017-09-10前端开发者的工具、库和资源
  • 2017-08-06复制和粘帖是封装的大敌
  • 2018-08-23超实用!3分钟带你掌握11个最常用的交互控件
  • 2018-08-23实例教学!25个帮你运用好极简风格的设计方法
  • 2018-08-23AI+AE教程!教你制作酷酷的动感灵魂小鼓手
  • 2018-08-23写给UI新手的APP结构指南:闪屏
  • 2018-08-2310个Sketch搭配Zeplin的使用技巧,让你和程序员愉快玩耍!
  • 2017-08-06浅谈 div 与 table 如何取舍结合利用
  • 2017-08-06自适应网页设计的方法(手机端良好的访问体验)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS(Cascading Style Sheet)级联样式表常用术语总结
    • 用超多案例,帮你学会排版中最基础的对比和对齐原则
    • 我花了20个小时研究3个按钮,让你明白UI和UX的区别
    • 抢先来看!2018年UI设计的9个新趋势
    • 酷站两连发!一键生成多种图标尺寸+在线图片编辑
    • 把握登录界面易用与安全的平衡的方法
    • http 请求头设置
    • 通常CSS错误及解决办法技巧
    • 这10个小技巧,帮你创造出可用性良好的微文案
    • 为何如今的产品总给人千人一面的感觉?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有