• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用Zara的优化案例,教你学会把「设计思维」运用到实战过程中!

用Zara的优化案例,教你学会把「设计思维」运用到实战过程中!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Zara,经验分享,设计实战,设计思维等相关知识,希望在学习及工作中可以帮助到您

没看错,就是你们熟悉的那个服装品牌 Zara,这篇文章作者 William Ng 运用了「设计思维 」的模式,分析了 Zara 手机应用的可用性,并提出了改进建议。算是对设计思维的具体案例运用。

Zara 是我最爱的服装品牌之一。但每次使用他们的软件,我都感觉有各种问题。所以我做了一个 Zara 的可用性测试与分析,来看看是不是别的用户也和我一样有同样的烦恼。结果我发现了许多用户痛点,并提出了一些提升用户体验的方案。

共情

用户画像

第一步,我对 Zara 的用户进行了在线调查。然后我创建了一组预估的用户画像,并包含了假设的最大一组用户群:20 – 30 岁左右的中产收入工作者。

△ ?工作故事

除了用户画像以外,我也花了一些时间了解用户使用应用的场景,从而更深入探究他们的动机和期待的结果。

可用性测试

对用户有了一点了解之后,我去商场找了一个逛街的人进行可用性突击测试。我在给用户做测试之前,保证了用户至少是频繁的在线购物消费者。最终,我测试了七个用户。

每个用户都被问到想象自己在一个场景里面,进行以下任务:

  • 最近天气很冷,你在给自己找一件冬大衣,你会怎么做?
  • 你看到了一件你可能会喜欢的大衣,可以跟我重现一下你会怎么决定这是不是你要的那件大衣?
  • 你把大衣放进了购物车,但发现尺码错了,你会怎么做?

定义和分析

亲和图

我浏览了所有测试,并仔细地把每个用户遇到的问题和抱怨都列了出来。接下来,我通过分类把这些痛点进行了分类和归组。

2 * 2 分析

为了排定这些信息的优先级,我创建了一个 2*2 的图表,以对商业重要性作为 X 轴,对用户的重要性作为 Y 轴来排列这些信息。假设最重要的商业模板是增加应用的收入,那么在购物车里编辑条目就成为了对商业和用户都是最重要的一点。所以这也成为我重新设计的着眼点。

定义问题

我仔细分析了用户与购物车有关的行为和模式,以便找到更好的解决方案。

当他们试图在购物车里编辑商品的时候:

  • 只有 1/7 的人没有遇到问题
  • 7人中 6 人都点了该商品条目,但只跳出来一个图片
  • 7 人中 4 人选择了向左滑动商品,却没有出现预期的编辑选项
  • 7 人中 2 人不小心删除了他们的商品

其他问题:

  • 不能在购物车里直接编辑商品的颜色和尺寸,也就是说用户必须再浏览一遍商品来修改商品信息
  • 在购物车里用户只能看到商品的单张图片

方案和改造

低保真手绘

在研究了用户的购物车使用过程中遇到的问题之后,我列出了一些针对痛点的潜在解决方案,并使用手绘的低保真原型来表达。

△ ?高保真原型

在把低保真手绘转为高保真原型之前,我让一些在线购物用户走了一遍我的流程来验证想法,并收到了一些建设性意见,我把这些意见融入了最终的设计里。

以下是我的一些建议:

新的编辑按钮替换了旧的「之后再买 」; 但这是个有意的选择. 最开始,当用户想把一个商品保存以供以后查看的时候, 他们只能先把商品放进购物车.所以我会在浏览页面加一个「收藏 」功能,这样用户想收藏的时候不用先把商品放进购物车。

在购物车页面添加了垂直的图片组,这样用户可以查看商品的多张图片。在最开始的用户测试中,用户倾向于水平滑动去浏览更多的商品图片。所以,我增加了更多的元素来引导用户进行正确的操作。

原型

想像一下你已经把商品选好放进了购物车,这时候才发现需要修改尺寸……

试试我做的原型吧。

验证

我把自己设计的原型拿给七个用户进行测试,目标也是让他们在购物车里进行商品尺寸和数量的修改。所有用户都顺利地完成了任务。

作为重新设计的结果,用户在购物车里修改商品信息的成功率提升了 30%。

总结

通过用户可用性的突击测试,我了解到用户对于修改已放入购物车的商品信息存在很大困难。另外,一般的购物应用都会有的功能(比如查看商品更多图片或是修改商品尺寸)在 Zara 应用内缺失。我的设计让用户可以在结账的时候更加方便地修改信息。增强用户体验意味着减少用户摩擦,也就意味着带来销量上的提升。

感谢阅读!

欢迎关注译者的个人专栏:盒子以外,产品设计和科技的深度学习。

「用一个案例教你学东西系列」

  1. 智能对象丨《用一个实战教程,让你学会智能对象》
  2. 直方图丨《用一个后期教程,帮你学会利用直方图破解图像的方法》
  3. 图层样式丨《做一个实战教程,让你学会图层样式9大技能》
  4. 设计流程丨《用一个实战案例,帮你认识完整的设计流程》
  5. 总监思考方式丨《用一个简单的体重记录功能,揭秘UI设计总监的思考过程》
  6. 交互思考方式《用一个文本框,让你学到交互设计师的逻辑思考方法》
  7. 交互面试题丨《用一个框架,帮你学会这个最常见的交互面试题》
  8. 数据验证交互丨《用一个实战案例,帮你学会用数据验证产品设计》
  9. 复杂界面设计丨《用一个实战案例,教你学会复杂界面的布局设计》
  10. 视觉改版方法丨《用一个实战案例,教你学会视觉改版的方法》
  11. 用户体验研究丨《用一个实战案例,带你从零开始做用户体验研究》
  12. 设计冲刺法丨《用一个实战案例,帮你快速学会现在最火的设计冲刺法!》
  13. 交互思考方式丨《用一个实战案例,带你学习交互设计师的思考方式》
  14. 重设计思路丨《用一个实战案例,帮你学会讲述重设计作品的思路》

原文地址:Zara

设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 用Zara的优化案例,教你学会把「设计思维」运用到实战过程中!

相关文章

  • 2018-08-23互联网产品设计中,如何制作一套设计规范?
  • 2018-08-23紧跟趋势!聊聊C4D 在电商设计中的实战运用
  • 2018-11-02解决checkbox复选框选中传值,不选中不传值的方案
  • 2018-08-23将视频融入网页设计有哪些讲究?
  • 2017-08-06书写CSS的5个小技巧让你的样式更规范
  • 2018-08-23超实用!四招快速提升字体设计能力
  • 2018-08-23超全面!设计师必须了解的美术基础
  • 2018-08-23做PPT 超过1000个小时后,总结的实用进阶指南
  • 2017-08-06我的css框架——base.css(重设浏览器默认样式)
  • 2017-08-0650个漂亮的FLASH网站设计实例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 我们请了9个顶尖设计师,询问他们是如何开始创作的
    • Medium 设计师姜羽扬:设计小白的光速成长之路
    • 接地气!设计师和需求方高效沟通的5种技巧
    • 超全面!聊聊交互设计背后的心理学原理
    • 想要搞定网页首图设计,这7个技巧帮你做得更好
    • 那些很熟悉但又叫不出名字的设计法则:恐惧留白
    • css样式的优先级究竟庞杂到什么程度
    • 对于这5个UX设计迷思,你需要知道它们的答案
    • 系列三部曲!中国式草根设计师的自我提升(完结篇)
    • 你要的三八节文案来了

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有