交互设计案例研究：高端的电子商务原来是这样设米乐M6 米乐计出来的？
提起电商，除了众人皆知的淘宝、京东，国外也有许多成功的设计。在今天的案例研究中，我们将一起学习设计法国高端时尚电子商店的交互设计案例。
2017年初，法国Societe generale聘请我们设计他们新的电子商务商店，用户可以在那里浏览和购买选定的当代设计师品牌的产品。
作为产品设计过程的第一阶段，我们对目标受众的人们进行了几次采访，并确定了本次设计项目的三个主要角色。
Bianca：热爱时尚，希望在人群中脱颖而出。作为一个年轻人，她会省钱购买名牌服装和配饰。
Lara：她的工资高于平均水平。作为单身女性，她想用独特的衣服来表达自己的个性，并负担得起设计师设计的商品。她始终在线，在旅途中使用她的手机上网。
Eva：她是一个成熟的女人，有自己的风格，但并不总是知道穿什么。从专业人士那里获得帮助是她购物经验的一部分，因此她更喜欢实体店。
在这样的电子商务的设计中，用户体验研究必须关注用户在准备、购买和购买后所经历的旅程。基于我们对角色的了解，我们创建了用户旅程，来映射他们的假设体验。
在整理了探索阶段的所有见解之后，我们开始设计网上商店。我们使用的主要工具是纸草图，交互式原型和用户测试。
在验证了主要概念之后，我使用Axure RP创建了一个交互式原型 （该原型非常好用）。我们在多次迭代中改进了原型，用户测试产生了很多信息，包括有关如何解决用户问题的宝贵见解。
为了验证我们的假设，我们进行了几次用户测试，在此期间，使用各种技术收集了用户的意见和建议。
下面我将介绍一些在本次设计中遇到的最有趣的问题，并说明是如何解决它们的。
问题：我们必须特别注意主页，因为它是用户首先看到的，也是触点中最重要的一个。我们必须找出他们想在那里看到什么，并考虑电子商务用户体验设置中最重要的元素。由于我们的时间很紧，我们必须找到一种UX研究方法来快速创建和测试迭代。
解：在开始原型的主页工作之前，我们进行了一个快速的卡片分类测试，以发现用户登陆电子商务网站的心理模型。我们创建了一些可能的主页元素卡片，并要求人们按照对他们最有意义的顺序进行分组和组织（同时也允许他们创建新的卡片）。
根据用户的采访和卡片分类结果，我想到了主页概念。我利用Google文档，并用文字设计了页面，基本上回答了这样一个问题:“你如何告诉朋友这个页面的地址?”然后，我们进行快速迭代——我们可以很容易地修改副本并更改文本块的顺序，从而使迭代非常快。我们还尝试了一种新的方法，即故事框架。
问题：对价格敏感的角色Bianca 想知道她是否可以获得商品折扣。她不想深入研究：她需要一些显而易见的东西。她表示“我总是先检查是否有折扣。”
解：我们决定重点介绍可为时事订阅者提供的折扣。大多数电子商务网站只是简单地把一个巨大的订阅弹出窗口直接扔到客户的面前。他们认为这能起作用，但事实并非如此。我们发现，人们想要摆脱任何弹出窗口阻挡他们的方式，因为他们认为他们是广告。所以，我做了一点调整，设计了一个稍微不同的模式窗口，它不会出现在中间，而是从屏幕的右下角(在桌面上)向上滑动。
人们会注意到动画向上滑动，但并没有立即关闭动画的冲动。最重要的是，这并没有打扰他们的体验。
解：我们想直接从列表/类别页面显示项目的所有图片。我们在原型中实现了快速查看解决方案，该解决方案是一个简单的轮播系统，可用于检查商品的所有照片，用户很喜欢这个设计。
问题：因为我们当时没有拍产品的照片，所以我们可以做一些关于人们想要什么的研究。我们对一些用户进行了偏好测试，向他们展示不同的衣服照片(在工作室拍摄/在室外自然光下拍摄，单独拍摄/在模特身上拍摄等)，并询问他们喜欢什么以及为什么。
- 身穿该物品的身高/头发颜色不同的模特的照片（人们更容易想象如果有类似的人穿着该物品，它们看起来如何）
问题：所有用户都对线选择尺寸很焦虑，他们都会担心该物品不合适。他们抱怨说，通常在网站上看到的都是标准尺寸(比如小号或中号)，却没有给出实际尺寸的任何信息。
解：我们想要创建一个精确的、易于使用的尺寸指南，所以我们设计了一个比较不同标准(包括英寸和厘米的测量)的指南。
我们还设计了界面，让用户可以看到每个模特的身高和衣服的尺寸，就在照片的正下方(当不止一个模特的照片时，这一点尤其重要)。
问题：我们的第三角色Eva表示，有时她发现很难为自己选择合适的产品，她想要个性化的时尚建议。
解：为了使人们对自己的选择更有信心，我们在商品说明下方添加了“与这些商品搭配”部分，以便他们看到与该产品搭配得很好的其他商品。我们试图使有关实体店的信息（联系信息，地图上的位置，营业时间等）更易于访问，鼓励人们在需要进一步帮助时进行访问。
问题：所有用户都会在在线结账过程中变得紧张，他们害怕技术问题或安全问题。
这个电子商务UX解决方案结合了单页和多页结帐方法的优点:所有信息都适合在一个页面上(客户可以看到所有步骤)，但是只打开活动部分，因此他们可以一次只关注一个步骤(消除干扰因素)。用户发现这个解决方案很有帮助，因为他们可以看到自己在流程中的位置，并且可以轻松地回到前面的步骤。
问米乐M6 米乐题：客户希望我们创建自动电子邮件模板（成功的订单，发货，忘记密码等）。
解：对我而言，客户旅程不会在结帐流程结束时停止。这些电子邮件包含电商UX的非常重要的部分。对产品的控制越多，获得良好用户体验的机会就越大。
我们找到了解决问题的方法后，就开始设计最终的用户界面，我们采用了移动优先的方式。首先为小屏幕设计页面(专注于真正重要的功能和简单的解决方案)通常比较容易，然后我们也可以为大屏幕设计页面。此外，我们的大多数目标受众主要消费移动设备上的内容。在创建用户界面的过程中，我特别注意品牌的特点(女性化、成熟、高端、简约、乐于助人)和人物角色的需求(精致、独特、多余)。我喜欢创建这些页面，尤其是针对移动设备，因为我发现它更有挑战性(主要是因为屏幕较小)——下面是一些最终页面：
我真的很高兴有机会与这些了不起的人一起在SociétéStore工作！我从时装业和电子商务UX中学到了很多东西。
研究是关键 -如果没有真正使用它的人的帮助，我们就不可能设计出用户喜欢的产品——这可能听起来有点陈词滥调，但在好的用户体验中，这始终是正确的。
敢于尝试 -在一个真实的项目中这样做听起来可能很吓人，但幸运总是眷顾勇敢的人!例如，故事框架本身就是一种非常令人兴奋和有用的研究方法，但我们必须在实际情况中进行尝试。
小事情可以产生巨大的不同 -改变时事通讯订阅弹出窗口的位置或添加一个“安全的结帐”标签似乎不是什么大的创新，但它们可以让用户的挫折感消失。如果不确定，A/B测试可以帮助决定这些问题。
不要以貌取人-编写所有电子邮件模板听起来很吓人，但这成为设计复杂服务的非常令人兴奋且重要的部分，这可以带来更好的用户体验。米乐 M6米乐
扫一扫关注微信公众帐号
