我想看看我能有多大的创造力,所以我对Instagram进行了重新设计

原文链接:https://medium.freecodecamp.com/ins-redesign

作者:Kim Thuy Tu

翻译:  nicoDrum


Me, attempting to make sense of all the data from my research with post-it notes and my Gator shirt.

我给自己定的挑战:选择一个我喜欢的而且每天使用的app,然后对它进行重新设计,看看作为一个设计师的话我能有多大创造力。

  我之所以选择Instagram是因为在2011年,也就是Instagram诞生了一年之后,我就已经是Instagram的用户了。

  一开始,我使用Instagram是因为喜欢它的滤镜。但这六年以来,我见证了这款app的所有改变和创新,现在我使用它是为了能够展现我自己,和现在的趋势不脱轨。

  也许你们会说我是一名Instagram的员工吧。

  边注:我并没有在Instagram就职,以下的这些对于这个案例研究的想法意见也都是我自己的。我不像那些在Instagram工作的的设计师,我手上并没有那些对于他们的设计至关重要的用户数据。所以,我这个项目研究并不是那么详尽的,我也没有想过要Instagram公司放弃他们现在的设计而采用我的(设计)。

Some screenshots from my redesign

对于开展这个项目的个人目标:

  对于重新设计的目标:

  在浏览和连接的时候让它更加迷人,无缝结合。

  • 设计一个更加直观且人性化的用户界面。

  • 通过用户的体验感受来设计

  对于个人发展的目标:

  • 学会如何组织分析用户调查,创建流程图和线框图,通过Sketch进行设计,通过Principle制作动画,通过Invision创建模型。

  • 从头到尾查看我的完整工程请点击my design principles

  我在这个重新设计的过程中扮演的角色:

  • 用户调查者

  • 数据分析师

  • UI/UX设计师

  • 产品设计师

  为了文章的简洁我没把我的草图和线框图放进来,如果有意浏览可以戳这里

了解Instagram这个公司

  Instagram是个通过视觉讲故事的应用,为用户提供了一个分享生活中美好瞬间的平台。自从Instagram在2010年的首次亮相以来,它的用户以数以百万计的速度增长着,使全球各地的人们能够连接在一起,分享他们的生活瞬间。

  为了跟上它的成长速度,Instagram保持不断创新,提出了它的使命“sharing the world’s moments”。

我的用户调查和相关数据:

  在我开始我的这个项目之前,我采访了40位Instagram用户来弄清楚我的项目是要为谁设计的:

  • 一个正常的Instagram用户长什么样?

  • 他们使用Instagram的原因是什么?

  • 什么能使他们重新使用Instagram?

我通过了面对面、打电话等方式采访了这些Instagram用户。


目标观众人口统计

  在我采访的40个Instagram用户里,10名是男性,30名是女性。男性的年龄在22到27岁之间,女性的年龄在19到25岁之间。其中65%是大学在校生或者是想追求更高教育的高校毕业生。

  我个人觉得这是个公平的Instagram用户基础代表样本,因为90%的Instagram用户年龄都在35岁以下。而且,在美国所有的18到29岁的人中55%是Instagram用户。

  更有趣的是,我调查的用户里,67.5%的人把Instagram列为他们最常使用的三大app之一。另外,这里面72.5%的人每天使用Instagram。

有趣的事还在继续着

  我让我采访的40位Instagram用户使用三个形容词来描述Instagram。我的问题是你觉得Instagram怎么样?Instagram用起来感觉怎么样?

  我收集了总共64个形容词,其中前三名是CreativeFunSimple。

  我还问了他们喜欢Instagram的什么。一下是排在前三的原因:

  1.基于图片

  2.使用简单

  3.使人们保持联系

Some of the people I interviewed

  你还联想到了什么吗?你是否像Alex一样,用Instagram分享自己的日常生活,通过搜索功能去发现一些很酷的事情?又或者像Sam一样,使用Instagram就是为了与朋友保持联系?还是你两者都有?

  无论哪种方式,我都会时刻记着像你们,Sam和Alex的用户,为你们进行设计。

  既然你们对于我为谁而设计的问题有了更深的了解,那我们就可以继续深入了解这个好东西啦!

Experience #1: 主页


Assessment of Instagram’s current home page

  除了主页里几个重复的功能,我还注意到了三个重要的问题。

Problem #1:内容过多(Instastories vs Feed)


credits to xkcd.com

  打开这个app之后,为了能够吸引你们,你会发现两个互相独立的基本选项——那就是选择继续滚动屏幕看instastories还是点进去浏览图库。

  两个选项都是过度内容饱和的,就像一个无尽滚动的天坑。根据选择的悖论的相关研究,过多选择会造成决策疲劳,快乐感减少,和一种害怕错过的罪恶感。特别是考虑到在我采访的过半Instagram用户里,很多人经常一醒来或者晚上睡前一上床就刷Instagram。

  边注:2016年我决定用最少的颜色来重新设计Instagram,因为我在一个天才那里得到了这个决定原因和逻辑的启发。详情可以这里阅读。

至于解决方案,我决定直接将stories整合进摘要里,原因如下:

  • 图库和stories将一起为促进更有结合力的用户体验服务。

  • 将stories和图库整合在一起也是为了防止它成为一个Julie Zhou(脸书的产品设计VP)所提到的“屋顶甲板”。在现有的Instagram设计里,一旦用户开始往下刷时Instastories很容易被遗忘,这就叫所谓的眼不见心不烦吧。


  • 把stories和图库整合在一起之后,现在它将在一个固定的时间表上进行操作。对于任何目标行为来说这是能产生最高响应的最强有力的操作条件,在这种情况下,Instastories诞生了。

边注:别担心,我并没有要丢掉Instastories,我只是把它们移到了消息收件箱里,你们只要主页右上角就能进入。我将会在下面更深入地讨论。

Problem #2:顶部导航栏和滑动手势的分离

  通过用户调查,我要回答的其中一个主要问题就是Instagram主页上的滑动功能是否直观。

  只不过,Instagram用户清楚左滑右滑手势和顶部导航栏之间的关系吗?

  为了回答这一问题,我在采访者中进行了一个相对简单的实验。

方案(n=40)

  在我进行这次实验之前,我让这些用户不要去看Instagram上的这一部分。然后我让他们准备好通过向我从头到尾描述Instagram经典简介页面的布局来设想Instagram的界面,再然后就是主页。我问了他们四个简单的问题。

  关于滑动:

  1.在主页上,进入哪个地方你需要从左到右滑动?答案:相机到照片到Instastories

  2.在主页上,进入哪个地方你需要从右到左滑动?答案:消息收件箱

  关于顶部导航:

  3.在手机屏幕上你怎样拍你的Instastories?答案:顶部左侧相机图标

  4.你怎样进入你的消息收件箱?答案:顶部右端“箭头”图标

  注意:如果用户用左滑或者右滑来回答这部分问题,我会让他们做出另一种回答。(比如你知道进入xxx的另一种方式吗?)

  这里是我收集的所有数据

  基于我的调查结果,总体来说关于Instagram滑动的知识并不是那么令人满意:

  • 只有20%的人正确回答了两边滑动的反应。

  • 30%只对了一半,50%全错了。

  • 50%的人知道从左向右滑能进入相机。

  • 20%的人知道从右向左滑能进入消息收件箱

  顶部导航栏:

  • 72.5%的人知道通过点击顶部右端箭头图标进入他们的消息收件箱。

  • 55%的人知道通过点击顶部左端相机图标进入相机拍Instastories。

  一些其他的有趣数据:

  • 40个被采访者中只有3个人答对了全部问题。

  • 在一个关于Instagram导航栏熟练度等级为1-5的调查中,75%的人觉得他们达到4或者更高,其中只有30%的人答对了上面关于滑动手势至少一题。

  • 高达92.3%的人觉得向左滑会进入搜索界面(这就更加有必要把搜索图标在底部导航栏上与home图标放在一起)

  经过对这些结果的分析说明了Instagram用户还没意识到顶部导航栏和滑动手势的联系。

  “我不知道,知道我看到了我所看到的我才发现,我突然看到了我的脸......”——某Instagram用户被问到如何找到消息收件箱的时候说道。

  一种使滑动手势更加直观的方法可能是将它与底部导航联系起来。然而,这对我来说可能是个好机会去创造一个新的功能。。。。。。

通过滑动查看新老的照片

  我的用户研究有一部分是app store上Instagram的评论。其中抱怨最多的就是Instagram动态没有按时间顺序展示。

  我想知道的是为什么用户们希望Instagram是按时间来显示动态的呢?他们为什么对这个改变如此不满?通过进一步挖掘,用户觉得按时间顺序他们的浏览才能彻底。根据Instagram现在的算法,最受欢迎的照片会被放在动态的最顶部,这就使得一些用户会错过一些他们想看的照片。

  为了协调Instagram现在的算法和用户想要按时间顺序展示动态的需求,我决定给这一滑动功能添加一个指示器,以给用户一些满足:

  举个例子,如果指示器在中间的时候,你就会知道这不是最新的照片,你就可以右滑查看新的照片。如果指示器在最左边,你就可以放心了,这就是用户最新的照片。想看早一点的只要轻轻左滑即可。

credits to xkcd.com

Problem #3:左上角——够不到心不烦。

  握手机有很多种方式。不管人们怎么拿手机,左上角永远是最不方便最让人痛苦的地方。

  而研究表明最适合放置导航栏的地方是接近手机屏幕的底部,因为底部接近用户的拇指。

  从我的数据来看,接受采访的人都知道怎样发照片发动态(因为他们平时用它)。然而57.5%的人不知道怎么拍Instastories或者从不使用它。为了提高Instastories的使用度,我将这两个功能合并起来,理由是1)拇指更容易够着。2)不用再花时间去普及Instastories。

Experience #2:查找模式

  现在你可以通过Instagram已有的算法自发地查找或是通过使用“#”标签来进行搜索。所以Sam和Alex只要打开“#ecgtracing”或者“#fitness”就可以更新他们的动态。

  要是我的话,我可能会打开“#coffeefliicks”和“#dametravelers”来浏览一些关于咖啡和景点的美图。你也可以点击“#”来每次浏览一张然后再往下拖一起查看所有的标签。你还可以添加新的标签,删除标签或者在你收藏的标签里进行搜索(当然地,它是按字母顺序排列的)。


Experience #3:滑进相机和instastories

  我采访的用户里只有42.5%的人使用Instastories,其中两个主要原因是1)他们已经有Snapchat了。2)他们经常会看到一些他们并不是特别关心的人的Instastories。

  为了解决第二个问题,我添加了一个叫“Stories From Your Favs”的新功能,以此来使更多的人使用Ionstastories。现在,为了你能更方便地浏览,你喜欢的人,你崇拜的人的Instastories都在你屏幕上方。交流保持联系!

  你可以通过点击用户名字旁的爱心随意从你的favs里移除或者添加用户。


  边注1:我将Instastories移进相机的原因是什么?首先,把Instastories从首页上移除后我需要一个位置来放它。其次,当你要发送照片或者Instastories时,你只需直接进入消息收件箱。因此,将Instastories和相机放一起就显得很有必要啦。

  边注2:现在的消息收件箱没有底部导航界面,如果用户知道如何使用滑动手势他们也会知道如何回到主页,而正如我上面提到的——只有20%的人知道向左滑能到达相机。因此我决定保留底部导航栏,这样用户才不会感到迷茫。

Experience #4:通知和简介

  啊哈哈哈...最后一部分了。关于通知和简介页面,我想通过添加一些负空间和群聊之类的来给用户界面更多可扩展的空间。


  而且,你可以直接在你的通知页面里通过长按用户名来给人点赞或者评论(短按进入用户简介)。当你按住用户名使会触发出一个自动@用户ID的评论盒子、然后你只要输入你的评论或者点赞就行了。

  我认为这项功能会很有用,因为你会经常迷失在评论的海洋。他们的用户ID是什么?那条评论在哪里?那条评论说了什么?

“关注”通知

  今天最后一件有趣的事——只有35%的用户要浏览遍他们所关注的人的动态。是否保留这一功能是我最难做出的一个决定。最终我还是把它保留下来了,并通过放大照片功能对它进行稍加改造来获得更多关注。

简介

  说实话,我挺喜欢Instagram现在的设计的。为了发扬极简主义,我给这些图标做了些轻微的变化并添加了一些负空间来保持设计的一致性。

总结一下我所做的工作

  进入这项工程后,我知道这会是一个很好的机会磨炼我的设计能力。我刚从上学期的医学学习中转换过来,我想要追求一份产品设计的事业。所以我认为对我来说最好的学习方式就是将我自己投入到一项工程其中去,然后从那里起飞。

  现在回溯过去,好像轻描淡写地就完成了这项工程。在两个月里,我能够学会所有我为了解决一项项目而着手去做的事情,乃至更多。

  我认为关于学习和创造的过程最好的事情就是你开始组织规划你自己。你学会了什么是有用的,什么是没意义的。你学会了怎样做事更快更好更高效。通过这种方式你可以学会任何你动手去做的事情。

  最重要的是,这过程并未结束。学习的过程是持续不断的。

  “设计并未变得简单,但你变得更好了。”

  这次就到这儿吧,感谢阅读!

可以点击这里查看我的完整交互原型

(温馨提示:以上链接需自备梯子)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,042评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 刘双鹤,焦点解决讲师一期班,平顶山,成长分享第657天(2017.10.22星期日) 忙碌充实的周日 上午少年班二...
    在路上_1阅读 337评论 0 0
  • 文/鸿运 走进春天 一切来的突然,冬天的面孔紧紧绷着脸。 走进春天 飞雁还在天边,冰川依旧耀眼。 走进春天 草木躁...
    HONGYUNDANGTOU阅读 279评论 7 3
  • 回看《up in the air》 记不起喝第一口啤酒的味道,忘了点一根烟的用那根手指,但很多人都在追忆之前的感受...
    Drrick_DJ阅读 246评论 0 0