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的更新在保持原有的概念基础上加入了关于声音的新方向。





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




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



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




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


PAPA4.0 · ReDesign