首页

数据透视设计力:北京蓝蓝UI设计揭秘如何量化评估设计系统的用户体验

ui设计分享达人

在当今数字化时代,设计系统的健康运转对于提升用户体验、优化产品功能至关重要。然而,如何科学地度量评估设计系统的表现,尤其是组件库的维护升级效果,一直是业内关注的焦点。传统的问卷形式定性评估虽然广泛应用,但因其受限于样本量和周期性评估的特性,难以提供实时、精准的反馈。

在B端设计领域,Light Design设计系统凭借其出色的组件库,为用户带来了极大的便利。然而,随着产品功能的不断迭代和用户体验要求的提升,组件库的维护升级也面临着越来越多的挑战。为了更加敏捷地应对这些挑战,我们急需一种实时的定量监测能力,以便快速定位问题、明确迭代方向,进而减少维护成本,提升组件库的易用性。

本文将以Light Design设计系统的组件库为例,深入探讨如何通过定量指标来优化组件库的维护升级流程。我们将从四个关键方面展开:明确问题、选择指标、探究现状、解决风险。

首先,我们需要明确想要挖掘组件库的哪些问题。这些问题可能涉及组件的使用频率、错误率、性能表现等多个方面。通过将这些问题按维度分类,我们可以更加清晰地了解组件库的现状和潜在风险。

接下来,根据设立的维度,我们将选择合适的观测指标。这些指标应该能够准确地反映组件库的性能表现和用户体验,同时也需要具有可量化、可比较的特点。

在确定了观测指标后,我们将开始探究这些指标所反映的现状和风险。通过收集和分析实际数据,我们可以了解组件库在实际使用中的表现,发现存在的问题和瓶颈,为后续的优化提供有力支持。

首先,我们需要明确希望定量评估帮助解决哪些问题,从参与组件库的角色来入手把问题维度进行分类:

角色一是维护方,负责生产和迭代组件。对于这一方,希望宏观的知道目前组件库的体量,判断是需要精简还是扩充;

以及还需要判断迭代周期是否合理,那么就对应以下2个维度:

1.构成规模-即组件库由多少组件构成。

2.维护效率-即组件库迭代的快慢。

角色二是引用方,也就是各个业务平台的设计师、研发同学。他们会在日常的需求消化中,引用组件完成功能迭代。我们希望通过这些引用的行为观测组件库的覆盖能力,提前预知不易用的风险组件,尽早升级。于是就有了以下2个维度:

1.引用规模-即有多少平台用到了组件库。

2.易用性-即组件是否在各业务场景都方便引用。

有了维度分类后,接下来就需要在众多组件库的观测数据中,选取合适的数据成为观测指标。

下面是我们根据评估维度选择的观测指标:

构成规模

1.组件个数-基础、业务、图表等多组件库分别计数。

2.组件库覆盖率-各组件库中被引用组件对于全集的占比。

维护效率

1.组件库迭代进度-迭代性质可分为问题修复、特性和实验性功能增优。

引用规模

1.引用平台数-有多少平台引用了组件库。

2.组件库版本引用占比-各平台引用的是哪个版本的组件库(组件库每升级一次,即为一个新版本)。

3.各平台组件库引用覆盖-我们提供了基础、业务、图表3个大组件库,从这个数据可以获知各个业务平台都引用了前述的哪些组件库,以及各引用了多少组件。

易用性

1.组件引用次数-组件被各业务方引用了多少次。

2.组件改写次数-此处为非正常改写,业务的研发强行破坏了组件的既有样式,业内通常称其为"Hack"。

通过上面的分析,我们就得到了一个较为完整的观测指标框架,下面我们来探讨下如何利用他们实际去发现和解决问题。

探&解

确定以上观测指标,我们搭建了监测平台,日常监控组件库的数据表现,产出数据报告。下面就用实际的例子来讲讲如何利用这些定量的观测指标,发现并解决组件库的易用性和维护上的一系列问题。

易用性相关

问题1:如何定位到不好用的组件?是否值得升级?又如何进行优化呢?

解:这里需要依靠2个数据指标来判断,分别是组件的引用次数和改写次数。简单解释就是高频引用同时又频繁改写的组件严重影响了业务方的引用效率,这些组件自然是不好用的,需要重点解决。

我们以表单组件为例,来看下具体的工作流。

1.定位出高频引用且高频改写的组件:首先定位到"表单"组件出现在引用数Top5内,且改写数是非常频繁的。

2.还原具体改写场景并分类归因:针对"表单"组件,拉取了改写的css代码,逐一分析都改写了哪些样式。从中提炼出共性的改写场景,进行分类归因。于是可以把表单组件的改写问题分为4大类,分别是行间距问题、标签宽度问题、横向表单缺失问题、附属表单样式规范问题。

3.针对不同原因导出解决手段进行组件升级:最后,根据上述问题,逐一进行设计和研发升级。升级后的表单组件再被业务方引用时,免去了改写的成本,平均单次引用可节省约1h的研发耗时。

问题2:上面解决了单个组件的易用性问题,但无法从全局判断组件库整体的易用性表现,那应该如何解决呢。

解:把所有组件的引用次数加和,得到总体数值,并结合时间维度,观察组件库整体改写数与引用数各自的变化趋势。用线形图来描述的话,随着时间推移,引用越多,改写越少,两条线呈开口状,那就表示组件库处于越来越健康的状态。反之则需要警惕了。同时我们搭建了一套评分体系,基于引用/改写数值,通过归一化和加权等一系列计算,by月/季度给组件库易用性打分,也能精准的知道组件库易用性的表现,如果分值是下降的,就要具体去定位哪些组件出了问题,再根据上述的方法相应地进行升级。

日常维护相关

问题1:业务方反馈的升级诉求经常扎堆,怎么去快速判断升级的优先级呢,提高维护效率呢?

解:为了能提高组件库的维护效率,及时满足各业务方的诉求,会从易用性、引用规模、升级成本这三方面来综合判断升级的优先级。

首先,将业务侧提出升级诉求的组件按业务上线时间由近到远排序。这就有了一个基础的优先级。

然后,从中挑选有严重bug的组件(易用性差)、多平台高频引用的组件(引用规模大),往前调整优先级。

最后,评估它们的升级成本,如果成本小,迅速能迭代,那就按顺序解决。如果其中有大规模升级的组件,不一定能敏捷支持,那就需要与业务侧商量,先提供临时替代方案,再专项升级组件。

问题2:日常维护组件库,如何保持组件库的活力?

解:组件库若长期未更新,说明对业务升级诉求的支持效率不高。此外若存在一些低频使用甚至冗余的组件,则会在组件库升级时带来很大的负担。所以需要时刻保持组件库的精炼和活力。我们从两方面来评估,第一、固定周期内的迭代频次,这体现了应对业务方诉求的响应速度和自驱升级的主动性;第二、低频引用的组件个数,首先我们会定期清理引用数为0的组件,并分析低频组件不常被引用的原因,相应做精简、合并,控制低频引用组件个数,有利于我们将更多的精力聚焦在重点组件的维护升级上。

结语

上述给大家简单地介绍了设计系统相关的定量指标及其使用案例,那么除了以上这些,其实我们还有很多可扩展的空间,如目前的数据维度都是针对系统"维护方"和"引用方"的,还缺少"平台体验者",也就是真正用户对设计系统的视觉/操作体验指标,如何通过定量的手段收集这些指标数据,与定性数据相辅相成让组件库的评估更为精准,将是我们接下来需要探索的课题。

 

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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

关于一个数据概览的复盘|北京蓝蓝UI设计公司

ui设计分享达人

前言在B端的业务之中,数据概览页面属于常见的页面,对主管有快速查看/查询/决策的左右,对于执行也能查询到KPI是否完成的,防止遗漏的作用。今天就结合业务之中的一个案例,跟大家做一个分享,有不同的意见可以留言或者是私聊沟通(谢谢大家)。业务需求我们团队主要做的OA类型的项目,主要是服务于公司内部的开发团队。随着业务的逐步拓展、用户的角色需求的多样化、角色数量的多样化、团队内部开发团队难度、设计师人手有限等矛盾不断递增,8个数据概览模块面临着体验复杂以及设计开发难度大的问题。涉及到的元素

业务:涉及8个应用,40个页面。
角色分解:QA,IPM,SPM,TMDE,TES,模块owner。
使用场景:管理者汇总团队信息、向上汇报以及分析数据。

现有问题体验不一致,提高管理成本:

架构组件以及样式不同的模块完全不相同,缺少规范性

开发低效,沟通成本高:

组件重复开发,开发成本高
设计师与开发沟通成本高

解决问题解决流程分为:找高频框架通过收集40个页面的布局,结合对执行者与决策者的角色行为进行分析,将所有的页面分为:

数据概览
数据分析
详情查看

重复组件将可视化按照空间分成;

底层:背景
内容层:页头+筛选+图表+表格
顶层:动作按钮

高频样式现有的样式杂乱无章,因此针对现有的样式进行收集和整理分类为布局,色板,字体,将所有的页面所有的元素进行拆解,统计高频样式。分成:

布局:按照业务流程顺序区分
高度:统计导航栏的高度重新计算高度
走向:统计现有浏览器导航高度重新定高度
字体:现有字体尤其是在数字的展现方式区分度不够

组架构组合3个场景并且对页面进行分类,提取其中高频的进行整理继续布局:

数据概览:图表+页头
数据分析:页头+筛选+指标+图表
详情查看:页头+筛选+图表+详细表格

组件组合模块根据业务进行“总-分”形式的:

功能模块
子模块
子功能

上面是针对于常规的功能模块,针对非常规的模块「例如:结果页面」进行更加细化的区分“图表”“表格”“筛选”,再度细分成为主体和变体进行区分。样式组合

布局:将7个常规的布局手链成为2个:“字-左上,图表右下”,“图表左右,注释右边”
高度:以win为例,导航栏分为3栏,再去保证页面的报告率格急性型分组:1920对应的是440,1600对应的是360px,1366对应的是280px
走向:根据统计的数据来,3个模块会出现超过20字的注释或者是标签名,因此延伸出2套解决方案:“自上而下”,和“自下而上”,经过验证邀请几个同学发现自上而下阅读成本低,理解成本更低
字体:现有字体中,常规的默认字体区区分度不高,所以引入了Din作为支持数字呈现的

作者:一只鸡腿啊啊啊
链接:https://www.zcool.com.cn/article/ZMTU4NDQyOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

卓越用户体验设计指南|北京蓝蓝UI设计公司

ui设计分享达人

“没有产品是一座孤岛。产品不仅是产品,这是一套有凝聚力、综合性的体验,思考产品或服务的所有阶段-从最初的意图到最终的反思,从第一次使用到帮助、服务和维护。让他们无缝的协同工作。”— Don Norman

用户体验 (UX) 设计是在获取和集成整个产品流程中全流程创建有意义的体验优化,不仅包括产品易用,更注重的是全程与全方面,关注产品并提供解决痛点难点的解决方案。在某些情景下,UX、UI、可用性等术语通常互换使用,但是可用性和UI仍为UX的子集,是UX构成的重要元素

UX设计涉及实施、组织项目和元素,来影响用户从产品获得体验。设计目标是通过影响用户心智、感知与行为方向,来优化产品路径与流程。通常在设计过程中保持“以数据驱动”和“以人为本”:

通过数据驱动的用户体验最优化

卓越精美的用户体验可以提高产品销售额,转化率,提高用户忠诚度,降低用户沮丧感并提升团队工作效率。科学优化的用户体验设计路径与流程可以精准获取用户并核对业务目标。

坚持“以人为本”智能化设计理念

设计过程中保持“以人为本”的设计理念,提前对市场、用户和目标群体进行调研,在多维度视角下构思产品用户体验路径与方案,通过卓越思维提供底线价值

国际标准化组织将UX定义为:“一个人因使用或预期使用产品、系统或服务而产生的看法和反应”

在UX设计过程中,设计师无法控制用户对产品的看法和反应,同时在用户未使用产品即得到体验结论的方式我们也无法认可。因为我们无法控制用户在使用产品过程中,他们的感觉,心智,眼睛,与操作流程,所以设计师能做的仅仅是在有限的产品功能与流程内达到极致的美学优化与路径优化。即:一个人无法设计用户体验,只能为用户体验而设计。

思考UX优化的最简单方式拆分用户体验,将其从动词与名词两个角度进行思考。动词:思考-计划-实施(优化),名词:对系统和产品的感知和响应

即:我们虽然无法控制用户如何使用产品,但是我们可以通过控制页面的美感、路径的精简、交互趣味性,来引导用户完成操作:直观浏览产品-引导实现目标-适当时间任务可见性,这些方面会帮助用户一定程度按照我们预先提供的方式使用产品并得到卓越体验感。

为什么-什么思维方式

设计师在优化用户体验感的过程中,应先找准“为什么”(为什么用户不喜欢这种交互方式?为什么用户操作体验感差?为什么转化率低?为什么用户忠诚度不够?),即先找准“痛点”,再“对症下药”,用“什么”方式,来解决用户痛点难点,通过无限个优化闭环-创建让用户有意义的体验产品。

体验环境-卓越体验计划

设计师在优化过程中,除了考虑产品本身的优化,还需要考虑用户使用产品的环境和情景,即:用户使用的外环境(室内、室外、光线强度),用户使用的情景(运动、静止、精力与功效),用户使用的设备(产品展现的实质),必须确保产品可以在使用场景、情景和设备都自由或符合实际应用前提下,提供给用户卓越、流畅的系统体验计划。

项目方法

参与卓越体验优化项目的方式可以是正规的瀑布式,也可以是非正式的敏捷,瀑布式优化方式可能不是很灵活,当需要变化时往往无法立即完成优化,而错过最佳优化体验机会,而敏捷恰巧能解决这一问题,避免繁琐流程和批准步骤导致优化延迟。从某种程度上,选择方式的优化也是体验计划优化的步骤之一。

业务需求

我们进行卓越体验计划时,首要条件是满足业务层需求,为业务赋能,当优化点与业务产生矛盾时,首要为业务让步,可以与相关方先进行沟通了解功能点与业务需求,再根据利益相关者访谈制定想法。之后根据功能划分不同组,再优化与过滤,生成有效且不重复的需求列表,之后进行优先级排序。

用户视野调研

用户调研往往从定性与定量两个方向进行

定义组 -为了体验计划的顺利实施,我们首页任务是创建需要使用应用程序或网站的用户类型的架构或模型。可能包括:投资者、成员、合作伙伴、客户和求职者……
研究——确定用户类型后,确定在整个项目中要执行的研究类型。例如:用户访谈、情境访谈、焦点小组、可用性测试、调查和卡片分类。

人物角色

在进行体验计划决策时,我们需要先构建虚拟画像,之后牢记可能使用该产品的“心理用户模型”与“逼真用户概念”,设计决策需要大量信息,在缺乏所需信息情况下,设计人员无法解决设计冲突,因此我们需要提前构建“虚拟用户画像”模型,在这里我们暂时称为“角色”

设计

进行最终的设计优化时,我们需要借助很多方式来完成优化计划,包括不限于仅仅在视觉层面。

视觉——通过完美的视觉带动用户感知,用户可能会认为设计良好的产品比视觉设计不太专业的产品更值得信赖、更有价值、更相关。
心理学——使用产品时,用户的初步印象可能是正面也可能是负面。有效的程序以适合用户心理模型并符合用户期望的方式响应用户输入。有效程序的设计需要对心理学有很好的理解。
站点地图 -用于表示应用程序或站点的不同“页面”或“视图”的图表。站点地图通常看起来类似于组织用来显示人力资源结构的图表。
任务流 –与站点地图类似,很容易与它们混淆。站点地图显示站点或应用程序的“页面”或“视图”的布局,而任务流则显示向用户提供的选项以及用户可以在系统中导航的路径。

由于用户体验设计涵盖了整个用户旅程,因此它是一个多学科领域。

用户体验设计师的典型任务各不相同,但通常包括用户研究、创建角色、设计线框和交互式原型以及测试设计。这些任务在不同组织之间可能存在很大差异。尽管如此,始终要求设计师成为用户的倡导者,并将用户的需求置于所有设计和开发工作的中心。这也是为什么大多数用户体验设计师以某种形式的以用户为中心的工作流程进行工作,并不断引导最明智的努力,直到以最佳方式解决所有相关问题和用户需求。

总之,设计体验优化是一个有趣的工作,它不仅要求设计师具备极强的专业素质,也需要拥有多学科思维,以“用户”的视角,以“相关方”的身份,以“产品”的思维,以“设计师”的专业 ,来解决并决策整个产品全流程过程的所有优化体验计划。通过持续探索,以设计艺术与科学满足用户需求和业务目标。

作者:十几个黄河大街
链接:https://www.zcool.com.cn/article/ZMTU4NDUyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

蓝蓝设计问答:什么是全流程的UI设计,内容和步骤是什么?

蓝蓝设计的小编

2.全流程设计包括有什么主要内容和步骤?
1)明确设计目标,聚焦设计要解决的核心问题
2)明确目标用户,要明确产品价值要解决的用户群体,描述用户画像,提炼用户场景,挖掘用户需求。
从产品应用的具体场景,来研究和理解所涉及到的产品体验问题。这些可能是产品中已经出现的体验问题,也可能还包括有未满足的用户需求问题。通过不同的用户研究手段,了解已有的用户行为和使用习惯,进行策略分析,改变原有业务逻辑不合理的操作路径,进而提出有针对性的交互设计和视觉设计解决方案。
3)明确资源配比,了解技术方案,进行设计预估
通过项目启动会了解产品的功能列表和产品规划,避免做出现有功能相冲突/重叠的设计,进行合理的设计预估
4)确定方案流程,确定设计方案
方案流程可以是流程图也可以是交互原型图。最终完成的是高保真的交互原型、可交付开发实现的UI demo。在以最终的结果进行专家评审,确认无误后,进行可用性测试。
5)数据对比分析
在有条件的情况下,需要对于设计前后的数据进行对比分析,对比前流程与现流程的差异,关注某流程的耗时和步骤。大部分B端产品的设计初衷就是为了某业务流程的降本增效。关键就看设计的产品,在上线后给公司的降低了多少的成本,提高了多少的效率。所以成本和效率也是设计的产品是否合格的关键因素所在。B端产品设计可以进行用户可用性测试,了解设计带来的实际收益和效果。依托数据合理改正方案。

日历

链接

个人资料

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

存档