专栏名称: 微交互
微信公众号
目录
相关文章推荐
国际家居  ·  高级灰设计,撩人的气质! ·  2 天前  
国际家居  ·  高级灰设计,撩人的气质! ·  2 天前  
ZaomeDesign  ·  105岁的宝山老厂房,如今啥模样? ·  2 天前  
ZaomeDesign  ·  公交站设计的天花板 ·  4 天前  
字体设计  ·  谁的海报做得更好? ·  6 天前  
始室  ·  首发 . APPAREIL ... ·  1 周前  
51好读  ›  专栏  ›  微交互

设计师如何做改版练习才是有效的?来看这个案例!

微交互  · 掘金  · 设计  · 2018-04-10 07:48

正文

全文共2857词,阅读大约需要7分钟。

写在前面:

经常听到有人说,自己刚做设计,又身在小公司,不懂得正确的设计流程,也接触不到大公司设计的迭代过程,总觉得自己设计流程不规范。偶尔有幸与大神聊设计,得到的答案多半也是多看多想多做之类的话,虽然是这个理,但是我觉得还不如来一次实战案例展示更为有效。

为此,我找了这篇文章,文章是出自日本的一位美女设计大神之手(日本产品设计师,擅长UI和品牌设计,个人链接:https://medium.com/@haiji505),详细的介绍了她是如何对一款应用进行改版的。相信读完此文,会对设计改版有一个全新的认识。

作者本人照片使用已经得到原作者的允许,小姐姐人很好,还给我发了几张高清的个人皂片

在与原作者沟通的过程中,还发生了一点小故事。原作者也是刚学了小半年的英语,写这篇文章也算是试水吧,没想到在medium上获得了3.5k的点赞,她非常的开心,正准备把她的这篇文章翻译成日文,没想到我先找到了她,请求翻译成中文。她还发了推特,说可能中文要在日文之前出版了,哈哈~

小姐姐twitter截图

文章简介:本文主要讲了对一款旅行应用Foursquare的改版迭代过程,流程非常完整,最大的感触就是作者全程都是在与用户进行沟通交流,结合自己的思路进行设计验证,这一点非常值得学习。

(译者注:为方便阅读学习,我将文章中出现的图片也都尽可能的翻译过了,见图片中的灰色小字。)

下面进入译文:

在旅行前探索你的目的地城市

项目介绍

Foursquare APP 改变了用户旅行的体验。

我喜欢用Foursquare这款应用,自从我住在东京后就开始使用它了。搬到旧金山后,我对自己可以继续无缝地使用它印象深刻。它帮助我发现世界上任何一个新的地方。去年夏天,我还计划使用Foursquare帮助我去波特兰旅行,但是我在使用APP时发现了一个问题。

因此,我着手探索可帮助用户规划出行并吸引新用户的功能增强和改进。

问题与假设

去年,我尝试使用Foursquare的桌面端和移动端一起计划一次旅行。我注意到,在桌面端搜索周边旅游景点很容易,但是在使用移动端时,找更远的旅游目的地时要困难的多。我真的很喜欢使用Foursquare,所以我想找到一种让移动端更容易使用的方法。要做到这一点,其中一个方法是为用户创建一种方式来为潜在的旅游目的地添加书签,这样他们在使用移动端时就更容易导航了。

Foursquare的桌面端

我研究了指导Foursquare的设计理念,他们建议用户列出最喜欢的景点,计划一次旅行并保存想去的地方。我相信他们的目标和我的假设是一致的。

在 App Store 中Foursquare 的应用截图— iTunes (2017年11月)

用户画像

首先,我创建了一个基于在线研究中的潜在用户和身边在使用这款应用的朋友们的用户画像。既然Foursquare是关于发现新地方的,我认为目标用户应该是一个好奇和爱冒险的人。

故事板

我使用Jobs To Be Done(译者注:待完成之工作, 更 多详细介绍请参考:https://jtbd.info/2-what-is-jobs-to-be-done-jtbd-796b82081cca,这里就不扩展讨论了)框架和场景创建了以下故事内容。

故事内容

(译者注图片译文:当我想到下一个假期去旅游时,如果我能够知道在某个城市或国家哪里可以找到一个美丽的地方,那么我就可以决定我的旅游目的地了。)

场景

小范围可用性测试

在旧金山Yerba Buena花园里做用户测试

根据我的故事内容和场景,我进行了小范围可用性测试来验证我的假设。

我在公园里找到了7个人,在开始测试之前,我询问了一些基本的问题。

在我让他们做任务之前,我让他们想象他们正计划前往一个新的目的地(城市或国家都行)。

这七位用户被要求在iPhone上完成以下任务:

1、如果你想找一个你想去旅游的地方,你会怎么做?

2、假设你找到了一个你喜欢的地方,你怎么去看看那个地方?

3、你对那个地方很感兴趣,你决定去那里旅游,接下来你会做什么?

发现痛点并确定优先级

关联映射

2 x2优先级矩阵

我回顾了用户访谈,并将每位用户的痛点写在了便签上。 然后我用关联映射对痛点进行分类,并用2x2 优先级矩阵对它们进行优先级排序。

我测试的每个人都无法在他们当前位置之外找到一个旅游目的地。搜索是最重要的,因为如果新用户不能得到他们想要的结果,他们可能就不再用了。

搜索功能是很多痛点的根源,所以我决定把重点放在搜索功能上。

照片也是一个痛点,用户说他们在决定旅行前希望看到一些关于目的地的高质量照片。这说明在照片功能上有改进的机会。

任务流程

用户评论页面对于Foursquare来说很重要,但大多数受访者在寻找目的地之外的旅游目的地时,并没有到达评论页面。

设计决策

UI草图

在设计我的初步解决方案并创建高保真原型之前,我画了一些草图来探索最佳的解决方法。

原型设计并验证

我使用Sketch和Marvel来创建高保真原型,并召集了5名新用户参与测试。

以下是我在用户测试中使用的原型和测试结果。

#1 主页

Foursquare确实有助于在当前位置附近找到推荐地点,但在旅行之前找到旅行目的地并不容易。参与者想通过Foursquare了解一个推荐的目的地。 我修改了主页,以解决寻找旅游目的地的问题。

主页

  1. 根据用户的当前位置,我将主页首图更改为城市照片。

  2. 由于用户想要找到迷人的目的地,我添加了特色城市功能。

  3. Foursquare在“列表”菜单中提供了专题列表,但新用户没有注意到“列表”菜单。 所以我将现场列表移到了主页,以便让更多用户使用该功能。

  4. 我把标签名“搜索”改为“探索”。“探索”在字面上的意思是指发现一个新的地方,在首页上它会比“搜索”更让人兴奋。( 译者注:功能文案,这个细节很多人经常会遗漏)

结果:5个人中有4人浏览了主页并点击了特色目的地。

#2 搜索流程

在旅行之前寻找目的地是研究参与者的主要痛点。 我回顾了搜索流程和修改后的UI设计。 参与者的主要问题是在一座城市中找到目的地。 当参与者在搜索栏中输入城市名称时,他们会显示一个包含你输入的城市名称的当地商圈。我的解决方案是,当用户输入一个城市名称,推荐结果出现一个只有该城市名称的位置 (译者注:城市总览入口)。

搜索区域

结果:每个人都注意到位置输入区。

建议查询位置

结果:5个人中有2人选择了建议的城市。

建议使用城市名称的位置搜索

结果:5人中有3人将城市名称输入主文本字段,然后点击“东京”按钮。

搜索结果

结果:5人中有3人对类别按钮感兴趣。

#3 详情页面

习惯了iPhone的人无法找到共享和书签按钮。iPhone用户不熟悉Android上使用的浮动操作按钮。他们没有想到在浮动操作按钮中会有“添加到列表”功能。我将分享按钮和“添加到列表”功能移动到标题栏显示。

详情页面

结果:每个人都感觉点击“添加到列表”按钮变得更容易了。

改善用户旅程

总的来说,参与者都喜欢在应用中探索新的目的地,而不是在他们家城市周边探索。

目前的Foursquare APP很有帮助,但缺乏用户需要和期望从Foursquare获得的某些功能。 同时,他们也面临着与越来越多地本地搜索平台(如Facebook Local,Yelp和其他具有更全面功能的平台)竞争。 Foursquare的用户希望发现新的地方, 然而,当地搜索市场竞争激烈。 Foursquare可以通过成为人们发现新地点的应用来扩大用户群,增加现有用户的满意指数,无论要搜索的是在哪个地点。

作为Foursquare的忠实粉丝,我不论何时何地都想用到它,我相信后续它也能给我推荐一些很棒的地方!


注:*这是一个个人练习项目。 我不隶属于Foursquare。 Foursquare是我最喜欢的探索应用,我正在探索如何让它变得更好。 *本案例研究于2017年11月~12月完成。

原文:https://medium.com/haiiro-io/foursquare-a-ux-case-study-f606d4757d9b

作者:Namika Hamasaki (Haiji)

译者:彩云Sky

本文翻译已获得作者的正式授权

授权截图

大家也可以在后台给我留言,把你想看的知识内容告诉我,尽可能的推送你喜欢的内容!

个人微信号:huangml19900517 , 欢迎来撩~