UI界面设计 ·

重新设计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