Update: Check out the October 11, 2010 follow-up to this article: “Fortune.com revisits some of my ideas in light of the introduction of Facebook Groups“
In Part 1 of this series, I introduced a design project I contributed to for Fortune.com. Fortune asked several User Experience Designers how they would redesign Facebook’s privacy settings to address recent outcries over privacy concerns on the social networking site. You can view the final article here. Part 1 focused on the first few phases of the process I went through to define a strategic direction for the redesign.
I identified the two primary privacy problems facing Facebook today as the unwanted public disclosure of information and the difficult management of social networks. The strategy proposed to address these issues focused around three key themes:
- Increase visibility of privacy information by placing it in context of user interactions
- Assure users that information they disclose is being disclosed to the intended audience
- Improve clarity around privacy settings
This post focuses on the process I went through to progress from many rough ideas to a single refined solution.
- Start with Research
- Define the Problem
- Craft a Strategy
- Sketch, Sketch, and Sketch Some More
- Narrow Down Ideas and Wireframe
- Apply a Visual Design
4. Sketch, Sketch, and Sketch Some More
One of my favorite tools as a UX Designer is the Sharpie. Sketching allows for the free exploration of ideas without committing too early to any one direction. Following research and defining a strategy, I had a general sense of how to approach the problem, but I needed to quickly iterate through ideas in order to determine which specific direction made the most sense to pursue in detail.
Below are some of the initial sketches I created for some of my concepts:
Some of my other early ideas included:
- An interactive, drag and drop method of dragging user profile photos into “visible” and “hidden” buckets to make list creation more enjoyable
- Contextual tooltips within the Facebook interface that warn you in context of your activity of potential information disclosure to people you didn’t intend to see a message, photo, or other activity
- Highly simplified “on/off” switches that reduce the multiple layers of privacy and simplify it to just “Only Your Friends” or “Everyone”
Sketching allowed me to quickly iterate on some of these concepts while still keeping my mind open to new ideas. Through the process of sketching, new ideas arose that ultimately led to the most promising ideas to pursue further.
5. Narrow Down Ideas and Wireframe
After creating a few dozen sketches, I looked through them to narrow down which ideas seemed to be the most promising and most closely mapped back to the strategy I had defined. I decided to focus on two primary capabilities based on their uniqueness, overall benefit, and flexibility to both the end user and to Facebook as a company. Wireframing these ideas allowed me to explore their interfaces in more detail, focusing on functionality and information hierarchy.
The two ideas I pursued in depth were a privacy toolbar and a more effective friend management system.
- Keeps privacy visible, yet unobtrusive, no matter where you are on the site.
- Removes the sense that privacy controls are “hidden” by providing quick access and visual feedback of current privacy settings.
- Becomes “active” upon user activity that impacts privacy (e.g. status updates, comments, photo uploads, application activity, “Like” button activity, etc.)
- Gives you piece of mind by providing instant feedback that tells you who can and can’t see your information, and allows for immediate correction if unintended actions were taken.
- Can give contextual feedback during an activity such as “You seem to be writing about your job. Check privacy settings for coworkers.”
- Gives Facebook the ability to push messages that encourage opening up privacy settings by explaining the benefits it would provide (e.g. “By making your photos visible to more people, you will be able to connect better with more of your friends”)
- Messaging can also represent recent activity outside of Facebook in order to better inform you about what happens when you disclose profile information to the public.
- Combines friend privacy settings with the “All Friends” view to allow for better friend management
- Allows easy filtering and sorting to find people who currently have access to specific profile information
- Institutes “Smart Lists” that create automatic friend groupings based on profile information to reduce the work needed to group together friends for privacy settings
- Provides immediate feedback as to who can see your information as opposed to focusing more on those who can’t
- Provides the ability to quickly select friends and alter privacy permission in one centralized location
6. Apply a Visual Design
Wireframes allow for more detailed exploration of concepts and to organize the overall structure of information. However, in order to really get a sense of what the experience would be like for the end user, a visual design needs to be applied.
My primary goals in applying a visual design were to maintain the design and interaction patterns that are standard on Facebook today, and to further simplify, refine, and clarify the ideas presented in wireframe form.
By adding a visual design, the design and user experience evolved to include:
- A visual gauge in the privacy toolbar to improve visual feedback of the cumulative effects of set privacy settings
- A more simplified “Manage Friends” experience that progressively reveals privacy controls and allows easier filtering of friend lists
Since my professional focus is not visual design, I sought to optimize the visual design part of the process by utilizing the Facebook Graphic User Interface (FBGUI) resource kit from SurgeWorks.com that provided design templates using the Facebook look and feel. I used these templates to create all of the screenshots that follow:
(These screenshots are only presented as mockups to expand on design concepts. They are not meant to be interpreted as official Facebook designs)
As I mentioned in Part 1, these ideas should be tested with end users in order to validate design solution meets user needs in an effective and usable way. Testing is even more critical for an organization such as Facebook that has millions of users who are very aware of changes to a system that many use daily.
This solution is far from complete, and its elements may or may not be appropriate ways of solving the problems facing Facebook today. However, my primary goal in presenting this solution was not to present a perfect design, but rather to demonstrate the things that need to be considered when designing such a complex solution.
One of the primary challenges that presented itself in this redesign is that every touch point within the social network presents a decision point that involves privacy. Coming up with a simple, non intrusive, yet intricate solution requires an understanding of these touchpoints and where opportunities exist to reduce the amount of work end users must put forth to effectively manage their privacy. Another challenge is that Facebook, as a business, wants users to expose as much of their information as possible. The design solution needs to take this into account by presenting the benefits of open settings, without overriding a user’s decision to apply a certain level of protection to their information.
Privacy needs to be considered a system of interconnected elements, rather than settings that may or may not be used effectively. Privacy management needs to be considered in context of user actions. Facebook as a whole needs to take into consideration the strong user emotions that ultimately influence usage of the site. It also must recognize that people’s expectations of online social networks is partially influenced by offline social interactions. Privacy management cannot just be an added feature, but rather a fundamental layer that drives interactions on the social network.
I’d appreciate any input you may have on these thoughts! I hope to explore elements of the UX process in more detail in future posts. I hope these posts serve as one of many new attempts to provide you with UX inspiration beyond the quotes that this site has traditionally focused on. Subscribe via RSS or follow me on Twitter to be informed when new posts are added.
Read the Fortune.com article: Hey Facebook! Here’s your privacy redesign for all of the design solutions created by User Experience Designers.
View the full document I created for Fortune.com on SlideShare: