【案例】LOFTER 信息框架改版(iOS版)

对于一款APP的信息框架改版,可以分为以下几个步骤

  1. 竞品的信息框架分析

    目的:找出差异点和共同点

    作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻找用户的一些习惯认知/操作。

  2. 功能卡片分类

    目的:了解目标用户对功能点的认知。

    作用:通过卡片分类,可以了解到用户对功能点的认知,用于优化信息框架,以及功能点的重新归类。

  3. 根据前面的分析,优化新的信息框架
  4. 输出优化后的交互稿

具体内容如下:

一、竞品信息框架分析

竞品一:足记 APP(3.2.2  iOS版)

这是一款图片社交软件,通过发布自己的图片,与他人进行社交互动。最大的特色在于将电影里面的取景地跟用户拍摄的照片做一个结合。
1467337706-1285-tD1FLp-HziZ8D0UNscesLg

竞品二:nice  APP(3.9.9  iOS版)

这也是一款图片社交软件。

特色主要有

1、每张图片都可以添加多个标签,通过添加标签让用户之间有一定的互动性。

2、有一个匿名交流功能,叫纸飞机,类似于漂流瓶的方式,不同是以图片在媒介。 3、支持视频直播功能(目前还处于少量用户体验阶段)。

1467337706-1224-8QXHFchI8DVLDZ4WFI7xDQ

竞品三:Instagram APP(8.0 iOS版)

这是国外的一款图片社交软件。相比国内的几款同类APP来说,它的功能没有过于杂乱,整体都是围绕图片分享社区这样一个思想来设计。

它更注重交流这个功能,有一个Direct的功能,类似于收件箱,可以实现“点对点”的图片信息交流。

同时拥有强大的图片美化功能。

1467337705-2905-fqNa89FzDsd6gbv7iCqItA

LOFTER APP(5.2.1 iOS版)

相对而言,LOFTER一样没有太多杂乱的功能,专注于图片分享功能。通过话题活动,提供整体社区的活跃度。

在同城好友功能下,LOFTER展示的是附近用户的信息,而不是附近用户更新的信息,这点也不同与其它竞品。可见LOFTER更希望用户从这个平台上认识新的朋友,形成自己的社交圈。

1467337712-7941-o3TruUC772cMTg7b-u6lhQ

总结

这几款软件基本都是以图片为核心的社交平台APP。

整体的信息框架基本上由5部分组成:

首页(关注的内容更新),发现(强化社交功能),发布(核心功能),信息,个人中心(包含其它次要功能)

而且“发布”功能都是这类APP重点突出的功能点。

足记:

以“电影取景地”为核心,通过普及电影知识,告知用户附近有哪些电影取景地,引导用户去发自己的图片,再通过分享,让其它用户参与互动讨论。另一个渠道则是将用户拍摄的照片,处理成电影风格,给用户带来一定的社交筹码。

用户发布的内容,大多数与电影相关,内容多偏向文艺范。

nice:

相对同类APP,特色点较多,包含:有图片添加标签,纸飞机匿名交流,直播互动等特色功能。这些功能都想强化社交这个属性。

用户发布的内容,偏向日常生活化,整体用户偏向低龄化。

Instagram:

功能简单,没有过多的附件功能,让用户专注与图片分享这个核心点上,拥有的Direct功能也是少见的,其美化图片的功能也是亮点之一。用户发布的内容,偏向日常生活化。

LOFTER:

专注图片分享的轻博客,从现世至今,一直要强化社交功能点,也带来很多新的附加功能,如乐乎印品,福利市集,摄影课堂等。在社交发展方向上,更偏向于为用户发现“同道中人”,形成自己的“社交圈子”,这点与nice的社交发现方向有些差异。

用户发布的内容,偏向于文艺范。

二、功能卡片分类

从LOFTER的信息框架中,提取了36个功能点,并找了3名用户进行卡片分类测试。在提取功能点的名称时,尽量做成用中性词,比如将“分享LOFTER”改为“分享 APP”。另外找的这三位用户都体验过LOFTER产品,再测试之前,也对卡片的功能点进行简单的介绍。

具体功能点如下:

关注者动态、私信聊天、新的喜欢、新的粉丝、新的通知、新的评论、新的专题活动、上传图片、美化图片、完善图片信息、同步管理、可见性管理、精选 内容、标签推荐、同城用户、达人推荐、微博好友、推荐用户、搜索、我喜欢的内容、我的粉丝、我关注的用户、个人主页、参与的标签分类、福利市集、乐乎印 品、关于APP、分享APP,意见反馈、偏好设置、夜间模式、清理缓存、帐号绑定、隐私设置、版权设置、退出登录。

1467337712-6705-Tv6e3WzCuf6bgVcDBD-6EA
1467337710-9148-oGrK7WJJsr3TLk0uTQXM0w
1467337724-5941-aHR24oGp8b3uQtSr-33cHQ

三位用户的分类结果大同小异,其中有几个值得留意的点:

1、用户2把“微博好友”的功能归为个人设置分类里。

进一步了解用户这样分类的原因时,用户的回答是“这个不是关联新浪微博后,就一次性把好友自动添加好吗?后续还会用到?”后续跟用户2解释后“微博好友”的功能,但他还是觉得应该归为个人设置里面。再次了解后,才发现这是用户从其它软件培养的习惯,造成这种分类差异。

2、用户1把“福利市集”归为个人信息里面,而其它两位用户都把它归为“推广”分类。

进一步跟用户了解后发现,原来她这样分类的原因是,福利市集每天都可以签到,可以换取自己的东西,觉得这是跟自己关系密切的功能。

3、在这三位用户中,都把“版权设置”归为设置分类里,而原版的分类,则是在发布信息类别里。

通过进一步了解后,他们都觉得发布的内容版权设置,第一次设置好就行了,后续也不会去修改的。这点跟“可见性管理”和“同步管理”有所差异,所以他们都把“全版权设置”归为到设置里。

三、改版后的LOFTER信息框架

1467337725-5838-cmEO5RWSvEqyjvjfa9vwlw
综上,这是改版后的LOFTER信息框架。相对原版,主要修改了以下几点:

1、首页的“订阅”功能移到“发现”页面。

原因:

a、减少首页的度,让首页结构更简单。

b、在观察3位用户使用APP中,发现首页的订阅功能操作步骤有点多,因为这个功能是“订阅分类”,但是在页面中显示的是订阅的分类内容更新数量,如果要看内容本身,需要多点击一次。

c、在首页功能中,用户更关注自己的好友更新了什么内容,对于自己订阅的分类内容来说,更偏向于“发现”这个分类,因为订阅的内容不是他们最关注的,而他们更希望从订阅功能中获得惊喜。

2、信息页面的“专题介绍”移到“发现”页面。

原因:

a、根据三个用户的卡片分析结果,“专题介绍”从信息页面,移动到“发现”页面会更合适些。

b、用户什么情况下会去点击“发现”页面?其中一种情况就是用户想闲逛,看看能不能发现更多自己感兴趣的内容/用户。在这种情况下,“专题介绍”可以也许就是用户感兴趣的内容,或者说,起到了用户闲逛消磨时间的作用。

3、设置功能区里,“夜间阅读设置”移到“偏好设置”里。

原因:

a、现有的设置页面功能“度”数过多,“夜间阅读设置”可归属于“偏好设置”里。

b、现有的版本独立出来,却无法做到一步切换阅读模式。再者,阅读设置可以设置为自动启动,结果用户采用这种设置后,就会减少该设置的使用频率。

4、设置功能区里,“意见反馈”和“分享LOFTER”移到“关于LOFTER”里。

a、减少设置页面的“度”。

补充:

关于前面提到的这点:“在这三位用户中,都把“版权设置”归为设置分类里,而原版的分类,则是在发布信息类别里。”

经过思考后,改版后的LOFTER忽略了用户的分类,让“版权设置”功能保留在发布流程中。

虽然用户觉得版权设置,头一次使用设置后,后续都不会常用。

但如果把该功能放到“设置”页面中,当用户在发布信息时,万一需要改动到版权,就要进入设置页面修改。

这样一来容易打断用户的发布流程,二来用户也容易忘记版权设置藏在哪。

综上,“版权设置”经过思考后,还是放在发布流程的页面中,但视觉上一定程度的弱化,减少干扰。

目前LOFTER的版本是5.2.1,这个更新假设的版本是5.3,因为LOFTER不是一个从0到1的产品,它的用户已经有自己的一些行为习惯,因此这个改版跳过了几个版本,用于慢慢过渡到新的信息框架上。

四、输出交互稿

这部分页面较多,这里只展示首页和发现页这两个主要改版的页面

1467337726-1418-5FPZidS3M9-r1HBb5fpdKA

五、后记
1、信息框架保留模块,不是拆分得越细越好。

早期竞品分析,信息框架制作时。不能把功能点分得太细,一些模块的信息不需要拆分。

比如:用户名、用户头像、用户ID可以直接分为“用户名片”模块。尽量将产品的层级控制到2到3层。

2、提炼卡片功能点时,需要把控好数量,把功能点不能分得过细,可以将一些重叠的功能点合并,功能点之间的关系,也不能出现包含关系。

感谢Mufly分享,原文链接:http://mufly.lofter.com/post/179451_b52f6bc

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16067/

(0)
TinadminTinadmin
上一篇 2016-07-01
下一篇 2016-07-01

相关推荐

  • AB测试告诉你,你以为的设计不是你以为的设计。

    用户体验设计不是忽悠,也许5分钟口水攻势能让前台小妹觉得你的设计非常高大上,但是要让每一个用户对着屏幕上的UI欲罢不能以身相许还需要数据支撑。

    2016-08-29
  • 如何改版一个3亿用户的神奇网站

     #交互学堂#十年后的今天,随着58的业务越来越壮大以及一些创新产品的加入,单纯的形式越来越难以承载业务含义,统一的样式也越来越难很好地满足用户的需求。  为什么要改版 58同城自2005年创立以来在APP、M、PC主…

    2016-11-03
  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • 超越触控的手势交互

    手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

    2016-07-18
  • 【推荐】交互设计工作记录知识总结

    交互细节小结: 1.用Axure画线框图的时候,线框图网页要多大尺寸? 答:让页面缩放至100%,网页伸缩至适合电脑屏幕大小的尺寸,一般也就是真实网页的实际大小,因为很多时候这份线框图要发送给某个没有Axure的领导…

    IxD案例 2015-11-24
  • 12个线框图示例,来自Dribbble的UX设计师分享。

    在设计过程的最初阶段,我们知道很有可能直接选择word或邮件原始需求。但是,用线框技术解决问题有很多好处,它可以节省时间,更易于发现可用性问题,并让设计人员专注于创造可靠的用户体验

    2017-12-26
  • 面向友好用户体验的交互设计:刘老师课件精简版

    浏览网页、手机拍照上传朋友圈、用自动售卖机购买饮料,我们无时无刻地与周边的产品或服务发生着交互。使用过程中的每一个身心感受就是一次交互体验。随着信息科技的发展,各种新产品和交互方式层出不穷,人们也越…

    2015-11-22
  • 闪光的消亡对于用户体验来说意味着什么?

    而 Flash 是一个控制狂,那些拥抱 HTML5 的人往往是渐进增强的冠军。最后,我们的用户获胜。SuAnne 探索途径挑战现状,为现代的 web 设计。 Adobe 公司的决定停止移动 Flash 平台的开发及在 HTML5 相关的努力增加其…

    2014-09-04
  • 5步快速制作移动动效

    Sketch+Keynote双剑合璧:5步快速制作移动动效 2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移动动效提升到了app基础体验环节的高度。…

    2015-04-11