案例研究｜ZARA 官网的用户体验设计
▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们
本文共 5118 字，预计阅读 13 分钟
TCC 情报局的 第 214 篇 干货分享
2023 年的 第 43 篇
TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。这篇文章介绍了作者参加 UI/UX 设计训练营的经历，以及他们为全球最大的时装零售网站之一 ZARA进行用户界面和用户体验设计的过程。本文详细介绍了设计过程，包括研究目标、研究问题、设计思维的各个阶段和设计风格指南等，最后作者分享了他们的测试结果以及收获。
1. 介绍
1. Introduction
大家好！我叫 Anisya Firdha Khairani，是一名本科生，目前是一名 UI/UX 学生。在过去的三个月里，我参加了 Eduwork.id 举办的 UI/UX 设计训练营。这是我的第一个个人作品集，内容是关于最大的零售网站之 一 ZARA。
2. 概述
2. Overview
ZARA 是 Inditex 集团旗下最大的时装公司之一，业务包括设计、生产、分销，并通过其在多个国家的庞大零售网络进行销售。该公司由 Amancio Ortega 和 Rosalía Mera 于 1975 年在西班牙北部加利西亚市中心创立，是一家家族企业。该时尚集团还拥有其他品牌，包括 Pull&Bear、Massimo Dutti、Bershka、Stradivarius、Oysho、Zara Home 和 Uterqüe。
3. 背景
3. Backgrund
ZARA网站的外观以“极简”和“唯美”著称。但仍然有很多顾客认为，这个界面让他们在购物或只是随便看看时感到不方便。
就像digitalmarketing.template.edu 的一篇文章一样，他们提到：
Zara网站最大的问题是，很多图片太大，文字太小，以至于不得不眯着眼睛看。
通过研究其中的一些重大问题，我决定选择 ZARA 网站作为本次用户界面和用户体验设计的对象。此任务旨在找出可用性问题，改善网站的用户体验和用户界面。
角色：UI/UX 设计师
范围：初级/次级研究、设计思维、用户流程、线框图和设计风格指南
时间线：大约 2 个月
工具：Figma、Figjam for Brainstorming、Google Form、Zoom
4. 设计过程
4. Design Process
UI/UX 的设计过程涉及一系列步骤，这些步骤的目标是创造一个以用户为中心、视觉效果吸引人的数字产品。以下是我的设计步骤：
1)方法
这个过程中使用的方法是使用设计思维方法，将初级研究和次级研究相结合。
2)研究目标
研究目标围绕了解目标用户的需求、行为和偏好，以创造有效且令人满意的数字体验。这些是我的研究目标：
了解用户在使用ZARA网站购物时遇到的问题。
了解用户为何关注 ZARA 网站的外观。
了解用户在结账时面临的限制或问题。
3)研究问题
在作业开始之前，将向受访者询问一些一般性问题。这是问题：
您通常在哪个平台购物（应用程序/网络）？
您通过网站购物的频率是多少？
您熟悉 ZARA 网站吗？
您在 ZARA 网站上购物过吗？
您喜欢和不喜欢 ZARA 网站的哪些功能？
这些功能是否方便您购物？
您对在 ZARA 网站购物感到满意吗？
4)设计思维
设计思维是一种以人为本的解决问题的方法，用于创造创新且有效的解决方案。这是一个专注于了解用户需求和视角、发现潜在问题、探索和测试不同解决方案的过程。
图片来自谷歌
当涉及到 UI/UX 设计时，它可以帮助设计师创建直观、吸引人且用户友好的产品。UI/UX 设计中的设计思维涉及以下阶段：
强调
设计思维的第一阶段是和用户产生共鸣。其中包括了解用户的需求、目标、和痛点。这些信息可以通过用户研究、调研、采访和观察来获取。在这项研究中，我通过使用ZOOM和谷歌表单来收集采访者的数据。
a.二次研究
UI/UX 中的二次研究是指收集和分析先前由其他来源收集到的现有数据和信息的过程。这些还包括发表文章、学术研究、行业报告、用户反馈和竞品分析。
通过查看文章评论、案例研究等，我发现了ZARA网站上经常突出的几个问题，比如不人性化（字体）、交易过程中点击过多、搜索按钮太小等。
b.痛点
痛点是指用户界面或用户体验中导致用户沮丧、困惑或困难的方面。
从已获得的数据中，我收集了每个用户的一些痛点。
定义
下一步是定义问题。这包括制定问题陈述、设定目标和确定项目范围。在此阶段，我将进行用户访谈、调查和可用性测试，以收集见解和反馈。同时分析用户数据和行为，找出模式和痛点。
a.用户角色
创造用户角色的目标是为了更好地了解产品或服务的用户。我还用它来指导我的设计决策，考虑角色将如何使用产品或服务，用户的特点和功能是什么，以及他们将如何与界面交互。
b.我们可以如何提问
我使用 “How Might We (HMW)” 问题来探索设计问题或挑战的可能性或潜在解决方案，并为用户找到最佳解决方案。
构思
在这一阶段，我创建低保真原型来测试想法和验证假设。这种改进还包括头脑风暴、草图绘制和创建粗糙原型。在设计原型之前，我还制作了解决方案构思、亲和图、优先级构思、信息架构、用户流程。
a.解决方案思路
解决方案的想法包括了解目标用户的需求和偏好，创建解决他们的痛点并提供无缝用户体验的设计。这些是我为用户制定的解决方案。
b.亲和图
亲和图是设计思维和用户体验中使用的一种工具，用于组织和分类想法、信息或数据。它让我能够看到全局并识别用户旅程中的任何机会或痛点。
c.优先顺序理念
优先级排序理念是一个重要方面，因为它有助于创建易于使用、直观且有效的界面。为了确定此步骤的设计元素的优先级，我使用了一个简单的优先级矩阵（高/低影响、高/低工作量）。
更多：https: //www.figma.com/file/1jwhpZFv1AYH3ZOjnK6V8K/IA-ZARA ?node-id=0%3A1&t=MOIoRIT1N0bvWvhG-1
d.信息架构
信息架构是以清晰和易于浏览的方式组织和构建数字内容的过程。这包括创建信息层次结构、定义标签和类别，以及设计导航和搜索系统。
我制作的信息架构可以帮助用户快速、轻松地找到所需的信息。
更多：https: //www.figma.com/file/1jwhpZFv1AYH3ZOjnK6V8K/IA-ZARA ?node-id=0%3A1&t=MOIoRIT1N0bvWvhG-1
e.用户流程
用户流程是指用户在数字产品或网站中实现特定目标或完成任务所采取的路径。它包括绘制用户从开始到结束的步骤图，并识别可能阻碍用户前进的任何潜在路障或障碍。
我为用户制作的用户流程，从创建账户到查看他们选择的项目。
更多：https: //www.figma.com/file/YYpvQ3ZM515ZEPaEPWXIrR/ZARA-Design-Process ?node-id=0%3A1&t=JGhta6LvQYf3KPIW-1
f. Crazy 8
Crazy 8 是用户界面和用户体验设计领域中的一种设计练习，用于快速产生创意和创新的设计想法。该练习通常需要 5-8 分钟，针对一个特定问题或功能勾勒出 8 种不同的设计思路。
我用疯狂 8 来实现各种不同的设计可能性。探索不同的方法来设计应用程序或网站的用户界面真的很有帮助。
免责声明：该设计只是一个灵感。未完全使用
线框
线框是网站、应用程序或软件界面的基本视觉呈现。我使用 "中保真设计"（Mid-Fidelity Design）来制作线框，因为与低保真设计相比，中保真设计通常会更详细地呈现产品的布局、结构和功能，但与高保真设计相比，中保真设计的细节和视觉润色较少。
更多：https://www.figma.com/file/rBU7IxuB1L2pKxN1saCObs/Anisya-Firdha-Khairani ?node-id=1%3A3&t=AlzO4Ic5f3p0Dyun-1
5)设计风格指南
设计风格指南是一套为设计元素（包括排版、配色方案、布局、图标和交互）提供方向和一致性的指南。
ZARA 本身的网站使用的是基本色，因此我制作了一个与原版差别不大的设计/风格指南。
更多: https://www.figma.com/file/rBU7IxuB1L2pKxN1saCObs/Anisya-Firdha-Khairani?node-id=147%3A2&t=AlzO4Ic5f3p0Dyun-1
ZARA 本身的网站使用的是基本色，因此我制作了一个与原版差别不大的设计/风格指南。
高保真设计
高保真设计是指创建具有高度细节、准确性和真实性的数字产品的过程。这一设计过程通常包括多轮反馈和修改，以完善设计，直至满足用户需求。不过，我的设计灵感还是来自 ZARA 网站本身，但我想让它更方便用户使用。
更多：https://www.figma.com/file/rBU7IxuB1L2pKxN1saCObs/Anisya-Firdha-Khairani ?node-id=1%3A4&t=F0ECi6FhOAqxA4zw-1
原型
原型是产品或应用程序的初步版本或模型，用于测试和完善其设计。原型可以使用各种方法和工具创建，例如纸笔草图、数字线框或交互式模型。有了原型，我就可以尝试不同的布局、功能和交互方式，从而找到满足用户需求的最佳解决方案。
测试
设计思维的最后一个阶段是测试。它指的是对网站、应用程序或其他数字产品的用户界面和用户体验进行评估，以找出可用性问题、用户痛点或其他需要改进的地方。
a.可用性测试
在设计原型和连接所有显示屏之后，就是与用户一起测试产品的时候了。我的目标是向用户评估新设计。这个过程通过 zoom 应用程序在线完成。用户必须在执行任务时共享屏幕。
b.任务分配
这些任务包括为用户创建交互式的直观数字体验。根据设计过程的不同阶段，任务也会有所不同。下面是我根据已创建的场景所做的一些任务：
5. 总结见解
5. Summary Insight
根据 UT 的结果，用户成功地完成了所有任务。在 1-5 分的评分标准中，所有任务都得到了 4 分（满分 5 分），这意味着它相当成功，符合用户的需求。
接下来我会通过google表单详细解释一下用户反馈：
任务 1 —桌面显示相当难以操作，尤其是在不使用鼠标的情况下。但总体来说，没有什么太大的困难。登录和注册页面上的信息也是明确的。
任务 2 —此任务中没有重大问题，问题与任务 1 中的问题完全相同。此页面上提供的信息也非常充足，因为一个关键字会显示相关项目。
任务 3 —无法单击服装尺寸。通常当我们点击尺码时，无论是在右侧还是左侧，或者在购物摘要下方都会有自己的显示。这将帮助用户避免购买错误的尺寸。
任务 4 —此页面上提供的信息足以满足用户的需求。如果地址已经自动保存，并且有保存付款方式的功能（电子钱包、Visa等）那就更好了，这样用户可以直接选择之前保存的付款方式，而无需填写信息反复。
任务 5 —此任务的执行没有问题。还提供审核订单所需的所有信息。
根据从用户那里获得的信息，可以得出结论，所有任务都没有明显的困难。每个页面上提供的所有信息都很清晰、翔实。用户在执行这项任务时遇到的限制只是设备错误，因为有几个原型无法在他们的设备上运行。
尽管这一比例已达到 80%，但如果能在改进时考虑到用户的各种意见，使该网站的效率和易用性仍能得到提高，那就更好了。
6.我学到的是
6. What I Learned
在这个组合过程中，我学到的一件事是用户的观点，例如如何为他们找到一个好的解决方案，使他们使用产品的体验变得更加高效和愉快。
我意识到这个案例研究还有很多需要改进的地方，所以我非常感谢所有花时间阅读这篇文章的人提出的建设性批评和建议。
先感谢您！
原文：https://medium.com/@ansyfkh/ui-ux-portofolio-zara-website-dd7a783470e6
作者：Anisya Firdha Khairani
译者：章欣怡
审核：李泽慧
编辑：韩硕
本文翻译已获得作者的正式授权（授权截图如下）
十个技巧帮助你设计一款在线学习 APP
这些色彩心理学知识教你如何传递信息
案例研究｜康奈尔大学副业社区网站设计
网页设计师能从日式美学中学到什么？
案例研究｜一款为你带来难忘体验的美食 APP
如何制作打动面试官的作品集，这里有一份完整的指导手册
如何做好用户体验项目？从一个好计划开始
如何建立设计系统
如何把握不同层级用户的需求：回归本质，打磨信息架构
TCC 视野｜2021 年用户体验设计趋势分析