经典原则:用户可控原则
简介本条为“尼尔森十大可用性原则”的第三原则。
用户常常会误触到某些功能,我们应该让用户可以方便的退出。这种情况下,我们应该把“退出”按钮做的明显一点,而且不要在退出时弹出额外的对话框。
当用户误操作时要给用户提供撤销、取消、重做等相关功能。不可逆的操作要给用户明显的提示。
详情重要操作提供二次确认对于一些不可逆或很重要的操作,系统大部分会提供二次确认提示,如此可以使用户避免因误操作而给自己带来损失。
提供撤销功能部分系统可提供撤销操作来帮助用户减少因自己的冲动而进行操作带来的后果。
经典原则:环境贴切原则
简介本条为“尼尔森十大可用性原则”的第二原则。
软件系统应该使用用户熟悉的语言、文字、语句,或者其他用户熟悉的概念,而非系统语言。软件中的信息应该尽量贴近真实世界,让信息更自然,逻辑上也更容易被用户理解。
详情新事物的推出可以模拟现实中的东西,让用户更好理解。
现在我们手机中的计算器软件设计界面,基本上跟我们现实中使用的计算器的样式差不多,这样设计能让用户很快上手,易于操作,这就是环境贴切原则。
经典原则:菲茨定律
任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。
1954 年,Paul Morris Fitts 根据信息类比提出一个假设,该假设能够量化「移动到目标选择任务」这个操作的难度「1」。虽然该假设还未涉及到人机交互中的具体参数,却给了后来的交互研究人员极大的启发。
现在常见的 Shannon 公式(即上面那个公式)是由约克大学教授 Scott Mackenzie 在 1992 年提出的一个菲茨公式的变体「2」,该变体被广泛地应用于需要指针操作的人机交互系统当中。作为交互设计和 UI 设计的理论基础,它更简洁明了地阐述了时间 T 和目标距离 D 以及目标大小 W 之间的函数关系:因为以 2 为底的指数函数是递增函数,所以,T 与 D 正相关(D 越大 T 越大),而与 W 负相关(W 越大 T 越小)。
设计案例人们做出一个移动指针的操作通常需要两步:
将指针快速移动至目标大致所在的区域;
精细调节指针的位置以达到可点击的区域。
菲茨定律所包含的两点内容:
指针当前位置与目标间的距离 ...
经典原则:多尔蒂门槛
系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率。
上世纪 70 年代后期,计算机研究人员依然认为计算机可以花费两秒的时间对使用者的操作做出反馈,因为他们认为人们大概正好需要两秒时间来决定下一步的操作,所以 2s(2000ms)一度成为了当年计算机响应时间的标准值。直到 1979 年计算机的算力开始大幅提升,也有了足够的能力在 2000ms 内做出响应,这时 IBM 的研究员 Walter Doherty 进行了一系列研究来评估算力的增长对生产力的影响。
研究结果表明,计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间(这个时间被称为用户响应时间),换句话说,计算机相应的时间越长,用户就要花费越多的时间来思考和决定下一步的操作。 上面这张表格充分说明了这一观点,横纵坐标分别为用户响应时间和系统响应时间,我们可以看到系统响应时间如果从之前的 2000ms 降低到 300ms ,使用者作出下一步指令所需要的时间就能够缩短 5s 以上。Doher ...
经典原则:美即好用效应
当界面被设计得足够美观时,用户往往会容忍一些较为轻微、影响较小的可用性问题。
1995 年,日立设计中心的研究员 Massaki Kurosu 和 Kaori Kashimura 通过 26 种不同的 ATM 交互界面对 252 位参与者进行详细的用户体验测试,并对界面中表观可用性的决定因素(比如数字键布局、操作流程等)进行了评估。结果发现,这些因素中很大一部分对真实可用性的影响微乎其微,反而界面美观度对真实可用性的影响出乎预料的大。
注:文献中的数据表明,表观可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间,而界面美观度这个数据达到了 0.589。
设计案例用代码简化交互 正面影响来说,将界面设计得足够美观,其作用是毋庸质疑的,每个设计师都应该朝着这个方向不断努力,用户对好看的界面中一些轻微的可用性问题会相当宽容。
应用案例 1:Everest 官方主页 页面中项目列表的滚动使用了一种极其酷炫的方式,动画自然流畅不拖沓,虽然整个页面利用率和操作效率没有比直接展示在一 ...
数据指标
关注数据指标,不仅仅是产品经理或运营的「专利」,作为交互和 UI 设计师也需要掌握这方面的技能,来帮助产出更贴近用户行为的设计。同时,监测产品数据也有 2 个重要作用:一是可以监控产品迭代中的问题点和设计点,运营和市场活动的收入水平等,看看他们目前处于什么状态,也可以为后续产品迭代的方向提供参考帮助。二是通过对数据的挖掘和分析,可以发现新的商业机会和产品爆发点,也就是近两年经常听到的数据增长、用户增长、增长设计的概念。
什么是数据指标?它是对当前业务有参考价值的统计数据,是通过对于业务需求的进一步抽象,并进行数据埋点后,加工出来的一套计算规则,并通过有效的方法论和数据可视化呈现,最终能够解释业务变化和用户行为。当然,不是所有的数据指标都叫指标,只有对当前业务有参考价值的指标才可称作指标,同时要具备:可统计、可分析、可监测的特点。
网页基础指标先了解下流量的概念:分为站外流量来源和站内流量路径。以下就拿电商产品举例。
站外流量:通过其他平台或外界媒体进入到你的店铺就是站外流量。又分为免费和付费,免费有自然流量和搜索流量(比如在百度搜你店铺的名称并点击进入,这就是从 ...
UX设计师需要关注的96个问题
发现问题的本质是动手设计的第一步
提出有意义问题的能力是UX设计师能力中一项基本但经常被忽视的技能。实际在整个项目过程中提出的问题数量与最终设计输出的质量之间存在明显的相关性。这不仅仅是设计创造,而是关于需求和问题的理解,在分析理解的基础上,产出解决方案是显而易见的。为了理解手头的挑战,UX设计师必须在项目流程的每个阶段提出正确的问题。实际这些问题对跨行业,不同设备和人物角色的项目都非常有用。
所有的问题可分为六个阶段进行:
项目启动大会时为了使交付团队和利益相关者围绕愿景和项目计划保持一致,设计师可以提出恰当的问题,这些问题和见解可以让团队从以后开始设计基础知识
我们的目标是解决什么问题或需求?
产品/系统需要做什么?
什么是商机?(例如,获客,拉新,留存,收入,转介绍等)
什么是关键绩效指标(KPI)?
我们还能如何定义这个项目的成功?
谁是用户或客户?
为什么这对他们很重要?
他们为什么关心?
用户试图做什么?
他们的痛点是什么?
我们如何通过此设计流程吸引用户?
是否有任何限制(技术,业务等)?
我们如何比竞争对手更好?
我们可 ...
如何缩短用户行为路径
你在做饭的时候,发现油盐酱醋被放到了东南西北5米外的桌子上,你会怎么想?当你发现从家走到超市的路被堵住了,你必须要走两倍的路才能到超市,你会怎么想?在做一个任务的时候,当然希望可以顺利地完成,不希望中途被打断或被阻碍,产品设计也是一样。
网上超市的例子先来看一个场景:当在网上超市搜索一件商品时,刚好超市中没有这件商品,这时候你会给用户怎样的提示呢?
第一种方案:直接告诉用户抱歉,我们这没有这件商品。
第二种方案:告诉用户我们这没有这件商品,但是有类似的其他商品推荐给你。
对于用户来说,第二种方案当然体验更佳。
不仅可以在用户失落的时候给一些安慰,还可以在用户可能打错字的时候进行容错,把用户其实要搜的商品推荐出来。缩短了用户购买产品的行为路径,提高了下单率,为商家带来更多利润。
关于外卖的例子图中的历史订单是在A家购买的外卖记录,后来到了公司也想定同品牌的连锁店外卖,为了方便直接从订单记录中点击「再来一单」,这时候提示我 「已经超过了配送范围,并给我推送了在公司地址配送范围内的同品牌连锁店。」
这种推荐设计不仅方便了下单购买,也节省了重新搜索店铺选择商品下单的行为 ...
政府网站UI设计研究与探讨
政府网站设计,区别于平时接触的企业站设计有很大的差异性。不论是从功能、业务、设计布局上,政府网站更加严谨、庄重和规范。或许在设计企业站时,可以运用的设计手法有很多,设计规范也没有那么拘谨,可设计的范畴相对较大,设计衍生和创新的空间也更大。但是一个优秀的政府网站,在严格遵守设计规范以及政策文件指引下,在有限的空间内做出不一样的创新时,就更具挑战。
如何做好政府网站设计,如何设计出一个标杆性政府网站?下文将从政策指引、设计趋势、设计原则、设计目标以及设计方法五个方面进行剖析和探讨。
政策指引 所涉及到的所有政府网站UI页面设计,都需要严格遵循国办47号文要求。国办47号文,从展现、布局、栏目、频道、专题5个方面,对政府网站设计提出规范性要求。其中在页面设计展现最直接,在设计沟通确认过程中最容易失误的几点,也是国办47号文一开头就重点强调的几点:
政府网站应简洁明了,清新大气,保持统一风格,符合万维网联盟(W3C)的相关标准规范要求。 这一点主要是为了规范部分项目在设计过程中,过于追求创新,导致首页和各个频道页或其他页面风格 ...
可用性测试
什么是可用性?任何与人可以发生交互的产品都应该是可用的,就一般产品而言,可用性被定义为目标用户可以轻松使用产品来实现特定目标。
ISO9241/11中的定义是:一个产品可以被特定的用户在特定的场景中,有效、高效并且满意得达成特定目标的程度。
人机交互专家 Jakob Nielsen 将可用性框架的定义为:
可学习性:初次接触这个设计时,用户完成基本任务的难易程度?效率:用户了解了设计之后,能多快地完成任务?可记忆性:当用户一段时间没有使用产品后,是否能轻松地恢复到之前的熟练程度?错误:用户犯了多少错误,错误严重程度如何?用户能否从错误中轻易地复原?满意度:用户对产品的主观满意度,这个设计让用户感觉如何?
什么是可用性测试?可用性测试,大多用于网站或移动应用的设计评估,其实也可以用于智能硬件的完整体验流程,通常会邀请目标受众群体中的真实用户,在特定场景下通过产品完成典型的任务。
在真实的使用过程中观察用户的实际操作情况,详细记录并分析用户在使用产品中遇到的问题,目的是发现产品中存在的可用性问题,收集定性和定量数据帮助产品改进,并确定目标用户对产品的满意度。
简单来 ...
视觉规范——文字编排
在文字编排中如何使行高、行长看上去更舒适
行高字号的设置字号就是字体的大小,文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。网页字号中,最小中文字号是12,英文是10。页面的字号可以4为基数进行递增的,最好采用偶数。像14号字的正文和13号字的注释,这种比较小的字可以不以4为基数来做。不管怎么去定义字号,只要视觉上美观大方并具有关联性,采用哪种规则去约束它都可以。另外所有的字体都要调试出深色和浅色两种配色,并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。
根据需求随意组合当定义好字号,标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系,字号差异越大它们的层级关系就越明显,但它们之间的差异又不能太大,差异过大会影响整体的视觉平衡性,给人一种不和谐不自然的感觉。例如:标题字号20px搭配正文字号12px;标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。
英文的行高在设置文本行高的之前,需要理解一下“行高”与“行间距”的差别。前端DIV+CSS和 ...