交互案例研究-Netflix中的流畅购物体验

已经上市的应用程序难道就没有设计问题吗？

我们应该怎么在此基础上做进一步调整和迭代呢？

在整个设计调整过程期间，我们又将收获什么呢？

今天，小编就为大家分享一下Avi Gupta的一个个人项目。该项目旨在为Netflix流媒体应用程序引入Netflix.shop，来帮助用户享受更流畅的购物体验。

项目介绍

Introduction

Netflix是一个流媒体服务，它向用户提供了各种获奖节目、电影和纪录片。此外，它甚至可以处理自己的作品，并将其统称为”Netflix Originals”。

就在2021年6月，Netflix推出了Netflix.shop，用来销售与其原创节目相关的商品。目前，这一电子商务商店仅作为独立于Netflix流媒体应用程序网站存在。因此，在这个案例研究中，Avi Gupta想将它引入Netflix的网络流媒体版本中，并以一种有效的方法来向所有用户宣传Nextflix.shop的存在。他旨在为用户在使用Netflix流媒体时打造一种流畅的浏览和付款体验。

图源：

https://nypost.com/2021/06/11/netflix-opens-online-shop-offering-merchandise-from-hit-shows/

设计流程

Deisgn Processes

在这一案例中，为了将Nextflix.shop更好地引入Netflix流媒体应用程序之中，设计师在主屏幕、节目清单屏幕、购物页面、产品页面等多个屏幕功能进行了设计和迭代。

主屏幕 (Home Screen)：

Avi Gupta设计了一个购物车来帮助用户添加且检查他们的产品，并进行后续的付款操作。此外，他还在主页上引入了“Netflix.shop”网格。当用户点击一个节目时，他们会看到一个包含节目细节的菜单。另外，设计师还添加了一个功能选项，即：用户可以直接从菜单中查看特定节目的商店。

“Netflix.shop”网格位于”My List”和”Continuing Watching”网格下方。由于用户在主屏幕上的主要目标是观看和发现页面上的节目，因此Avi Gupta并不想将商店网格放在主页上，否则可能会分散用户的注意力。

Home Screen

Home Screen迭代

节目/电影屏幕 (Show/Movie Screen):

在该屏幕上，用户可以看到几个选项卡并了解有关节目的不同详细信息，如预告片、剧集等。设计者已经将“节目商店”添加为这一屏幕上的选项卡，来帮助用户点击标签，进而查看与节目相关的不同产品。

Avi Gupta将商店创建为显示页面上选项卡，主要有以下两点原因：

与节目/电影相关的所有内容，如剧集、预告片和产品，都可以在一个屏幕上观看。这就为观众创造了流畅的浏览体验，因为他们不需要单独搜索节目及其产品。例如，如果用户想要搜索Squid Gmaes产品，那么他们只需打开显示页面并从那里访问商店即可
用户关注的主要焦点仍然是界面的内容观看。商店选项卡放置在剧集和预告片选项卡之后，以此补充了流媒体体验。但是，它却被放置在”More like this”选项卡之前，以便为其提供一些焦点

Show/Movie Screen

商店界面 (Shop Screen):

单击导航栏的商店图标，用户就可以进入商店页面。在这里，他们可以查看各种节目的产品系列。另外，Avi Gupta还设计了一个下拉菜单，以允许用户查看他们想要签出的任何集合。一旦用户点击了一个系列，他们就会直接跳转到节目屏幕页面上的商店标签，并从那里查看产品。

Shop Screen

产品界面 (Product Screen):

在产品页面上，用户可以查看产品的所有详细信息，如图像、描述、评论等。然后他们可以继续将产品添加到购物车或直接购买。此外，用户还可以查看与同一节目相关的类似产品。Avi Gupta进行这一设计的原因在于，每当用户决定购买与节目相关的产品时，他们就会表现出对节目的高度兴趣。进而，他们在查看同一节目的更多产品机会就会高于查看任何其他节目/电影产品的机会。

Product and Cart Screen

信息界面 (Information Screen):

在将产品添加到购物车之后，用户将进行付款操作。他们会输入基本的联系信息和运输的详细信息。接着，界面将向用户显示订单摘要，其中包含订单的全部详细信息，例如产品、联系方式、运输和价格详细信息等。

如果用户拥有折扣码，那么他们也可以一并在页面中输入。在确认订单后，他们将会看到扣除折扣之后在内的最终价格细节。此外，用户还可以更改产品数量、联系方式和运输的详细信息。

Contact Information & Old summary Screen

Contact Information & Old summary Screen迭代

最终付款屏幕 (Final Payment Screen):

在确认订单详情后，用户将进行最后的付款操作。他们有多种选择，例如信用卡/借记卡、Paytm、网上银行和UPI。

值得我们关注的是，Avi Gupta没有添加“货到付款”这一选项，因为Netflix可能会与物流公司合作，同时也并非所有的合作公司都会提供COD。因此，他便在这一项目中排除了这个操作功能。

Fianl Payment Screen

Assumption

支付屏幕的设计是基于Netflix将商店支付与流媒体应用程序集成的假设。设计者做出这一假设的原因在于，如果用户继续为标准的Netflix订阅付款，那么它当前的流媒体应用程序将为用户重新定向他们的网站。因此，他们也会有可能将用户引导至网站进行产品付款。

Fianl Payment Screen迭代

有效宣传

Deisgn Publicity

在进行了一系列设计和迭代之后，又应该怎样将Netflix.shop向用户进行有效宣传呢？经过一番思考后，Avi Gupta进行了以下几个操作：

在主屏幕上介绍Netflix.shop

之前没有使用过Netflix.shop的用户在不知道其存在的情况下，甚至可能都不会去搜索查看它。因此，设计师便在主屏幕上添加了一个”Netflix.shop”网格，以便让用户知道这一商城的存在。

Netflix.shop网格位于”My List”和”Continuing Watching”网格下方，因为大多数用户会继续他们之前观看的节目，而Avi Gupta也并不想因此转移他们的注意力。但是，为了确保用户能在此基础上注意到“Netflix.shop”网格，他将这一网格设计得足够突出，进而使用户了解到这一商店的存在。此外，Netflix还可以测试和更改集合网格的位置，以确保用户没有将主要焦点从流媒体内容上转移。

借助视觉和工具提示

添加视觉提示将激发用户的好奇心，以检查应用程序中的新内容。这可能是一种让用户了解Netflix.shop的有效且微妙的方式。而工具提示可以让用户了解屏幕上的新元素。在用户打开应用程序后呈现一次工具提示，就将使他们注意到商城并好奇地点击进一步查看。

视觉提示

工具提示

向用户传递通知信息

推送通知

推送通知经常用于让用户知道在Netflix中发布了什么新的节目或电影。它们还可以让用户了解到Netflix.shop。此外，Netflix还可以在不同的时间测试不同类型的通知。例如，一旦用户观看完节目，他们就可以收到有关节目产品的通知，因为当他们完成节目时，转化的可能性就会变得更高。