UI/UX 设计案例分享：如何让行人在夜间返家更安全

看我们在 Hack4Impact 如何够过系统化的“介面 UI 设计”、“用户体验 UX 设计”与“用户研究”，打造一个人性化的应用程式，帮助用户决定选择行走哪条道路最安全。

在幅员广大的美国校园，行走回家难免需要路经阴暗的街角。在夜间走在这些道路上，常常令人感到可怕。事实上，美国国家犯罪受害调查报告显示，63.2% 的性侵害案件都是在入夜后发生的，而且大多时候，受害者都是独自一人。

挑战 Challenge：让我们来解决这个问题

我于美国参与的非营利组织 Hack4Impact 的团队看见了这个问题，并想试试着改善它。我们希望学生走路回家不应该担心被侵害；我们想要降低针对“独自一人”的行人下手的罪行。我们的做法是希望能提供行人一些关于他们身边环境的有益资讯，以便让他们在选择行走哪条道路时，能做出更明智的决定，选择最安全的道路。借此，让他们能更安心的于夜间在户外行走。

我的角色

在这个专案上，我的角色是 UI/UX 设计工程师。事实上，我是伊利诺伊大学 Hack4Impact 团队史上的第一位用户体验设计工程师呢！在这个专案上，我负责的是产品的“用户体验设计（User Experience Design）”与“用户研究（User Research）”。我们团队有 8 个人：一位团队领导、一位技术领导、四位开发者、与两位设计师：分别为我（用户体验设计领导）和 Annie Wu。在一学期间，我们密切的合作，最终建立了一个以人为本、以用户为设计中心（User-Centered），并具高保真度（High-Fidelity）的展示原型（Prototype），提交给客户。

我们的团队成员

痛点 Pain Points：认识问题是什么

目前，网路上是有提供一些资料可以让人更明智决定选择行走哪条道路，例如过去案件地点或紧急公用电话的位置。但是，当人们想要使用这些资料来选择行走路径时，会遇到不少问题：

• 这些资料都存放在一些电脑版网页或 PDF 档案上，很不适合用手机浏览
• 目前没有一个将各种资讯整合的页面，因为各机关皆有自己的网站
• 网站上的资料可能是以文字方式呈现，用户需要自行将资料转换到地图上，才能找出确切位置，颇不方便
• 刚入学的新生不知道于何处存取这些资料

“资料都在，但太分散了，很难友善利用。”

需求调查 User Needs：了解他们想要什么

我们团队在专案的早期计划阶段时，即一致下定了几个本专案的目标。这些目标很重要，因为它们很可能可以有效解决上述的痛点。我们希望我们的解决方案：

• 可以整合各种现有的资料，并提供用户一个中央平台存取这些资料
• 必须以手机程式（app）的方式呈现，这样用户到哪都可以存取资料
• 用户必须要可以很快找到他想看到的信息
• 这些资料要有效地被呈现，让用户能很容易理解它们，不用额外学习东西
• 介面的设计必须直觉、简单，因为这个程式可能会在紧急情况下被使用
• 介面的设计必须适合让这个程式在夜间被使用
• 任何用户，不论成长背景，都应该能感觉介面的设计和他们已熟悉使用的程式没有太大的差别

设计过程 Design Process：从打稿到交件

用户研究

用户研究（User Research）是我们开发过程中不可或缺的一部分，因为我们的客户是一个非盈利机构 Cut to The Case，而他们的愿景是希望这个程式能以“用户”为中心做设计。在专案初期，团队还在思考设计概念时，我们即采访了大学当局，以更好地了解目前校园的安全状况。借此，我们获取了一些很重要的资料，例如校园免费安全接送巴士 SafeRides 与随行服务 SafeWalks 的用户族群统计资料。

“天黑后，大多的乘客皆是国际学生，从图书馆进行接驳。但是到了午夜后，大多乘客则是从酒吧来往的学生。”

SafeWalks 服务免费提供随行人员陪伴学生在校园行走安全的路线。（U of I Police）

线框图

根据大学提供的数据和我们的调查，我大致勾勒出了我们的第一个“低保真度”的线框图。

在线框图（Wireframe）上，我们选择设计一个地图介面，作为这个程式主要的介面，让用户可以直接在上面取得各式对他们有帮助的资料。这些资料的来源会直接从上述的各个不同网站取得。我们花了好一段时间才决定该如何展现“选择要显示的资料类型”这个选单（例如：显示“过去案件地点”但不显示“紧急电话”等等）。最终，我们决定用用户能上滑显示、下滑隐藏的“卡片”的形式呈现，因为：

• 根据一项调查大多人使用手机的手势的研究显示，卡片式的介面比起其他选项，例如三横杠的“汉堡”式选单，来说，对用户更方便。由于我们希望用户能在最短时间内取的他们要的资讯，这个很重要
• 卡片式的介面的设计和大多人已经习惯使用的程式有类似的设计，例如 Google 与 Apple 地图皆采用这种设计。借此我们可以确定新用户不会对我们的介面感到太陌生

研究显示手机上大拇指自然的操作区域。绿色代表自然，橙色代表需要拉伸，红色代表困难。

线框图提供了我们团队一个大致的设计参考，让他们更好进入开发阶段。同时间，我和另一位设计师也开始了针对线框图的“用户访谈（User Interview）”与“可用性测试（Usability Test）”。

用户访谈 与 可用性测试

我们参考了用户访谈（User Interview）与可用性测试（Usability Tests）的结果来改进现有的设计。

“想像一下，夜黑了，而你必须自己走回家。你身旁没有人，而且附近一片漆黑。你会怎么做来让自己感觉到更安全？”

这是我们在针对线框图的用户访谈中，询问被访者的第一个问题。在他们回答问题后，我们简单介绍了一下程式的大致概念，并询问他们是否有会有兴趣下载，和是否有对我们想法的建议。最后，我们进行了可用性测试；我们让被访者实际与互动式的线框图原型做互动，并观察他们的操作行为。

“如果路上有其他大学生的话，我会即使走在比较危险的区域，也会感觉安心很多。”

进行访谈时，由于考虑到来自不同背景的用户可能会习惯不同的设计，我们会尽量寻找不同族群的用户进行访谈。我们希望这个程式能让所有用户都感到熟悉与亲切，不要和他们已经习惯使用的程式在设计上有太大的差异。我们访谈了一位大一女生、一位大一男生、一位大三学生与一位国际学生，而每一位在可用性测试时皆能顺畅的操控互动线框图原型，几乎不需要我们辅助，可说有达到我们的标准！访谈时用户推荐的一些所需功能有（1）加入公车资讯和（2）加入紧急要拨打电话的按钮。

视觉槁 0

视觉槁 0 是我在芝加哥参加会议期间，短时间内建立的。它以更多细节呈现了线框图上最重要的页面，以便让开发者能更轻易的了解程式看起来该是怎么样。

视觉搞（Mockup）0 是由线框图演进而来的，演进期间我们讨论了该如何呈现地图页面上单一图标背后的详细信息；意指，当用户点击了地图上的图标后，显示详细信息的介面该怎么被呈现？我们做了个艰难的决定：同上述“资料类型”选单使用卡片式介面。我们考虑了很久，因为怕用户会对多张卡片感到困惑。但是，如果荧幕上永远只有一张卡片，则会非常直觉。用户看到不是“资料类型”选单卡，就是“详细信息”卡，后者若要显示，则会覆盖前者（可透过“x”关闭）。两者不会同时出现。

视觉槁 1

视觉槁 1 经过精心设计，其包括了线框图上所有可见的细节。

这个视觉搞容纳了所有在线框图可见的页面。我们使用深色图片作为欢迎页面的背景，因为设想到大多数人会在晚上使用本程式，不希望因为显示过亮的页面而让用户感到不适。

视觉槁 2

视觉槁 2 增加了用户在访谈中推荐的一些功能。

在这个视觉槁中，我们加入了一些用户在访谈中推荐的功能，其一即是拨打电话的捷径。要在这个原本只有一个功能的程式中加入新的功能，我们必然需要做一些大幅度的改变。一开始，我们是希望在页面左上方加入“汉堡”式的选单，让用户可以开启选单，选择电话捷径功能并拨打。但是，这样的设计不符合 iOS 系统（我们当时优先考量的系统）的 Human Interface 设计规章，而且这设计并不符合大多人使用手机的手势。

我们最终决定在页面底部加了一个选单标签，供用用户切换卡片的选项。这样的设计能提供最直观的操作流程，同稍早阐述的原因：由于画面上只会显示一张卡片，用户要不是在“资料类型”选单卡或“详细信息”卡，就是在“电话捷径”卡，三选一。这样，用户较不会因为画面资讯过多而被混淆。

同时，我们还更改了“详细信息”卡上资料被显示的先后顺序，因为我们希望用户能最优先看到对他们更重要的信息。 例如：我们在访谈中了解到，用户大多认为“确切案件地址”比“案件类型”更重要，因为用户通常都会选择避免所有类型的案件。

“我喜欢你们把『详细信息』卡上的资讯归纳的这么干净，让我一目了然！不过，如果能加入该案件『是否有涉及学生或教职员』的信息更好。”

视觉槁 3

视觉槁 3 在整体视觉上做了一些改变。

我们把卡片的背景改成非半透明的，这样用户能更清楚的区分画面上的卡片区域与地图区域。我们同时还择使用紫色作为程式的主要颜色，因为研究证实它可以平息心灵；可能有助于处于紧张心境的用户。

视觉槁 4

视觉槁 4 重新设计了新用户会看到的欢迎页面。

在先前多次可用性测试中，我们发现有些用户，尤其是国际学生，会直接跳过所有的欢迎页面，不阅读页面上的文字。他们说这些页面上的字太多了，而且以非母语呈现，并没有吸引力让他们停下来阅读。 为解决这个问题，我们重新设计了这几个欢迎页面，并将它们整合成单一一个介绍页面，并仅显示最重要的信息。我们还大幅减少了文字量，并添加了更多视觉元素及动画，以吸引用户留下观看。

另外，我们在主要页面上的各卡片上加入了标题文字，以帮助用户区分它们。

解决方案 Solution：最终设计成品

互动式原型

经过多次的设计改良、用户访谈和可用性测试后，我们使用 Sketch 设计程式建立了一个最终的、具高保真度的可互动原型（Interactive Prototype）。

在 Sketch 软体中可见我们程式（原型）的使用流程。

这图片显示了我们程式原型的关键导航流程；另外，我们也制作了视频版。在用户第一次打开程式时会看到介绍页面，可以在那里了解程式的主要功能。点了继续后，会到主地图页面，用户可以看到自己现在目前的位置，并透过图雕资讯了解他们身边周围的情况。还影更多功能在视频中您也可以看到。

完结 Outcome：缴件给客户

我们设计的高保真原型成功解决了本文所述的“痛点”和“用户需求”。我们的解决方案（程式）让任何能都可以随时随地查看他们周边的相关资讯，借此近一步保护自身安全。而且，这个程式提供一个直观的用户体验，让人们即使在紧急情况下亦能顺利找到正确的资料与信息。透过这个程式，我们让在伊利诺伊大学的学生们在夜间更安全了！

我们的成品得到了非盈利机构客户 Cut to The Case 非常正面的赞誉，他们非常喜欢我们的设计！我们的成品也在 Hack4Impact 年终发表会上获得其他团队的爱戴。“以人为本”的设计原则，成功的提供了直观的用户体验，让所有用户皆感到亲切，尤其是那些处于紧急情况，并需要快速找到相关资料与信息的用户。此外，本设计是可扩展（Scalable）的，只需要一点改良，即可应用于大多其他地区。希望我们透过谨慎的设计与研究所开发出的解决方案，行人在夜间返家能更安全！

本文由郭力铭撰写与翻译。在 LinkedIn 或我的网站上可以找到我。
英文原文：UI/UX Case Study: Helping people feel safe walking at night at U of Illinois