Feedly founder again talk about the revision of actual combat experience

On the February 10, I and my team members Edwin and Sean went back to Google headquarters and explored the design techniques with the material team in greater depth. Frankly speaking, Google's art director Rachel Been sincerely is our mentor, she and we detailed the material design of several core principles.

Through 2 years of communication in Google's garage, we've done a real-world feedly design prototype. After a few weeks of polishing and refinement, we finally completed the first product to meet the Material design. Now you can download the latest version of feedly on Google Play. (Domestic friends can download apps from Google Play in App store like Cool market)

The design of affective experience

Over the two days of Google, we have focused on rethinking the visual design of the user discovery experience. When users just use feedly, they will see an introduction to the app and start building the news and information sources that are right for their users by step-by-step, and this process is what we call the user discovery experience.

In the face of this, Rachel's main design direction is to make the experience of the process more emotional, more immersive, so she put forward the following advocacy:

Visual design is higher than text: How to use an image instead of a simple text tag to better render each element?

Planning is better than algorithm: Can we provide search results based on human planning and ideas rather than using a single algorithm to recommend optimal results?

A select rather than a flat list: Lets the search results appear at different levels, displaying the recommended elements or content, rather than a simple list, allowing users to get the best content.

Article typesetting is better than picture stacking: Using dynamic visual design rather than simple static stacking. This design is especially useful for "topic cards".

Recommendation is better than basic search: How to recommend content to users when building a core user experience, rather than letting users search for specific content.

We write these principles on the whiteboard and incorporate them into the prototype design. We do not want to achieve all the principles, but to draw inspiration from them.

We incorporate these ideas into the feedly discovery Experience design, which consists of two screens:

Exploration

In this place, users can search for content that they are interested in, or they can search for specific sites to focus on. In addition, we also recommend some topics for them to help them get inspiration and find what they want.

"Search Results"

The search results interface shows blogs and sites that match topics or search keywords.

Use the paper mold to make the prototype of the Discovery Experience link.

Explore

On the "Explore" screen, we used grids and pictures to represent a range of topics, and we made this Part "Starter kit". But there are some pain points in the design interface:

Three of cards tied together make them difficult to navigate

The topic's readability is poor

The whole experience is not immersive.

So we decided to make bolder visual designs and bigger cards. We also list the sub topics for each card to make sure that the user is able to understand the type of site they are exploring when selecting the card. For example, we will list "architecture", "Graphic Design" and "UI design" under the "Design" card. To prevent the list from being too long and difficult to browse, we looked at the first 6 principles and designed smaller cards for these sub topics.

　Search results

By choosing a topic or keyword to search, we are accustomed to using a flattened list to render the result, but there are the following drawbacks:

This list does not give users a sense of participation, nor is it immersive.

It's hard for users to know what sites and sources they're searching for.

It's hard for us to recommend really cool websites to a few readers.

These problems ultimately make it difficult for readers to decide which sites to add to their feedly sources.

In fact, we'd like to see what the entire application would be like if you followed Rachel's principles and recommendations and used more planning and recommended content and emotional design. In fact, these design principles coincide with the "collection sharing" feature we have been doing. As a result, we included this feature in the design process, making search results more interesting.

For example, if you choose the "Food" topic, you will see a collection of common food sites followed by a carefully selected set of sub topics: vegetarianism, health, baking, cocktails, etc. All these sub topics are planned and created by industry opinion leaders, such as Deb Perelman from Smitten Kitchen, Amanda Hesser from Food 52, and Lemons do from Love & Jeanine. Nofrio, wait, wait. The planning of these professional and industry celebrities makes the recommendation more humane and the quality content more easily discovered.

Finally, you can use the "Add All" button one click to add all the recommended content, to help you speed up the construction of personalized reading list.

It takes a lot of work to plan these topics and content, but in our opinion, these professional recommendations cater to the needs of the user and ultimately make the whole service completely different. At present, this mode of operation we only in the food category, but in the future you will be in more categories to see the content of the recommendation!

Of course, we also have the sidebar, content list, and other parts of the material design, to ensure that the overall experience consistent.

About the dynamic effect

In our last article, we talked about a lot of dynamic design problems. This time, we've done a lot of dynamic design with Google's dynamic designer John Schlemmer, and you'll see these cool effects when you open and close the article. Many of these effects come from John, and the effect is great: These dynamic responses are very fast (within 300ms) and are well combined with the article.

Of course, there are still some of the action is a little bit tricky, temporarily not in the latest version, but you can expect it in the future of the update to appear.

　　Conclusion

Of course, this article only introduces the feedly in the material design process, the main two features of the revision experience, I hope you can get help.