重新设计WordReference APP的界面交互

挑战

互联网过去几年的发展非常迅速，世界越来越趋同，不过，挡在大家面前最大的障碍仍然是语言。目前大部分内容都是英文。Wordreference成立于1999年，希望向全世界提供免费的在线双语词典和工具。从那以后，该网站逐渐成长为最常用的在线词典之一，并且是英语 - 西班牙语，英语 - 法语，英语 - 意大利语，西班牙语 - 法语和西班牙语 - 葡萄牙语，双语互译最好的在线词典之一。

它一直位列世界前500访问量的网站之列，是西班牙，法国，意大利和整个拉丁美洲的前100名的网站。

随着用户越来越多，要求也越来越苛刻，所以本次重新设计项目旨在改善Wordreference的服务并避免用户的痛点。

用户评论

为了更好地了解目前WordReference app的缺点，我们开始在应用商店中研究app的评论。这使我能够更深入地了解用户的印象，以及用户对app的感受。app的评论里虽然找不到重大问题，但有些用户提出了一些他们碰到的，例如：

——恼人的广告

——找不到登录选项

——可用性问题

用户访谈

基于10个用户的样本组，我尝试获得反馈以完成分析并突出用户的特殊兴趣和需求。这个练习非常有见地和有用。我运行了一个焦点小组，目的是打破当前版本的WordReference应用程序的优点和缺点。

用户访谈记录：

优点

——字典的准确性

——使用方便

缺点

——搜索结果页面可能会让人感到困惑，太多元素会使实际结果变得模糊不清

——UI界面有很大的设计改进空间

——恼人的广告

——除了搜索你想搜的词语，你不能做任何其他事情

——app端没有论坛！只能在网页端访问。没有通知，平台看起来很老旧

重新设计的方案

我考虑了3类用户群体的使用场景：

看电视

劳拉和菲利波很高兴用英语严格观看《权力游戏》。有很多单词他们不知道，并会不断使用WordReference查找单词的含义。

读一本书

迭戈是一位才华横溢的插画家，他终于购买了他最喜欢的艺术家所需的书。他买了英文版，所以只能依赖WordReference检查单词的含义。

Web浏览

Irene是一位年轻的前端开发人员，喜欢阅读有关Medium的文章。她发现了很多有趣的文章，可以让她提高自己的知识水平。即使她的英语非常好，她仍然需要检查她不理解的单词的含义。

人物角色

进一步研究，我确定了3个不同的角色，这些角色具有不同的背景但有相似的愿望：

年轻人

洛伦佐，18岁 - 聊天，在线视频

知识寻求者

Roberta，31岁 - 阅读，电影

工作人员

Marco，35岁 - 电子邮件，电影，阅读

限制

整个项目基于WordReference的当前商业模式，即Adsense广告。

WordReference商业模式主要基于广告。所以该服务可以免费提供给公众。但是，想要“免费”和“质量体验”的客户之间需要存在平衡。市场研究一次又一次地表明，人们通常会为高质量的服务支付费用。

痛点

通过各方面的调查研究，我们总结了以下几点目前用户的痛点：

——烦人的广告

——内容结构有点混乱

——论坛消失

——除了搜索你想搜的词语，你不能做任何其他事情

我们开始重新设计吧！

在开始之前，让我们退后一步。通过3D触摸技术改进应用程序的快捷方式，并引入推送通知以增加日常流量。

推送通知与新内容有关，我将在后面详细解释。

低保真线框图

为了开始这个项目，我开始草绘关键页面，探索不同的解决方案。目标是创建一致且直观的流程，以简化用户体验并允许用户快速找到他们正在寻找的所有信息。

首页

我尝试提供有用且引人入胜的内容，而不是简单的首页，用户可以在其中开始搜索。

——搜索栏

——字典

——最近的搜索

——每日一词

每日一词是从网络版本带来的概念，它甚至可以通过推送通知用于吸引用户。这种方案会增加每日流量。

之前 - 之后

导航栏

导航已经完全重新设计。进入导航的图标移动到屏幕右下角的位置，便于访问。

为了改善导航，我还删除了不必要的信息：

——最近的搜索

——为此应用评分

——分享

新功能：

——每日单词

——论坛（高级用户专享）

之前 - 之后

*升级至高级版

这边您可能注意到了，我们增加了升级到高级版本的可能性，该版本允许用户获得其他功能并删除广告。

翻译页面

重新设计的界面确保现有的用户能够一眼认出来，同时也提高了识别性。只是小的改进来访问内容，例如选项卡导航或发音功能。

其中一个突出的问题是内容。许多用户不了解WordReference提供的所有信息，或者由于当前结构而感到困惑。因此，新设计将避免这些问题。

之前 - 之后

保留的东西

我总体上提高了可用性，带来了额外的功能。通过选项卡导航，我将在应用程序的各个部分中获得一致性，为用户提供相同的UI体验。

主要特点：

——搜索可用

——浏览类别

——排序方式

——用于快速识别语言的标志

——分享图标

之前 - 之后

字典

由于用户访谈中的一些抱怨，我在本节中做了很大的改动。新UI基于以下假设：

——用户拥有自己的本机/默认语言

——用户不应指定翻译的“方向”。WordReference可以双向自动运行

——用户可以从仪表板部分轻松切换翻译的“方向”

——通过新的UI界面识别和选择所需的字典要容易得多，避免用户困难的寻找翻译。

之前 - 之后

每日一词

如前所述，我介绍了当天的Word，它可以帮助增加流量并吸引用户。已更新为高级版本的用户甚至可以自定义几个选项：

——每日单词的级别 - 初级，中级，高级

——数量 - 每日最多5个单词

之前 - 之后

用户测试

为了验证重新设计的效果，我运行了一些可用性测试来比较旧版本和新版本。为了评估新的WordReference应用程序的有效性，我已经为4个当前用户分配了4个不同的任务。

可用性测试显示整体改进，从而更快地完成所需的任务。超过30％的用户仍然不理解app在这两个方向上都会检测到翻译。因此不需要设置：意大利语到英语或英语到意大利语。

为了避免这种误解，我在字典部分加入了一个弹窗，明确地解释了app的这个设计。

原型

我构建了一个显示整个项目的交互原型。

结论

由于时间限制，研究和结果假设是基于我的个人经验和少量数据。需要进行深入分析和其他测试，以便完善和验证解决方案。

原文：https://medium.muz.li/wordreference-ux-case-study-a60f8c55e0f8 

作者：Filippo Rovelli