可口可乐自由风格售卖亭界面用户体验的回顾和重新设计 #1758

ylq167 · 2017-06-11T06:54:54Z

#1699
git 可能有点问题 [捂脸]

horizon13th · 2017-06-11T10:59:47Z

申请校对 @sqrthree

linhe0x0 · 2017-06-12T03:03:23Z

@horizon13th 好哒~~

horizon13th

Further review needed.

horizon13th · 2017-06-12T14:00:10Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

 Later I conducted some quick users tests and asked the users to think aloud as they were getting their drink. I made notes of what I observed and user quotes, and analyzed this data to make sense of it. This later drove the redesign presented in this post.

+在我做了一些快速用户测试和询问了用户当他们想喝饮料时在想什么。我把观察到的和用户问券做了笔记，分析这些数据搞清楚他们的意思。这驱动了在这篇文章中提到的再设计。


在我做了一些快速用户测试和询问了用户当他们想喝饮料时在想什么。
在我做了一些快速用户测试，并询问了用户当他们想喝饮料时在想什么。

在我做了一些快速用户测试和询问了用户当他们想喝饮料时在想什么。
->
之后我做了一些快速用户测试，询问了当他们接饮料时在想什么。

horizon13th · 2017-06-13T01:43:09Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

 Later I conducted some quick users tests and asked the users to think aloud as they were getting their drink. I made notes of what I observed and user quotes, and analyzed this data to make sense of it. This later drove the redesign presented in this post.

+在我做了一些快速用户测试和询问了用户当他们想喝饮料时在想什么。我把观察到的和用户问券做了笔记，分析这些数据搞清楚他们的意思。这驱动了在这篇文章中提到的再设计。


我把观察到的和用户问券做了笔记，分析这些数据搞清楚他们的意思。
我把我的观察和用户访谈做了笔记，并分析数据以搞清楚他们的意义。

horizon13th

@sqrthree @ylq167 校对完成

horizon13th · 2017-06-13T12:06:39Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 I visited popular restaurants around my area where the machine is located. The main objective here was to understand the audience, environment, and contexts. I also found out about rush hours by speaking to the staff of the place.
+我参观了我所在区域附近有这个机器的参观。主要目的是理解用户，环境和设备场景。通过和当地工作人员交流我也发现了（设备使用的）高峰时段。


我参观了我所在区域附近有这个机器的参观。
我去了我所在区域附近有该机器的几家大众餐馆。

设备场景 -> 使用场景

horizon13th · 2017-06-13T12:13:21Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - The Kiosk is placed mainly in Restaurants and places of leisure such as movie theaters.
 - These places are rushed on weekends, holidays and certain times during the day.
 - There is usually a queue during rush hours.

+- 在餐馆，Kiosk 位于主要位置，而在电影院这类地方，它却在角落里。


在餐馆，Kiosk 位于主要位置，而在电影院这类地方，它却在角落里。
售卖机主要被放置在餐馆里，还有电影院等休闲场所。

（个人认为这里翻译不太准确噢，没有提到位置，也没有提到角落）
（还有一个问题是前文主要用“售卖机”来表示，这里用“kiosk”会不会比较突兀呢？建议全文统一使用）

horizon13th · 2017-06-13T12:16:04Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - The Kiosk is placed mainly in Restaurants and places of leisure such as movie theaters.
 - These places are rushed on weekends, holidays and certain times during the day.
 - There is usually a queue during rush hours.

+- 在餐馆，Kiosk 位于主要位置，而在电影院这类地方，它却在角落里。
+- 周末，假期以及平时固定时间会是高峰期。


周末，假期以及平时固定时间会是高峰期。
这些场所在周末，假期，以及工作日的特定时间会是高峰期。

horizon13th · 2017-06-13T12:18:15Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - Age group: teens and above (excluding those unable to reach or operate the screen)
 - People with different calorie and caffeine preferences.

+- 年龄段：青少年及以下（除了够不着操作不了屏幕的那些）


年龄段：青少年及以下（除了够不着操作不了屏幕的那些）
年龄段：青少年及以上（够不着屏幕，不能操作屏幕的群体除外）

horizon13th · 2017-06-13T12:19:25Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - Age group: teens and above (excluding those unable to reach or operate the screen)
 - People with different calorie and caffeine preferences.

+- 年龄段：青少年及以下（除了够不着操作不了屏幕的那些）
+- 偏爱热量和咖啡因的人群


偏爱热量和咖啡因的人群
对热量和咖啡因有不同偏好的群体

horizon13th · 2017-06-13T12:29:22Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 The user tests gave me some good insight into the different issues with the interface, and user flows. To understand more about this, lets consider the current user flow. From the time a user stand before the Kiosk, to getting a drink, the process looks as shown below.
+用户测试给了我一些好的理解在界面和用户流方面的不同问题上。为了理解更多，得到准确的用户流程，从用户站在 Kiosk 前开始，到得到一杯饮料，过程如下图所示。


从用户站在 Kiosk 前开始，到得到一杯饮料，过程如下图所示。
从用户站在售卖机前开始，到得到一杯饮料，过程如下图所示。

horizon13th · 2017-06-13T12:36:31Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 #### Current user flow (using just the Kiosk) ####
+#### 当前用户流（仅适用于 Kiosk） ####


当前用户流（仅适用于 Kiosk）
当前用户流（仅适用于售卖机）

horizon13th · 2017-06-13T12:40:20Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - The Kiosk provides data back to CocaCola (or the maintaining company).
 - CocaCola and partners maintain and make use of this data for analysis and product enhancement.

+- Kiosl 可以给可口可乐（或者服务商）提供数据反馈


Kiosl 可以给可口可乐（或者服务商）提供数据反馈
售卖机可以给可口可乐（或者运维商户）提供数据反馈

建议保留“服务商”

horizon13th · 2017-06-13T12:43:54Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 Even though the redesign addresses some key points, there are some limitations.
+虽然重新设计解决了一些关键点，但仍存在一些限制。


虽然重新设计解决了一些关键点，但仍存在一些限制。
虽然重新设计解决了一些关键点，但仍存在一些不足。

horizon13th · 2017-06-13T12:46:58Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - The design prioritizes the most popular options over the less common ones. It might take a few extra taps if the user has a less common option in mind.
+- 目前的设计相对较少的选项优先偏向于最常见的选项，如果用户想要不常见的选项，可能需要多做几步。


目前的设计相对较少的选项优先偏向于最常见的选项，
当前设计将更受欢迎的选项优先于不常见的选项。

yzgyyang · 2017-06-14T18:10:10Z

@sqrthree RL.

linhe0x0 · 2017-06-15T02:25:25Z

@yzgyyang 好哒

linhe0x0 · 2017-06-16T07:06:33Z

@yzgyyang 别忘了来校对啊

yzgyyang

@ylq167 @sqrthree 校对完成！翻译很棒。实在抱歉拖了这么久。

yzgyyang · 2017-06-20T03:25:41Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

 I followed a simple design process for this redesign project.

+在复盘中我遵循了简单的设计流程。


复盘 -> 重新设计

yzgyyang · 2017-06-20T03:46:40Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

 Later I conducted some quick users tests and asked the users to think aloud as they were getting their drink. I made notes of what I observed and user quotes, and analyzed this data to make sense of it. This later drove the redesign presented in this post.

+在我做了一些快速用户测试和询问了用户当他们想喝饮料时在想什么。我把观察到的和用户问券做了笔记，分析这些数据搞清楚他们的意思。这驱动了在这篇文章中提到的再设计。


在我做了一些快速用户测试和询问了用户当他们想喝饮料时在想什么。
->
之后我做了一些快速用户测试，询问了当他们接饮料时在想什么。

yzgyyang · 2017-06-20T03:47:26Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 I visited popular restaurants around my area where the machine is located. The main objective here was to understand the audience, environment, and contexts. I also found out about rush hours by speaking to the staff of the place.
+我参观了我所在区域附近有这个机器的参观。主要目的是理解用户，环境和设备场景。通过和当地工作人员交流我也发现了（设备使用的）高峰时段。


设备场景 -> 使用场景

yzgyyang · 2017-06-20T03:47:55Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - The Kiosk is placed mainly in Restaurants and places of leisure such as movie theaters.
 - These places are rushed on weekends, holidays and certain times during the day.
 - There is usually a queue during rush hours.

+- 在餐馆，Kiosk 位于主要位置，而在电影院这类地方，它却在角落里。


yzgyyang · 2017-06-20T03:49:37Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - Number of participants: 4
 - Familiarity: 2 first time users, 2 returning users
 - Time: 8–9 minutes overall

+- 参与人数：4
+- 熟悉程度：两人第一次用，两人曾经用过


我更偏向于汉子，比较“阅读友好”...

yzgyyang · 2017-06-20T03:58:38Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

 #### **Constraints** ####

 - The main constraint is the touchscreen. It is resistive touch, and works well for tap interactions, but not well suited for more advanced gestures.
+#### **约束** ####
+- 主要的约束就是触屏，它是电阻式触屏，并且只适用于轻击的交互，而不太适合更高级的手势。


~~并且只~~

yzgyyang · 2017-06-20T03:59:04Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - The Kiosk provides data back to CocaCola (or the maintaining company).
 - CocaCola and partners maintain and make use of this data for analysis and product enhancement.

+- Kiosl 可以给可口可乐（或者服务商）提供数据反馈


建议保留“服务商”

yzgyyang · 2017-06-20T04:01:01Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 How is this better? Well, using data backed recommendations, the design **makes it easier to select the 48 most popular drinks out of around a 100 total**.
+这是更好的吗？那么，使用数据反馈的建议，设计 **可以更容易的从大约 100 个总数中选出 48 种最受欢迎的饮料。


最后漏了“**”。

yzgyyang · 2017-06-20T04:02:52Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 The above two screens show the flow for pouring a selected drink. Notice that the description reads “Press & Hold” addressing a user’s earlier confusion with the system. As a part of improving microinteractions, it also responds to the button press on the UI.
+上面的两个界面显示了接选中的饮料的流程。请注意，描述为「按住」，解决了用户早期对系统的混淆，最为改善微交互的一部分，它也相应了 UI 上的按钮。


混淆，后应该改为句号
最为改善微交互的一部分，它也相应了 UI 上的按钮。 -> 作为改善微交互的一部分，它也响应了用户界面上的按钮。

yzgyyang · 2017-06-20T04:06:52Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


 - The design makes it easy to navigate. The pagination is an easy back and forth, and gives an idea of the total options available.
+- 设计使其易于浏览。分页操作是一个容易的来回，并且给出了可选择的全部选项的预期。


浏览 -> 导航
容易的来回 -> 容易的来回查找的设计

ylq167 · 2017-06-20T11:59:45Z

@yzgyyang 请问校对完了吗？校对完了我就可以修改啦。

yzgyyang · 2017-06-20T12:01:08Z

是的。

ylq167 · 2017-06-21T12:41:04Z

校对后修改完成 @sqrthree

linhe0x0

还有一丢丢小问题辛苦调整下哈

linhe0x0 · 2017-06-22T02:26:40Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


-**Context**
+** 环境 **


这几处的 Markdown 语法有点小问题

linhe0x0 · 2017-06-22T02:28:00Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


-This is a best case user flow and applicable for most users. While it seems quite simple at the outset, the major obstacle to a smooth flow here is a cognitive overload if the user does not already have a drink in mind. **Each screen has anywhere between 8 to 15 drink options to choose from. Making a decision is quite taxing in such a scenario, and the existing design does not help with that.** This process is repeated taking up more time if the user wants to create a mix.
+这是一个最好的用户流程用例，适用于绝大多数的用户。虽然它一开始看起来相当简单，但是当用户没有想好要什么饮料时，这里最主要的障碍就是认知过载。**每一屏上面都有 8 到 15 个选项可供选择。在这种情况下作出决策是相当困难的。而现有的设计并没有帮助（用户做出选择）。**当用户需要创造一种混合饮料的时候花费的时间会更多。


linhe0x0 · 2017-06-22T02:29:39Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md

-Lets consider how this would change the user flow* for most people when backed by data driven insights.*
+#### 这如何改变用户流 ####
+
+让我们考虑如何**在数据驱动的支持下，针对大多数人，**改变用户流。


还有这里

linhe0x0 · 2017-06-22T02:30:06Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


+** 原型使用的工具：Balsamiq, Sketch **


还有这里和下面的。

linhe0x0 · 2017-06-22T02:30:23Z

TODO/ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md


+**如果您喜欢这篇文章，请点击下面的小绿心。 它帮助别人发现这个帖子，并在我脸上放一个微笑：）。**


哈哈这里改成原文的小绿心吧。

linhe0x0 · 2017-06-22T12:46:26Z

@ylq167 已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。

ylq167 · 2017-06-26T09:19:14Z

https://juejin.im/post/594bd720f265da6c4c4fb134 ～

ylq167 · 2017-06-26T09:19:23Z

@sqrthree 辛苦啦

初稿完成

f69af37

linhe0x0 added 设计校对认领正在校对 labels Jun 12, 2017

linhe0x0 mentioned this pull request Jun 12, 2017

可口可乐自由风格售卖亭界面用户体验的回顾和重新设计 #1699

Closed

horizon13th reviewed Jun 13, 2017

View reviewed changes

linhe0x0 removed the 校对认领 label Jun 15, 2017

yzgyyang reviewed Jun 20, 2017

View reviewed changes

校对后修改完成

cfcffa3

linhe0x0 requested changes Jun 22, 2017

View reviewed changes

根据意见修改后

e6990f1

linhe0x0 approved these changes Jun 22, 2017

View reviewed changes

linhe0x0 merged commit ecb4278 into xitu:master Jun 22, 2017

linhe0x0 added 翻译完成 and removed 正在校对 labels Jun 22, 2017

		Later I conducted some quick users tests and asked the users to think aloud as they were getting their drink. I made notes of what I observed and user quotes, and analyzed this data to make sense of it. This later drove the redesign presented in this post.

		在我做了一些快速用户测试和询问了用户当他们想喝饮料时在想什么。我把观察到的和用户问券做了笔记，分析这些数据搞清楚他们的意思。这驱动了在这篇文章中提到的再设计。


		I visited popular restaurants around my area where the machine is located. The main objective here was to understand the audience, environment, and contexts. I also found out about rush hours by speaking to the staff of the place.
		我参观了我所在区域附近有这个机器的参观。主要目的是理解用户，环境和设备场景。通过和当地工作人员交流我也发现了（设备使用的）高峰时段。


		The user tests gave me some good insight into the different issues with the interface, and user flows. To understand more about this, lets consider the current user flow. From the time a user stand before the Kiosk, to getting a drink, the process looks as shown below.
		用户测试给了我一些好的理解在界面和用户流方面的不同问题上。为了理解更多，得到准确的用户流程，从用户站在 Kiosk 前开始，到得到一杯饮料，过程如下图所示。


		#### Current user flow (using just the Kiosk) ####
		#### 当前用户流（仅适用于 Kiosk） ####


		Even though the redesign addresses some key points, there are some limitations.
		虽然重新设计解决了一些关键点，但仍存在一些限制。


		- The design prioritizes the most popular options over the less common ones. It might take a few extra taps if the user has a less common option in mind.
		- 目前的设计相对较少的选项优先偏向于最常见的选项，如果用户想要不常见的选项，可能需要多做几步。

		I followed a simple design process for this redesign project.

		在复盘中我遵循了简单的设计流程。


		How is this better? Well, using data backed recommendations, the design makes it easier to select the 48 most popular drinks out of around a 100 total.
		这是更好的吗？那么，使用数据反馈的建议，设计 **可以更容易的从大约 100 个总数中选出 48 种最受欢迎的饮料。


		The above two screens show the flow for pouring a selected drink. Notice that the description reads “Press & Hold” addressing a user’s earlier confusion with the system. As a part of improving microinteractions, it also responds to the button press on the UI.
		上面的两个界面显示了接选中的饮料的流程。请注意，描述为「按住」，解决了用户早期对系统的混淆，最为改善微交互的一部分，它也相应了 UI 上的按钮。


		- The design makes it easy to navigate. The pagination is an easy back and forth, and gives an idea of the total options available.
		- 设计使其易于浏览。分页操作是一个容易的来回，并且给出了可选择的全部选项的预期。


		Context
		环境


		如果您喜欢这篇文章，请点击下面的小绿心。它帮助别人发现这个帖子，并在我脸上放一个微笑：）。


		This is a best case user flow and applicable for most users. While it seems quite simple at the outset, the major obstacle to a smooth flow here is a cognitive overload if the user does not already have a drink in mind. Each screen has anywhere between 8 to 15 drink options to choose from. Making a decision is quite taxing in such a scenario, and the existing design does not help with that. This process is repeated taking up more time if the user wants to create a mix.
		这是一个最好的用户流程用例，适用于绝大多数的用户。虽然它一开始看起来相当简单，但是当用户没有想好要什么饮料时，这里最主要的障碍就是认知过载。每一屏上面都有 8 到 15 个选项可供选择。在这种情况下作出决策是相当困难的。而现有的设计并没有帮助（用户做出选择）。当用户需要创造一种混合饮料的时候花费的时间会更多。

可口可乐自由风格售卖亭界面用户体验的回顾和重新设计 #1758

可口可乐自由风格售卖亭界面用户体验的回顾和重新设计 #1758

Conversation

ylq167 commented Jun 11, 2017

horizon13th commented Jun 11, 2017

linhe0x0 commented Jun 12, 2017

horizon13th left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

horizon13th left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yzgyyang commented Jun 14, 2017

linhe0x0 commented Jun 15, 2017

linhe0x0 commented Jun 16, 2017

yzgyyang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ylq167 commented Jun 20, 2017

yzgyyang commented Jun 20, 2017

ylq167 commented Jun 21, 2017

linhe0x0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

linhe0x0 commented Jun 22, 2017

ylq167 commented Jun 26, 2017

ylq167 commented Jun 26, 2017