Yelp再设计:以实用性为核心的设计方法

Jerry Cao是UXPin(线框图及原型制作应用)的内容策略师,负责为线框图及原型制作平台开发应用内在线内容。有关在设计中融入实用性测试的更多细节和视觉内容,敬请阅读我们的电子书用户测试与设计。

在改善用户体验之前,要先做到了解应用所涉及的业务。应用旨在解决什么问题?如何盈利?其成功之处在哪?又有哪些不足之处?

正如用户体验设计流程与文档中所述,这一步骤就是“产品定义”阶段,我们需要在这一阶段内对业务形态进行剖析、决定用户体验的哪些方面需要改善,然后拟定各种前提条件和测试计划。

下面我们将介绍如何运用精简框架对业务情况进行解构,确定正确的目标用户群体和存在的问题,然后拟定相应的实用性测试计划。另外我们还将说明我们通过测试获得的一些想法,并通过截图展示这些想法对Yelp的再设计实施产生了哪些影响。

业务解构

在Yelp再设计实际操作过程中,我们第一步选用了Lean Canvas,因为其体量较小,而且能够全面地以视觉方式展示Yelp的业务运营情况。从自身考虑,Lean Canvas能够有效地通过最低量的纸上作业形成可实际操作的意见。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?来源:Why Lean Canvas

 

Lean Canvas由Cloudfire的CEO Ash Maurya所打造,其有助于我们通过关注客户存在的问题、拟定的解决方案和成功标准来深入业务的核心部分。?由于Lean Canvas大多被新成立的公司用来草拟业务创意,因此对于Yelp这种大型的知名企业,我们只采用其中的画布功能。繁琐的文档这里就不赘述了,下面我们以Yelp为例来看看如何从UX角度出发完成这一步骤:

·??? 首要问题 —?某个城镇内的居民需要了解当地[最佳/最快捷/最便宜/最方便]的[餐饮/服务]。

·??? 3大功能 —?用户评价、活动流、地理位置/分类搜索。

·??? 独特的价值主张 —?可以让用户列示商家、添加评论并查看好友或其他用户推荐的商家。

·??? 绝对优势 —?用户群庞大所带来的网络效应。

行业内参?总结Yelp的关键成功因素之一就是其“网络效应”。?用户撰写评论可以鼓励其他评论和新用户的产生,从而形成病毒式循环,促使Yelp名列地区性商业排名的榜首。这样一来,Yelp就拥有了大量的用户,并能够从经济角度成为一个有效的广告平台。虽然其三大功能能够通过彼此配合实现积累用户数量这一关键目标,但我们还是认为其最关键的功能是搜索功能和信息结构。如果大家找不到自己所需要的内容,也就没法写评论,更无从谈起鼓励别人参与。所有,我们的再设计工作的目标是改善应用组织及引导用户查找所需内容的方式。

 

将业务见解转变成用户测试目标

在确定了再设计工作的目标后,我们就需要找出能够从中受益的用户群体。是新用户?超级用户?还是偶尔用一次的用户?为了寻找答案,我们查证了哪些人对业务情况的影响力最大。

?

 

来源:Yelp Q2 2014

 

通过观察Yelp在其网站上发布的数字,我们发现其每月的独立访客人数是1.38亿人,截止至2014年2季度的累计本地评论是6100万条,所以说获取用户对Yelp来说不是问题。更重要的是,Yelp已经实现了盈利,并且保持了评论数环比44%,月度独立访客27%的优秀增长率。

考虑到公司已经拥有了庞大而且不断增长的用户基础,我们认为使用频率和用户保留率应该是一个比较值得探索的领域。因此,我们的目标领域就是半日常用户。Quick Sprout的CEO Neil Patel表示,成功保留用户的关键在于让用户说“原来如此”的速度,也就是新用户因为领悟到了应用所承诺的真谛,从而成为超级用户的速度。对于他个人来说,增加或减少功能能够提高产品的价值??悸堑秸庖坏愫?,我们认为我们所需要问的问题是:

·??? 大家在选择饭店时一般会使用哪些功能?(例如照片、评级等)

·??? 用户能否根据某些特定的标准选择饭店?

·??? 用户是否知道如何保存及找回内容?

·??? 用户能否查询某个商家在特定时间是否营业?

通过探索上述问题,我们希望能够找到一套方案来提高将非常用用户转变为超级用户的效果。

实用性测试的计划和实施

考虑到我们的项目属于冲刺型的设计工作,因此既要保证全面也要压低成本。我们最后选择了无管制远程测试,其中包括分析拍摄下来的卡片分类、树形分类以及首次点击测试。这些测试可以让我们了解到测试参与人员在自己生活中使用产品的方式、对信息进行优先分类的方式以及哪些操作最为普遍。

1.录制用户测试

我们选择这个方法的原因是因为其能够完美地实现成本与收益的平衡??悸堑轿颐谴蛩阍诖笤?周的时间内完成从启动到再设计的项目工作,所以无管制用户测试有助于快速招募参与者、简化计划过程并同步进行参与者测试。

你可以点击下方的图片了解我们通过用户记录到的任务和反馈类型。

?

 

正如免费电子书《用户测试与设计》中所述,录制用户测试有助于发现管制测试中可能无法反映出的问题。究其原因,尽管管制测试比较方便反馈的收集和提供,但让用户能够在自由的环境下与产品进行交互这一点也是不可替代的。所以说两种方法相辅相成——管制测试有助于直接了解用户的想法,而无管制测试可以让你分析用户在自由环境下是如何与产品进行交互的。

UserTesting推荐在开发过程的早期进行管制测试,无管制测试则可以随时进行。下面是我们通过无管制测试获得的3大反?。?/span>

·??? 搜索功能是所有任务的首要起点。

·??? 各种活动太过不显眼,我们得提高其视觉存在感。

·??? 我们需要简化保存商家以供日后使用的功能。

 

2.卡片分类

卡片分类法可以帮助我们了解用户整理内容的方式,从而提供有关导航和名称选择的反馈信息。

?

 

来源:Optimal Workshop Similarity Matrix

卡片筛选专家及Maadmob的创始人Donna Spencer认为,尽管卡片筛选可能无法提供出最终的结构,但还是有助于解答设计所需的信息架构方面的问题??ㄆ秆》治街址椒ǎ?/span>

·??? 开放式卡片筛选——为测试对象提供载有网站内容,但没有既定分组的卡片。然后请他们按照自己的想法对卡片进行分组,并给每个分组起个名字。

·??? 封闭式卡片筛选——为测试对象提供载有网站内容的卡片,并告知他们卡片的分组情况及各个组的名称。然后请他们将各个卡片分别放入既定的组内。

因为时间关系,我们选择了重新组织现有IA比较简单的封闭式卡片筛选方法。封闭式卡片筛选告诉了我们用户与Yelp中47个功能筛选器(例如“是否允许携带宠物”)进行交互的可能方式。如果时间和资源允许(特别是在你需要创建新网站时),强烈建议再进行一次开放式卡片筛选,以便在有需要时从零开始对IA进行重构。

通过卡片筛选我们的主要收获是:

·??? UI必须对使用最广泛的筛选器(例如“正在营业”和“可刷卡”)进行优先级排序

·??? 我们可以通过隐藏7个鲜有人使用的筛选器(例如“有DJ”)来简化筛选器菜单

·??? 大家表示网站看起来比较乱,所以我们的新布局会争取打造出更为简洁的外观

3.首次点击测试

首次点击测试可以检测受测人员在完成任务时会首先点击界面上的什么对象?如《实用性测试》中所述,首次点击对于网站导航来说尤其重要,因为给用户留下第一印象的机会仅有一次。

Adobe的高级创新员Bob Bailey在2006年对CDC政府官网做的一次首次点击测试完美地诠释了这一测试的重要性。他发现,当用户的首次点击就进入正确路径时,其中87%的人都能成功完成任务。但如果首次点击就进入了错误的路径,则只有46%能够完成??悸堑結elp的主页有大量的选项(顶部导航栏有城市选项、侧边栏有热门活动等),这项测试能够让我们看到网站的哪个部分是最为直观的部分,以及哪些功能需要砍掉。

幸运的是,我们的首次点击测试结果与前两项测试结果完全相符。因此,我们强力推荐开展多种不同的测试以便在彼此之间进行权衡。

基于实用性测试意见进行设计

在设计阶段,我们以Google Ventures设计流程的最后几步为基础确立了一套方法。UXPin 的 CEO Marcin Treder首先准备了大量非正式的草案,然后整个团队一起筛选出了2-3套。为了防止出现“委员会式的设计”,我们将哪些草案能够进入使用UXPin进行线框图和原型创造这一阶段的决定权交给了Marcin。

进入到UXPin阶段后,我们在线框图中囊括了大部分的设计修订,然后添加了部分交互和动效,从而形成了低保真的原型。动画效果捋清后,我们又在UXPin中添加了细节,做出了高保真原型。这一流程中的截图如下所示。

1.草案

主页

搜索结果

2. 低保真线框图

主页

 

来源:UXPin Yelp Redesign

 

搜索结果

 

来源:UXPin Yelp Redesign

 

3.低保真原型

如果需要点击进行交互或者浏览整体设计,可以在实时预览中操作。

 

来源:UXPin Low Fidelity Yelp Prototype

 

4.高保真原型

如果需要点击进行交互或者浏览整体设计,可以在实时预览中操作高保真原型。

主页:

来源:UXPin High-Fidelity Prototype

搜索结果:

 

来源:UXPin High-Fidelity Prototype

?

定义、计划、测试

我们所选用的方法比较适合于快节奏的设计流程,但整体的原则也适合于小型的公司企业。了解业务目标、找出正确的用户群并根据预算和时间安排做出测试计划。完成上述任务后,设计的首要步骤也就完成了一大半了。毕竟设计的最大敌人就是含混不清。

如果你想要使用上面提到的工具辅助自己的设计决策,现在这3家公司正在搞组合打包出售活动,活动截止到2014年12月22日?;疃?,原价$2344的以用户为中心的设计工具现在可大幅度优惠。

 

翻译:蒋灿

翻译地址:网秦uec

原文地址designmodo

转载请注明:学UI网—UI设计师学习教程平台 » Yelp再设计:以实用性为核心的设计方法

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
黄色在电商设计中的玩法与禁忌【设计干货】黄色在电商设计中的玩法与禁忌【设计干货】
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
一叶知秋-剪纸风教程【教程】一叶知秋-剪纸风教程【教程】
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
设计师必备!人工智能时代的配色方案?。凵衿鳎?/span>
设计技巧如何融入“用户体验”?设计技巧如何融入“用户体验”?
视觉设计师如何向UX设计师转型?视觉设计师如何向UX设计师转型?
《纪念碑谷2》图标教程[ps教程]《纪念碑谷2》图标教程[ps教程]
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
运气药水绘制【教程】运气药水绘制【教程】
?