FOR MORE INTERNATIONAL DESIGN IDEAS AND EDGE - CUTTING VISIONS
PLEASE CONTACT ME WITH

Papa4.0 strengthened the improving of topic implement from the view of product and made optimization on several aspects of interaction, such as publish process, interactive strategy and product mode, information structure mode of product, search referral and result, and navigation function area. From the view of visual layer, the whole UI direction has changed from flattening to reflect the product hierarchy in a micro style. Additionally, new orientation about voice has been added for updating logo based on the original concept.

1 / Optimization of publish process. How to guide user by a detailed product function as simple as possible? All the interaction required in each publish stage will increase the operational cost indeed, so a core and clear route is required to lead users to publish successfully only through several clicks without consideration. All buttons from photograph, record and feel completed should be extremely uniformed and definite on layout, size and pattern, in order to avoid the publish process paused as user choose other functions.

2 / the combination of text and icon has also been optimized. Icons in the interface is aim to distinguish the operation from content by using visual method, so that achieve the cleanliness of interface and improve its usability.

If an icon is only used to instruct an operation, which can not be identified and requires assistance form the nearby product archives, this kind of design is failed completely. When a function can be solved through icon, it is ordinary behavior. Users have been familiar with the meaning of this icon, for instance, magnifier refers to search, down arrow with groove means download, heart represents like. When the same icon is needed for several kinds of interactions at the same time, then the usage scenario should be considered in design.

For example, those four operations of follow people, follow topic, publish topic and publish article are all closely related to plus, so it is necessary to think about the interaction position and further confirm the pattern.

Follow people. People is the main body of such operation, so the plus should be smaller and put it on the top left of the icon of people with a round type as same as the head of people. Red means this button is very important, but it is not in the special functional area (such as, up and down navigation, therefore, it should be focused on visual in order to reflect the interior of complicated applications.

Follow topic and relevant things. The pattern of this operation is rounded rectangle, which is as same as the tag of topic. Considering the UI standard of this website, so the button fillet is the biggest circle. As the area occupied by rectangle can make user see it obviously and nearby the topic title, red letter white paper is utilized to avoid the overall centre of gravity shift to right due to excessive colors.

There are two directions to publish icon, such as, the attribute of publish itself is plus, what is the feature of published content and the pattern? (Camera can be considered if it is picture). What’s more, considered the contradiction on identification of follow, the icons of publish should be uniformed as a pattern with picture and voice.

3 / Topic optimization mainly reflected on aggregation of scattered UGC content through some micro topics. A consecutive and visible pattern of interaction and visual is required to lead the user to add tags. The reasonable content can be recommended to users rapidly through tags in the interface to guide new users, so that they can find those people who relative with them soon and they will not feel strange any more.

The aggregated list page of tags will influence users’ habit of checking the update of their subscribed tags frequently.

Habit of integrated tags and product developed among users.If the function of a product is not being used by users, it demonstrates that the users can not perceive the value brought by the function of this product during usage, and thus it is failed to develop users’ using habit. (Papa 4.0)

The function of product can be regarded as an entrance for user, but the relative exits are required to reflect the value of entrance. For instance, user will think it is not significant to add the tags if without the aggregated area of tags.

4 / Find the value brought by tags based on the research of product.Tags become the aggregated page of topic and the common point (e.g. same) of users can be found accordingly, which promote users to have desire and idea to write something in the same topic. As the join of tags received the feedback (nice) from those users who follow this tag as well. In this case, users will develop a specific using habit, for example, I can view the new content from tags. (such as tumblr)

All the examples above are good case of product function, content aggregation occurred by function and using habit, which are closely related to each other.

Although tag is increased in Papa4.0, users will not use it positively as they have not got relative value from it, and this is mainly because users don’t understand tags aggregation is initiated by the function of tags. In fact, the essence of topics and channels can all be aggregated by tags, and each kind of product in the channel is a specific tag. Topic is the aggregated tags based on life, while channel is the integrated tags based on content. In this case, a core module of article has been recognized from the view of product structure, such as, picture, voice and tag. Tag is a bond connected to the operation of the whole product and users. From the aspect of whole strategy of product, Papa 4.0 should be identified as social application based on life and interest.

5 / Interactive strategy of discovery page and product mode optimization.The main logic of discovery of papa3.0 is chronological order, and then followed by artificial recommendation.

It is too difficult for user to find the new content based on the discovery guided by time, old content need to be checked each time, and there’s no reflection of the accumulation of good content. In that case, users may think there’s no content I like as the recommendations in this period didn’t coincide with users’ preference. While the discovery of instagram is to call up the logic that user like it best and push to users through the calculation in a period of time. The length of page is one and half screen, the content of whole page will change when user refreshed each time. Therefore, user can find the high quality content that changing all the time by low cost. It is aim to reduce the cost and make a good accumulation efficiency of good content.

The attribute of discovered product is different from feed, which is the second important of all products. After seen the new content from the people he followed, the user will find that he is the entrance to seek for new relationship.

The service condition of feed page is that people followed by user have been filtered, so the tendency of content can be guaranteed.

The emphasis of feed product pattern is presentation, which serve for user to show the content as much as possible, so the buttons are mainly large view and can be played by click. From the view of display strategy, time is an important logic lead, so it is arranged according to the chronological order.

There is no premise of discovery, and the content is recommended to user based on the overall average preference, so users accept information passively. As the preference of each person is different, if the browse cost is higher or recommendation mechanism is not correct, it is difficult for users to find the content they like and further influence people’s patience, so the main task of discovery page is efficiency.

If presented to user according to time mode (papa4.0), user can hardly find the content they prefer, good old content will be difficult to showed out, users need to browse several times to find the content they haven’t seen before.

Multi-dimensional content aggregation is required for discovery. Except the simple picture wall, it is necessary to lead and inspire user to publish content and enlarge their participate method through topics.

6 /  Product information structure optimization. The product pattern decides the main operation of users, and the product hierarchy needs to be distinguished in the whole interactive structure, in order to avoid repeated subject among the presented interactive mode in different product hierarchy page. In that case, users will be difficult to differentiate what should they do at present and what’s the main usage of this page, moreover, they will be easy to loss their path.

A good product structure is designed for each behavior of user. Meantime, users’ behavior will be directly affected by interactive mode. For instance, the interactive mode of three pages of product hierarchy (Papa 4.0) on user way is almost picture, and the design is repeated, which will make the user misunderstood and confused. In additional, it will increase the complication of product operational area in the terminal page. Feed operation is just an entrance in fact, and many practical operation points need to be expanded in the terminal page, which will bring great pressure to users. If users don’t know their position, they may forget what they are intend to do at present if the same interface displayed after three clicks.

The product hierarchy of instagram is very clear and it distinguishes the behavior of users. When user browse their own picture of feed, they should click the relative product mode and enter into the detailed page if they are intend to operate or give a comment to the pictures they are interested in, and such operation is under clear destination, so the best way not to interrupt them is to make them focus on something through product, for instance, focus on comments of product.

Users always have summary and preview requirement when they want to enter into other’s home page, they would like to look over all the content in a rapid and efficient way, so a matrix view is required to use at this time. Papa 4.0 still presents information by feed in home page, which has not met the needs of user in fact. Instagram supplies a switch of view for users, thus users can not only browse conveniently but also can restore the original feed pattern. Preview priority is a little higher.

7 / Search recommendation and result interaction structure optimization.The pattern and operation of search result and recommendation should be differentiated. Search recommendation structure is depended on search hierarchy. If there is only one hierarchy, it is necessary to arrange the search result and recommendation in one page for classification.

If two hierarchies are needed, there is a need to make users have expectation and operational focus. First, confirm the key words. Second, divide detailed dimension again or skip to the search result page directly.

8 / Navigation function area optimization. Navigation buttons are the functions will be used by users frequently, which is also the entrance find the core information structure of the website. For example, twitter chooses two kinds of important dimensions create content and search content. In this case, the comprehending of overall product concept will be enhanced when user login each time.<

Papa4.0 从产品的角度加强了对话题的贯彻性的提升,在交互方面对发布流程,发现页面交互策略及其产品模型,产品信息结构模型,搜索推荐及其搜索结果,导航功能区域进行了优化。在视觉层面对整体UI方向有扁平化转变为微样式体现产品层级的方向,logo的更新在保持原有的概念基础上加入了关于声音的新方向。

1/发布流程的优化,一个具体的产品功能怎样引导用户才能做到最简单,用户来到发布页面面对每个发布阶段需要做的交互实际上增加了操作成本,所以需要有一个核心并且清晰的线路来达到一个明确的作用,引导用户不加思考的就能通过几次点击直接发布成功。从拍照到录音再到感觉完成的按钮,在版式,大小,样式上应该极度统一,明确。避免用户选择其他功能上对发布的整个流程进行中断。

优化了文字与图标的结合形式。界面之内的图标目的是利用视觉的办法把操作和内容区分开来,并且达到一个界面的整洁提高可用性,如果一个图标尽是为了说明一个操作,并且没有达到识别效果还需要附近的产品文案来辅助,那么这个设计是失败的。当一个功能可以通过图标的方式来解决时说明这个交互是一个日常性的行为。用户已经很熟悉这个图标的含义,比如放大镜表示搜索,下箭头加凹槽表示下载,心形代表喜欢。当有一些交互同时都需要同一个图标时就要考虑到他们的使用场景而进行设计。

比如关注人,关注话题,发布话题,发布文章这四个操作都和加号有关,那么就应该考虑到交互所处在的位置进而确定其形态。关注人以人为主体所以加号变小放到人图标的左上方,样式上和人的头像互相呼应用为圆型,颜色上选择红色是因为这个按钮很重要,但又不再界面的特定功能区域(如上下导航)所以要在视觉上聚焦一些才能在内容混杂的应用内部体现出来。

关注话题和关注相关,样式上应该和话题的标签样式一样为圆角矩形,考虑到站内ui标准,所以按钮圆角为最大的正圆。因为在面积上矩形占得空间足以让用户明显可见并且旁边就是话题标题所以选择了红字白底避免颜色过重导致整体重心偏右。发布图标本身有两个方向,一是发布本身的属性为加号,二是发布内容的属性发布出来的形式是什么,比如图片就可以考虑相机。考虑到关注识别性冲突的问题,所以发布这块的图标应该统一为图片加声音的样式。

2/ 话题优化,主要体现到把散乱的UGC内容通过一些微话题整合起来,在交互和视觉上要具有一个连贯性的明显的样式来引导用户添加标签之后的来的效果。在引导新用户的界面通过标签可以很快的在用户群中把合理的内容推荐给用户,让陌生的用户很快的发现和自己有关系的人,这样用户不会感到陌生。通过标签的聚合列表页面,影响到用户对订阅的标签经常查看更新的习惯。

标签的聚合与产品在用户使用中建立的习惯。一个产品的功能如果只是存在。而未被使用说明没有让用户在使用中感知到这个产品功能带来的价值,从而没有培养用户的使用习惯。对竞品的研究梳理出标签的所带来的价值。把标签变成了话题的聚合页,找到了用户之间存在的共同点(比如same)这样同时也会促进用户在相同的话题里面有发内容的欲望和想法。因为标签的加入收到了同样关注这个标签用户的喜欢或回应(nice)。这个标签同样也会让用户养成一种特定的使用习惯,比如我直接从标签这个渠道查看新的内容(比如tumblr)。

一个产品的功能要让用户使用的时候可以说是入口,但一定要有对应的明确的出口体现入口的价值。比如标签,在用户的使用过程中如果没有标签的聚合区域那么用户会觉得标签加不加都可以。以上的例子都是产品功能,功能产生内容的聚合,使用习惯这三项互相打通的好例子。啪啪4.0在表面加上了标签功能,其实用户却没有在里面得到相应的价值,所以不会去主动的使用。主要因为他的标签聚合没有让用户理解这个聚合是因为标签这个功能引发的。

其实话题、频道的本质都可以用标签聚合,频道每一个维度的产品都是一个特定的标签,话题是基于生活类的标签聚合,频道是基于内容类的标签聚合。这样在产品结构上就非常简单的实现了一个文章的核心模块,图片、声音、标签。标签是用来对整个产品的运营和用户关系相联系的纽带。啪啪4.0应该在产品整个的策略上应该被定义为基于生活、兴趣的社交应用。

4/ 发现页面交互策略及其产品模型优化。papa3.0的发现是以时间顺序为主要逻辑,然后进行人工推荐。以时间为导向的发现,让用户找到新的内容很困难,每次都要翻过老的内容才能查到,并且对于好的内容的积累没有任何的展现。很容易因为这段时间的推荐而没有与用户的喜好相互温和,而让用户无解这里面没有我喜欢的内容。而instagram的发现是以在一个时间段内通过算法调出喜欢数上升最快的逻辑向用户推送。并且页面长度为一屏半,用户每次刷新时整个发现页面的内容都会变化。用户可以低成本的发现高质量并且不断变化的新内容。产品发现内容的成本减小为目的,并且可以让好的内容有积累的效应。发现的产品属性和feed是不一样的,在整个产品中占到了最第二重要的位置,当用户在看完他关注人新产生的内容时,发现是他寻找新关系的入口。

feed页面使用的条件是用户已经在关注人的维度已经经过筛选了,内容的倾向性是相对比较有保障的,所以feed的产品形态的重点主要应该是展示,为用户最大化的展示内容为主要任务,所以以大图,点击播放的按钮为主。在展示策略上时间是一个比较重要的逻辑引线。所以排列是按时间的顺序进行排列。而发现是用户没有前提的,内容是基于整体平均的喜好导向推荐给用户,这里面用户是被动的接受信息,因为每个人喜好的方向是不一样的,如果浏览成本很高,或者推荐机制不正确,则会让用户找到自己喜好的内容变得很困难,也会影响用户的耐心,所以发现页面的主要任务就是效率。

如果按照时间的方式呈现给用户(papa4.0),用户找到自己喜欢的内容几率会成倍减小,而历史上好的内容也很难展现出来,没有积累的效益,用户每次要翻过已经浏览了数遍的发现才能到以前没看过的内容。发现还应该有多维度的内容聚合,不应该是简单的图片墙,应该通过话题,活动去引导和激励用户如何去发内容。扩大用户参与的方式。

5/ 产品信息结构优化。产品形态决定用户的主要操作,产品层级要在整体交互架构上进行区分。避免在不同产品层级的页面展示出的交互模型存在主题重复的关系。这样会让用户很难区分当前我应该去干什么,这个页面的主要用途是什么,也容易迷失自己的使用路径。 一个好的产品构架是产品的每一步都是为用户的行为设计的。用户的行为直接被交互模型所影响,比如啪啪4.0的产品层级在用户途径的三个页面,交互模型都是以图片为主,设计上也是重用,这就会让用户产生误解与迷惑。

并且会对终端页的产品操作区域复杂程度压力增大,feed中的操作实际为一个入口,而到终端页还要把很多的真实操作点都要展开,这样用户的操作压力会很大。用户不知道自己的位置,当用户点击三次都是一样的界面时也会忘记目前要做的事情。

instagram的产品层级很清晰,他把用户的行为进行了区分,当用户主要浏览自己的feed时是以图片为主的模型,用户当看到了相关感兴趣的图片想对他进行操作和评论时点击具体的产品模块进入具体的页面,这个时候用户是有明确目的性的操作,不要打扰他的具体操作最好的方式是通过产品来让他聚焦,比如聚焦到产品的评论上。而当用户想进对方的主页时用户是有一种总览和预览的需求,他想快速高效的查看用户所产生的内容。这时就需要换成一种矩阵式的视图。啪啪4.0在用户的主页还是以feed形式来展示信息的话实际上是没满足用户的具体需求。instagram为用户提供了一个视图上的切换,这样在保证用户预览方便的基础上还可以让用户还原原本的feed样式。但预览优先级略高。

6/搜索推荐,搜索结果交互构架优化。搜索结果和搜索建议的样式和操作要区分,搜索层级决定了搜索建议的构架。如果层级只有一个那么把搜索结果和建议统筹到一个页面按类型进行分类。如果需要分两级则要让用户的操作有心里预期和操作目的性聚焦。第一步确立关键词,第二步在分确切的维度或者直接跳到搜索结果页。

7/ 导航功能区域优化。导航上的按钮为用户经常使用的功能,也是能找到网站核心信息架构的入口,像twitter选择了两个最重要的纬度,一是创建内容二是寻找内容。这样整个产品的概念就会在每次用户登录的时候都加深对其的理解。

8/视觉层面,UI风格的优化,产品的属性和概念影响产品的视觉传达方向,啪啪产品是一款具有多条产品线积聚一身的产品形态。照片音频是内容的基本形式。音频分为长音频(内容是组织规划性质的有声资源,包括段子,小说,节目,媒体,电台)段音频(用户生活化的记录,偏重于UGC)用户在其中有浏览为主,记录生活,精致内容创建者,明星,红人意见领袖。同时要满足这些用户的操作需求。所以交互层级和产品构架比较复杂,有些对内容的操作和系统级功能操作需要区分,单凭扁平化的UI设计很难表现出这个层级的关系。在视觉上需要借助一些附加样式来传达出正确的层级关系。

PAPA4.0 · ReDesign