quora
本文作者 Norman Tran 是一位 UX 设计师,文章内容将以 Quora 安卓客户端优化为例,详细阐述“发现问题–解决问题–重新优化” 的整体产品重构流程。
发现问题
在此前的可用性测试(Usability Test)中,我发现了两个棘手的问题:
[yellow_box]

  • 浏览(Browse)功能不足,难以帮助用户发现有趣的内容
  • 搜索结果(Search Results)参差不齐,导航功能令人费解

[/yellow_box]
[green_box]解决方法 :高保真模型(High-Fidelity Mockups)[/green_box]
下图对比了 Quora 当前界面以及重构的高保真模型图。
图 1 为浏览功能界面的前后对比
Norman Tran重构Quora
图 2 为搜索结果界面的前后对比
Norman Tran重构Quora
Process 过程:
双钻石模型可以帮助开发者更好地了解用户需求,并寻找解决方案。其中,第一块钻石代表“发现问题”以及“用户调查”,第二块钻石则代表“问题解决”。在该环节中,我采用了 Personas(虚拟角色), User Story(用户故事) , Sketches(手绘素描), Wireframe (线框图)以及 Prototype (原型)。
Norman Tran重构Quora
Persona: Alex
假设 Alex 是个有着远大抱负和满满工作日程的创业者。
“我的关注那些值得尊敬、有权威的对象。但有时候,我会在阅读浏览信息流的时候感到迷茫—找到高质量又靠谱的内容有点难。”
Persona 是一个非常好的工具。它能帮开发者建立用户同理心,确保产品能有效解决真实的用户需求。尽管 Quora 有着各种各样的 Persona (比如,聪明的内容制造者,孜孜不倦的学者),我还是将注意力放在视时间如命的创业者 Alex 身上。之所以选他,是因为他的行为以及需求与此前的 Usability Test 参与者们存在极大吻合,他的形象也更易同大多数用户产生共鸣。
Norman Tran重构Quora
Alex 的三大核心需求

  • 可靠的内容:他希望能轻松地从 Quora 上学到最佳的内容。
  • 快速获取内容: Alex 创业已经非常忙了。因此,每次从 Quora 上搜信息,他都希望能够快、准、狠。
  • 发现好内容:日程总是满满当当,所以每一次在 Quora 上偶然淘到好内容,对 Alex 来说都是一种享受。

Norman Tran重构Quora
在了解过 Alex 的三个核心需求后,我采用 User Story 将它们掰开揉碎。从最顶层抽象的 Epics ,逐渐分解成细小、可设计的碎片信息。上图中的每一条用户需求都是采访者给出的建议,按照最上一级的 Epics 分类整理得出。

Framework: 将零散的用户需求同用户角色整合

在 Framework 中 ,按照用户角色(User’s Roles),目标 / 需求(Goals / Desires),以及好处(Desired Benefits),将用户需求再度整理。
Norman Tran重构Quora
画完 Framework 框架图后,User Story 就显得更加具体可操作了。值得注意的是,由于每一个故事都是合情合理并且真实存在的,我坚持在囊括全部细节后再将故事拆分,从而减少日后不必要的重复劳动。
Alex 可以是对问题质量要求严格的学者,惜时如金的创业者,也可以是获得授权的技术类用户 — 因为这些都是 Persona 中列举的特质。

Task Flow: Alex 如何使用 Quora

有了 User Story 后,使用 Task Flow 的原因有二:

  • 将所有 User Story 的相互作用可视化。
  • 考虑所有可能出现的问题、极端案例,以避免日后因失败版本而导致的损失。

Norman Tran重构Quora
Norman Tran重构Quora

Sketch: 让 Alex 的生活更易懂

明确了用户希望如何使用各种功能后,我开始在白板上描绘出不同的解决方式。根据需要优化的“浏览”和“搜索”功能,将方案逐一可视化。
注意:Sketch 的目的是为每一个需要优化的功能,提出尽可能多的方案。开发者需要给自己充足的空间创作,即使方案再天马行空,也不要过早地用批判的思维限制自我。
Norman Tran重构Quora

优选 Sketch

在画出的各种各样的解决方案后,总要选出一个最好的。建议使用 2 x 2 矩阵,以“影响力”和“操作易用性”为坐标,筛选最优解决方案。
注意:尽管通常情况下,直觉告诉我们,应该选择影响力最大、最易操作的解决方案。但有时候,选择更有挑战性的方案,对长远发展更为有利。

Wireframe 线框图

在制作高保真模型(Hi-Fidelity Mockup)之前,Wireframe 能够让人更加清晰得了解 Sketch。同时,比起精致完美的高保真模型,Wireframe 可以展示更多细节反馈。 下图为浏览功能的线框图:
Norman Tran重构Quora
Norman Tran重构Quora
下一步…
高保真模型(High-Fidelity Mockup)可以将死板的 Wireframe 生动起来,下一步便是制作可点击模型(Prototype ),从而进行后续的 Usability Test ,收集用户反馈,并继续设计优化。