LOFTER 5.2.1版本信息架构改版设计说明

信息架构设计是对产品所有信息设计有序的结构和组织,并进行合理归类的过程,是一切产品在流程和具体页面的交互设计前必不可缺的准备工作。本篇将以LOFTER为研究对象,模拟进行升版前的信息架构设计。由于并非正式真实项目,这次版本修改的目标仅以简单的优化用户操作体验为主。

1. 概述

LOFTER是一款典型的图片社交类产品,作为图片社交类产品,用户使用产品的目的是通过发布图片和观看他人发布的图片从而结成社交关系,因此用于关注的“首页”、用于提供陌生用户相遇机会的“发现”、用于查看自己的发布内容和个人信息的“我”、用于查阅社交数据的“消息”以及最重要的发布功能,几乎已经成了这类产品标配的五大元素。

而五大元素在包含大量内容数据和社交数据(当然, “发布”功能是个例外)的情况下,其庞杂的信息如何进行有序的整合和组织,就成了一个有趣的问题。下面就跟着这三款产品的分析来了解一下吧。

2. 竞品信息架构分析

对创新设计模式、架构横向对比而言,国内主流的同类产品是最常见的竞品分析对象,而产品自身的历史版本在优化细节体验方面也是一个近在身边的优秀竞品。

本节主要挑选了国内三个主要竞品进行升版前的信息架构对比工作——Nice、图钉以及LOFTER自身的现行版本(5.2.1)。

2.1 信息架构树状图

三个产品的信息架构树状图分解:

Nice:

图钉:

LOFTER现行版本(5.2.1):

2.2 一级结构

概述部分已提到,图片社交类的五大元素已有形成“标准”之势。从三个APP的一级结构也可以看到,它们都完全一致地分为5个部分,在底部导航栏上Tab的排列顺序也几乎一致——从左至右依次为,首页、发现、发布(位于中间)、消息、我的(或“我”),仅有图钉的“发现(图钉墙)”和“消息”两个Tab位置相反。

2.3 首页

首页主要用于呈现使用者所关注用户的发布内容,形式基本都是以卡片列表为主。而在这一基础功能之外,三者的具体结构和附加信息各有不同。

LOFTER将首页内容分为“关注”和“订阅”两个标签页分别展示,并在右上角设置了“添加关注”的入口,“添加关注”页面又分为“猜你喜欢”、“同城热门”、“微博好友”三个Tab。
与LOFTER类似,图钉的首页设有一个“钉友圈”入口,其中包括“关注”、“粉丝”、“添加好友”、“星客站”、“兴趣推荐”、“附近的人”、“人气用户”等多个列表项。
Nice的首页则较为简洁,基本的推送内容外的其他入口则较为单一,仅含有一个“好友推荐“入口。

2.4 发现页

发现页主要存放与推荐有关的信息。三个APP的发现页的主体都由几个较为醒目的子页面入口、推荐内容列表、搜索框构成,分别满足了发现页的分类、呈现和搜索三大主要功能需求。

LOFTER在Banner下方的泳道提供了进入绘画、摄影……运动等15个“精选推荐”子标签页的入口,再向下依次是标签推荐和达人推荐。图钉的发现页则由人气、星动态……附近动态等8个图片列表作为进入子页面的入口。Nice的发现页则由直播、附近、好友赞过共3个子页面入口以及“为你推荐”列表组成。
区别在于界面的右上角,LOFTER设有与首页同样的“添加关注”入口,图钉设置了一个去向“活动”页面的入口,Nice则没有设置主要内容以外的组件。

2.5 发布页

发布内容作为一个图片社交应用中较为成熟的模块,“选择/拍摄-裁剪/编辑-输入文字/确认”三步流程并没有太多差异可言。在本节所选的3个应用中,Nice和图钉都支持视频发布,LOFTER则只支持图片发布。

图片发布方面,三个应用都支持选择相册图片和拍照两种图片发布方式,流程遵循 “选择照片/拍照”、“编辑照片”、“编辑内容并确认发布”3步,信息架构方面的区别在于入口的位置。其中,LOFTER和nice的“拍照”功能是作为进入发布流程第一步的界面后的一个可选项,图钉则直接将“选择照片”、“拍照”两个按钮与“视频”按钮同时置于主页面上。
视频发布方面,Nice是以“直播”的形式发布,分为“直播设置”和“发布直播”两个步骤,而图钉的视频发布则与照片发布流程类似。

2.6 消息页


LOFTER和图钉的消息页共同点较多,二者都涉及了通知类(新的粉丝、喜欢、评论、通知等)和聊天类(图钉中为“私信“)两种消息形式的页面入口,其中,LOFTER的通知类集合在“消息”选项卡下(消息“选项卡”下还有“专题”入口),而图钉的通知类入口则与聊天类同时置于消息页顶层。在这两类消息之外,LOFTER的消息页还有第三个标签页“动态”,用于展示关注者的近期活跃情况。Nice的消息页(“私聊”)则只包含聊天类消息,并将所有对话直接列出,此外,Nice的消息页在右上角还提供了一个“纸飞机”功能入口。

2.7 “我”页面

“我的”或“我”页面用于设计个人资料和设置两大主要内容。

三个APP的“我的”或“我”页面都由一组个人统计页入口(头像、关注数、粉丝数、发布数等)和一组设置列表构成。其中,LOFTER和Nice的“我的喜欢”、“我的粉丝”、“我的关注”在作为个人统计页一部分的同时,也出现在了列表项中。在个人资料和设置入口外,LOFTER的列表项中还包括 “乐乎印品”、“福利市集”、“摄影课堂”三个推广类入口,而Nice中还包括 “我的消息”入口——因其消息页仅显示聊天类消息。三者具体的设置选项也或多或少存在一定的不同,在信息架构设计阶段不再对细项进行过多的阐述,详情可参见树状图。

3. 用户调研

3.1 调研方法:卡片分类法

用户调研阶段,我们将LOFTER现行版本的关键子功能点的名称列在一系列卡片上,让受访者首先根据自己的理解对卡片进行第一次分类和组织,并对每一组卡片起一个较大的类名。然后再根据第一次归类结果,请用户进行第二次归类,将各大类中的卡片进一步归为更小的类别,并起一个合适的名称,此时的类名不一定是精炼单个词语,符合用户自身理解的描述性短句亦可。当然,如果用户认为确实无法继续细分则保持第一次分类的结果即可。
最后,经用户确认的卡片分类结果如图所示(选取3个质量较满意的调研结果)。

结果1

结果2

结果3

3.2 调研结果

就结果而言,受访者的卡片归类都与LOFTER实际的信息架构存在一定的差异(有的甚至大得让人意外)。有的可能局限于用户对功能点的理解,例如,3份结果中,用户都将原本分别是通知类和个人统计类的两个功能 “喜欢”和“我的喜欢“分在了一组,可能是过于相近的功能名称对用户的干扰较大。
而有的则也许真的说明现行版本的信息架构方面存在一定可优化的余地,例如,3份结果中,“动态”都与“关注”分在同一组,使用者关注的用户的动态与其自身发布的内容是联系紧密的有机整体,现行版本中将两个功能分别放在首页和消息页的做法有待商榷。综上所述,这些差异无疑对现行版本信息架构方面存在的问题和潜在的创新思路提供了重要的参考。
通过调研结果与竞品的对比,经整理和重要性分级,我们产出LOFTER改版后的信息架构方案如下图所示,具体改动说明详见第4部分。

4. 改版设计说明

由于本次改版主要关注整体信息架构方面的优化,布局和流程方面的细节有待后续阶段中进一步研究和优化。同时,由于是基于成熟版本的小规模优化,本方案未对主体架构进行大幅度的调整,未发现明显问题的设计基本都予以保留。结合竞品分析和用户卡片分类调研结果,从架构合理化和精简方面,考虑对以下6个方面进行修改:

4.1 取消重复且与栏目主题不符的Banner

“关注”标签页取消Banner,以避免与发现页的轮播Banner重复,让“关注”页内容更纯粹地专注于所关注用户的动态。发现新的、有趣的推送内容,是“发现”页该做的事情。

4.2 内容类推荐更加集中

将原位于消息页“消息”标签页中的“专题”(包括“发现更多专题按钮”)移至发现页,更加容易让精心制作的专题被用户看到,而不是含义不明地出现在主要用于呈现消息列表的“消息”页。

4.3 用户类推荐同样可以更加集中

将原位于发现页底部的“达人推荐”移至“添加关注”页,作为第4个标签项。
一方面,使发现页更专注于发现内容而不是关注用户(这是首页“关注”标签页的主要功能),另一方面,也使得长期位于具有一定长度的“标签推荐”列表底部的“达人推荐”功能具有更高的曝光率。

4.4 “TA的东西”和“TA喜欢的东西”——让我在同一个地方看到

将原位于消息页的“动态”标签页取消,而好友喜欢某图片等操作加入首页的“关注”标签页,与好友发布的内容一同按时间线排列。在卡片分组的调研中,作为一个共性结果的是“动态”与“关注”基本都呈关联性的存在,即使其名称或许与社交板块有所关联,但个人认为既然其内容是其他用户喜欢的人和内容,而不是用户之间往复的消息内容,就不应该放在“消息”栏目中。图钉和Nice两个竞品的消息页都没有与聊天类、通知类两类消息无关的信息。因此,结合卡片分类结果,个人倾向于将其作为首页“关注”的一部分。既然是“关注”,那么用户关注的应当是follow的用户完整的动态,而不应把发布操作和“喜欢”等操作割裂开来。

4.5 “先让她看到羊群再挑羊”

对“首页”的“订阅”标签页进行改版:进入“订阅”标签页后直接显示全部订阅标签的推送内容,个人认为让直接呈现内容的界面层级浅于分类列表的层级,避免在看到内容前先进行一次面对大量标签(如果用户关注的面足够广的话)的选择过程,更有助于用户接受并习惯这一功能。并且,根据我与受访者的了解(包括我个人的体验),用户在查看自己的订阅时,并不想只看其中一类——至少最开始不想,尤其是看完一类再想看另一类时需要经历一次“返回-再从列表中找到另一个标签名-再进入”的操作,徒增用户的厌倦感。因此,改版中考虑默认呈现的是所有标签的混排内容,而当用户此后只想看其中某一个标签时,只要通过左上角的下拉列表控件,即可在同一界面内实现标签的切换。

4.6 精简冗余的入口

取消“我的”页面中点击用户名进入的下级个人详情页,而将包含头像、喜欢数、关注数、粉丝数、发布数、编辑个人资料入口一同作为个人封面区直接呈现在“我的”页面顶部,避免信息重复和冗余,也使个人封面和重要数据的显示更加直观,并使修改个人资料的操作层次更浅。

5. 站点地图

改版后的核心页面站点地图如图所示,对应的核心界面线框图原型请点击链接

Qinsman wechat
关注我的公众号,一个卖馒头,也卖故事的地方:)