首页

从用户体验的角度了解按钮

鹤鹤

按钮的点击率低,用户在放置按钮的页面上花费了大量时间,这可能是由于按钮不直观和混乱。

我们将从用户体验的角度详细解释直观且易于用户理解的按钮,例如内容中按钮的排列、按钮的形状以及基于内容的配色方案。

什么是用户友好按钮?

您拥有的按钮越多,做出决定所需的时间就越长。用户使用每个按钮以确定需要哪个按钮来实现目标。对按钮的不确定性会导致对按钮不做任何操作。

为防止出现这种情况,请直观地确定每个操作的优先级。用户一旦知道哪些按钮对其任务很重要,就可以立即采取行动。

1. 按视觉扫描模式排列按钮

应用程序中最常见的错误就是按与用户自然扫描模式不同的顺序排列按钮。优先级最高的按钮放在最前面,以便用户首先注意到它。然而,通过视觉加权,用户会以任何顺序注意到按钮。

按钮的顺序不是为了提高可见度,而是为了提高效率。首先放置高优先级按钮会使扫描方向从上到下颠倒,从而破坏视线的自然流动。

它不是强制用户重新扫描按钮,而是允许用户在单向扫描中执行高优先级操作。这允许用户在做出决定之前依次扫描按钮所需的所有信息。

将最高优先级的动作放在底部使其成为视觉阻力最小的路径,并且可以快速轻松地点击。此外,底部位置是手指最容易触及的位置,进一步提高了效率。

2. 使用形状区分按钮和文本

应用程序中的另一个常见错误是使用文本来表示按钮。设计师使用文本按钮来表明它们的优先级低于其他操作。但是,这对于操作按钮来说是不合适的选择。文本看起来不像按钮。通过使用文本按钮,用户可以忽略操作而只看到主要操作。

文本按钮也会使得用户对内容是按钮还是信息而引起混淆。这种不确定性会导致这些按钮被跳过。

文本按钮不仅令人困惑,而且还是难以点击的小目标。将文本标签放置在按钮形状内可以更轻松地调用操作并点击它。

按钮形状是抑制优先级低于文本按钮的操作的好方法。使用户更容易识别以他们喜欢的方式实现目标的所有选项。

3. 为渐进式动作添加颜色

高优先级操作是最容易看到的。此操作与用户的目标直接相关。如果您不确定其余的操作,请考虑哪些操作将用户推向目标,哪些操作正在远离目标。

在上面的例子中,“结帐”是优先的,这是用户达到目标的一个动作。但是,尚不清楚“查看购物车”或“继续购物”操作是否具有中等优先级。

“查看购物车”操作允许用户查看他们添加到购物车中的产品,这会促进结帐。“继续购物”操作将用户从结账返回到产品页面。

通过查看每个操作,很明显“查看购物车”具有中等优先级,而“继续购物”具有低优先级。

按钮颜色从文本颜色中脱颖而出并吸引用户的注意力,因此它是显示渐进式动作的有效方式。如果按钮颜色与文字颜色相同,则信号不是很强。为渐进式动作添加不同的颜色意味着用户应该采取的动作。

如果您为每个渐进式动作使用相同的颜色,则用户无法确定哪个具有更高的优先级。此外,为每种颜色使用不同的颜色只会使用户感到困惑,并且不会理解不同的颜色。并且,您还会在每个按钮上感受到相同的视觉重量。

设计的诀窍是使用相同的色调,但改变中等优先级动作的饱和度和亮度,使其看起来比高优先级动作更亮。现在按钮权重不冲突,很明显哪个突出。

对比以增强对比度。主要按钮使用深色背景上的浅色文字,次要按钮使用浅色背景上的深色文字。这为高优先级操作提供了更亮的文本标签和最佳对比度。

4. 改变标签上文字的粗细

到目前为止,应用这些技术足以区分优先级,但您还可以做更多的事情。按钮越直观,用户就越不需要考虑它。

对每个标签上的文本使用相同的粗体可以赋予该文本相同的强调量。因此,建议根据优先级分别强调每个标签的文本。更改文本的粗细,使高优先级按钮最厚重,低优先级按钮相对单薄。这样,当用户阅读文本标签时,文本的权重表示优先级。

在上面的例子中,“结账”标签比其他标签更厚更亮。“查看购物车”标签为半粗体,“继续购物”标签为中等。因此,文本标签反映了每个动作的视觉权重。“查看购物车”标签上指示“3件商品”的文字没有加粗,因为它是补充信息,并不代表所执行的操作。

5. 为高优先级操作提供图标

最后一种技术是让色盲用户可以访问您的按钮。色盲用户无法通过颜色区分重量差异。因此,我们需要的东西是不是颜色作为一个视觉线索。

为高优先级操作添加图标将进一步强调它以使其脱颖而出。用户浏览时,用户通常关注视觉元素而不是文本。该图标将使所有用户更加关注高优先级操作。

用户仍然可以通过移除颜色和标签来识别结账按钮。

总结

如果用户在操作屏幕上花费大量时间,或者点击率较低,可能就是按钮设计的不直观。在这种情况下,可以使用这些技术来增强按钮显示并有利于突显优先级。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:对啊设计君

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


5个方面改善用户体验

鹤鹤

当你在一个既定的服务领域工作,但想要进行革新时


1.详细研究当前的用户体验


分析当前的服务体验,解读用户旅程中涉及到的行为,接触点,出现的痛点。构建现有的体验旅程图可以捕捉到服务体验的全貌,立即发现需要重新设计的关键问题,促进组织内部的一致性。对于这种复杂的服务,根据分析结果建立服务蓝图也大有好处,可以捕捉到流程中的关键问题还有不同接触点的关系中的重要方面。

建议:
自己进行尝试,能够有效地发现细节,涵盖分析中的所有步骤。


2.分析服务构建


体验和过程只是服务的一部分:在分析现有服务时,我们也要考虑底层系统是如何搭建组件和动态结构的。只有对系统进行全面理解,我们才能发现连接缺失,精力和资源的潜在浪费和重复。创建一个系统地图有助于让团队成员明确这些问题,讨论潜在的改善机会。

建议:
我们需要将系统中的所有行为者联系在一起,全面理解系统过程,减少重复,弥补差距。


3.设定具体的目标,指导设想


在开始构思之前,花些时间来思考系统和体验的分析结果,并通过重新设计确定自己达到的关键目标。目标可以是横向的(比如 “优化整个旅程中的信息流”),也可以是非常具体的(比如 “入职:从填写表格到热情的欢迎会”)。最重要的是,我们首先要详细了解现状,才能设定目标,制定正确的方法,同时意识到急需解决的潜在局限性和障碍。

建议:
我们也可以将期待体验设定为目标旅程,为体验中的每一步设定一个具体目标。


4.创造新点子和解决办法


提出新的想法,解决旅程中所有已知痛点或系统中的差距,以及抓住有趣的机会。这些想法包括既稍微改进一些特定功能,也可以影响整个服务模式的宽泛概念。在这个阶段,不要限制自己的想法数量,更不用考虑可行性:捕捉每一个想法,与其他团队成员分享,并在彼此的思考之上建立一个新想法。

建议:
快速构思是一种头脑风暴的练习,团队中的每个人都写下他们心中的每一个想法,然后再进行小组讨论。


5.确定最有可能实现的概念


收集所有想法,确定下一步的行动计划。如果项目很简单,我们可以简单地将所有的想法整合成一个重新设计方案,逐步发展。在其他情况下,你可能最终得到50多个想法,对当前的服务体验进行创新,但显然我们不能诉诸于每个想法,那么……从哪着手呢?我们可以建立一个评估矩阵,确定标准,分析每个概念(例如,对用户的价值,实施成本,独特性等),并对它们进行相应的评分。这样我们就可以筛选出最有可能实现的想法,创造较大的价值(这些想法可能是最先开发的)。简略的概念可以很好地改善部分服务,但不会产生较大的影响(容易实现的目标);而较复杂的概念从长远来看会对服务体验产生更积极影响,但需要投入大量的时间和精力。

建议:
我们需要考虑的最核心内容是新概念给用户和组织带来的价值,而不是实施的可行性或复杂性-但这可以根据具体环境而改变。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:马克笔设计留学

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

如何从用户角度出发打造产品体验

鹤鹤

文章定位:

好的产品能为用户带来高效的解决方案,在迭代升级中实现用户价值。

以下文章主要探讨设计师 如何从用户角度出发打造产品体验,通过设计帮助产品带来高溢价。

 

01、用户思维

用户思维最基本就是 围绕用户 去设计,帮助他们 解决实际问题。

Q:为什么要围绕用户做设计?

A:想将自己产品打造成为好产品,最终留住用户。

Q:什么是好产品?

A:“让产品自然生长,不要去碰用户,不要去打扰他们,让他们自然形成一种互动关系”。不要强塞东西给用户,切切实实的在用户需要的时候能快速给到他们价值,解决某个问题,或满足他们的情感,情绪。

即:帮助用户解决实际问题,并提供解决该问题的优秀设计。

所以设计师产出设计方案前需思考的是:

  1. 解决什么实际问题?

  2. 应该提供怎样的设计?




02、确定用户面临的问题点

解决哪些实际问题是每个案子的核心,在该阶段设计师常容易陷入误区

如:我要做 一个…东西、我要怎么怎么做……下意识的就去研究怎么做,而不是首要思考具体解决什么问题,该误区到后期往往会造成设计偏离。

为了避免该情况,首要需确定问题,并将问题清晰表述出来,表述的越清晰解决起来就越容易。

那我们应该怎么去确定这个问题呢?


– 利用同理性图谱构建用户认知

好的设计需要与用户心智相符合,贴合用户当时情境下的诉求。

为了让优化方案更有依据,在发现问题的时候,需要从用户视角出发,结合当前产品的页面去分析是否符合当前用户的诉求。

——可以采用 同理心图谱 的方式:

从 说了什么、做了什么、想了什么、感觉到什么 四个维度去勾勒用户真实的想法感受。


以下以优化案为例:

在实际优化案中,可结合需改版页面按照四个维度走一遍,可让设计师更了解当前页面帮助用户做什么,后续有哪些优化方向。

如:QQ支付页面整体流程优化设计

① 用户需给好友发红包,在输入完红包金额点击支付时,向上滑出了支付面板,用户看到这个面板时候,其心理活动可能是怎样的呢?

② 用户想要更换支付方式,点击更换后看到下方页面,用户对该页面的的感受会是怎样的呢?

③ 用户输入密码后,以为马上就成功了,却发现卡里没钱了,这时候用户更加迫切的是什么呢?

通过以上这样 【移情】的方式,使我们更能了解用户,在没有用户访谈的情况下对他们的 愿望、需求、诉求点 有个概念,当有了这个 共鸣 在后续就可以将这个共鸣变成一个有着明确优化方向的 问题陈述。


– 自问自答式推理逐渐确定问题

在挖掘用户需求点过程中,可以采用不断询问不断回答的方式,将自己脑子里想的直接写出来,通过这样的方式构建自己思考的逻辑。

如:“在下单页转化率太低 > 在下单页用户无法快速验证信息 > 在下单页重点信息不集中,其余信息太显眼 >…..”

在这个过程其实就是刨根问底的过程,在反复的试错过程中也会离真相更近。

类似下面这张Julie Zhuo的自我审视图:


03、问题陈述(POV)


– 什么是问题陈述

通过陈述句将产品当前状态(问题)和期望状态(目标)的差距描述出来。POV有助于我们强调用户痛点,保证自己将重点始终放在用户身上。


– 问题陈述怎么写

那怎么陈述才能更好的将问题及规划表达好呢?以下有两个方式:

  • 基于用户角度来说:我看QQ群里抢红包很热闹,我也想快速参与进去,但是轮到我发的时候,我因为我不是非常熟悉整个流程,导致我反应慢了,这让群里的人以为我故意这么慢才发,影响大家氛围,这让我有点沮丧。

  • 基于用户研究来说(4W):我们的初中生因为特别活跃,喜欢在群里踊跃发言参与活动,所以一旦群里有好玩的消息总是想第一时间参与进去。我们的解决方案应该 为他们 提供快速能够完成红包发送的链路与方式,不扫他们的兴。

以上两种陈述方式都是针对同一个问题,只是表述方式不同。所以只要你足够专注用户,理解他们需要什么以及为什么需要,就可以快速构建你后续的设计方案。


– 问题陈述注意点

① 用户与他们的需求是问题陈述的核心,避免:我们应该怎么做、产品应该…作为开头。

② 保持陈述的宽泛性,不要过早抛出细致的解决方案、技术限制等内容,避免团队发散受限。

③ 专注一点,不要让用户的需求和目标过于宽泛,导致自己很难找到一个合适解决方案。所以不要视图在一个问题陈述中解决太多用户需求,一次解决一个就很好了。


04、如何打磨设计方案

在经过问题陈述我们对要解决的问题了然于胸,在解决方案上,设计师需要考虑 易用性、易理解性、及着力提升用户任务效率,给用户一个更好的体验。面对不同的项目,可考虑以下几点:


– 结构简洁,重点突出

例1:


该例子非常能体现出 诉求 与 解决方案 的契合。

首先工作人员唯一的目的性就是 筛查 有问题的人,所以在众多人中需 快速判断,这个转化到设计上解决方式:

通过大面积的 色块直观反馈

通过实时的 滚动时间+滚动背景反馈真实性

在结合下方核酸与疫苗辅助判断,整体非常贴合实际诉求,重点突出,有节奏感。


例2:

通过体验核心信息,将内容合理布局,重点突出,操作划分明确,有助于信息获取与确定。


– 管理复杂(满足不同诉求)

人的认知资源有限,天生不善于处理复杂信息,所以在面对复杂信息时设计师需将复杂的内容以一定秩序逻辑管理,分而治之,减少用户的选择,让正确的行为变得自然和明显。


例1:

在58二手车页面的改版中,可以看出在面对不同用户诉求的情况下在 模块化结构 与 坪效 找到了平衡:

顶部按钮直接 分流 不同目的用户;

中间模块展示用户 最关心的维度:价格、品牌、车类型;

下方 透出推荐内容 吸引用户往下逛。


– 注重情感化

情感化不一定都是很精美的插画、动效等表现层面上的,有时候 贴心的记录、舒缓的内容、小游戏…… 也可以起到 情绪调节 的作用,提高用户看到复杂信息的 忍耐度


– 场景化设计(预判你的预判)

多考虑用户使用场景,挖掘一些场景是可以通过我们的设计 帮助用户多走一步,帮他们排除障碍,减少负担。


例1:

打车软件在特定时间点自动浮出目的地,以及截图后立刻打开微信聊天窗,图片自动在对话框中浮出的方式都是通过用户的行为预判了用户下一步的行为,


例2:

用户输入密码后下意识认为操作成功,但却被告知失败,对用户而言是一次打击,若这时直接前置化用户后续可能会的操作,将条路径重新接上,可以让整个过程更加高效。


所以在具体设计方案上,设计师需要不断的去思考打磨设计方案,让自己的设计:

① 显而易见的,让用户体验后觉得「没错,就应该是这样」;

② 有价值的,它为用户解决实际的问题;

③ 与用户的心理模型相符,它不意味着更多的设计。



05、验证体系

验证方式有很多,目前市场上有几大比较成熟的体验度量体系,针对不同的关注点进行 定性+定量 检测。

除去性能表现外,主要都是围绕用户行为数据及使用感受来进行度量

在行为数据上,主要关注:访问频率、留存率、页面访问次数…

在用户感受上,主要关注:满意度、用户评价、推荐度…



– 设计师怎么确定自己设计方案的验证指标

对于设计师而言,不需要做的这么全面,我们只需要针对我们 具体优化页面、场景 找到可以直接验证的指标即可。

例:

在上述的发红包支付页面的优化设计中,由于主要优化的方向是为了让用户更聚焦,提升整体支付体验,所以基于这个目的,我们可以以 整体的支付成功率 来验证大致优化效果;

其次,可以从 每个触点的转化漏斗、和 各页面停留时长 上分析具体页面改版效果。


– 面向真实用户验证设计

除去行为数据上的验证,用户真实反馈同样重要,我们可以采用用户调研的方式了解用户对产品体验的反馈,主要可以从下面三个方面执行:

① 可用性测试:可针对核心优化的功能点设定测评任务,来观察用户的完成情况,如:如果你余额不足,你会怎么做?

② 满意度测试:采用界面可用性问卷调研,可以采用SUS问卷收集反馈

③ 推荐度测试:通过NPS量表来衡量,通过将分值划分为:0~6分为贬损者,7~8分为被动者,分值高于8分为推荐者,带入计算公式(NPS值=推荐者% – 贬损者%)算出推荐度数值,数值越高,说明用户满意度越好,用户的推荐意向越高。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:小发歌

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


关于B端需求文档/PRD入门,需要了解这些

涛涛

编辑导读:产品经理不是在写需求文档,就是在写需求文档的路上。尽管写需求文档是一个基础功,但是如何写好,以及B端和C端写需求文档有什么区别,值得我们深究。本文作者对此进行了分析,与你分享。

接上两篇内容《B端原型绘制入门》和《快速入手甲方项目》的最后内容,这两篇一个是原型一个业务,现在继续说一下落地,也就是需求文档怎么写。昨天上午刚交付了最近负责的小程序前后端文档,加起来快2W字,最终开发也签字确认了,趁着热乎跟大家分享一下。

一、需求文档模板到底能不能套着写?

市面上的文档模板太多了,直接可以搜到的,各种教学,各种视频都在讲,你一个新人怎么能不会写文档,所以这里面的水分,相信付过费的才能知道。

模板是可以套的,比如说公司内不是没有模板,那我能不按他模板写自己写吗,一般情况下不能,在写文档之前大家要明白一个事实,就是你现在到底在公司承担的是什么角色,是团队的冲锋还是后勤补给。这里不涉及到职位,是什么角色大家自己掂量着判断,如果是后勤部队,那你写的文档只写了核心业务,基本跳转,剩下的部门写的没那么专业,是没问题的。至于模板上什么页面响应了,硬件支持了,你不写一点问题没有,删掉就可以了。但如果你是团队的冲锋,你要负责团队和开发部门的对接,需要向不懂网络老板汇报,这时候就需要搞明白所做的东西需要哪些支持了,总不能项目做完,没有环境支持,该买设备买设备,该买服务器买服务器,都要考虑到。

还要注意一点就是模板归模板,不能死套,举个例子,比如模板上让你写了产品功能,需求描述,功能介绍,没说贴图的事,某个页面存在六个面包屑,每个页面都有几个业务,你能不贴图像写作文一样描述需求吗,是不行的,复杂的业务记着贴图描述。

所以那些简历造假的,找到的工作能力不配职位的,这才是他们头疼的问题。

二、C端文档和B端文档的区别

先说结论:

C端重跳转,页面状态,分享路径等

B端重业务逻辑,数据的输入输出,约束条件等

这次正好负责了前后端的文档撰写,能更好根据自己这一段的经验来描述,有一个很大的感受就是前后端是有很大关联的,举个例子,前端的用户分为两种,一种是VIP,一种是普通用户,在前端我需要给VIP账号更好的体验,让他能干更多的事有更多的权利,这句话很明显是一句没有经过处理的需求描述,那转化成产品需求应该是什么呢,“普通用户拥有的权限为XX,XX,VIP用户拥有的权限为XX,XX,XX,XX,未登录时默认展示全部,当用户登录后,进行展示内容分层”,这是产品需求,也是经过梳理后的业务需求,这句话需要写在前端的文档里,那我现在怎么去描述后端的这部分?大家可以做个小思考。

经过这样的前后端梳理,是很有趣的,而且能有一个全局的思考,不会随便说一些奇怪的需求,见识的多了,也就理智了,这句话也适用于生活。再举个例子,拿之前很火的一个传统行业提出的需求“手机屏幕能跟随手机壳变色”来说,如果这个人懂基本的技术实现方式,数据库,一些业务边际他就不会提出这个,当然这个也有点夸张,但我相信大家还是有遇到过这样的人。

三、具体应该注意什么,怎么写?

先说基本的,什么项目背景,角色,阅读对象等乱七八糟的写不写,这取决与你们公司的流程,是产研一家,还是人家根本不知道你这些东西,如果不知道你就要好好写了,如果天天在一块探讨业务,那还写个屁,还有最后面的功能性需求,例如页面响应,拓展需求,易用需求等,上面说过了你要不是冲锋陷阵的,就不用写,你也不会写,只需要把基本核心业务,基本流程写清楚,原型上做好跳转就行了,这一步也不是像我说的那么简单,是需要锻炼和总结的,而且当面临大型程序时是很容易出错的,这就需要之前的总结了。

中间的最重要,也就是菜单/页面描述,需求描述这些,我有个习惯,在文档写之前先把这部分的目录写好,也就是页面结构序号先写上,这样后期会比较清晰,然后就是把写好的描述标题,依次按页面粘到结构上就可以开写了。

页面/模块描述不要瞎写,该页面/模块主要实现什么业务就写上什么,如果实在没有,只是展示,那就写XX信息展示,这块优先写业务,其次操作。

数据排序/来源,有就写没有就不写,来源不知道的就自己搞清楚,如果有来源别忘了搞清楚输出,排序一般为倒序,特殊情况自己考虑

页面描述,优先写清楚所有跳转,跳转涉及到的业务也清楚,判断,业务流程,操作,按钮,各种权限,字段都要考虑到,这就是基本的文档撰写,建议不知道的不要不写,如果现在在团队里有人带,建议都问清楚,这对后续业务理解有很大帮助

字段描述,这块可以比作开发的基本工作手册,这里有一个容易犯的错误就是,画原型的时候咱们会把所有文字处理好,是肯定不会换行和省略号的一般,但如果用户就是要瞎写,或者标题就是特别长怎么办,再或者你花了登录页,什么约束都没写,用户设置密码五个1,这写问题后续是不是很可能出现问题?所以文档这块内容要描述清楚,文字多的一行放不下了怎么处理,上传的地方限制的数量,大小,让输手机号,用户输一堆密码该怎么限制,这些都是基本的,要描述清楚,就算你不懂什么格式,限制,那就写“不允许换行,多的做适应性处理”,那开发也可以自由发挥,就怕没有写到,而开发也没有注意,那后续就很可能出现问题。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理   作者:胡子邯

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



交互设计师该如何高效地分析问题

鹤鹤

一. 明确和理解问题

明确和理解问题就是要看透这个问题的本质是什么,明确要解决这个问题可以用到的资源都有哪些。

理解问题的重要步骤:1.问题痛点梳理;2.产品功能流程图梳理;3、用户画像分析;4.数据分析(热力分析、留存分析、事件流分析)


二. 拆分问题

拆分问题就是问题痛点的出现核心问题,拆分问题涉及的维度的关联性拓展有哪些。

拆分问题的重要步骤:1.用户的核心行为路径分析;2.功能头脑风暴;3.解决方案的探讨


案例:配送管理的业务组件【打印交互组件重构】

【背景】

配送的打印功能主要服务于行政管理人员,每天对配送模块的订单和司机管理,进行打印操作,打印前会频繁配置不同打印需求

【现有问题】

1、满足功能上,体验上缺乏引导,导致用户学习成本较高;

2、历史包袱,随着功能需求不停迭代,功能层级划分混乱,导致用户操作理解时间成本较高;

【前期准备】

理解问题模块—问题的梳理:

交互上:操作复杂,交互组件错误使用,体验感差,难用

功能上:功能臃肿,层级划分混乱,难理解

【理解问题模块—功能流程图梳理】



【解决问题模块—数据分析(热力分析、留存分析、事件流分析)】


1.热力分析(GIO)

配置的需求基本上30天数据反馈可以看出,没必要进行“配置页”为主路径。


这里可得出:是否存在每次打印设置的需求,为以后的交互迭代提供快捷配置的可能性。


2.拆分问题—用户的核心行为路径分析:

主路径:查看列表——批量打印——打印完毕(80%)



特殊:查看列表——批量打印——设置模版——打印完毕(20%)



3.拆分问题—解决方案的探讨:【核心:以人为中心 解决问题】

交互上:操作复杂,体验感差,难用

功能上:功能臃肿,层级划分混乱,难理解


【功能层:功能梳理重组】

【交互层:信息关联】

1.交互关联性更强,现在是联级反馈,解决点击一级内容不知道二级内容的编辑的可视区域;

2.功能信息更直观,布局界面可看出功能逻辑,勾选后及时反馈,解决经常忘记勾选打印的选项;



【方案输出】

方案一:配置页的构想,假设在设置模块有单独承载打印配置的区块,而当前对话框的勾选内容是便捷选项,如需要更深设置,需跳转到打印配置区块

方案二:列表的打印功能添加,全局设置,与当前对话框选择设置进行协助配置,如:列表全局的打印功能设置“不再弹出窗口”设置,点击当前的对话框,是直接打印操作


【可用性测试】

采用行为观察法。


【迭代成果】


       迭代前                                                                      迭代后




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:麦海欣

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



正态分布模型在体验设计中的分析及应用举例

鹤鹤

B端产品往往都具有较长的业务流程和操作步骤,需要用户循规蹈矩、通过较多的步骤找到相应的页面,来触达相应的用户目标。落实到体验设计中,需要设计师充分考虑用户在操作路径中的操作权重(频率&停留时长),进一步以核心步骤为中心向路径两端延伸,完成页面布局。


如何分析和评估用户在操作路径中的权重呢?今天介绍一下,本人从统计学中借用的一个概念——正态分布模型,并将其应用到体验设计的流程中。


1 首先,什么是正态分布模型呢?


正态分布,也称“常态分布”,或高斯分布,是一个在数学、物理及工程等领域都非常重要的概率分布,在统计学的许多方面有着重大的影响力。


如果一个指标受到若干独立因素共同影响,且每个因素不能产生支配性的影响,不管每个因素本身是什么分布,它们叠加后影响的这个指标平均值就是正态分布。


如图:

标准正态分布模型


正态曲线呈钟型,两头低,中间高,左右对称因其曲线呈钟形,因此,人们又经常称之为钟形曲线。


标准的正态分布模型包含了中心极限定理的三要素,影响因素独立,因素影响程度随机但无法支配,各个因素之间是相加的关系。

中心极限定理三要素


当然,在体验设计中正态分布模型就没有那么复杂,而且用户的操作也不是随机分布。那如何在体验设计中如何应用呢?


接下来,介绍一下基于用户体验,提炼的正态分布模型。


如图:

体验设计中标准正态分布模型


总的来说,体验设计中的正态分布模型,是一种用来探讨用户在某一功能的操作过程(或产品的整个生命周期)中,操作频率(权重)所集中的区间与页面布局、信息架构之间关系的方法与思维。


这个模型涉及两个维度:

一是带有指向性的操作路径(步骤/功能模块),可以是一个功能的详细、单一的操作路径,也可以是一个产品从使用到停止使用的生命周期中,用户对整体功能使用流程;


二是频率,操作路径中的步骤或者核心功能被使用的频率,即权重。这个维度可以直观的反应出用户的关注重点和高频操作,便于后续的用户引导及页面布局等。


将用户的操作频率按流程顺序放置到坐标中,即可得到类似于正态曲线的图形,直观的反映出用户在功能步骤(模块)上的关注度。


2 体验设计中正态模型的类型


根据分析功能的颗粒度不同,得到正态分布模型的验证结果也不相同。


由此,体验设计中的正态模型,大体上可分为两类:

第一类是具体的功能(功能型),通过该功能的起始到完成,获得该功能高频操作及核心页面,可有助于功能路径优化及页面布局、功能排布,让用户更方便的获取高频操作。


第二是产品整体功能(产品型),通过用户从使用到停止使用该产品的全部路径,获取用户在使用产品时关注的功能,有利于明确产品定位、优化功能架构,在B端产品上还可以进行角色和权限的管理。


接下来,我们就详细探讨一下两种类型的正态分布模型。


2.1 功能型的正态分布模型

功能型的正态分布模型多用于优化产品功能及路径。这种类型的模型关注更加聚焦,结论也更加直接,甚至可以直接应用到设计方案上。因此在分析功能路径时,要简化相关联的分支路径,避免其对聚焦问题的干扰,使分析结论更加精准。


例如,一个手机TB的购物流程,如果要研究用户购买行为,就需要更多的关注用户对商品的选择、比较等操作,同时简化用户的支付操作路径;如果研究的是购物流程中用户的支付行为,就应该相应的简化用户选择产品的路径。


如图:

举例:淘宝购物流程分析


另外,这种类型分析结果的落地,需要格外关注功能操作路径的入口及其他功能的衔接,保证在更大层级上的操作不会出现断点,保证使用流畅。


2.2、产品型的正态分布模型

产品型的正态分布模型,可以看作众多功能型路径的简化提炼版本,忽略操作细节,着眼于业务在功能模块之间的流转,多用于产品定位升级或架构调整。这种类型的模型是将产品的拓扑图,按照用户从开始使用到停止使用的的操作路径(产品的生命周期),将其映射到坐标轴上,来直观表现出产品的核心功能。


如图:

产品型&功能型


其结果属于定性结论,在设计方案时更多的是参考意义,只有在进行产品定位迭代及架构调整时,才具有指导意义。因此,在不同场景下用合适的模型才能更具有说服力。


正态分布模型的可以应用到B/C/G等多种类型的产品上,根据不同类型的产品,该模型还会有其他功能的扩展。


例如,B/G端产品往往都具有长流程、多角色、多模块的特点,当正态分布模型在B/G端产品上应用时,还可以清晰凸显角色、权限的结构,有利于对用户权限和角色的定义与管理。


3 案例分析


在本人所从事的安防行业中,实时报警的处理是较为高频、且重要的业务功能。本文仅对功能型模型进行案例分析,希望该方法(思维)的表达更加清晰明确,也能够帮到大家。


3.1 业务概述:

实时报警的业务流程大致是这样的:在监控中心或岗亭,保安人员对园区的安防状态进行警戒时,如果有异常状况触发了报警,系统会反馈推送给安保人员,安保人员通过录像抓图等信息判断报警的紧急程度以及处理方式。


3.2 业务定性

该功能是典型的“海岛事件”,具有偶然性和急迫性的特点。所谓海岛事件,是本人对具有偶然性与急迫性特点业务的概括统称,后续可以写文章专门探讨该问题。


3.3  场景推演

安保人员每时每刻都全神贯注监管整个区域的安全状态,是不可能的,更何况这类海岛事件呢?所以,在发生报警时安保人员大概率处在“摸鱼”状态。



当有报警进入时,安保人员第一时间需要确认的是报警的类型以及位置,从而快速判断如何处理。只有当报警信息不明确时,安保人员才会进一步通过录像、抓图、关联的监控来进一步判断报警信息。


实时报警场景推演


3.4  报警业务处理的正态模型分析

在整个场景推演过程中,用户的关注重点是报警详情以及报警信息的确认过程,会有较少的概率查看辅助信息,因此需要保留辅助信息的入口。


如图:


3.5  方案展示

方案采用瀑布流式,高权重的关键信息拥有更高的页面权重,用户可以快速获取信息,以判断处理方式。同时,渐进式展示确认信、辅助信息,如抓图、录像、关联视频等,一方面可以减少对用户决策的干扰,同时能够快速获取这些信息,辅助用户做出判断。


由于方案涉及到公司项目,所以方案不方便直接展示,这里只展示页面信息布局。



我们都知道,在页面纵向布局上,随着视觉流的下移,用户的关注度会逐步降低,因此,在实时报警处理页面布局上,将从上到下信息的重要性逐级降低。


首先是实时报警处理的核心区,分为两个部分基本信息区与视频辅助区,这两部分信息是判断实时报警性质以及处理方式的主要依据。其中,基本信息区是最重要的,用户可以根据报警的基本信息,来确定如何处理报警。对于大部分的报警信息,用户可直接判断报警是否需要处理,或是进一步的确认及验证,尽可能的减少用户的操作;因此,报警的处理入口,紧随基本信息。


而视频辅助区是对部分报警的回放确认,是在查看基本信息后的进一步操作,频率相对较低,因此虽然属于核心区,但是层级却低于基本信息的展示。


辅助验证区放置的报警期间的连续抓图,可以满足用户的放大查看,进行报警辅助确认,随着用户视觉流下移,其重要程度迅速降低,相应的操作的步骤也较为复杂,页面视觉权重也有较大的压缩。


最后,对于极少的报警信息,用户需要通过关联视频的信息进行验证,可通过页面底部的关联视频入口,点击展开关联视频浮层,进行报警信息验证。这是整个实时报警的最后一个层级信息展示。



4 写在最后


正态分布模型不仅仅是一个工具、方法,同时,也是一种设计思维。


在设计之初,充分理解功能的定位,完善功能入口,让用户更容易触达产品的核心功能。然后通过核心功能向业务两侧进行延伸,进而覆盖整个业务,完成产品的框架与流程的构建。


在设计之中,关注高频的核心步骤,让用户的高频操作具有更简便的操作空间,把用户更想知道、更想操作的内容推送到用户面前,让用户在整个操作流程中的操作频率与页面布局的权重分布相匹配,而不是想当然。


只有这样,设计才更具价值,才能培养更忠诚的用户。

文章来源:站酷  作者:体验设计思

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


产品工作中的信息处理——收集、认知、重塑

涛涛

作为产品经理/交互设计师,我们无时不刻都在处理信息,我们调研用户收集需求信息,从用户反馈了解产品使用的问题。我们从接收的有限信息整理信息发散思维,我们在工作流程中需要不断地处理和重塑信息,最后落地到实际产品上。这里就作者在实际工作中的应用与理解给大家阐述一点小知识,希望能够给疑惑的你们带来一点帮助。


一、方法提炼

我们首先需要思考一个问题:在产品设计中信息处理的本质是什么?

两个关键词:挖掘和理清。

  1. 挖掘:挖掘事件本身的正确信息
  2. 理清:理清解决问题的关键思路

整理信息的方法都有哪些呢?在《超级整理术》这边书里的讲述了作者关于他如何整理的方法。

如下图:

通过这一方法的实践与优化,我把应用到产品设计中的方法提炼。

信息处理的三个阶段:

  1. 信息收集——收集相关信息,辅助认知
  2. 认知思辨——对信息进行深度认知与思考,提炼深度信息
  3. 重塑解决——根据信息找出本质问题,进行解决

二、信息收集

1. 如何进行信息收集

在工作项目中,我们要如何进行信息的收集呢?分为四步走:

明确目标——确定信息源——建立收集器——整理分类

首先要明确目标,为了达成怎样的目标,建立目标关键筛选集合,锁定要收集信息的范围。

例:为了达成需求到产品转化,我们在产品工作中需要收集需求信息,建立目标关键筛选集合。

  1. 需求来源:战略决策、用户反馈、产品分析…
  2. 明确信息源:领导小组、用户、产品内用户反馈…
  3. 建立收集器:战略计划书、产品线上反馈、产品部会议记录…
  4. 整理信息:我们从多渠道获取到了需求信息,最终需求整理分类记录在需求池…

其次,建立需求池。

产品设计中最常见的需求收集工具——需求池。

进行需求的收集,是产品日常工作中最常见的工作之一。

运用多维表格进行需求池管理,从多个维度来进行需求的数据统计分类。

两个软件:【飞书多维表格】和【维格表】,都是做需求整理的好工具。

可以根据数据关键字快速筛选展示。

2. 感观生活的信息

我们处在一个大世界中,作为一个独立的个体,我们无时不刻都在接收着来自四面八方各色各样的信息,有人的地方就有“信息场”。

例如我们用“五感”在生活的场景里进行着信息交换:

  • 视觉——去超市买菜,看到浮动的菜价
  • 听觉——去坐公交,听到旁边情侣的对话
  • 嗅觉——经过饭店,闻到飘出来的香气
  • 味觉——中午吃饭,吃到很好吃的红烧肉
  • 触觉——点了一个冰镇饮料,手握着有点冰冷

做为一个产品设计者,做产品设计,研究用户使用场景,为的就是更好的应用到用户的生活、工作、学习等场景中。

我们需要保持信息的敏感度,学会观察周围的信息,无论来源于生活、工作、学习。

对他人时一个微不足道的小信息,可能就是触发你某个灵感的契机。

三、认知思辨

就和推理悬疑剧里破案一样,从案发现场收集的信息,通过信息关联,挖掘更多的信息,这样才能更好的辅助我们找到“嫌疑人X”。

同样,接收信息后,发现这些信息无法立马精准到“关键X”,这个时候,我们需要通过自身的经验、知识库、知识搜索、外界帮助来找寻更多的信息线索。

因此我把信息的认知思辨切分为两个维度,由点拓展到线,再由线拓展到面。

  • 在信息的深度上拓展
  • 在信息的广度上拓展

1. 信息深度上

在信息深度上拓展,指的是当我们接收到信息后,对问题本身的解构,具体问题具体分析,深挖问题背后的本质原因,从而解决它。

1)怎么挖掘信息的深度

怎么挖掘信息的深度——5W法则。


What什么事:

一定要明确是什么事,才有行动的标准,行动之前先思考后行动。

what能让你定位到事件本身,此时需要挖掘更多信息来帮助你解决这个问题。

WHO什么人:

一定要弄清你服务的对象,问题提供者可能不是真实发生问题的人,在信息传播过程中,信息是会损耗的,我们需要明确实际发生问题的人,再切入解决问题。

Why原因是什么:

用户为什么要这么做,这个信息很关键,促使他想加功能的动机是什么?

Where什么场景:

什么场景下发送的问题,促使他想要加功能,通过场景分析可以帮助我们分析是不是真的是需要这个功能才可以解决用户的真实问题。

When什么时间:

发生时间:发生问题的时间,用户发生问题的时间点,有利于缩小日志排查范围。

关键时间:什么场景下触发的这个“关键节点”,这个关键节点的时间,我们可以称它为“关键时间”。

2)产品信息结构的设计

怎么进行产品信息的拆解——用户五要素。

这里我们可以利用信息层级递进的方法来进行信息深度的挖掘。

引用用户五要素的方法细化自己的产品设计工作流程形成逐步递进的工作流程。

如下图,是我在工作当中常用的工作流程。

业务目标-业务流程-系统框架-功能结构-信息结构-交互设计-用户体验

2. 信息广度上

怎么挖掘信息的广度?

信息广度的挖掘,和在一本探案小说里找寻各个人物之间的人物关系的方式很像,只不过从找寻人物之间的关系变成了找寻信息之间的关系。

我将信息与信息之间的关系归纳为三个维度的关系:

直接关系、间接关系、隐藏关系

往往深层信息都埋藏在“隐藏关系”里。

通过不同信息关键点的三层关系挖掘,最终我们可以找到很多信息的关联度,这就像下面这张网一样,极大的拓展了原本单一的信息。

例如:通过苹果这个意象

  • 通过“水果”这个类别想到香蕉,苹果和香蕉通过“水果”建立了直接关系。
  • 通过“苹果”咬一口的形状想到科技行业的“苹果公司”从而再联想到同样做手机的“小米公司”,苹果和小米公司通过“苹果公司”建立的间接关系。
  • 通过“苹果”流行叫“平安果”是让人喜悦满足的象征,而在《隐蔽的角落》这部剧里,经常出现削苹果的画面“用刀削”便有了危机压迫感,苹果和削苹果产生的危机压迫感通过象征属性建立了隐藏关系。

四、重塑解决

重塑解决最重要的两大关键是:解构与重塑。

接下去我们来具体展开来谈谈如何结构信息与重塑信息。

1. 如何解构信息

在我的理解上解构信息做的其实是:整理和关系。

如下图所示,我们可以看到在进行文件夹目录的梳理中,我们通过大模块+细分类的方式将文件目录进行了梳理。

在这个环节做的就是“整理”各个目录分类,将分类处理好了之后,后续的文件就可以按照文件与分类的“关系”放进文件夹目录。

我们再来看一个APP页面的解构信息的案例。

从页面中拆解商品卡片的关键信息。

缩略图、产品名称、促销语、销售价、原价、抢购进度、已抢购数量、抢购按钮。

从五个维度去看这个页面,我们可以得出五个信息的关系:

  • 从框架上区别,我们可以把页面划分为:头部区、内容区、底部操作区;
  • 从信息模块区别,我们可以把内容区划分为:消息提示模块、商品卡片模块;
  • 从功能性区别,我们可以把商品卡片信息划分为:展示信息、操作按钮;
  • 从信息用途区别,我们可以把信息划分为:商品信息、价格信息、抢购信息、操作按钮;
  • 从信息变化区别,我们可以把信息划分为:运营触发变化信息、用户触发变化信息。

2. 如何重塑信息

在我的理解上解构信息做的其实是:理解和表达。

  • 理解:理清和整理信息,解读信息
  • 表达:传递与表达信息,输出价值

1)理解信息的方法:拆解组合

拆——做的是信息的单元拆解。

在我们之前的案例中进行Axure组件化打造时进行的就是信息的拆解,把需要用到的单元组件都拆解出来,作为素材库。

组——做的是信息的单元组合。

当我们拆解得到了组件库之后,在进行新的页面的构建中,使用这些单元组件进行重新组合从而得到全新的页面。

2)表达信息的方法:建立关系

在认知思辨的过程中我们挖掘信息的广度,找寻信息间的关系,而在做信息重塑时,这个过程正好是一个逆向的过程,我们在搭建关键信息间的关系网,让他们彼此更加可靠具有意义。

五、小结

谢谢大家的观看,到此本次关于高效处理信息的内容分享就到此结束了,希望大家能够从中获取到一点收获。

最后回顾一次:

  • 信息收集——收集相关信息,辅助认知
  • 认知思辨——对信息进行深度认知与思考,提炼深度信息
  • 重塑解决——根据信息找出本质问题,进行解决


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理   作者:时光若刻

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


 

用户体验设计指南 - SUS系统可用性量表

鹤鹤

1. 什么是SUS ?


SUS 全称 System Usability Scale ,系统可用性量表。SUS最初是Brooke于1986年编制,可以科学地量化用户体验,用于完成一系列任务场景后,对产品或系统整体宏观的感知可用性测量。



翻译过后可以得到下面的中文表,参与者在使用产品后对每个题目下面打钩来对产品进行5点评分。(小伙伴们可自行保存)



2. 问题组成


SUS提供整体可用性评估度量,由10个题目组成,奇数项为正面陈述,偶数项为反面陈述。


第4,5,10三项构成的子量表为“有效性”(Effectiveness)&“易学性”(Learnability) ;第2,3,7,8四项构成的子量表为“使用效率”(Use Efficiency)&“可用性”(Usability);第1,6,9三项构成子量表“满意度”(Satisfaction)。



3. 使用场景


SUS适用范围广泛,产品新旧版本迭代之间对比,同类型竞品之间对比,同一产品不同终端之间对比均可使用。可采用线上线下问卷调研的方式,简单高效的采集真实用户反馈。避免在初期过早的关注细节。



4. 如何使用


当收集好用户问卷反馈过后,步骤如下:


1. 对于奇数序号的问题,将其得分减1;(比如第1题分数为4,得分为4-1=3分)

2. 对于偶数序号的问题,将其得分被5减去;(比如第2题分数为3,得分为5-3=2分)

3. 将所有问题最后的得分加在一起,然后乘以2.5;(每个题目的得分范围记为0~4,最大值为40,SUS可用性得分的范围在0~100,换算后乘以2.5)

4. 计算出的结果即为产品的SUS可用性得分。



Tips 注意事项:

1. 填写之前不要进行总结或讨论;

2. 应当要求用户快速完成各个题目,不要过多思考;

3. 第二题和第六题对于参与者可能难以理解,需要解释清楚;

4. 如果用户因为某些原因无法完成其中某个题目,就视为用户在该题上选择了中间值。


SUS分数等级与百分等级的区别:



我将其翻译过后得到中文表,可以大体上感知得出的SUS分数对应的用户可接受范围。



更加细化的SUS用户感知,可参照SUS分数曲线分级范围表:


注意到这里SUS分数等级与百分等级的区别。对照SUS分数曲线分级范围表,如果你的SUS分数为68,说明你的产品比市面上50%的产品可用性要好。也就是说这个产品的用户体验算是合格了,表明需要进行较小的改进。50%中值点对应SUS分数68。((59-41)/ (71-65)= 3  故中值点为65+10/3≈68 ,68分是均值,因此对应百分比是50%。)



5. SUS的优点


1. 量表公开免费,题目简单,只需参与者打分,实施便捷,操作简单;

2. 适用范围广泛,产品初期测试验证,竞品分析,新旧版本对比等等;

3. 研究证明SUS在样本量有限时,可以最快达到效果,可信度系数高;

4. 快速宏观有效区分可用系统(产品)和不可用系统(产品),避免在初期过早的关注细节;

5. 当团队内产生分歧时,SUS让更多的人员参与代替少数意见领袖说了算的形式,定量不追求定性。

6. 小样本量时依然呈现高度的内部一致性,产生真实可靠的反馈结果。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:JZDESIGH

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



10条你绝对不能打破的交互设计规则

鹤鹤

  在生活中,有一些规则是你绝对不能打破的,如果你打破了,将会付出惨痛的代价。在用户界面设计中,也有一些必须遵守的规则。它们被称为“启发式”或提高用户界面可用性的一般原则。这些是经过了长时间测试的可重复的模式,可以帮助用户更好地浏览界面。一个良好的设计一定会考虑到以下原则,一个不那么好的设计总是会缺少其中的一个或多个原则,那么作为一个UI设计师,为什么要忽略这些原则让你的用户如此头疼呢?

1.系统状态的可见性

该系统应在合理的时间内通过适当的反馈使用户了解正在发生的事情。

你要不断地给你的用户展示适当的信息、提示和背景,使他们在任何时候都知道他们在系统中的位置。这可以让用户感觉自己处于控制之中,知道下一步该做什么。这个项目被添加到购物车了吗?编辑的内容被保存了吗?这个过程需要多长时间?我的订单的状态是什么?现在正在发生什么?不断地为用户回答这样的问题,不要让他们猜测或蒙在鼓里。

2.将系统与现实世界相匹配

你设计的系统应该使用用户熟悉的语言,使用用户熟悉的单词、短语和概念,而不是使用专业地术语。你要遵循现实世界的惯例,使信息以自然和逻辑的顺序出现。

使用熟悉的词语和语言,不要让措辞过于复杂。屏幕上的单词或图标的含义应该对目标受众清晰易懂。人们还带有心理模型和经验,可以让他们解释图标。

技术的最大进步之一是图形用户界面的出现。在图形用户界面之前,计算机屏幕上只有晦涩难懂的文字命令,每当你想执行一个动作时都要记住并重复。然后,一切都改变了。屏幕上显示的是文件夹和文件的小图像以及一个手形光标。这些都是人们能够立即理解的视觉符号。不需要解释,因为它引用了现实世界的心理模型。


3.一致性和标准

用户不应怀疑不同的词语、情况或行动是否意味着同样的事情。

有两种类型的一致性:内部和外部。内部一致性是指你的网站或应用程序中的模式要一致。这很简单,比如在所有的页面上保持相同颜色的链接,或者在每个屏幕上对相同的概念使用相同的图标,比如HOME。外部一致性是指大多数人使用的其他软件和系统中的惯例,如购物车。大多数人都熟悉购物车的使用方式。你不需要重新发明什么东西。如果你这样做,你可能会让你的用户更难学会你的购物车如何工作。保持一致,为用户节省不必要的混乱。


4.用户控制&自由

用户经常会错误地选择系统功能,并且需要一个明确的“紧急出口”提示才能离开不需要的状态,并且无需通过扩展对话就能支持撤销和重做。


始终为用户提供一条出路。不要强迫用户执行他们不需要的功能,或者把他们引向死胡同。例如,如果你正在设计一个结账流程,如果用户愿意,就让他们继续购物。如果他们试图在一个应用程序上执行一个动作,当他们在最后一刻不确定是否要继续时,就让用户取消。


5.错误预防

比起错误提示信息更好的是一个精心的设计,它可以从一开始就防止问题的发生。要么消除容易出错的条件,要么检查这些条件,并在用户承诺行动之前向他们提供一个确认选项。


当系统操作到很关键的一步时,如删除文件或向1000个收件人发送电子邮件,要确保用户知道他们将做一些重大的事情。向他们展示确认对话或提供额外的信息,清楚地定义在行动之后将发生什么。这将防止他们在不确定自己的行动时进一步行动。这也将为他们省去大量的遗憾。


6.利用识别而减少回忆

通过使对象、行动和选项可见,尽量减少用户的记忆负荷。用户不应该记住从对话的一个部分到另一个部分的信息。在适当的时候,系统的使用说明应该是可见的或容易检索的。


作为UI设计师,我们的目标之一是减少用户的认知负荷。记忆以两种方式工作:识别和回忆。识别是指你立即熟悉的东西。比如一个人的脸。你看着一个朋友的脸,你马上就知道你以前见过他们。回忆的作用则不同。它是你必须从记忆中检索出来的东西,比如一个人的名字。回忆通常需要更多的时间和工作,因为你的大脑必须处理更多的信息来破译它所看到的东西。

另一方面,识别是即时的。我们希望在我们的用户界面上具有更多的识别,而减少回忆。实践这个原则的一个很好的例子是使用普遍可识别的按钮和图标来表示功能,例如用房子表示 "家",用铅笔表示 "编辑"。如果你必须为你的用户界面设计新的图标,而大多数人以前从未见过这些图标,那么请使用文本描述符来澄清并减少认知的负担。


7.使用的灵活性和效率

新手用户看不到的加速器通常可以加速深度用户的交互,这样系统就可以同时满足没有经验和有经验的用户的需求。允许用户定制频繁的操作。


当某些任务在你的应用或系统中反复出现时,你可能想让用户更有效地进行互动。例如,使用滑动手势来保存或删除移动应用程序上列表中的项目。删除一个项目的正常方式是打开一个项目,然后按下删除按钮。专业的方式(也是更有效的方式)是通过简单的滑动并立即从列表中删除项目。


8.极简主义的设计和审美

对话不应包含不相关或很少需要的信息。对话中每一个额外的信息单元都会与相关的信息单元竞争,并降低它们的相对可见度。


当为艺术而设计时,如果我们走巴洛克风格,可以用人工制品、纹理和图像填满屏幕。但是当为交互而设计时,我们的目标是降低信噪比。这样做会使我们的界面对用户来说更容易理解。你可以应用这个原则,把屏幕上显示的内容减少到最低限度,不管是图像还是文字,这样用户就可以专注于手头的工作而不会分心。


9.帮助用户识别、诊断和恢复错误

错误信息应该用简单的语言表达,精确地指出问题,并建设性地提出解决方案。

错误会发生,那是不可避免的。用户遇到错误后发生什么是UI设计师的责任。因此,我们应设计可以理解的错误页面和提醒来帮助用户,并提供解决问题的选项或方案。例如,让我们来看看无处不在的404页面。作为设计者,我们知道错误的404页面意味着什么,但用户一般都不知道。为了帮助用户,我们必须把404翻译成简单的语言,加入一些文案,使其清楚地知道刚刚发生了什么,比如 "对不起,我们找不到你要找的页面。这里有一些具有类似内容的页面建议......"。


10.帮助&文件

尽管系统不需要说明就能使用的话会更好,但可能还是有必要提供帮助和说明。任何这样的信息都应该易于搜索,集中在用户的任务上,列出要执行的具体步骤,而且不要太多。


始终让人们能便捷地获得帮助,把帮助放在顶栏或主导航区的显要位置。当用户遇到问题而不能轻易找到解决方案时,他们必须被引导到一个可以解决问题的地方。这可以采取FAQ页面的形式,用一个搜索框提供可能的建议和答案。在没有答案的情况下,系统必须有一个选项,可以通过支持在线询问或电子邮件或电话,直接与支持部门联系以获得额外的帮助。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:磨刀modao

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

编写一份友好的交互说明文档要注意哪些

鹤鹤

最近有设计小伙伴咨询,怎么样的交互说明才是最好的,是大家都喜欢的。最近他写的交互说明文档提交给需求评审会的成员审核时,大家都建议他再写的合理些,这让他伤透了脑筋。 

我告诉他: 
第一、岗位对象不同:没有一份十全十美的交互说明可以打动所有人,让所有人为之惊叹。毕竟,由于阅读交互说明文档的对象不同,他们会对交互说明文档有不同的要求,这是岗位属性导致的结果。例如前端开发希望详细到字段、初始默认值、数据调取接口等,而领导只要看保证业务方向没有错误的大交互链路。 

第二、同岗位不同认知:同一岗位不同成员的认知、从业经历、个人喜好、性格脾性等也会导致不可能有完美适配所有人的交互说明文档。例如在一个行业已经深耕多年的前端工程师,即使你的交互说明文档写的没有那么详细,他也可以从你现有的文字中推敲出其他方面,同时还能帮你补充完善;而针对刚入行的前端工程师,你要是写的不详细,他就会抓狂,项目时间紧急的时候还会自己脑补交互细节。之后你走查时候也会抓狂,但是没用呀,谁让自己没有写明白交互细节,遗漏了呢。 

第三、使用场合不同:不同场合需要的交互说明文档也不同。例如与对方面对面沟通,交互说明文档可以少写点;但是通过线上工具与对方沟通,就需要写的尽可能详细;如果是会议型的评审,那就要方方面面都做足功课了。简单来说就像准备一份ppt:针对同一个主题的ppt,在外部演讲和在公司内部演讲,同一份ppt会需要设计两个版本,一个是内部版,一个是外部版,原因在于使用场合不同。 

第四、产品阶段不同:交互说明文档阐述的是一个产品的交互,而不是阐述其他的。如果产品所处阶段为成熟期,那往往产品的交互文档已经沉淀了很多通用法则,可以被复用,那么现在的交互说明文档少写点,问题也不大;但产品处于探索期或成长期,通常来说可复用性的交互资产是不存在的,那交互说明文档就需要准备的相对完善。 


有些设计小伙伴就说了,既然不可能满足所有人,那我就按照自己的想法随意写好了。这可不行哦,毕竟我们的主要工作有一部分是撰写交互说明文档,这就必须要有认真、严谨、专业的工作态度,把这部分工作做好。那我们来看看,编写一份友好的交互说明文档要注意哪些。 


什么是交互说明文档
交互说明文档是用来告诉参与产品研发的团队成员页面交互相关细节的一个说明文档,包括页面间的逻辑跳转、页面内模块的交互、页面功能的状态等。交互说明文档写的越详细越有利于参与产品研发各方的正确执行。 


有待改进的交互说明文档
我汇总了一些日常工作中有待改进的交互说明文档形式,看看都存在哪些问题。 

1、文字密密麻麻,无结构
几乎所有刚初入职场的设计师,在编写交互文档时,会怕自己写少了别人觉得自己不专业,怕写的不全没办法表达页面细节,导致交互文档密密麻麻都是文字,这让阅读者几乎无法阅读,找不到视觉落脚点。 


2、描述简单,不完整
有几年工作经验的设计师,由于很多通用交互法则已了然于心,他们在编写交互说明文档时就比较简单,一些交互就没有写在文档上,这导致开发在开发时,忽略了某些交互。 


3、数据太假,没有逻辑
交互稿数据没有逻辑,是很多设计师经常会出现的问题,一部分原因可能在于产品经理没有理顺产品逻辑和细节就提交设计师画图了,另一部分原因可能在于设计时间紧张,来不及对交互稿中所有的数据都做到逻辑合理。 

曾经遇到过的情况有,关联数值关联不上,表格中字段对应的值对不上,表单填写的数据和实际情况不符。 
建议大家在时间允许或有条件反推产品经理协助完善数据的情况下,尽量数据展现的真实与符合逻辑,如此有助于开发及相关阅读者高效理解。 


4、图文太远,找不到
有几次我注意到设计师提交上来的交互说明会标注“见图X"这样的文字。也就是一段说明读完了,还得去页面的某个角落寻找对应的图,这种体验非常不好。 

在交互设计原则中有一项为“足不出户”。“足不出户”的意思是指能在当前页面解决的事情,不要去其他页面;能在就近完成的事情,不要距离过远。频繁的切换和跳转会导致用户心流被打断,容易引起用户思绪中断、思考不刘畅,甚至可能对产品产生反感。 

同理,我们交互说明文档中的图文也应尽量相邻,通过一眼文字一眼图,让用户看的顺畅、舒适,理解的快速。 


5、零散,东一句西一句
东一句西一句是指交互说明文档中本该成为一体去描述的文字,被分成了好几个部分去阐述,这对看文档的人来说简直是灾难,他需要自己重新梳理交互思路,将交互规则串联起来。 


我们自己在编写交互说明文档时,尽量规避上述常见的问题。 


什么是好的交互说明文档
对于什么是好的交互说明文档,网上一搜一大把,这里我根据自己的经验,和大家分享下什么是好的交互说明文档。 

首先我们来明确下,什么是好,有了好的标准以后,再来谈谈如何做到好。 

1、什么是好
通常情况下,交互文档会给产品经理看,用来评审设计方案是否满足需求;给视觉设计师看,用来指导视觉方案的呈现;给前后端开发人员看,用来指导开发逻辑;给测试工程师看,用来协助测试编写测试用例。基于此,好的交互说明文档关系着设计方案是否可被最大程度的实现。并且如果交互文档文字冗长、逻辑不清晰,不仅看的人吃力,还会需要增加额外的时间来和开发工程师沟通。好的交互文档,我认为至少需要具备以下7点: 
(1)明确价值 
(2)考虑全面 
(3)通俗易懂 
(4)结构清晰 
(5)图文并茂 
(6)仅此一份 
(7)修订记录 

2、如何做到好
为了让大家一边学习一遍实践,我使用“表单校验”的交互案例给大家进行讲解。 

(1)明确价值
能协助项目成员通过文档更顺利地完成工作任务,能帮助用户解决问题,能达成产品目标,则是好的交互说明文档。文档对各方有价值,是一份好的交互说明文档的起点。那么,如何编写才能达到上述结果呢? 

一方面是将此次文档的价值写清楚,包括写明此次交互设计的背景与需求来源、需求清单,标明交互设计的理论依据,可以给用户带来的价值等。另一方面要和成员宣导这些内容,让成员感受自己要做的工作是有价值的。 

“表单校验”上场: 


(2)考虑全面
抛开文档阅读对象等相关影响因素,通常来说交互需要考虑到以下几方面: 

a、整体交互流程
整体交互流程是指产品页面与页面之间的交互逻辑。 

b、页面模块交互说明
页面模块交互说明是指模块自身的交互说明,或同页面内独立模块之间的交互逻辑,或不同页面模块之间的交互逻辑。例如点击导航树节点会联动右侧表格内容刷新;点击banner跳转到对应的商品详情页,且定位到页面1/2位置。 

c、页面功能交互说明
页面功能交互说明是指单个功能的各种情况阐述。例如搜索框内输入文字,通过enter触发对应页面跳转。 

d、尽量真实的数据展示
虽然是交互说明,我们也尽量做到模拟真实数据,否则很容易让阅读者产生错误判断。并不是所有人都会一字一句的去阅读文档,因此,尽量真实的数据,有利于阅读者更有效的了解。 

e、特殊情况额外补充说明
很多情况下,会因为某些原因出现极端交互情况,此时也需要补充完整。 

f、通用交互一处即可
建议交互团队为产品建立通用型交互说明库,遇到类似的情况,直接调取即可。 

实际上我们在编写交互说明的时候,不太会分得那么细,很多说明是混合在一起表达的。 

“表单校验”上场: 

(3)通俗易懂
通俗易懂是指要让文字、语言、图片等做到让受众易于理解和感知,从而在信息传递过程中尽量少的出现损耗,这一点同时也与人类的理解能力有关。 

百度百科是这么解释理解能力的: 

“理解能力是指一个人对事物乃至对知识的理解的一种记忆能力。 
理解,有三级水平: 
低级水平的理解是指:知觉水平的理解,就是能辨认和识别对象,并且能对对象命名,知道它“是什么”; 
中级水平的理解是:在知觉水平理解的基础上,对事物的本质与内在联系的揭露,主要表现为能够理解概念、原理和法则的内涵,知道它是“怎么样”; 
高级水平的理解属于间接理解,是指:在概念理解的基础上,进一步达到系统化和具体化,重新建立或者调整认知结构,达到知识的融会贯通,并使知识得到广泛的迁移,知道它是“为什么”。” 

当我们了解了人类的理解能力水平是参差不齐后,我们就要尽量在工作中将专业知识化繁为简(也可以针对人群化繁为简),增强沟通效果,最终达到完成团队目标的结果。 

交互文档尽量做到讲人话,不要讲一堆专业术语。记得之前有个交互设计师在会议上阐述自己的交互方案时,提到用了“提供邀请”原则。由于与会成员是开发工程师和产品经理,他们问到什么是“提供邀请”原则,并且在这个问题上大家讨论了很久。 

由此可见,表达通俗易懂,是很必要的。 


(4)结构清晰
交互说明文档除了要表达通俗易懂外,还需要结构清晰。 

结构清晰的内容不仅使阅读者一目了然、理解成本低,还可以让阅读者了解撰写者的意图。要做到文档结构清晰,除了需要遵守一些规则外,也不能脱离当前文档的实际情况。 

“表单校验”上场(把文字进行分段处理,并取出关键词): 
(5)图文并茂
图片和文字相得益彰可以加深阅读者对文字的理解,同时避免阅读者去想象文字对应的结果。由于人们对同一段文字的理解不完全相同,因此建议设计师尽量安排交互说明对应图解。 

“表单校验”上场(左图右文): 
(6)仅此一份
仅此一份是说交付给团队交互说明文档的时候不要多份。之前我们的前端小伙伴拿到了两份交互文档,一份是纯原型交互文档,一份是视觉稿交互文档,两者描述的信息大同小异。此时,建议交互文档的信息做合并,只提交一份完整的给前端小伙伴,让前端小伙伴能专心致志理解一份。 


(7)修订记录
建议交互说明文档留存修订记录,一方面可以了解交互文档的变更历史,另一方面有利于回溯和查找信息。修订记录一般包括修订人、修订时间和修订内容。 


总结
由于项目进度、业务复杂程度等不同,我们不可能每次都能写出一份最好的交互说明文档,但我们可以想办法写出一份相对可读性高、可理解性高的友好的交互说明文档。我们常说自己是做用户体验的,那交互说明文档就是体现我们交互能力一个方面。 

除了完成交互说明文档,想要让开发小伙伴真正理解交互说明,还需亲自和开发沟通,千万不要认为我写的很详细了,他怎么还是实现的有偏差。事实上,就如开篇所说:同一岗位不同人的认知理解、从业经历、个人喜好、性格脾性等也会导致理解不同。特别是对于一些我们非常创新的、特殊的交互点,需要重点和开发说明。 

并且,交互说明文档基于业务的发展,也会不断的迭代,我们要抱着多听、多想、多思考、多接受的态度去不断优化我们的文档,尽力写出一份友好的交互说明文档。 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:
知果日记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档