框图与测试 Sketching & Testing

Sketch，可以用下面的小范例练习一下，最后你就能完整个画出 Visual Alphabet。

准备纸跟笔，按照我下面打的几个项目去练习这些图，用简单的线条表现即可

点 (Points)、线 (Lines)、角度 (Angles)、圆弧 (Arcs)、螺旋 (Spirals) 、圈 (Loops)、椭圆 (Ovals)、眼睛 (Eyes)、三角形 (Triangles)、矩形 (Rectangles)、房屋 (Houses)、云 (Clouds)

在 UX Design 内，你可以用这些形状画出任何你想要的设计，下面也是我随意画的啦。

当你要开始画 Sketch 的时候，记得要把 user flow 时时刻刻拿出来对照，因为它能够帮助你专注在每一个使用者需要下决定和完成的步骤。这边提一下 Screen Flow，和 user flow 非常类似，主要是每个步骤都透过一个最低保真度的原型 /框图 (Wireframe) 来展示。

by UI Wireframes

接下来，你可以透过以下的步骤来尝试画画看你的 screen flow：

1、准备纸笔

2、打开之前画的 user flow 作为画 sketch 的引导

3、每一个 user flow 都画一个 sketch

4、在每个 screen下面加一小段的文字去解释它

这边有几个在画 sketch 时的小技巧：

1、给自己设定一个 10分钟 限制，并在有效的时间尽可能的多画 sketch

2、不管是行动版或是网页版本，都要帮你的产品画 sketch

3、越简单清楚越好

每一个纸上的 sketch 都可以拿来做测试，而且测试越早做会越好，即 Paper Prototypes，就是你手画的设计介面。下面这个也是我画的范例，我用的产品是 SketchyNotebook，专门用来画产品原型的，它有很多不同的垫板和笔记本可以画，我觉得蛮好用的。

Paper prototypes 有几个好处：

1、能够快速的 integrate，丢弃一个你不要的 sketch 只会花你两分钟，而不是两小时去改写 code

2、省成本，只需纸、笔，如果以真的想要搞得很复杂，可以去买一些贴纸之类的辅助工具

3、能够及早测试，还记得 UX Design Process 的流程吗？我们现在是停留在 placement & Layout

Discovery & Research > Synthesizing Research & Design Strategy > Placement & Layout Design> Execution> Usability Test

画完 paper prototypes 后，可以开始准备测试了，大致上也会跟着以下的步骤走：

1、招募测试的使用者

2、找一个安静的地方来自己测试

3、重新的排列原型，并确保画面的流畅度像真的可以使用的产品

4、测试过程中记得录音或录影

5、把第一个 screen flow 放在测试者的面前

6、请他完成这个 task（测试过程可参照设计夹之前发布过的文章）

下面这是我自己画的 paper prototype：

测试结束后，尽量快点重听、做笔记和写下 insights，insights 要包含：

观察 (Observations)： 你看到听到什么？有什么让你很惊讶的？

洞见 (Insights)：从观察中主要学习到什么？

建议的设计 (Design Recommendations)：这些洞见要如何放到设计内？

往下继续 (Moving Forward)：有什么议题或主题是需要进一步探讨的？

做完 test 后，应该会知道有哪些地方需要做改善，选择能够代表用户痛点的 screens，并重新画能够针对这个痛点的 screens。如果想要让 sketch 能够有互动性，可以去用 Marvel app，是免费的，能够快速利用草图做出原型。

信息架构 Information Architecture 

进到这个进度后，了解要如何引导使用者使用或如何呈现资讯、内容与功能，就是信息架构，让使用者知道如何做可以达到他想要的目标。

而信息架构的主要呈现方式不是线框图或原型，而是透过 spreadsheet 或 diagram，可以看下面的范例图：

来源：Jesse Hampton

如果想要更好地理解信息架构，可以透过更仔细的去观察实体世界，举机场为例子：地图和标志非常的重要，因为能够帮助旅客快速的找到搭机地点或是领行李，但如果这两者很不清楚，则会让整个机场秩序大乱、旅客找不到地点、延迟上飞机、延迟飞行等。

Frog Design 的这个机场标志例子，我就觉得非常的清楚，见 Wayfinding and Signing Guidelines for Airport Terminals，在过去，人们总会以为跟方向有关的设计，最好就是把所有的路径都呈现出来；不过越是複杂的方向、路径问题，最好用越简单的方式呈现会更好。我举这个例子可能看似和 UX 没什么关系，但是它所呈现资讯的方式，却和 UX 的精神是不谋而合的，越好的设计，是越能够让人出于直觉来使用。

那在做信息架构的时候，有以下几个工具会用到：

1. User flow

2. Taxonomy，是人们展示如何分级、展示资讯的，下面这个是知名 Bloom 的 taxonomy，在教育界很有名，人类运用知识从记忆到创造的一个分级。

来源：Google Search

来源：Google Search

为何要做 sitemap 呢？

1、显示应该要如何建构网站或 app

2、理解应该要创造什么样子的内容和这些内容应该要被放在哪里

3、理清不同页面之间的关系

4、提供清楚的架构，让你知道从哪里开始和发展

5、实际得列出你之后会如何发展产品

知道 sitemap 如何作用和如何阅读后，那该如何画出 sitemap 咧？有两个方式：

Reverse engineer an existing product

如同字面上的意思，根据现有的 sitemap 去做改善，可以参照以下的步骤来练习：

1、设定 5分钟 时间

2、用手机去找一个网站

3、截图后，自己尝试的去画出目前的 sitemap

4、重新思考，哪里需要被改善

例如，这是我下载 BBC 的 app，自己尝试画出的 sitemap，简陋版本

Create one from scratch

这个方法需要用到一种叫做 card sorting 的方法：

卡片分类法 (Card Sorting) 是一种在规划网站时常用的测试方法，透过卡片分类法可以让我们了解一些在设计架构时十分有用的使用者资讯，找出网站的结构，类别命名等等设计问题。

卡片分类法 Card Sorting

Card sorting 有两种方式：open sort 和 closed sort。

在 open sort 的的过程中，参与者会在卡片上创造分类，例如: About, Countries etc.，透过让参与者自己创造类别(给参与者便利贴和麦克笔自己写)，也可以知道他们是如何在心里建构、命名这些类别、给予标签等，进而找出大家都习惯使用的命名和分类轮廓，这是一个比较通用的方式，对于后续产生点子和组织内容有很大的帮助。蛮推荐以下的影片，会更清楚这个概念是什么。

那第二种的就是 closed sort，就和上面相反，把事先都写好类别的卡片让测试者来分类，能够判断这些事先写好的类别，够不够测试者来进行归类。在做测试时，最好写好的卡片和便利贴都备妥着给测试者，以防真的有需要创造新类别。可以利用 Optimalsort 来做线上的 card sorting，下面是我自己练习的例子。

提示 Tips

1. 确保这些卡片的内容有足够的关联性能够被分组

2. 一张卡片上只能写一个内容，并确保描述要短小，能够一眼扫过去就知道是什么

3. 在整个过程中，我的主要工作就是保持安静和观察，不引导参与者做分组

4. 过程中边做笔记，任何有趣或是发现都不放过

有三个在做 card sorting 可能会犯的错误：

1.太多类别了，在英文上面专业的词叫做 cognitive load，就是太多卡片、卡片字太长都会让测试者很 有压力，导致产生负面情绪。

2.不管是再可爱、有趣的标签，都有可能被视为不清楚，务必以简洁为要。

3.使用行话，跟公司内部使用久的语言，或是产业的语言，可能会根本就让测试者听不懂，应以测试者可以理解的内容。

对于 card sorting 做法和概念有大致的了解后，真正的用处在于：

1.用于验证之前的信息架构

2.若目前没有任何架构，则可以用 open sort 去找灵感之后便可以用结果来画出 sitemap

原文地址：https://www.facebook.com/profile.php?id=100000264889313

作者：翁易安

本文编辑：Linmas

声明：本文由设计夹Linmas编辑校对发布，如需转载，请申请授权并保留译者全部信息，转载合作请添加微信：sezign01.更多精彩内容请关注设计夹。