真珠美学[译文]如何在产品中防止UX缺口

最初的作品小编:杰克 Moffett
译者:Zoe Yin
来源:https://uxmag.com/articles/how-to-avoid-ux-gaps-in-your-product

幸免UX债务的严重性重点是探听其来源,这能帮您意识并预防问题。

翻译注:术语“UX债务”(“UX Debt”)是从技术债务(Technical
Debt)演化而来。它指的是由于高速商业决策、设计捷径、错失机会、时间限定等要素,造成的规划和可用性职责的晚点。

不论是你处在消除设计债务的哪些阶段,别让祥和陷入现状,那种盲目标做法会创立出新的债务。设计债务总是存在,它会不依不饶地面世在您的制品里。

制止UX债务的第①重点是探听其来源,这能帮您意识并预防问题。
以下做法能够帮你理解下落出现意外国债务务的高危害。

可用性探讨及测试

为了幸免UX债务,就非得领悟大家所做工作的错综复杂。当你对用户的打听越深厚,累积的债务就越少。不幸的是,很多小卖部的UX团队在工作中并没有卓绝地利用用户切磋。

您会有恒河沙数的理由来责怪用研,从资金难点、逻辑上的不可行性、计费难点到客户的顽固。可是贫乏测试也是七个难点;有微微次你听到那样的话,“那是三个培养难题”?产品上市时间,短暂的限期,以及对“客户验收规范”的依靠,它们都意味没办法做可用性测试。有些集团文化甚至以为一旦有QA就够了。

如若您正在大力争取集团对用户研商的肯定,能够试着遵循Rian Van Der
Merwe在免费手册《Practical Enterprise User
Research》
中的建议:

  • 将有所的用研讨论都计为低收入(例如在安排中投入1澳元,则能够在支付中节省6英镑,在昭示之后再节约100比索)。
  • 运用案例钻探来支撑您的见地,比如这些3亿澳元按钮的传说
  • 交付叁个精简的用研布置,展现出可行的预算和时间规划。在这一页纸的宏图文书档案中,简单地表明背景情况,列出测试方法和测试时间表,描述商量对象以及愿意获取的眼光(例如“获得产品加大提议,来摆平选取的阻力”)。

当开首寻找最后用户来进展商讨和测试时,尽量和软件开发者建立联系。不然,在跟开发者检阅用研结果的时候会造成大气的繁文缛节。

事实上,如UXPin的CEO
Marcin Treder在《Eliminate UX Gaps In Your
Product》
一书中提到的,即使周周只花2时辰做用户访谈和用户测试,也能够成功在维持sprint速率的同时保险品质。

模块化

3个精心设计的用户界面,其本质是始终一致的。

按钮会用一种尤其特定的措施表示;恐怕里面有一些转移,不过用户总能将它们识别为3个按钮。就其本质而言,用户界面应该是模块化的,包罗着可选拔的组件。

力争将一个系统的宏图语言和代码都做成模块化的。

统一筹划中的模块化

模块化界面设计的做法跟模块式房屋很像:

  • 房屋的建造者不供给为每一种房子设计新门窗。他们准备好一套标准化的基础预制部件,用来布署不一致的布局。同样的,大家能够找出产品在不一致条件下被重复使用的一批骨干因素。例如,2个登陆表单由名字标签、密码字段、和3个交由按钮所组成,平常还有3个“忘记密码”的链接。
  • 当那些大旨因素被组装为部件,设计语言开首形成。随着通用UI情势的面世,它们能够被编成文书档案,放在情势库也许样式指南里。你会去解释那么些格局背后的用例及理论依据,例如在什么动静下相应选拔卡片布局而非列表布局。
  • 袖珍组件能够被组合成较大的组件,最后形成全体荧屏。在那或多或少上,你早就落实了规模效应,花在三个微交互细节设计上的肥力被推广了众多倍,因为它的收获价值可以再度地反映在一套应用中。

为推进集体对于模块化设计的广阔驾驭,你能够先和豪门一同标识出可重复使用的组件。在概念设计标准和格局的时候,确定保证您用的是通用的词汇。正如Kholmatova所提示的,格局名称要求能够反映出其作用和重复使用的痛感(例如“首页标题”比起“标题”的约束性就更强一些)。

在定义语言和形式的时候,你居然能够引入一些参预式设计(Participatory
Design)。同样如Kholmatova所提出的,能够设想向用户体现那么些方式,来收获他们对此成效感知的报告。

代码中的模块化

模块化设计推进下降设计的区别性(由此UX债务也会降低),而模块化代码则有助于简化开发实践和技能维护。有了模块化的代码,团队就不必要为了三个微小HTML调整而改变有个别按钮的九1伍个不等实例了。

反倒,只需求在一段代码里做出改变,应用里的每3个按钮就都会活动突显出改变了。

以下是有些可行的不二法门:

  • 面向对象的 CSS
    (OOCSS)

    是三个模块化的前端架构,它将UI的结构与其外观分别开,并且将容器(container)从内容(content)中隔断。这会让你的样式可选择,并且更易维护。有关这几个点子的详细信息,请参见我的书《Bridging
    UX and Web
    Development》
  • SMACSS代表着可扩张和模块化的CSS框架结构,由Jonathan
    Snook创立。它在精神上和OOCSS很一般,把体制分为了多个品类:Base,
    Layout, Module, State和Theme。
  • BEM意味着着块(Block),成分(Element),修饰符(Modifier)。它基本上是沿用OOCSS方法的2个class命名规则。
  • 原子设计(Atomic
    Design)
    是一个用以创立设计系统的方法论,由BradFrost创建。它帮你系统地识别出UI中的基本成分,也正是原子,然后再将它们构成元素子,最后成为有机体。那对于了然产品的模块化结构是一个全面包车型大巴比方。

最后,你能够创建出二个在美学、交互和代码方面都合并的统一筹划系统,那是幸免UX债务最可行的方法。它强制执行设计,让它更易于依据既定的规则创造新的页面。而且,倘若此外国债务务悄悄地发出,也更易于处理。叁遍变动能够修复存在于内地的题材。

来成为您所在机关里的模块化拥护者呢。

智能文书档案

真珠美学,人人抱怨设计文书档案的创造和护卫开销太多时光,更别提花多长期才能读完——可是文书档案自个儿不是坏事。不佳的文书档案才是难点所在。

智能文书档案能够助于拉动科学决定,并且制止UX债务:

  • 它能帮开发者们免于实践那种拍脑袋出来的支配。
  • 只要文书档案精确,它会是用户手册、帮助文书档案、以及培养材料的2个可信赖来源。
  • 文书档案的编纂进程使你想想得更细,并且会从差异的角度考虑难点。
  • 它提高了在产品公布以前就破获并且校勘开发错误的可能率。
  • 它可以变成指引以后设计方案的参照资料。

有点行为用静态文书档案难以描述、也许描述起来很麻烦,原型则是出现说法那类行为的绝佳格局。要豁达地将原型作为测试及范例来使用。就算如此,原型也是作为对卓绝文书档案的补充,而不是用来完全代表文书档案的。

卖家软件很复杂,须求多台服务器和数据库,还须要和外部、第贰方系统融为一体。大概还会有严俊的保密措施。因而,不可能仅依靠系统本人为参照。智能文书档案比较之下方便广大。

以Autodesk的AutoCAD
360集体为例,他们把产品必要文书档案成立为UXPin的叁个新闻主题。为声明须要,他们讲述了技能及UX准则,并且拉长了ZeplinUXPin的链接。随着项指标进展,团队成员们不停地立异文书档案,以突显新出现的供给和束缚。

图表来源:AutoCAD 360的产品要求文书档案。

Autodesk AutoCAD
360企划团队所开创的用户流程图。该图被链接至他们的出品必要文书档案。

文书档案日常是在流水生产线的结尾阶段才到位。设计师们平素等到设计“完结”之后,才把它写成文书档案。那就是怎么对文书档案的负面看法仍然存在。写文书档案被视作是进展真正的规划工作从前不得不实现的苦差事。

文书档案不是3个单身的任务,它应当伴随着整个工艺流程被写出来,和规划工作是一环扣一环的。好的文书档案是UX债务的周旋力场。它的成效像多少个过滤器,能够扑捉到任何不应当被投入产品的筹划。

来成为你所在机关里的地道文档拥护者呢。

结论

UX债务是个严重的难点,而且仿佛往往难以逾越。

意在以此便捷指南能给你意见和信心,来制止UX债务。

您今后持有为机构防止今后债务的国策了。辅导你的团组织去向贰个无债务的未来吗,那样你能够用愈多的岁月来用最新技术升高产品,并且消除用户须要,而不是胆小,受制于产品的旧有问题。

让自身来给您们三个终极的建议:别因面对挑衅就泄气。要为你所获得的到位而引以为豪。要为你的上扬而庆祝,拉动你为之努力的愿景。

如果你以为那篇文章有用处,下载免费电子书《Eliminate UX Gaps In Your
Products》
,获得越来越多提议。