Recently, I led my team to make PMTalk app, because the community product contains two essential modules: article and question and answer.

But in fact, the different interaction design schemes before product design will affect the cost and resource requirements of technology implementation in front-end development.

Today, the following two information flow pages explain to do content client will encounter web, native, hybrid3 architecture choice, we will encounter what problems?

▲ Information flow home page

The home page of the APP above looks like a stream of articles, covered in products. Is the home page of the client product. Obviously, such products are content dominant products. There are three key modules surrounding content products

▲ Content products to do text and page relationship

Because the client uses either native, Web, or mixed development. I talked about this earlier in the three technical frameworks.

Product managers must understand the three technical frameworks for APP: Native, Web, and Hybird

Technical discussion scheme

The left and right sides of the figure above represent two kinds of detailed interaction. At the same time, the two interactive schemes also have two technical implementation schemes.

On the left, all the questions and answers under the details of a question and answer are spread out in an information stream. The user can access all the answers in one page without jumping.

On the right, the first answer is displayed in the question-and-answer detail page, and the user needs to click the “View next” or “view previous” button to see the next answer.

The final technical results are:

On the left, if using the original technical solution to write the details of the question. It will require you to include multiple webviewsUI, and multiple rich text will easily cause app crash.

Solution only requires the front end to write q&A/article information flow, Q&A/article details H5, only the right side interaction can be used to complete the page with the client and the front end.

** If the right option is used, hybrid development can be adopted. The front end only needs to compose the answer of a question and answer, and use native for other content. Reduced front end staff page development effort. 阿鲁纳恰尔邦

In the case of limited personnel resources, the solution on the right can effectively utilize front-end developers and client developers.

Therefore, even though the product manager and THE UED interaction designer are one function, changing the user operation logic with different interaction design can actually avoid some technical waste of resources.

Scenario 1 is on the left, by showing multiple responses.

Show details of multiple answers with question headings. How do you do this? 2 questions and answers from Pmcaff.

Pmcaff presents all of the answers, all in the form of web development.

▲ Zhihu through the native + text way to solve the question and answer details display

The solution adopted is to solve the question and answer in the form of Android elements + Web. Through such a scheme, the problem of displaying rich text and picture layout can be realized.

Before we think about that, we need to know, what is rich text and text?

Text is a document written in a text-based editor and is what it is.

Fuwen ZHI Ben DAO is a document rendered and computed at a higher level through plain text, and then presented to you.

Here’s a simple example:

HTML and other web page files wrapped in my red words will appear red.

In the plain text editor you see: I’m red

In rich text (which includes browsers and other rich document software in a broad sense) all you see is, “I am the red word,” but the words are red.

The labels before and after wrapping them are used to show rich document display software what should be rendered and calculated. These things don’t show up in rich Document software unless you look at the original code.

So we want to implement articles, questions and answers on the client APP with graphics, rich media style scenarios, using web development is the only way.

At the same time, H5 and other forms can be spread under the wechat ecology and opened under the ordinary browser. Help the product to obtain external social platform traffic

So in terms of the native experience and the choice of the Web, we chose hybrid development on the solution. Native interaction is adopted in answer and reply to improve the user’s front-end experience.

Interaction solutions require changes in technology

Next, we take the following interactive form. The aforementioned Zhihu scheme and the scheme on the right require users to enter the details of the answer and only one answer can be seen. Click “See Next” at the same time to switch to the new answer.

The problem, of course, is that the user wants to iterate through all the answers to a question. You can only click through the next view one at a time.

That’s peer-to-peer viewing

With this interaction, native development only needs to host a WebView. Both can bring the maximum experience, but also can meet the rich text display.

It is technically impossible to implement rich text details for every answer. For example, as mentioned earlier, all responses are displayed using native effects under PMCAFF.

Pmcaff shows multiple answers in q&A details

Pmcaff displays all the answers because the q&A details page is web development technology. To be able to display rich text

But the problem that comes with that is poor interaction experience, and poor sharing experience.

Sharing information from the client’s home page — the details page — around the user path, all of which bypass Web development. The client and the front end cooperate closely to realize the landing of an APP.

▲ Mixed Web and Native interaction

Therefore, when choosing to use a client as an early product, consider whether it is content product. A tooling product will obviously cost about the same to develop as the Web, and take about the same time. Of course, native requires user control to update the version, while WebApp does not require user consent to update

Finally, about content products editors

An editor allows users to generate rich text. However, most teams currently choose open source or third party projects.

An open source editor based on H5, can provide pictures, emojis, text insertion, links, the ability to import articles.

Back to the beginning of the summary, is also to provide the user with answer details. However, two different interaction schemes lead to two different technical implementation schemes.

Therefore, the product manager should always know that the same purpose is to solve the needs, but different interaction solutions or different user paths will cause product development differences.

This is also a pit that requires constant accumulation of experience to judge the future.

It is suggested that product managers should develop the habit of app experience, and download products or competing products in several industries every day or every week, so as to reduce pit mining.

That’s all for today’s share.