观点 | 搞定小白用户的 dApp UI 设计六大原则

Ajian   |     |   3241 次阅读

1.png

5 月初,2018 年度的 CoinDesk Consensus Hackathon(黑客马拉松)在纽约举办。我的团队也报名参加了,开发了一款针对供应链的区块链应用,可以对纽约市的农产品从农场到餐桌的过程进行追踪。我询问了当地可持续发展的工作人员关于这款应用的用户画像,她告诉我有这种需求的农民有些是“70 岁左右的老人,从不查看邮件,也不会使用 Excel 电子表格系统”。

我一下子懵了。连微软办公软件都搞不定的 70 岁老农民,我们该怎么给他们搭建区块链应用?

类似的挑战只会变得更加普遍,因为全世界有至少 80% 的人不知道区块链是什么。不幸的是,如今 dApps(有数据或逻辑在区块链上的 app)给普通人的用户体验感不好。除了一些拥有数千万美元的机构性资助以及数十位人员支持的 dApp 之外,其余的 dApp 涉嫌粗制滥造的传销骗局、赌博游戏、加密猫山寨品,以及以太虾农场(Ether Shrimp Farm)。

2.png

-我选择这个 dApp 不只是为了证明我的观点——根据 dappradar.com ,以太虾农场居然是现下最流行的 dApp。-

我们的团队也在共识大会的黑客马拉松上尝试了 dApp ,并赢得了小组第一。在本文中,我会以我们的黑客马拉松 dApp 的开发过程作为案例研究,分享对普罗大众友好的dApp 在设计上的六大原则。如果你对 dApp 、区块链、用户体验或设计感兴趣,本文就是你的菜。

黑客马拉松的背景介绍

在深入探讨设计原则之前,先大致介绍一下我们项目的基本内容。

  • 挑战——我们要解决的来自 CoinDesk 的挑战:

使用区块链技术创建一个模型,为 GrowNYC 食物从农场到仓库、零售店,再到消费者的供应链赋予可追踪性和透明度。

  • 团队——我们的团队有 1 位前端开发者(Rachel),2 位后端开发者(Saif、Piers),还有 1 位程序员不仅负责前后端开发,还要处理二维码识别(Paco)。我是用户体验设计师,也负责收集来自用户和数据模型需求。

  • 时限——我们从周六中午开始,周日下午 1 点要求提交成果。因此我们只有 24 小时的时间进行构思、设计并构建解决方案。

  • 技术——我们利用 React Native 搭建一个移动应用,供应链上的每个成员(农民、仓库工作人员等等)都会利用这个移动应用输入数据并验证数据包。在 Hyperledger 实时引擎的基础上,我们使用 JavaScript 和 Hyperledger Composer 语言搭建逻辑和数据模型。

3.jpg

-奋力在本地部署区块链-

4.jpg

-打印并测试各种二维码-

1. 从用户画像角度定义人的需求,而非区块链的需求

-字丑,见谅 : ) -

基于我从技术小白用户那里收集的信息,我迅速构建了我们的 dApp 目标用户的画像。用户画像不一定完全贴合实际用户,而是从人性化的角度模拟实际用户,让他们的问题变得更加具体化:

  • Winston 是一名 70 岁的白人农民,美国海军退伍军人,使用的是老版安卓手机,需要孙子帮忙处理邮件
  • Truong 是一名 29 岁的仓库工作人员,育有 3 个孩子,移民自越南,刚刚开始上夜校学习英语
  • Katrina 是一名 20 岁的白人学生,就读于纽约市立大学的电影研究专业,在 Greenmarket 实习,管理一部分农产品市场
  • Cristobal 是一名 37 岁的墨西哥裔美国人,是当地餐馆的帮厨,负责每天早上去当地市场采购每日所需食材
  • Denise 是 42 岁的兼职花农,育有两个孩子,每天带全家人下馆子,是刚从密西西比州迁来纽约的非裔美国人

上述内容看起来有些空洞,但是为这些想象出来的用户赋予详细的人性化特征有助于你在开发过程中针对不同的时间点进行自我评估。

什么 gas 价格和 GWEI ?70 岁的农民怎么可能关心这些?

解释哈希和完整的时间戳干啥?42 岁操劳的母亲没必要了解这些,她只想知道自己吃的苹果派是哪里来的。

通过建立用户画像来确保你是在为终端用户,而不是你自己打造产品。

2. 尽可能精简复杂的数据录入

在建立用户画像之后,我们为 app 构建了用户旅程。下图解释了用户是如何按时间次序使用 Localtrail 的。Localtrail 可以追踪一包食物自农场内产出到零售点贩卖的全部流程。

5.png


Localtrail 用户旅程,展示了不同的利益相关方如何使用 Localtrail app 追踪某包食物的流程

  • 农民打包食物,录入数据,扫描二维码贴纸,贴到包裹上,在 app 上提交数据
  • 仓库工作人员扫描包裹上的二维码,执行质检,并在 app 上提交数据
  • 市场工作人员扫描包裹上的二维码,执行质检,并在 app 上提交数据
  • 零售商扫描包裹上的二维码,执行质检,在 app 上提交数据,并向终端消费者展示二维码
  • 终端消费者通过 app 扫描二维码,查看食物的来源以及收获时间

希克定律 是一则简单的概念:你给用户的选择越多,他们做出决定所需的时间就越长。如果你的用户既有 70 岁的农民,又有操心劳力的母亲,那么降低数据录入和管理的复杂性是这款 app 能否生存的关键。这条定律适用于所有 app ,不过涉及到了区块链风险就更高了,很容易引起数据冗余的问题。以下是三条有用的策略:

只收集最少量的数据

我们的数据模型重简不重繁——对于每一个食物包,我们优先选择有可能实现免信任验证的最少量数据点,包括食物种类、食物数量和数量指标等。表格上的必填字段越多,用户的弃填率就越高。因此,像购买信息之类的无关数据没必要上链。如果你使用的是有 Gas 限制的公链,就更需要严格把关上链数据。

基于内容设计流程

设计复杂的用户流需考虑以下几点:

  1. 设备人们更喜欢在大屏上处理复杂的任务和数据录入,然而鉴于便携式扫码和数据录入之需,我们的 app 只能绑定在移动设备上。相比台式电脑,移动设备上的网站弹出率高达两倍,参与度只有 1/3 ,因此你需要努力吸引住他们的注意力。
  2. 数据类型:如果你设计了一系列只需回答是否或者有选项的问题,这样一目了然的表格是很讨人喜欢的。然而,如果你的表格上有可自由填写的文本框、下拉菜单和日历弹出菜单——请切分流程,便于用户管理。
  3. 每天X份食物包上每份的数据段数量:每打包一份食物,农民必须录入 7 个不同的数据点,确实如此。然而,因为农场运送的农产品数量,所以这些数据点每天还要翻几十倍。

明示进展以保持用户的参与度

完成一项任务之后,你的大脑会分泌多巴胺——使用积分或等级将用户体验游戏化是维系用户的经典策略,对于处理数据录入这样枯燥的任务更是如此。尤其是对于区块链相关的数据来说,如果用户在流程中有一刻感到沮丧,就会离开去做其他的事,毕竟每天有上百件事等着他们去做。因此,重要的是让用户明确知道“我现在的进展如何?” 以及“事情做完了吗?还是有更多事要做?”

6.png

-使用流程板块细分成了更小的数据块,将复杂流程简化了-

考虑到上述因素,我们将以上流程设计成了更多步骤,并将每个步骤简化了。长条形的滚动屏幕或许更节省时间,但是我想到 Winston 在烈日直射的农场里眯眼盯着屏幕, 拇指在低端安卓机的滚动屏上点错了表格字段的场景。因此,我们选择了由许多简单屏幕组成的指示,一个接一个只询问最少量的上链数据。

我们还设计了一个视觉时间尺,告诉用户整个流程中有哪些具体步骤,在流程进展到一半之时,他们可以选择是返回还是继续下去。Intuit 的 TurboTax app 也采用了这样的灵感,它很好地将报税这样复杂的任务进行了细分。

3. 尽量将区块链抽象化

我们列了一张清单,上面的东西既无法帮助 Winston 做农活,又会将他弄糊涂以至于放弃我们的 app:

  • 他的区块链交易的哈希值,完整或被截断的字符串
  • 他的参与地址
  • (如果是在主网上)包含他的交易在内的区块 ID
  • (如果是在主网上)打包他的交易的区块的 etherscan.io 链接
  • 知道他的交易数据存储在区块链上
  • 知道他的区块链供应商是 Hyperledger

说实在的,对于农民或仓库工作人员来说,知道他们的交易有没有上链根本不重要。对于一个搭建在中心化服务器上的供应链 app ,我们要详细解释什么是服务器冗余或使用流程中的 AWS Lambda 吗?

收集“最小量数据”的原则同样适用于 数据显示 ——我们应该针对问题和用户只显示必要的区块链数据。区块链数据会让多数人望而却步。这就是我们将这些数据从使用流程中除去的原因。

7.png

我们也可以将上述概念应用到终端消费者体验上,终端消费者会在餐馆之类的地方扫描二维码查看食物的来源。以下是我定义的数据优先级:

  • 上方显眼处——显示农场、方位以及食物的新鲜程度(由采收日期可知)。大概有 85% 的人会注意此处——用餐者急于了解食物是否新鲜,且是否来自当地较好的农场。
  • 收据的标准视图——显示农场地址和具体采收日期等其他细节。很少的人会注意这些数据,约占消费者人数的 10% 。或出于无聊或出于好奇,他们会一看了之。
  • 收据的扩展视图——连同上述信息外还显示了实际的采收地(有时候不同于农场地址)、各个质检步骤的时间戳,以及解释区块链是如何与产品结合的工具提示。极少的狂热者(大约 5% )会细致到要检查食物包的详细旅程。

鉴于信息与用户的关联性不大,我们为帮助消费者节省宝贵的时间而降低了体验感,不过为防万一也提供了可以查看详情选项。我们并非要通过增加查看数据的难度来剥夺用户的控制权——我们只是不想为他们忙碌的生活增添负担。

4. 将不可恢复的操作透明化

如果用户打算做出影响深远的永久决定,app 在设计上需要清晰透明化。对于 Localtrail 的用户来说,知道他们的交易是否上链并不重要——重要的是知道提交和验证数据包是不可恢复的操作

9.png

-我们会用安全透明的方式存储您的数据。因此,一旦您点击了提交,将无法返回修改信息。请再次检查您的数据包并点击提交。-

8.png

-只提安全性,勿提区块链-

为了让用户理解上述信息,我们还谨慎地重复强调:数据一经上交即成定局,且一经发布不容修改。我们将其背后的技术原因抽象成了一个事实:我们会用“安全透明的方式”存储用户的数据,并在图标的设计上采用了 2018 年用户所熟知的锁和云这两个概念,让他们明白自己的数据存储是永远不可更改的。

5. 在数据上链之时不要让用户干等

对于农民而言,数据包是待上链还是已上链状态并不重要。整个流程的每一步都需要正确的数据来推进,而且我们的 app 是搭建在私有链上的(没有 Gas 限制),因此凡是提交的交易都会成功。即使是在公有链上,你可以先让用户做其他事情,等交易提交后再以通知或小型弹出框的形式发布静音的更新提醒。

10.png

-数据在上链的过程中没有变成加载页面,而是按照预想的优先级立即为 Winston 安排了后续操作-

真正重要的是明确下一个操作应该是什么。大多数 dApp 在交易提交后并未向用户保证可以进行后续步骤,这可能会引起技术小白的担忧。我们提供了一组优先按钮:优先级较高的“新的包裹”按钮(更有可能成为农民的下一个操作),以及优先级较低的“查看所有交易”透明按钮。

我们的 app 从设计上帮助 Winston 专注于最重要的任务,而不是增加不必要的认知负担。

6. 名称和品牌上不要带有区块链字样

我们有意选择了 Localtrail 这个名称以及 全社区透明度第一的供应链 这个标语。使用区块链技术的公司多数名称中都带有区块、链、比特、以太等字样。如果你的用户是开发者或公司,这么做无可非议,但是对于普通消费者来说,最好专注于你正在解决的实际问题。

我们想要强调我们的关注点在于用户及 他们在当地社区面临的问题 。即使是在我们的商标上,也看不到任何链或立方体——我们的商标是一座农场,即社区供应链的源头。Jia Wu 向我展示了现行的供应链解决方案 Provenance  ——与我们采用的方法类似。

11.png

12.png

-Provenance.org 的登录页面——上面同样看不到区块链的字样!-

除非你点击“技术”,才能在网站上看到区块链的相关内容。他们的标语“每个产品都有故事”重在传达他们的使命以及他们要向消费者传达的价值。这才是正确之举。

结语

dApp 也是 app,需要具备实用性

区块链社区内部呈现一派剑拔弩张的气象,一边是简化用户体验的传统信条,另一边是赋予用户完全的支配权和透明性的去中心化精神。我认为不应该存在这种分歧。

哈希和默克尔树证明有助于 dApp 实现银行或企业级数据存储。然而,如果我们讨论的是向消费者的 dApp,大多数用户都不知何为区块链——我们就不能再想着如何证明区块链的免信任特征了。 如果只有 1% 的用户了解何为区块链,那么这些数据对任何人都没用。

最成功的创业公司会持续关注如何维系用户以及制造满足用户需求的产品。这一点不会只因为代码或数据被放到了区块链上而改变。我们只会采用主流的区块链技术来提供绝佳的用户体验。

13.jpg

-2018 年度共识大会黑客马拉松的全体参与者-

14.jpg

-我们的超强战队-

如果你喜欢我的文章,欢迎点赞、留言,通过电邮(kevin0kim@gmail.com)或 Twitter 联系我——我正在提高活跃度。我的下一篇文章将在本文的基础上,从用户体验的角度分析现下流行的 dApp 。

感谢 Saya Iwasaki、Sara Sodine、Elan KidermanBo Ren、Vijay Menon、 Charu JangidDan ShipperTarik BellamineBrian FlynnMitch Kosowski 对本文的反馈。感谢我给力的队友 Rachel、Paco、Saif 和 Piers。并感谢 beltranSarah Baker Mills 这两位优秀的作者对我的启迪。


Elisa 按:Localtrail 团队高效地把握住了 UX 的核心,让毫无技术背景的用户跟着直觉就能够完成供应链数据上链的步骤,Congrats!
阿剑按:一篇产品经理看了会沉默,工程师看了会流泪的文章 : ) 其实道理本来如此,事情本就该这么干,但这样朴实的道理还是等待着被人说出来等了好久。Localtrail 不是一个解决整条流程中所有问题的方案,但不去想一步登天的方案,步步为营开始探索,何尝不是一件好事呢。


原文链接: https://hackernoon.com/6-principles-for-designing-dapps-for-regular-people-from-a-consensus-18-hackathon-winner-134cdb881cc1
作者: Kevin D. Kim
翻译&校对: 闵敏 & 阿剑


你可能还会喜欢:

教程 | 你的第一个 Truffle 分布式 App(2)
观点 | 用猫咪构筑区块链与消费者之间的桥梁
科普 | dApp链:通过侧链扩展以太坊 dApp

 
1 人喜欢