专业知识分享案例研究 · 设计 · 体验

Fipple——社交软件案例研究 | 交互设计课程项目

2021-04-1311 MIN READ原载于微信公众号 ↗

太上老菌太上老菌朝菌学园ZhaoDesign

这是加州大学圣地亚哥分校在Coursera上开设的交互设计专业课程项目。

设计概要:利用设计思维的过程,从时间、改变和概览(Time, Change & Glance)这三个主题之中选择一个,找到问题,并针对问题设计解决方案。

问题陈述:CHANGE —— 设计一个能促使个人或社会行为改变的界面。

01

寻找需求

选定了主题之后,要做的第一个任务就是观察我们所选择的任何一个会发生我们问题陈述的场景以及目前对于问题的处理情况。在寻找需求的同时,我们还对来自不同人群的个体进行了三次用户访谈,了解每个人是如何受我们所观察的场景的影响的,并了解他们对问题的不同看法,从而帮助我们找出设计的突破点和机会。

我选择观察的场景是,有需要同伴的活动时,人们是如何找到同行的人的,特别是在一个新的或陌生的社会环境中。

每当我们去到一个新的、陌生的社会环境,就会面临变化,比如搬到一个新的城镇,去到一个新的公司、新的大学、参加兴趣班、去健身房或任何社会活动。我们也总是需要人的,无论是为了获得工作上的帮助、还是熟悉陌生的环境或者只是结交益友。但是在陌生的环境中,对你来说像去看电影这样简单的事情可能都会成为一个具有挑战性的任务,因为你必须找到拥有和你一样电影品味的人。我们总是倾向于先走近自己的圈子,如果我们找到的同伴对你想做的事不感兴趣,那你最终可能会放弃那件你想做的事或独自去做。去到一个新地方或经历了环境改变的人存在着改善社交互动的需求。

我采访了三个人——

  • 刚开始在国外读研究生的学生
  • 在新的城市开启新工作的职场人
  • 独自搬到一个新城市想自己创业的人

与他们交谈后,我找到了一个明确的需求。

人们需要一种方法来寻找志同道合的人来一起活动,这些活动可能是业余爱好或是与工作相关。现有的应用如MeetUp适用于寻找比较多同伴的情况,但这样范围太宽泛了,当人们只需要找1-2个人并要进行个性化地筛选时,MeetUp就不太适用了。像Tinder这样的应用虽然有解决这个问题的技术,但它们提供的解决方案只聚焦在特定的某一件事(比如约会),这往往会让人有些不信任或顾虑。因此,需要有一种方法让人们与除了在网上认识的之外的人建立更好的社交关系。


02

构思

第二周的第一项任务是针对寻求需求阶段确定的具体机会点进行头脑风暴。idea的数量是主要目标。我们试着想出尽可能多的解决方案和设计,这样可以在以后筛选出有意义的方案。于是,这些想法经过筛选后得出15种明确的需求。

用户需要——

1、能与熟悉的人一起探索新的地方/城市/环境;2、以更简单的方式与当地人联系;3、在新的环境中找到克服社交尴尬的方法;4、吃饭时可以轻松找人作伴,一起探索美食;5、与邻居或附近的人轻松交谈;6、在不涉及任何恋爱/约会的情况下与他人建立社交关系;7、寻找在某项活动或爱好上有相似品味的人;8、更好地认识同事以便进行社交;9、在一个适合每个参与者的地方找到活动;10、寻找同龄人;11、组建自己的活动小组;12、与当地的相关职业人士取得联系;13、找到一种成本效益高的方法来寻找项目合作的人;14、在所在地方便到达的地方与朋友圈/社交媒体圈之外认识的人会面;15、过滤他人的回复并避免不适合的搭档,评估社交的质量与合法性。

随后要做的是口头灵感练习与灵感板,我看了五个设计独特的应用,Tinder、Google Spaces、MeetUp、Fouesquare/Zomato和Facebook 的Messenger Bots服务,它们解决了不同的问题。


03

故事板和原型

故事板是一个设计潜在解决方案以及如何让它们适应不同场景的好方法。它能让我们发现不同想法的可行性、缺陷和成功的可能性。

我选择了两个主要场景,然后围绕这两个场景来创建故事板和原型——

1、基于自己的爱好和要完成的事搜索周围的人;2、搜索与自己的兴趣爱好相关的当地的活动或组织。

故事板

纸质原型是这个过程中的一个关键部分。一支笔、一张纸就可以让我们聚焦于我们的主要想法进行设计而不会被视觉设计这样的旁枝末节所干扰。设计必须与我们观察到的观点清晰地联系起来,还需要描述出大概的应用程序流程以及这个流程是如何实际解决我们设计的问题的。

针对寻找志同道合的人而设计

使用纸质移动设备样机和UI元素是一种确定app用户体验的好方法。

针对寻找用户感兴趣的活动而设计


04

可用性评估

下一步是利用尼尔森十大可用性原则评估我们的应用。

我们首先进行了一次自我演练,理顺应用的流程和交互。随后我们进行了面对面测试,让用户与我们的纸质原型进行交互,同时了解他们对应用的想法和意见。这些观察结果被记录下来,后期整合成可用性原则列表。我们对确定的问题进行了分类并进行优先级排序。在可用性评估过程的最后,我们使用Talkabout或Google Hangouts对我们的应用进行了远程评估,我们评估了竞争对手的纸质原型,记录了违背可用性原则的地方,同样,他们也对我们的设计进行了评估。

可用性测试可能是设计应用时最有用的过程。它能帮助我们在设计过程的早期发现问题,找出哪里可行、哪里违背了可用性原则,并构思新的替代方案,同时,还可以帮助我们修正细小的错误和bug。这就大大降低了后期重新设计和失败的概率。外界的参与是很重要的,如果我们自己单枪匹马地去做设计,往往会看不到自己设计的不完美。可用性测试应该在每个设计阶段和有重大的系统变化时进行。

最终,经历了所有测试之后,我们将结果全部整合起来,提炼出最终的解决方案,围绕这个方案设计我们的应用。我们还制定了一个开发计划,为每个设计任务分配预估的时间和所需的努力。


05

线框图

我们从做低保真线框图开始我们的视觉设计阶段。现在,我们先不用考虑字体、颜色和图像。我们首先创建关键的UI元素、信息排列、层级结构以及用户交互。

线框图

因为这是一个个人项目,我决定按照iOS人机交互界面指南来进行设计。

这一决策背后有两个原因——

1、我之前没有为iOS设计过,所以这么做能让我熟悉一个新的设计系统与交互方式;2、到目前为止,我设计的所有应用和网页界面几乎都是基于材料设计和卡片式UI。因此,我的挑战是避免熟悉的设计风格,并使应用让人感觉很直观、易用。

线框图 (Contd.)


06

视觉设计

在完成线框图和信息设计后,我们来到了我们最喜欢的设计阶段!我们的应用的视角设计效果已经完成了,为我们的原型设计做好了准备。

主页面——这个应用将用户流程分为两个主要任务:

1、组建活动2、在周围寻找同伴和活动

主页面和两个主要任务

底部导航栏能让用户快速访问应用的主要功能,利于促进社交互动。

活动创建

创建一个新活动的步骤被简化为一个简单表格的单一页面。应用内的所有活动都被分类为各种标签并可以被搜索。你可以邀请成员到你的活动中,或是公开活动,让其他人请求加入,甚至可以让他人对外分享该活动。

创建一个新的活动

寻找同伴和活动

用户可以寻找附近的人或他们附近的活动,根据兴趣、距离、社会关系等对搜索结果进行过滤。“Look Around”这一功能从一个简单的问题开始,询问用户他们正在寻找什么。用户可以选择类别,也可以针对兴趣的搜索匹配的结果。搜索结果分为“活动”和“人”。你可以点击展开列表的箭头获取详细信息和发送请求。

“Look Around”功能

另外,为了利用iOS的一些功能,我还为搜索结果页面设计了Peek-Pop手势功能(Peek手势专注于预览,Pop手势可以全面展现内容)。

活动页面的Peek手势

人员列表页面(左),按住不放(右)然后用Peek手势(中间)

尽管可以保留像iOS这样的设计系统的细微之处,但在解决应用的用户体验需求时,不应该受制于它们。

(从左到右分别为)信息、个人资料、我的活动、通知、社交


07

原型

原型帮助我们了解使用应用时的真实感受

当我在进行设计和原型制作时,许多挑战和变化出现了——

  • 改变导航模式,让用户更好地理解不同页面的功能,避免重复任务。
  • 信息编排——某些页面有太多文本了。我需要重新构思如何以更简洁的方式展示信息,而不是让信息淹没用户。
  • iOS标题大小出现错误——我弄乱了状态栏和应用栏的大小,因此在完成所有线框图和视觉设计后,我不得不修改所有页面上的这一错误。

这证明了设计是一个持续迭代的过程,我们需要精益求精。


08

用户测试

最后,我们对原型进行实际的用户测试。

我们制定了一个测试规则,列出了执行测试和告知用户的步骤和角色。我们告知用户他们被记录的方式,签署表格征得同意。测试完成后,我们用一种有意义的方式汇总结果,从而发现我们的设计还有什么问题以及需要完善的地方。

从这次初步测试中我们列出以下需要改善的地方:

1、更改主页面右上角的图标,换成文本标签“我的活动”。2、允许用户快速查看“我的活动”里的事件。3、重新设计个人资料页面的列表试图,让它看起来更有吸引力和感染力。4、新增隐私功能,限制社交关系和非社交关系的人可见的信息。5、重新设计“共享利益”表,其实测试人员没有注意到它,但在后来的问答时才意识到这个问题。


09

测试变化

最后的任务是采取上述列出的其中一个变更要求,重新设计应用。这个变更需要是一个可以以二进制方式量化的实体(例如,单击按钮、使用过滤器、执行操作等)。

我的第一个变更是将“我的活动”图标按钮替换为文本标签按钮,因为在初步测试时我们观察到用户不理解图标的含义,点击图标按钮后对进入到的下一个页面感到困惑。

我使用MarvelApp准备了两个URL,并使用UserTesting.com进行测试,参与者使用原型,说出自己的想法并回答测试脚本上的问题。这次测试颇有收获,我们发现将“我的活动”图标改成文本标签确实是有用的。

其他所需的变更——

1、设计一个注册和入门页面向用户介绍App的目的和功能。2、将人员搜索和活动搜索区分开。3、使文本在图像上更易读。4、在活动结果中增加“类似活动”按钮,让用户更自由地探索兴趣。5、添加更多类别。


10

总结

社交应用正在从单纯的线上社交转向在现实中拉近人与人之间的距离。如果把应用的体验和交互做好,了解不同用户的潜在需求,我们就可以创造一款强大的产品,以一种有意义的方式把人们聚集在一起。Fippl的第一次迭代就是在尝试实现这一目标。随着应用的创建和第一轮的实际使用,以后还会有更多的变化。

除了创造产品之外,这也是一个很好的练习锻炼,可以把在交互设计专业所学到的所有技能都运用起来,比如,以人为本的设计、设计原则、社会交往、输入与交互、用户体验研究与原型设计、信息设计、应用运行与实验分析。如果我们按照结构化的循序渐进的方法来做设计,不断地把用户的需求牢记在心,通过设计来解决问题,那么设计将会是一个更有生产力和创造性的过程。


相关阅读

用户界面发展的下一步NUI

面向老年人的教育:UX的未开发领域

案例研究|在线学习类的应用如何将它设计得更好?

最好的界面是没有界面:为什么我们并不总是需要一个App?

用户体验设计案例研究 \| 一款帮助用户更健康地使用手机的APP


ABOUT US


参考文章:

查看链接 ↗

作者:Rohit Nigam

译者:太上老菌

原文请戳【阅读原文】

为尊重版权和译者

转载请联系我们

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询