- 原文地址：Evolving the Facebook News Feed to Serve You Better
- Originally written by Ryan Freitas
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: Lai,
- Proofread by kyrieliu Sean Shao
Since late last year, we’ve been exploring ways to make News Feeds easier to read, communicate and browse. As you can imagine, designing for a community that connects two billion people can present some unusual challenges.
As managers of two design teams that bring the News Feed into everyday life, we are keenly aware that any changes we make will resonate throughout the Facebook experience. In communicating with Facebook users around the world, they found the News Feed confusing and difficult to navigate. Fixing this problem meant optimizing the News Feed’s design system, a major challenge for a highly optimized product. Small changes, like filling in extra pixels or adjusting the tone of buttons, can have a huge and unexpected impact.
Improve the readability of News feeds
Our design and development teams communicate with real users every day. Over time, we learned that users are most concerned about the following points:
- The content itself, such as shared photos
- People who share content
- How do they leave feedback (like comments or interactions) on what they are viewing?
With feedback from real users, we delved into common story-type constructs. The idea was to break the problem down into small pieces and identify a choice from the design we had done that immediately met the needs of our users.
Before the redesign: This is the story style of the existing News Feed before we optimized it.
We asked ourselves if we met three main objectives:
How can we improve the News Feed to make it more readable and separate from the main parts of the content?
How can we make the content itself more engaging and immersive?
How can you make it easier for users to leave feedback?
These questions led us to explore and experiment throughout the design Sprint, a weeklong brainstorming session between two teams of designers, researchers, and content strategists, and to prototype new ideas. The resulting sprint served as a guide to shaping the future News Feed.
We designed the iteratively updated story style for the first version of the Sprint
We experimented with various design treatments to find opportunities to improve the way each content type was presented.
- Increase the readability of News Feed details by optimizing visual hierarchy and increasing text size and color contrast
- Help users better understand and interact with News Feeds by improving icon styles and enlarging target sizes
- Provide a better content experience by expanding the content display area and reducing unnecessary UI elements
Our design sprint will have a research opportunity to validate our exploration. During the sprint, we made sure to show the work to real users to see their reactions.
User feedback from the first round of testing.
Through several iterations and testing, we learned that some of our initial designs helped keep the interface clean, but decisions like placing copy at the top of photos and removing explicit text labels created new legibility issues. Each iteration brought us one step closer to the final design, and our goal was to make the layout and palette easier to use without sacrificing understandability.
After the redesign: Our final round of Story optimizations for the News Feed.
Make the comments conversational and engaging
Our goal is to make it easier for people to engage in meaningful communication, to make communication more focused and interactive, and to provide people with more diverse ways to express themselves. Our existing style is rooted in the message board style, and the ways in which individuals can express themselves are mostly similar and limited. When we started looking at other comment styles, it became clear that the messaging design paradigm enabled people to communicate better than ever before.
Previous comment style (left) and optimized (right).
Make browsing between News Feed details easier
Another area we want to improve is how users move in and out of the News Feed across the system. Depending on the type of content, we observed that users in our lab studies simply fell into the consumption of content when they opened their feeds. We also noticed how users struggled to find the “back” button because for years we had fallen in line with the principle of consistent functional visibility.
Previous navigation (left) and optimized (right).
In addition to reducing redundancy between navigation bars and story titles, our team opted for consistent return availability across all immersive views. We also optimized the jump from the News Feed to the Story view page to create a context-focused feel by extending the content display area. We’ve also improved navigation gestures so users can swipe back to the News Feed.
We will continue to build systems from here, and nothing is “done” at Facebook. As designers of Facebook, we are user-centric, so we set out to improve the user experience in meaningful ways. This will be a unique design challenge, because we don’t want to just “muck around in innocuous places”, but really make something that billions of people use every day less frustrating. We will continue to learn, iterate, and improve on this new foundation, but we hope this step will lead to a better Facebook experience.
Here, I would like to congratulate us on our successful launch and thank every member of the team sincerely! It would not have been possible without your tremendous efforts and sacrifices.
To Geoff Teehan, John Evans, Julie Zhuo, Lars Backstrom, Hady ElKheir, John Hegeman, Mark Hull, Adam Mosseri, Tom Alison, Chris To Cox and Mark Zuckerberg, and everyone else who worked on this project, thank you for your support and advice and ultimately helping to bring this project to life.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, React, front-end, back-end, product, design and other fields. If you want to see more high-quality translation, please continue to pay attention to the Project, official Weibo, Zhihu column.