首页

设计交互-用户体验之心得篇

前端达人

1.为什么用户使用对齐标签填写表单的速度更快


想象一下,一个用户已经准备好注册您的站点了。他们会进入你的表格并输入他们的信息。字段标签对齐的方式会影响用户填写表单的速度。


你是想给用户提舒适体验,还是想给他们一个麻烦?

如果您想让他们的体验更快更容易,请使用输入框上面的字段对齐标签.或输入框内的对齐标签模式。


与左对齐和右对齐的标签相比,顶部对齐或内部左对齐标签填写起来更快、更容易。这是因为标签只需要有一半多的视觉固定物。

顶部对齐标签还允许用户以一个可视方向向下移动输入框。左对齐和右对齐的标签需要两个视觉指示才能填写。


顶部对齐标签的唯一缺点是,它们可以使表单变得很长。但是现在用户滚动的频率越来越高,所以这不是问题。

通过减少字段之间的空白,可以减少表单长度。您还可以将表单拆分成多个页面,以使表单更短。


顶部和左/右对齐标签之间的差异很明显。顶部对齐标签更容易在眼睛上,并使表格更容易填写。虽然他们可以使表单更长,

但用户将从完成表单所需的时间和精力的减少中获益更多。


如果顶部对齐的标签能够给用户提供更好的表单体验,那么它是值得采用的。设计师应该更多地考虑他们的字段标签对齐。

它可以区别于用户填写表单还是放弃表单。


2.为什么对话框中的“确认”按钮在右边工作得最好


有很多设计经常会问我一些关于按钮上的问题那我今天也来献丑讲以下我对按钮的一些理解,这段时间针对这些东西研究了很久,在对话框中放置“确认”和“取消”按钮的位置。“确认”按钮是完成任务的主要操作。


“取消”按钮是在没有完成任务的情况下将用户带回原来屏幕的辅助动作。

根据它们的功能,最好的顺序是什么?“确定”按钮应该出现在“取消”按钮之前还是之后?


许多人提到了以下几点平台约定作为答案。虽然这似乎是一个解决问题的方法,但实际上并非如此。它不能回答哪个位置对用户更好,以及为什么。为了一致性而遵循平台惯例的建议是不够好的,给设计师留下了空手而归的机会。


“一致性”是设计师们常用的一个词。不深入考虑用户面临的设计问题也是一个流行的借口。如果一个人不知道为什么会存在,遵循设计惯例有什么好处呢?


如果某个设计约定对用户有害呢?设计师应该为了一致性而盲目地遵循吗?糟糕的设计实践是否应该持续下去,因为设计师们希望通过平台设计的一致性来解决每一个问题?


今天,有一些平台设计约定被广泛使用,因为它们是为用户工作的。但这里的要点是,平台设计的一致性永远不应该让设计师满意,因为这是做某事的唯一理由。理解为什么您应该以一种方式而不是另一种方式来设计您的用户界面的原因是关键。


按钮放置事项


人们可能会说,让你的动作按钮突出给它更多的视觉重量和一个清晰清晰的标签比它的位置更重要。虽然动作按钮的视觉重量和标签是一个重要的设计方面需要考虑,但它不是唯一的方面。


只关注一个设计方面而不是其他方面是一个粗心的设计师的行为。一丝不苟的设计师会思考每个设计方面是如何影响用户的。

对于设计师来说,最难搞清楚的是主动作和次要动作是如何放置的。这就是为什么“确认”/“取消”按钮的争论在设计师中如此流行的原因。


为什么‘确认’按钮在右边工作得最好?


当你通过了平台惯例的争论后,你会质疑哪个位置最有效。您可以通过分析设计如何影响用户来解决这个问题。


减少视觉固定


一些设计师认为,在第二个操作之前将主操作放在左边对用户更好,因为它更接近,因此,点击的时间更少。


这是有意义的,但您不能忽视这样一个事实,即用户在选择要采取的操作之前将查看他们的所有选项。

这意味着大多数用户不会盲目地单击主操作按钮而不查看它旁边的辅助操作按钮。


他们将首先看到左边的主要动作,然后查看右边的次要动作。然后,他们会把眼睛移回主要的动作,点击它。这将在多个方向上总共创建三个视觉固定。


将其与放置在对话框右侧的主操作和放置在左侧的辅助操作进行比较。用户从第二个动作的眼睛开始,然后将眼睛移到主动作上单击按钮。这在一个方向上总共创建了两个视觉固定,给用户一个更快的视觉流。


用户只关注每个按钮一次,并在主动作按钮上结束。将主操作放在左边可能会使用户更容易到达,但是当您从用户的思维过程和视觉固定的角度来看速度时,将主操作放置在对话框的右侧实际上更快。



用户点击或操作按钮的心里状态


当用户单击辅助操作按钮时,他们期望应用程序什么也不做,并将它们带回到原来的屏幕。因此,“取消”按钮的功能类似于“后退”按钮。


当用户单击主操作按钮时,他们期望应用程序执行按钮所述的操作,并将其转到下一个屏幕。因此,“确认”按钮的功能类似于“下一页”按钮。将辅助动作按钮放置在左侧,主动作按钮在右边映射到用户可以期待的‘后退’和‘下一步’按钮功能。


它类似于分页按钮的放置方式。将用户带到下一页的按钮位于右侧,将用户带回其早期页面的按钮位于左侧。这个按钮的放置工作是因为它映射到用户从左到右的阅读和导航方向,其中右是前进的方向,左是后退的方向。


对话框中的“确认”和“取消”按钮应该遵循类似的交互模式,因为它们的功能类似于分页按钮。

不仅如此,在中国用户习惯了左右方向的模式。

将您的主要操作放在右侧,将次要操作放置在左侧,将使您的对话框按钮更容易、更直观地为用户所理解。


为用户提供更有效的视觉流畅度


将您的按钮放置在终端区域可以让用户看到他们最后需要采取的主要操作。这不仅改善了视觉流,也改善了任务流。

用户在扫描时不会跳过主动作按钮。当他们通过时,他们的眼睛就会盯着它,所以他们可以立刻点击它。


按钮放置在中间还是放置在左右两边?


另一个问题是设计师经常想知道他们是应该把按钮放在角落里,还是把它们放在一起。当您将主操作和辅助操作放置在对话框

的角中时,它将很好地映射到左右方向。但是,由于‘取消’和‘确认’按钮不是导航按钮,所以没有必要遵循方向映射。有时它弊大于利。

如果应用程序要执行用户无法撤消的关键操作,那么用户可以看到“取消”按钮和“确定”按钮是很重要的。在这种情况下,“取消”按钮的功能可能像“先前”按钮,但更重要的是,因为它充当安全按钮,以防止任何更改。


在左下角放置“取消”按钮的危险是,由于两个按钮之间的视觉分隔很大,它可能导致用户忽略它。将“取消”按钮和“确定”按钮放在一起,可以使用户更容易在一次凝视中查看和比较这两个动作,从而选择最佳的操作和点击。

我们经常卸载软件的时候一不留神就会点错,或者是我们在装某一个软件的时候全家桶一拥而上。所以在不同场景当中我们所用的按钮形态也是不一致的。


3.下拉菜单加图标和不加图标的区分在哪里!


大的侧边栏菜单甚至会让用户看起来很不双我们应当如何解决这一个问题。

其原因是设计人师在做显示菜单项的时候会出现的问题。

当它们都有相同的视觉处理时,菜单项很难进行识别与区分。

如果不修复这个问题,会导致用户放慢他的浏览速度从而导致用户的流失在大的层面来讲,小的层面来讲阅读不爽导致关闭页面。


菜单栏没有主次之分

当您对菜单项进行全文本或全图标处理时,问题就会出现.当用户扫描他们想要的项目时,他们的注意力分散在菜单周围。这是因为没有层次来吸引他们的注意力。


通过将用户的注意力引导到您的主要项目,使您的菜单可扫描。

要实现这一点,我们可以看下面设计形式来强调重点内容


主项图标


与其在每个菜单项上放置图标,还不如将其放置在主菜单项上。视觉强调首先将用户的注意力引导到这些项目上。

次要项目上缺少图标,这使得它们能够得到其余的关注。


略大一点的图标


如果要使所有图标处,请稍微放大需要突出的图标。

稍微的增大会使视觉效果有很大的不同,同时字形更容易辨认,每一行的线高也会增加。让整个看起来更加有空间感一些。

让用户浏览阅读起来也会更加舒畅一些。

4.在按钮上避免颜色对比度错误


想象一下,当用户在您的界面上遇到一对按钮时,他们犹豫不决。

用户向左看,然后向右看,比较它们。经过一番思考,他们做出了选择。

他们的选择按钮做出决定,而且不确定,因为你的按钮没有层次结构。


不要使用相同的颜色轮廓按钮


甚多的设计师设通常喜欢使用主按钮的轮廓形状作为辅助按钮。按钮样式看起来可能不一样,但还不够。

他们仍然会竞争,因为他们的颜色对比度相等。

为了给主按钮更多的注意,削弱轮廓按钮的对比度。与其使用重颜色,不如使用它的色调。你可以通过降低重颜色的亮度和饱和度来制作。确保对比度足够高,以达到主要的按钮突出性。


不要使用黑色辅助按钮


设计师的另一个趋势是把第二个按钮变成黑色。他们认为,使用中性的颜色,它是不会竞争的。然而,黑色按钮更为突出,因为它有一个更高的对比度。



不要使用黑色,而要使用重颜色的色调,以使辅助按钮比主按钮更弱。要做到这一点,增加亮度和降低饱和水平。



不要在主色调上使用浅色


将彩色按钮与中性灰色配对并不总是意味着彩色按钮会得到更多的关注。如果主按钮的颜色太轻,则中性辅助按钮将更加突出


要避免这一错误,请选择不太明亮的颜色。明亮的颜色可能看起来很有吸引力,但它与白色背景或文字的对比不太好。在主按钮上使用更暗的颜色,这样第二个按钮就不会引起注意。




5.复选框的设计与使用方式哪种更好


在界面上使用复选框之前,您必须先问自己几个问题。复选框是否是在此上下文中使用的正确组件?如果是的话,最有用的显示方式是什么?


许多设计师没有问这些问题,自动使用复选框,没有太多的事先考虑。

因此,它们通过在错误的上下文中使用它们而产生可用性问题。


不仅如此,许多设计人员都很懒惰,期望前端写成默认选框完成这项工作,而不是

自定义复选框设计。但问题是,前端默认的复选框不能完成这项工作,因为它们的

可用性很差。


大多数设计人员在复选框上会犯的几个可用性错误,这些错误会破坏用户体验。



单选与重复的选择


在设计当中我们经常会遇到做选择性的勾选,往往很多设计师会犯的一些错误问题和选择障碍问题。

通过更大的目标来明确与用户进行选择更为明确

我们设计单选框的时候这不是秘密而是让用户做出选择,复选框是很难点击,因为他们的小击中目标。


设计师通常会让标签点击,但如果它不是直观的,那也于事无补。


通过将复选框转换为复选标记,您可以为用户提供更大的命中目标和更清晰的交互提示。



重复物品的重量及数量选择


有时你可能想提供不同数量的商品。使用多个复选框复制它会产生更多的文本来读取,并使界面混乱,且让用户难以进行选择。对于增量输入更改使用数字选择器一次显示该项会为更好些。


undefined


总结以上两点,实际商用应用案例如下所示


6.在设计当中我们该如何控制内容的突出性与阅读性


新闻卡片的设计怎么才能突出信息内容


卡片内容有几种文本类型,提供不同的信息功能。让我们看看基本内容卡的文本类型。

首先是眉毛,它是一个明确的词或短语,用来描述内容的主题。

还有一个标题,它用一个句子中的几个单词告诉用户内容是关于什么的。

在此之后,就会有一个描述内容的正文。

最后,就是时间与操作的按钮

必须通过确定哪些文本类型对用户更重要,从而为您的卡片新闻建立文本层次结构。

此内容新闻卡片的适当文本层次结构为:

1.眉毛-可以是时间,可以是新闻分类

2.标题-最重要的是,因为它描述的内容最快。

3.正文-包含一个描述性段落,但阅读时间最长。

4.描述内容的正文对内内容的简要描述。

您的内容卡应指导用户按此顺序浏览文本类型。要实现这一点,您需要使用浏览控制对文本类型应用适当的视觉强调。


控制用户的浏览顺序


通过适当的视觉强调,可以控制用户浏览的顺序,并指定反映文本层次结构的浏览模式。

当扫描遵循文本层次结构时,用户会浪费更少的眼球运动,并且可以更快地处理信息。


下面的示例说明了浏览控制如何让眼球工作比较。不同的是强调不同的文本类型。

其他文本类型具有相同的强调度,这使得它们争夺用户的注意力。

其他设计形式及浏览方式


在内容颜色的控制上我们可以为三种,重要的突出的需要用户重点进行关注的就用黑色

例如:#333333      #222222   #454545     等等色值

在不需要突出的内容上我们可以用稍微浅一点的色值保证用户能够进行阅读即可,

例如:#999999      #787878   #666666     等等色值更加容易记住

其他辅助的内容表达比内容正文更浅

例如:#bbbbbb      #A8A8A8    等等色值

说到这里我要说一用户体验关于文字的事情如果做出来的设计文字是给自己看的随意设计读没人会说你,有句话说的好:现在

是内容为王的时代,如果在内容上不够吸引或者颜色不够吸引眼球那就是一个很失败的案例。


转自:站酷

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


如何量化用户体验?

涛涛

互联网下半场,所有的比拼都在产品体验;然而“体验”是一个非常抽象的词,我们怎么把一个抽象的概念拆解成可落地执行的策略,作用到企业中后台产品上,怎么衡量策略的有效性,这一直是我们团队面临的重大课题。

1.

业界关于体验度量的经验

目前关于“体验度量”比较成熟的理论模型当属 Google 的 HEART 模型,另外还有 ISO 9126 软件质量模型和Davis 的 TAM 技术接受模型。后人在此基础上进行了很多实践,譬如 SAP 的用户体验问卷(UEQ)、Oracle 的客户体验价值公式(CX)等。公司内部各个 BU 也在不断的尝试和探索,譬如新零售技术团队的 TES 模型。技术团队研发效能的 DEVA 模型,国际 UED 语音设计的 HII 模型,阿里云的 QoUE 模型。纵观这些模型和实践,大多是主观数据和客观数据的结合。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

我们团队也曾提出过 TECH 、PTECH 模型,但由于模型的操作门槛较高、对埋点数据有不少要求,难以推广到各条业务线。痛定思痛后,我们决定重新回归业务,回归“体验度量”的初心,去繁从简,提高通用性。

2.

企业中后台产品的特点

企业级中后台产品最大的特点是任务性质非常明确;用户使用这类产品通常是为了解决某个确定的问题点,期待用新的解决方式降本增效。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

桌面研究也表明:可用性问题是软件行业的普遍问题:在英国,一般商用计算机用户只有30%-40%的有效生产率;软件缺陷中,48%是可用性问题。

正是基于上述原因,我们尝试提出了“两章一分”的标准,分别从设计验收、可用性测试、易用度分数等三个维度对产品体验进行体检和把关。

3.

什么是「两章一分」

如何量化用户体验?试试阿里这个新出的「两章一分法」!

1. 设计验收章

“设计验收章”主要有 3 个维度:产品还原度、任务流程跑通率、单页面加载时间。

产品还原度:指技术同学的最终产出与设计稿之间的差异;

汇总人工智能线、技术风险线等 5 个产品近 1 年的可用性测试结果。除功能、性能问题外,高频体验问题主要集中在“帮助引导”、“操作反馈”、“任务流程”、“概念术语”、“功能入口”这 5 个方面。同时,结合之前项目沉淀的设计经验和设计工具,我们最终将“产品还原度”的子维度定为“信息导航”、“帮助引导”、“操作反馈”、“文案名词”;每个子维度用 2-3 句描述来进行评分。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

任务流程跑通率:验收确认能跑通的主干任务流程数,在所有主干任务流程数中的占比;举个例子,设计稿中枚举了 10 条主干任务流程,验收发现其中 9 条已跑通,那么任务流程跑通率就是 9/10*100%=90%。

单页面加载时间:接入雨燕性能指标数据的产品看“首次有效渲染时长 fmp”这个指标;未接入的产品直接主观判断,超过 3 秒的视为不合格。

2. 可用性测试章

“可用性测试章”也在验收阶段执行,同样有三个参评维度:最终完成率、人均求助次数和高阻碍页面。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

我们没有考虑将可用性测试的常用指标——操作时长作为参评维度,主要原因是企业中后台产品类型多、使用场景复杂程度各自不同:用语雀创建企业空间只需要 5 分钟;用云凤蝶搭建一个后台页面可能需要 60 分钟,用 sofa stack 创建并发布一个应用可能需要 2-3 个小时……难以确定可以作为标准的具体操作时长。

3. 易用度分数

“易用度分数”标准为 5.5 分。

4.

「两章一分」的实践

1. 案例实践现状

截至 2020 年 9 月,已有 58 个 产品实践过“两章一分”系列方法,基本覆盖平台设计团队支撑的重点项目及 UV 超过 100 的产品。详细数据如下图:

如何量化用户体验?试试阿里这个新出的「两章一分法」!

完整体验“两章一分”的 18 个产品,仅可用性测试就帮助发现 364 个问题,平均每个产品发现 20 个问题;其中,“九州2.0 发布部署”发现问题数多达 53 个。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

2. 实操经验提炼

设计验收:共创式验收

企业中后台产品生产阶段中,由于一般没有专门的测试同学,因此设计验收都是由设计师或 PD 单独执行,没有作为必选环节,有时候甚至会因为开发周期紧张而直接略过;既没有方法论,又缺乏仪式感。

“两章一分”的实践中,我们首次践行“共创式验收”,以项目组会议的方式,邀请各个角色共同参与到验收环节中:如果产品没有什么技术门槛,那么各个角色分别独立操作核心流程;如果产品有一定的技术门槛,则由技术同学操作核心流程,同时共享屏幕,其他同学从旁观察。操作完毕后,项目组内共同讨论发现的体验问题,并将问题落地到 Aone 中进行排期管理落地。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

可用性测试:引入“技术支持”+圈定测试人数+ 线上测试降成本

  • 引入“技术支持”

企业中后台产品通常有一定的技术门槛,以 SOFAstack的测试任务为例:

使用 sofaboot 技术栈,创建 “hello world” 应用,通过“经典版”发布部署模式发布成功。

测试过程中经常会出现一些涉及到底层技术系统的问题,非设计同学能解决,因此我们建议做企业中后台产品的可用性测试时,需要配备至少一名技术支持同学,以备不时之需。

  • 圈定测试人数

如何量化用户体验?试试阿里这个新出的「两章一分法」!

Jakob Nielsen 在 2000年提出测试 5 人就能发现 85%的可用性问题;结合我们的实际业务场景:有些产品真实客户非常难找;前期“共创式验收”已跑通核心主干流程;因此我们将测试人数限制为 3 人。

  • 线上测试降成本

我们开始实操案例时,恰逢疫情期间,于是就引入了线上远程测试的方式;后续实践下来,发现远程测试能在观察、分析阶段显著降低执行成本。

通过钉钉或阿里郎发起视频会议,邀请参加测试和观察的同学入会,请测试用户共享操作屏幕,主持人录屏捕捉用户操作轨迹,PD、技术等项目组成员从旁观察。测试结束后,使用语音转文本工具,快速将音频转成文字。这种模式最大的好处有两点:

  • 突破了距离和观察人数的限制;从实践来看,现场测试结合远程测试的模式,至少能同时对 2-3 人进行测试,执行成本减半;
  • 语音转文本后,显著提升了分析效率。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

执行阶段的多样化

最开始提出“两章一分”的时候,我们原本希望这套标准能被作为判断产品体验是否好用,能否上线的标准之一;但实际并未推动成功。这里面有很多原因,其中一个非常实际的问题是很多产品需要调用线上数据库才能跑通核心流程,在测试阶段没法跑通;这就导致在测试阶段做可用性测试无法真实还原用户场景。

此外,设计师或 PD 新接手某款产品时,也希望能通过可用性测试的方式来快速了解产品问题。回归到“两章一分”的初心——帮助产品发现体验问题,因此,我们拓展了方法的执行阶段,不再局限于测试或验证阶段,只要场景适合,都可以用。

3. 典型案例:LinkE 研发运维中心一期

产品简介

LinkE 研发运维中心是云通未来 Serverless 战场的重要产品;业务方希望用该产品来整合研发同学日常高频使用的研发、运维、中间件平台,大幅减少平台割裂和跳转,提供沉浸式的产品体验。

目前该产品还处于 0-1 建设的阶段。

实践过程

  • 为了确保产品体验良好,设计师在验收阶段引入“两章一分”,进行共创验收和可用性测试;
  • 共创验收阶段,邀请 PD、技术 等 8 名同学一起参与,最终结果为“通过”;
  • 可用性测试阶段,设计师根研发通用场景,招募 6 名研发同学参与两个可用性测试任务,分别为:任务 1,基于代码变更完成研发自测联调;任务 2,基于发布完成分支的集成、预发、灰度、生产

结果用户在任务 2 遇到高阻碍页面,导致可用性测试结果为“不通过”,任务 2 的易用度分为仅 4.4 分,显著低于 5.5 分的参考标准;最终发现 30+ 问题点,并推动 PD 思考产品逻辑设置是否合理。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

实践效果

  • 经过两次完整实践,LinkE 设计师已能完全独立操作执行“两章一分”;
  • 业务方的参与度 & 认知度提升明显:已开始习惯将“两章一分”设为项目里程碑,并全员参与进来。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

4. 实践总结

在实践过程中,我们发现企业中后台产品的典型场景大致可以分为 4 个场景;不同场景面临的设计项目有所偏重;不同设计项目在体验度量方面的切入点也有所不同。譬如:云凤蝶是一个典型的沉浸式画布页面,所有操作几乎都是通过编辑器属性面板来调整,那么如何来评估编辑器的效率呢?通过一系列实践和思考,我们提出可以通过“高频属性查找、配置的步骤数和时间”、“设置相同组件属性的耗时变化”等指标进行衡量。以下是我们根据不同典型场景、设计项目提出的体验度量切入点。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

5.

「两章一分」的未来

经过 S1 长达几个月的探索:我们制定了“两章一分”的标准;对 30+ 产品进行了易用度分数的测试,捕捉分数基线;提炼实操方法技巧,并赋能给各位设计师;联合设计师和业务方跑通近 20 个案例。不管是问题发现数量,还是设计师、业务方的主观反馈,都让我们坚定“两章一分”在企业中后台产品体验优化中是一个相对有效的模式。为此,S2 我们打算继续深化。

如何量化用户体验?试试阿里这个新出的「两章一分法」!

  • 落标准:在关键业务线将“两章一分”落地到业务生产环节中,不过“两章一分”就不能上线;
  • 分基线:区分不同产品类型和迭代大小,制定不同的易用度分数基线;
  • 升方法:针对跨产品、跨域等难以推动的横向体验项目,我们考虑升级方法,如将可用性测试升级为“用户体验日”,以便更好地推动问题落地;
  • 闭案例:针对 S1 已跑通的业务,我们会在 S2 进行案例闭环测试,以验证优化效果是否真的能在“两章一分”上体现出来;
  • 始运营:我们会挑选一些案例在公司内外发声,找相关业务领域的团队进行交流和探讨;并从案例中总结和提炼设计技巧,帮助业务成长。

总结

我们团队当前支持的企业中后台产品以 0-1 阶段产品为主,PD 通常缺少用户意识和体验优化手段,这就导致了设计稿还原度较差、产品上手门槛较高。针对这一现状,我们尝试性地提出了“两章一分”这个评价标准,从设计验收、可用性测试、易用度分数 3 个维度来评价产品当前的体验现状。

通过 S1 50+ 产品的实操,我们一边不断完善评价标准和实操经验,一边总结体验度量经验;共帮助 18 个产品发现 364 个产品,并在 link 、sofa 等重点产品线中落地到业务生产环节中,在业务方层面收到良好反馈。

在这过程中,我们总结了适合不同场景、不同设计项目的体验度量切入点,验证了这种方式在当前企业中后台产品中确实有效。后续我们将尝试细化标准,闭环案例,对内对外发声等方式,更好地推动体验思维在企业中后台产品生根发芽;同时,也期待能跟对这块感兴趣的同行朋友们多多交流。


文章来源:优设   作者:
AlibabaDesign

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

摁不住的拼多多

高劲


编辑导读:当各大电商平台忙着双十一的时候,拼多多似乎是个独特的存在,不慌不忙,围观在旁。拼多多为什么不重视双十一?他们主要在忙什么?文章从这两个问题出发,对此展开了分析解读,一起来看看~

孙悟空是石头缝里蹦出来的。阿里系几位P8Plus的朋友和阿德哥聊时说,拼多多也是石头缝里蹦出来的!

“打京办”成立这么多年,没承想打出个拼多多。刚刚发布的拼多多Q3财报显示:首次单季度盈利,第三季营收142亿元;GMV达1.45万亿,同比增长73%;活跃买家达7.31亿……

在资本市场上,拼多多迅速赶超京东300亿美元达1600亿美元市值,成为国内仅次于阿里、腾讯、美团的第四大互联网公司。

自2014年起,投资界便开始流传“电商已是死赛道”的共识,拼多多的崛起给了投资界一记响亮的耳光,也再次说明了“长江前浪推后浪,江山代有才人出。”

与当年打京办、投苏宁等手腕比,似乎阿里对拼多多已无招可施,重启聚划算、推淘宝低价版眼看也只是“补课动作”。而拼多多,却正在暗暗部署更多领域,圈内人说,“谁如果小看黄铮的野心,就等承认自己是一个傻X”是同样的逻辑。

“摁不住的拼多多!”阿里的多位朋友如是说。

低调的双11

今年的双11因为“你懂的”原因而显得波澜不惊,除了天猫交出4982亿元、京东交出2715亿元的答卷之外,似乎乏善可陈……

“拼多多天天都是双11!”

拼多多的朋友告诉阿德哥,所以他们不希罕宣布成绩。

当然,这并非拼多多的官方回应,官方回应说,拼多多更在意消费者的购物体验。拼多多的Slogon是,多实惠,多乐趣。

一个小混混有了另立山头的志向后,并非马上另立山头,他首先做的,不是去激怒原有的老大,而是,开辟自己的新阵地,带自己的小弟。

拼多多只是不公布成绩,并非没有参与“双11”盛宴。

曾国藩说,聪明的人都懂得“藏拙”,但只有少数人懂得“藏锋”。

没有满减、盖楼、升级列车、养猫……只有简单的“低价”,拼多多副总裁陈秋说,本次双11,拼多多的一切优惠都将以最简单的方式面向用户,消费者不用做满减计算题,看到的即是最优价。

前几天,夫人非要去邮局给小侄子寄一堆童装,这与阿德哥的习惯大相径庭。可到了邮局,除了服务的眼神不对之外,价格真让我惊喜:30多斤一大箱的衣服,邮寄费30元。

总说国企服务没跟上,可价格也真是“良心价”啊。“自古真情留不住,总是套路得人心”,黄峥说。

总是低价得人心!

阿德哥曾做过了多次田野访问,得出两个基本结论,一是老家很多亲朋基本都知道淘宝,但大都却正用拼多多;另一个是阿里、京东多年的铁粉,居然瞬间被拼多多“拉走”。

“618”期间,一个朋友在京东购买售价1099元的Beats solo3蓝牙耳机,已准备在京东下手的他,突发异想去拼多多“多看了一眼”,499元。你没看错,不要599元!

这个朋友今天已是拼多多的优质用户,几个月时间里,贡献了近三万元的GMV。

打开拼多多APP,限时秒杀、断码清仓、XX特卖、9块9特卖……不要小看这样的战阵:因为大量的特价版块,外加重头推出的“百亿补贴”,拼多多给用户展示出的,可不就是天天双11嘛?

而其背后的玄机则在于:通过不断上新的各种大促,拼多多对于品牌的露出与销量拉动,早已远超传统电商“泛卖货”模式,它一改小商家陪炼大玩家的传统模式变成了“让更多的商家可以雨露均沾”。

如果非得去探寻一下拼多多的崛起路径,吃瓜瓤的多半会说,没有淘宝就没有今天的拼多多,没有微信也没有今天的拼多多。

这可以视为正确的废话。

当年抗美援朝的路上,也曾有不少志愿军睡着了。

移动互联网大潮来临的时候,互联网的生态发生了全新的变化,拉长时间线,谁临阵换了大将,谁展开了整风运动?

江山代有才人出,丁磊的知音,段永平的弟子,黄峥当立。

简而言之,阿里为中国的电商事业立下了汗马功劳,基本让国人实现了在“消费互联网”端的扬眉吐气;而腾讯的QQ、微信,则让国人实现了网络“非主流意见市场”上聚集了最多的人。

创业,天时、地利、人和。黄峥不会都得,但都挣得了。

淘宝“开卷考试”带来了最初的商家和货品,微信“热闹人群”带来了交易场景,砍价、拼单激发了社交流,拼多多,用了不到三年的时间,创造出了“新电商速度”。

随后是C2M新品牌计划,百亿补贴的大品牌计划,而快速上市带来的则不仅是高光,更是赢得了“黄金时间”。

按照传统电商资本套路,拼多多三季实现单季赢利之后,还有一年到一年半的“高增可亏损”黄金时间。换而言之,拼多多依然可以继续实现补贴、营销推动,而不必太在意赢利。

这样的时间窗口,纵观天下电商,唯拼多多有之。

有疑问的人,不妨多看看拼多多今年的前二季财报的营销费用率,答案摆在那儿呢。

恐怖的是,黄峥的野心并非只在“实物电商”,据说,在拼多多,更多的大杀器正在路上。

上天并非偏心,了解黄峥的人,知道,他只是大器晚成,而非天纵其才。

卖菜

并非拼多多不重视双11,而是黄峥不重视,一是因为拼多多已上了轨道;二是因为黄峥最近只关注另一件事——卖菜。这便是多多买菜。

疫情期间,拼多多便推出了线下团购工具“快团团”,协助各地商家收集社区需求,从而实现在线下单。

此前8月,多多买菜正式上线,开始与兴盛优选、美团买菜展开直接竞争,先是APP端出现多多买菜频道,更是迅速推出同名小程序与“多多买菜门店端”服务号:采取的是与本地商超合作,线上卖菜、线下提菜的路径。

与别家合作前置仓自建供应链模式不同的是,多多买菜采取了只帮“合作商家”在线卖菜的方式,换而言之,多多买菜把实惠送给了合作商家,而它想要的似乎只是“用户”。

在这一逻辑下,拼多多采取了极为激进的补贴方式,以更高方式补贴团长,打出的旗帜是10亿量级,除此之外,还采取了“三高”战术:高补贴拉新、高频率回访、率入驻。

卖菜热不热?

阿里、腾讯、美团、滴滴、字节跳动尽数入局,而当前跑得最猛的是拼多多——多多买菜。

多位竞品人士告诉阿德哥,多多买菜团队更加年轻,除了在品控方面并未实现良好管控之外,其犀利程度、其执行力,远超阿里铁军。

腾讯阵营拉出了兴盛优选、食享会;而阿里系除了为十荟团、你我您合并之后的新十荟团打通阿里供应链之外,更是在近期有了新动作:菜鸟驿站团购接入了大润发的商超,盒马推出了盒马mini和盒粉群,据传零售通事业部亦正在筹备新的社区团购部门。

实际上,今年的互联网,除了5G软硬概念之外,最大的赛道是卖菜,它超过了前几年前辈造出的“新零售”概念。

今年,以卖菜为核心的生鲜赛道上,目前已宣布和汇聚的资金已超过200亿元。

黄峥似乎看准了这条赛道,而现在的增量搏杀,仅仅是开始。

“此一时”的策略,是黄峥铁了心要拿下仅比外卖吃饭稍弱的刚需——买菜,既高频,又具备想像力。

要知道,首先撬动农村及五环外的,是拼多多。而拼多多C2M端的大成,其实在农产品,卖空一个地方的农产品,早已在拼多多持续实现。

而在未来嫁接进自己的供应链,显然在逻辑上已是必须。而当务之急,是拿下更大规模的“增量”用户。

黄峥绝非魏延,仅仅是有反骨,他也更不会是邓艾、钟会,他是司马一族。

黄峥如是说,我认为最好的利用营收的方式就是投资R&D、基础设施、用户认可度、品牌知名度。重要的是,

培养人们的消费习惯,让人们以拼多多为最主要的消费平台。

黄峥之野心,苍天可鉴,近在咫尺的数据是:年活跃买家已增至7.313亿人,第三季度平均月活跃用户为6.434亿人。

与之对应的是,阿里最近的数据是:年活跃买家7.57亿,2020年9月,中国零售市场移动月活跃用户8.81亿人。

有人在意ARPU值、GMV,但拼多多似乎更在意客单量、复购率和用户数。

依阿德哥判断,电商格局正在乾坤大挪移。

嗯,了不起的盖茨比,摁不住的拼多多。




文章来源:人人都是产品经理           作者:韩志鹏


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


亚马逊成功背后的体验设计逻辑:成功的设计并不需要美观

高劲

亚马逊作为一个知名的电商平台,它的成功背后却有一个很难让人理解的设计逻辑:成功的设计不一定是美观的。为什么会这么说呢?本文将从四个维度展开分析,希望对你有帮助

谷歌的 10 个“Material Design”设计要点(下)

高劲

编辑导读:如今,谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。

6. 利用声音和触感唤起用户的情感

这里的声音特指“Hero sounds”,用于衬托一些喜庆的、重要的高光时刻,它们常被用来激起用户的情感,或烘托一种喜悦的气氛,从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds:庆祝用户进行了某项操作;欢迎用户使用新的应用程序或体验;确认用户成功使用某款产品。——《谷歌声音设计指南》

声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到,Hero sounds出现的次数不应该频繁,否则无法突出其重要性。通过在同样的环节提供同样的声音,久而久之用户会将这种提示音与成就感挂钩,从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音,或者每次待办事项标记为完成后就会出现庆祝的提示音。

不管我们是否注意到这一点,我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音,还是MacBook的废纸篓在清空时发出的揉纸的声音,都在某种程度上影响着我们的情绪,也帮助我们更加了解用户界面上发生的一切。

触觉可以和声音配合使用,也可以单独使用。举个例子,在手机黑屏的时候,触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时,触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

除了声音之外,触觉设计(如震动)也是一种刺激感觉的好方法,可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后,我们将会对产品的某些功能有更加深入的了解。

举个例子,如果某个用户通过APP进行付款,但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动,对用户进行错误反馈。当用户熟悉了这种震动模式之后,下一次再感受到这种震动,就会立刻知道付款出现了问题。

产品设计师很容易忽略声音和触觉这两个板块,而过度专注于画面。但这两个板块却也扮演着非常重要的效果,可以为用户体验锦上添花。

7. 通过动图表达独特的风格、塑造个性化品牌体验

图片来自Material

动图可以增加用户的好感,在互动中为用户增加个性化体验,也可以表现品牌独特的风格。——《谷歌手势设计指南》

动图是我自己设计的产品Confetti中一个非常重要的因素,这是一款运动追踪APP,是为那些追踪自己生活习惯的用户设计的。在设计这款产品时,我希望可以为用户创造出一种满足感,鼓励他们培养好习惯。在这款APP中,我大量使用切换功能,通过不同的手势,界面或进程可以平滑过渡,使用起来非常便捷。当一个好习惯完成时,还会出现彩屑动画飞舞的,加强用户的满意度。

简言之,动图可以应用于不同的场景,通过过渡和变化的吸引用户。

动图可以强化两种元素之间的联系,实现快速切换,迅速解决特定的任务。动图可以让用户专注于眼下最重要的事,不被其他因素所干扰。——《谷歌手势设计指南》

在2020年,你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基(Taras Skytski)在《用户体验设计中动画使用的终极指南》中指出的那样:“众多研究发现,界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别,而超过1秒的动画则会造成一种延迟感,让用户感到不舒服。”

通过动图及产生的动画效果(如切换)可以改善用户体验,同时保证可以迅速找到需要的版面,而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间,又不能改善体验,那么这种环节就没有必要存在。

8. 通过图像进行交流,并区分和突出产品特性

图片来自Bribble|制图Elena Petkovska

我们或多或少都有这样的体验:打开一个界面,里面充斥着太多文字和太少的图像。在用户体验设计中,展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品,而是希望通过图像对一款产品进行直观的视觉理解。

你所选择的图像应该能够清晰地展示产品特点,不管是用户自己上传的图片,专业摄影师的图片,还是插画风格的图片,它们都应该能直观展示产品外观,反应产品的特点。——《谷歌图像设计指南》

APP里的插图和所有的视觉元素一样重要,好的图片可以让用户界面更加生动,使用户体验更加完善。恰当的图片还能展示品牌风格,成为无声的“故事讲述者”。

我们应当有目的地使用图像,作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息,如产品外形、风格,APP的用途,状态等。媒体界有这么一句话:一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

9. 关注产品的像素密度

图片来自Material

用户界面设计中应该关注产品的像素密度,让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

像素密度(PPI)是用来衡量每物理英寸的像素数。另一个常用的单位是DP(Density-independent pixels,有时候简称为DIP)。像素密度=屏幕宽度或高度(以像素为单位)/屏幕宽度或高度(以英寸为单位)。

在设计界面时,我们不应该只关注像素,还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放,以适应不同屏幕的尺寸。

举个例子,我们现在有一个按钮素材资源,大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示;在一个320ppi的屏幕上它就会扩大成400 x 100 px,相当于原始素材的两倍大。

通过以上例子我们可以了解,在像素密度不同的屏幕上,素材呈现的状态是不一样的。在实际应用中,素材可以会被放大三倍甚至四倍,如果素材不够清晰,就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎,尝试在不同设备上打开并检查。

素材密度如何适应屏幕尺寸?举个例子,iPhone XS Max的屏幕是414 x 896 pt,注意这里的尺寸是物理尺寸pt,而非像素。如果以像素为单位计算,那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时,我会首先考虑用414 x 896 pt的素材,然后在输出素材时将其乘以3。

10. 考虑设计在线/离线状态

图片来自Material

离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用,你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用,但是在能联网的时候,最好还是主动提示用户,推荐他们连接网络。

如果有可能的话,要提前告知用户下载相关信息,以便脱机访问。最常见的例子就是Spotify等音乐应用程序,它允许用户下载歌曲,以便在没有网络的时候也能继续听歌。

假如你的产品不像Spotify或者Netflix那样需要下载具体内容,你可以发挥创意来设计在线、离线两种模式。

谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子(在谷歌浏览器连网的过程中,离线画面会出现一只霸王龙,按空格键或者向上的箭头就能控制霸王龙——译者注)。这个小游戏填补了用户等待连线的时间,将消极体验转变成了积极体验。

11. 总结

我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外,我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导,在这一领域进行更深入地探索。


文章来源:人人都是产品经理           作者:Danny Sapio           译者:Michiko


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

用户行为分析和以用户为中心的设计

鹤鹤

用户行为分析,认识用户满足用户最直接要求为设计中心


用户行为分析

用户行为是指用户在使用产品时的行为,针对网站而言,就是用户在进入网站后所有的操作。网站用户行为分析,就是在获得网站王文量基本数据的情况下,对有关数据进行统计、分析,从中发现用户访问网站的规律,并将这些规律与产品目标及策略相结合,从中发现目前网站存在的问题,为进一步改善网站,满足用户需求,提升用户体验提供依据。


常见的用户分析内容包含以下几个方面内容:

(1)用户在网站的停留时间、跳出率、回访率、新用户、回访次数、回访相隔天数;

(2)注册用户和非注册用户,分析二者之间的浏览习惯;

(3)用户所使用的搜索引擎、关键词、关联关键词和站内关键词;

(4)用户选择什么样的入口形式(广告或者网站入口链接)更有效;

(5)用户访问网站流程,用来分析页面结构和网页覆盖数据;

(6)用户在页面上的网页热点图分部数据和网页覆盖图数据;

(7)用户在不同时间段的访问量情况等;

(8)用户对于网站的设计及字体配色的喜好程度等。


通过研究发现,80%的用户仅仅使用了软件20%的功能,而那些没用的功能不仅浪费开发时间,也使软件更加难以使用。一个成功的软件应该是简练精干的,可以单独职能化的化解决的单个问题,要以满足用户最直接要求为 i设计中心。


一、了解用户需要什么

很多网站往往为了满足不同用户的需求而增加功能,增加的功能必然需要再界面中用视觉呈现出来,这就会使网页内容越来越多,很多的功能掺杂在一起,如果不经过过滤,必然会违背原来阅读的初衷,所以每一个功能的增加都要慎重。


用户对于互联网功能需求也和对软件的功能要求一样。既喜欢简单的,也喜欢复杂的。而且用户的体验需求也会随时随地的发生变化。这里的复杂不是指很难用、流程超级复杂、容易出错的用户体验,而是指丰富的功能。


首先如何让用户体验更简单呢?当然将复杂的功能去除是最好的,如果实在无法去除某个复杂的功能,那就应该将其隐藏。因为大多数情况下,不常用的功能要比经常使用的功能占据更多的空间。


真正好的用户体验其实是给用户所需的任何功能,为用户设计一款“复杂”的产品,并将这款产品从表现上简化,让基础功能操作简化,给扩展功能保留使用入口即可。这个设计思路最具代表性的例子就是Microsoft Office和Adobe

系列产品。

              


用户的需求并不是一层不变的,短期内用户会因为某种强烈的需求要一个产品。随着市场和行业的不断发展,用户对于一个产品的评价也会随之发生变化。例如肯德基刚进入中国市场,被人们认为是一种的象征,小朋友以吃一次肯德基为荣。随着经济条件的发展,人们对于肯德基的体验就完全不一样了,热量过高,不利于健康。这是一个很典型的对一个产品评价的变迁的过程。


用户的期望值会因为因素而发生变化,有的来自外部的环境,有的来自产品自身,有的来自用户成长。这些影响期望值的因素都会相辅相成的影响。有的时候不是我们的体验或者产品变了,而是用户发生了变化,所以用户体验的设计,除了要考虑产品本身以外,还要考虑用户所需要的。


二、遵循用户的习惯

用户通常会根据个人喜好做事,这就是习惯。习惯没有好坏之分,关键要看根本的是什么。从用户体验的角度来说,任何产品都可以分两种:遵循现有用户习惯的产品和颠覆用户习惯的产品。


在设计网站时可以在技术上创新,在业务模式上改变,也要在以下几点上遵循用户的习惯。


1、用户的生活背景及文化背景

生活和文化背景是必须要遵循的习惯。想去颠覆或是磨灭一个群体甚至是民族的习惯,基本上会付出惨重的代价。例如使用红色表现喜庆,白色表现悲伤,是中华民族几千年的一种传统习惯。如果想去改变这个习惯,使用其他颜色肯定起不到好效果。比如:可口可乐官网就是用红色做的主色调,而红色也与“可口可乐”品牌主色调相统一,点缀少量黄色,非常符合中国的传统文化,也更容易使中国人接受。


2、用户的生理状况与需求状况

在设计网站页面时,还要考虑到网站用户群体的基础属性,例如年龄层、身体承受力等。可以将页面中的文字和图片做放大处理,使老年人可以清楚的看到内容。比如一些老年网站,会采用大号字体,强对比色便于阅读,而且在设计的时候也不会使用过多的色彩,虽然整体视觉可能显得简陋不够丰富,但是充分的考虑了老年人人群的特点。


2、以“自我为中心”的心理

人在评定事情好坏的时候,通常喜欢以自我为中心,所以用户体验设计时,必须满足用户这种需求。使每个用户可以体会到以“自我为中心”的优越感,这样用户就会成为最忠实的客户。例如很多人沉迷于网游就是因为在现实生活中会受到各种各样的限制,而无法实现真正的以自我为中心,而在网游的世界里却可以完全实现。


二、颠覆用户的习惯


在设计网站时,设计师通常会根据网站内容把网站划分为不同的区块,然后在分别进行美化。设计师在思维定势中 自我感觉良好,一旦突破了思维定势就会有新的收获。作为用户体验的设计师来说,有下面两个方面可以颠覆。


1、改变一些有独特性的页面设计

 在设计网站时,有很多页面都具有独特性,例如注册页、登录页和搜索页。这些页面用户只会访问一次或者几次,而且这些网页本身也是在网站发展的同时逐步完善的。所以,在用户体验的设计中,这些习惯就可以颠覆的。设计师可以根据个人的喜好对这些页面进行设计、优化和修改,而不会影响用户的习惯。


2、发展中的知识和技术

在网站设计中需要结合当前的潮流趋势和的技术来表现网站,这样才能给用户带来全新的体验。页面中流畅恶化便捷的交互应用,可以给用户带来良好的体验。

尊重用户秀感可以快速让用户接受网站,同时也会由于尊重了用户的习惯而减少产品对用户的刺激,会使得用户很难成为网站的忠实用户。另一方面,如果不尊重用户习惯,用户可能很难马上接受。所以在用户体验设计时,要根据网站具体情况自我权衡。

最好的办法就是在网站核心用户体验不变的基础上,增加新功能、设计风格逐步变化、进行网站整体融合。

转自:站酷-忻芸



用户体验升级指南—规避用户“无意识错误”的防错法则

鹤鹤

用户在使用软件时不可避免的会进行误操作;
应如何通过设计,使得犯错变得困难,从而提升产品易用性。


大纲要点:

1.行为预判     

2.多重保险 

3.限制行为      

4.唯一性原则

5.默认项复用      

6.特征明显

7.感官反馈



1.行为预判,走在用户前面

通过固定场景,判断用户接下来的操作,或对某些操作做是否执行的处理。

①.输入银行卡号,软件在你输入完成时自动识别发卡行,避免手动选择错银行导致转款失败。 


②支付宝转账,在聊天窗口输入纯数字,系统会自动弹出“给对方转账xx元”的悬浮条提示,点击悬浮条即可进行转账操作。对用户误把转账发送成信息的行为进行预判,提升产品易用性。 



2.多重保险 ,二次确认执行。

生活中很容易产生对文件进行误删或提交的误操作,多重保险是对不可逆的操作进行双重确认后再实施执行。

如ios信息删除页面,删除信息需进行以下三个操作:

①左滑调出删除按钮(把“隐性”特征转化为“显性”特征)

②点击删除,“确认删除”弹窗弹出

③确认删除,多重”确认“降低误操作 



3.限制行为,使错误无法发生。


在固定字符的表单中。对其输入的内容自动格式化,

如支付宝注册页面,只提供数字键盘且只能输入11位数,从而限制用户行为。

直接从源头杜绝误触其他字符或多输入的误操作。

当你开始输入时,系统会自动将手机号隔成XXX XXXX XXXX的格式,方便用户以最快的速度核对已输入的手机号,毕竟相对于一长串的数字,被分成小块的数字组合更容易被记住和看懂。



4.唯一性原则,一个页面干一件事

按照顺序分步进行,避免用户在一个页面完成多个任务。

如接收验证码时,保持页面的功能性是唯一的,手机号注册页只能填写手机号,验证码页面只能填写验证码。利用页面的唯一性减少误操作率。



5.默认项复用,优先预知用户所想

同一件事做两次出错的几率肯定比做一次要大得多,对用户已录入过的信息储存,以便如需再次录入时的直接填充。

如寄快递购物时的填写地址,定机酒时输入人物信息,直接复用历史信息,省时又不会出错。 



6.特征明显,对比突出可适当夸大

视觉效果上,夸大功能性特征,能够有效地使用户准确获知该区域可实现的功能,向用户呈现清晰的行为结果。


①如删除弹窗,按钮中文字的描述应决定用户接下来的行为。

“确认删除”是用户行为,”确定“则是对该弹窗内容的时间判断,用户是不会对弹窗内容进行细看的,所以在按钮文字上就应明确用户,准确地告知按按钮所对应的行为。

②如Iphone的关机界面,app 内各个入口删除等可操作按钮



7.感官反馈,视觉外的强化辅助

解锁界面不同状态下的震感反馈,提示警告类的声音反馈,警示错误的发生。







 转自:站酷-假装不是设计师




不要让我思考: 20 句可用性设计名言

高劲

编辑导读:想要做好一个设计师,就要多研究优秀人士的作品,取长补短。现在互联网的发达,很容易就能在网上找到相关的学习资料。本文以史蒂夫·克鲁格的名著作为引入,分享20句关于界面可用性设计的名言,希望对你有帮助。

设计,以及许多其他领域,都是建立在优秀专业人士的作品和发现之上的,每个想要成为某个领域专家的人经常寻求指导来学习如何把事情做好。专业导师的各种书籍和文章现在都可以在互联网上免费阅读,让努力学习知识的人很方便的找到。

我们经常会分享来自数字设计领域最优秀专家的名言和睿智的想法。你会在迈克·蒙泰罗(Mike Monteiro)所著《设计是一项工作(Design Is a Job)》里找到有关设计的短暂洞察,奥伦·沃特尔(Aarron Walter)的《为情感而设计》(Design for Emotion)以及排版大师埃里克·斯皮克尔曼(Erik Spiekermann)的一系列智慧思想也是如此。

下面我们要分享的是史蒂夫·克鲁格(Steve Krug)的名著《不要让我思考(Don’t Make Me Think)》中的一组引言。

2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合时代发展,符合实际需要。史蒂夫·克鲁格为界面可用性设定了一些基本原则,并与该领域的专业人士分享,这使得本书成为 UX 设计师推荐的最重要的资源之一。

可用性第一定律——“不要让我思考”描述了关于网站可用性的要点、案例和见解。创造不需要用户过多思考的界面设计,不仅可以解决问题,而且易于使用。这里有 20 句名言,反映了“不要让我思考”的一些关键点。

1、如果某件事需要大量的时间投入——或者看起来会这样——它就不太可能被使用。

2、让每一页或每一个屏幕都不言自明,就像商店里都有良好的照明:它会让所有的商品看起来更好。访问一个不需要我们思考的网站会让人感觉毫不费劲,相反,为不相关的事情多花心思会浪费我们的精力、热情、还有时间。

3、无用的客套话(“happy talk”)都是一种沾沾自喜的宣传,你可以在蹩脚的小册子里找到。与好的宣传文案不同的是,它没有传达任何有用的信息,它一个劲的说我们有多棒,而不是描述是什么让我们这样棒的。指示说明必须被消灭。

4、可访问性(Accessibility)非常重要,它不仅仅是正确的做法,而且是非常正确的做法。关于无障碍访问,如果没有引起足够的重视,你就无法意识到,它能显著的改善一些人的生活。仅仅通过把工作做得更好就能显著改善人们的生活,这难道还不够厉害吗?

5、另一个让人困惑的来源是那些看起来不太明显的链接或者按钮。作为一个用户,我永远不应该花哪怕一毫秒的时间来考虑这些东西是否可以点击。

6、最近几年里,让产品更加易用成为几乎所有人的责任。现在,视觉设计人员和开发人员常常要做交互设计(决定用户单击、按下或滑动时下一步会发生什么)和信息体系结构(确定应该如何组织所有内容)之类的事情。

7、可用性(Usability)就是确保让一个能力和经验一般(甚至低于平均水平)的人,能够想出如何使用并完成任务,而不必费事。相信我:事情就是这么简单。

8、可用性是有关人们如何理解和使用事物,而与技术无关。

9、关于指示说明,你只需要知道一点就够了:除非“蒙混过关”多次尝试失败,没有人会去读它们。

10、你越仔细观察用户,并倾听他们明确表达他们的意图、动机和思考过程,你就越会意识到,他们对网页的个人反应是基于许多变量的。试图用一维的“喜欢”或”不喜欢”来描述用户是徒劳的,而且会适得其反。另一方面,好的设计会考虑到这种复杂性。

11、那些设计网站的人并不在乎让事情变的明显和容易,这会削弱我们对网站及其背后公司组织的信心。

12、然而在现实中,大多数时候我们不会选择最佳选项,而是选择了遇到的第一个合理的选项,即所谓的“满意”(satisficing)策略。

13、大部分的网页设计问题(至少是对重要的那些问题来说)都没有一个简单的“正确”答案。有效的答案是那些运作良好的、满足需求的综合设计,它们往往经过了仔细思考,良好的执行和测试。

14、删掉每页上一半的文字,然后把剩下的再删掉一半。

15、设计师喜欢微妙的线索,因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙,经常会错过这些线索。

16、如果你在设计了很多不同的网站之后只发现一件事,那应该是:几乎所有的设计理念——无论一开始多么糟糕——都可以通过足够的努力,在合适的环境下变得可用。

17、你的主要职责应该是分享你所知道的,而不是告诉人们应该怎么做。

18、你的目标应该是完全删除说明文字,让每项内容不言自明,或者尽可能做到这一点。当说明文字绝对必要时,把它们减少到最少。

19、和遵循惯例去设计相比,设计师们面临很大的诱惑去重新发明轮子。很大程度上是因为他们觉得自己被雇来是要做一些新的、不同的事情,而不是做原有的旧事情。更不用说,来自同事的赞扬、奖励和高级职位很少是基于“最好地利用惯例”这样的标准。虽然少数时候,在重新发明轮子上花的时间足以制造出新的革命性滚动设备,但通常情况下,这只是浪费时间而已。

20、如果你想要一个很棒的网站,一定要测试。因为你在这个网站上工作了好几周,已经失去了新鲜感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是测试它。

 

文章来源:人人都是产品经理           作者:Alina Arhipova


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

谷歌的 10 个“Material Design”设计要点(上)

高劲

编辑导读:如今,谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。

1. 通过图标和动画传达意思

图片来自Material

在没有其他方法的情况下,图标可以成为理想的指示工具。——《谷歌材料设计指南》

在《Design of Everyday Things》一书中,有“以人为本的设计之父”之称的唐·诺曼(Don Norman)阐述了他对图标的理解:图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中,我们很少会出现“左滑-删除”这样的文字指示,而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。

在用户和产品交互之前,插入动画效果。——《谷歌材料设计指南》

如果我们希望一款数字产品有着极简主义外观,那么我们可以借助动画来达到这一点。在上图的例子中,最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后,也就是人机交互的动作产生之后,才会出现这一垃圾桶,同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。

2. 有动画效果的图标

图片来自Medium|制图Eddy Gann

动画可以展示图标所代表的执行动作,从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标,可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》

在两个动作之间增加一个过渡的动画,这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后,该图标变成了暂停按钮;点下暂停按钮,该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。

这只是一个简单的案例。现在想象一段更加复杂的经验:比如将某个产品添加到购物车中,购物车图标会出现装进货物的动画效果;或者想象某一功能无法使用时图标的弹出效果。

带动画效果的图标本身并不复杂,我们可以在Adobe XD中完成:通过给图标添加预设效果,或者加入淡入、淡出的效果即可。

动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小,却是影响用户体验非常重要的一环,我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》

请记住,如果界面上所有的元素和图标都在动,那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。

3. 调色板的生成和使用

调色板生成工具|图片来自Medium

调色板生成工具(Material’s Palette Generator)可以调出任何你需要的颜色,色相,亮度,色度等都可以通过一系列算法调节出来,通过算法调出的色彩实用又美观。——《谷歌材料设计指南》

如果我们无法使用谷歌的调色板生成工具,手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态(如蓝色从暗到明、从深到浅的形态),你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具,你也应该仔细检查并矫正自己的调色工具。

4. 颜色

  • 在考虑如何使用颜色或颜色相关的问题时,指南中还提供了给界面选色相关的技巧和工具。——《谷歌材料设计指南》
  • 选择令人难以忘记的色彩,以增强产品的品牌风格。——《谷歌色彩设计指南》

颜色对于数字产品的重要性,就像是盐和胡椒粉对吐司的重要性一样——添加太多了,就盖过了吐司自身的风味;太少了,味道就会变得寡淡。在选择配色以求增加品牌视觉效果时,一定要仔细考虑清楚给哪里添加什么颜色。

通过有节制地在APP里添加颜色,你还可以突出相应的内容,如文本、图片、按钮等。你可能已经注意到了,Instagram和Twitter上面布满了色彩鲜艳的图片和图标,与之相对应,它的用户界面非常简洁,不会喧宾夺主。

色彩也可以是一种交互元素,要考虑它们在什么地方交互,希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》

当一个元素的色彩与周围环境形成对比时,用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”,这个概念是说增加色彩的饱和度,使用更加大胆、更吸引人的色彩,制造视觉冲击。

另外,我们可以将重要的信息加粗显示,让它在第一时间进入用户的眼睛。简单来说,如果一种信息比另一种信息更重要,那么前者就要在色彩和篇幅上胜过后者,好让用户直观地进行区分。

5. 文字类型生成工具

文字类型生成工具|图片来自Medium

Google Fonts是谷歌研发的一款文字类型生成工具,可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》

字体设计是一门艺术,它不仅关乎选择某一种具体的字体,更设计如何使用、粗细调节、比例调节等,目的是增加界面的可读性,从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具,可以节省时间,迅速生成段落、标题、正文、按钮等。


文章来源:人人都是产品经理           作者:Danny Sapio.    译者:Michiko


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

拼多多抢走了我妈,从淘宝手里

高劲

编辑导读:对于老一辈人来说,他们没有赶上互联网兴起的时候,等到想要主动“触网”时,才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验,但在实际操作中,老人家还是一头雾水。这时,操作越是简单的产品,越能够赢得他们的喜爱。本文作者从自身经验出发,对这类现象进行分析,与你分享。

上周某天吃完晚饭,我妈递过她的华为手机怯怯地问我:你有空吗?我想叫你帮我跟那个商家说换一个快递,我们家这边的百世快递的站撤了,叫他们不要用这个快递。

我脑海中闪过一个念头:嗯?最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我:不是淘宝,是拼多多。随即自己打开了她微信里的拼多多小程序,演示给我她找不到商家客服。我跟她说,这个功能要用APP才行,于是帮她下载了拼多多APP并很快解决了问题。

弄完之后,我们又展开了这样的对话:

我妈:哎呀,这个拼多多真是太好了,物美价廉,超方便!你怎么不早教我用!

我:我自己都不怎么用拼多多啊!

我妈:这个是我的舞友上周教我的!我打开一看,哇,好多有用的东西,又便宜!第一天我就买了几百块的!

我:但是拼多多很多假货啊!

我妈:我又不像你们追求什么名牌!有什么假货可言?一条裙子30块!

我:……

我妈:而且!以前我在淘宝总要你帮我付款,现在我用拼多多自己用微信就可以支付了。

我:我早就叫你开个支付宝账号,你自己又不开!

我妈:那么麻烦,我不会,你又不教我!而且又要绑定银行卡,万一哪天我的钱被人家骗走,那些什么黑客……

我:哪有黑客黑你,你又不是马云……

我妈:还有,拼多多退货很方便!以前我在淘宝的时候,退货要你帮我搞,还要在家等快递上门,很不自由,现在我自己去菜鸟驿站退就得了。

我:好吧。

我妈:以后我就用拼多多,我那些舞友都在用!

我:你开心就好。

我回头想了想,这是一个以用户定位和产品特征为优势抢夺用户的典型场景。

首先看看以我妈为原型的粗略用户画像:

  • 年龄特征:60岁左右
  • 工作与生活特征:退休在家,时间较多
  • 消费能力:退休金4000元左右
  • 家庭情况:已有孙辈
  • 人际关系:以广场舞舞友、同学、工友、插友为主的人际关系圈,集聚在微信上
  • 消费态度:不追求牌子,追求低价
  • 网购习惯:淘宝的老用户,但没有支付宝账号;网购品类主要为衣物及家居用品
  • 触媒习惯:微信(微信群、朋友圈)、今日头条

为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢?

首先,我用的是“抢夺”这个词。

我并没有用挤占、分流这样的词。因为,在跟我妈的交谈里,我已经感受到她心里估计“从此淘宝一生黑”了。也确实,一个月以来我妈没有再叫我在淘宝付款过。所以,我想我妈大概率未来不会再用淘宝了,也就是说,淘宝直接流失掉了我妈这个用户。

其次,来看看用户定位。

根据上面我列出的以我妈为原型的用户,多吗?我简单查了一下。

根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》,60周岁以上的人口约有2.5亿人,60-65周岁的人口约有83250000人,分别占人口总数的18.1%和6%;根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》,截止2020年6月,我国手机网民用户规模达9.4亿。

那么,根据这个比例可以推算,这样的用户大约在5千万—1亿的规模。

这么大的一个用户群体,实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化(力推天猫)的战略执行以来,实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。

以我妈为原型的这批用户,他们大多数没有支付宝账号,但在微信上有钱,但除了平时发发红包,菜市场便利店买点东西,基本上还是没有用出去。于是,这批用户沉淀在微信钱包里的海量的钱,很难直接转化到淘宝上。

另外一个关键的地方在于,他们对淘宝是有怨言的,但在拼多多出来之前,没有替代物。某种程度上来说,对用户而言,忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少,品牌还是得需要不断优化产品,满足用户的需求。

品牌也好,产品也好,本质上是为用户提供价值,而不是要跟用户“谈恋爱”。

这是很多品牌的一个误区。没有在自身的产品上下功夫,去了解用户瞬息万变的需求,而去打“情怀”,讲“文化”。所以,我们可以看到当某些品牌醉心于自己的“情怀和文化”之时,其竞争对手在了解用户需求和优化产品而推出竞品后,瞬间打垮行业老大哥的案例。

最后来讲讲产品特征。

我妈使用淘宝的流程是怎么样的呢?

挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。

而她使用拼多多呢?

挑选商品——下订单——支付。

当我列出这两个产品使用流程之后,我猜如果你是我妈,你也会用拼多多了。

在我妈跟我的对话里,还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗?并不是。我一直觉得淘宝的物流虽然不如京东,但并不差,而且也不断在优化升级。但为什么我妈还是觉得不好呢?这一点不能单纯地从物流本身来看,而得回到淘宝的产品来看。

在淘宝上,推出了一个功能,叫“找人付款”。当时我觉得这个功能很好,解决了我帮我妈买单时,她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端:当要退换货时,我这边无法执行,她那边又不知道如何操作。

而当我从PC端登上我妈的淘宝账号之后,PC端的退换货服务非常麻烦和繁琐,让我都研究了差不多一个小时才解决。而最后,我妈那边又无法支付退货费用,我在PC端也支付不了,也不能“找人付款”。总之,整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷,但目前的情况而言,这样的产品还是对于我妈这样的用户非常不友好。

而拼多多呢?它基于微信这个社交生态圈。加上没有什么太多余的功能,我妈很快就能上手了,自己操作还是比别人代操作方便多了。

谈到这里,我还意识到一个重要的问题。

从产品对人际关系的影响而言,淘宝是负向的,而拼多多是正向的。从某种程度上而言,60岁以上的这代人,是被互联网抛弃了,所以当他们想搭上这波潮流时,不得不面对自己的儿女,需要向他们请教,怎么用怎么学。这一点首先就会让不少子女心烦,不少父母自卑。

再进一步,如果每次父母网购都得“捆绑”上子女时,对人际关系是正向的吗?而在拼多多上购物时,他们不仅可以大大优化自己的产品使用流程,还能跟自己的老朋友们一起拼单,互惠互利,这对人际关系的影响有很大的正向作用。

你有什么被别的产品抢走的故事吗?

一点个人小想法,想到哪写到哪。

如果你有不同的意见和想法,欢迎评论或留言。


文章来源:人人都是产品经理           作者:@源记物语


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

日历

链接

个人资料

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

存档