I am A UX/UI Designer, Developer and Fine Artist


based in Austin, Texas

Facebook Photo Album

Project Type: Heuristic Evaluation
Client: Facebook
My role: Competitive Analysis, Architectural Critique
Deliverables: Architecture Evaluation, Marked-Up Redesign Suggestions

Photo Album Critique and Suggestions

The following is an architectural evaluation of the feature along with suggested changes to make it more user friendly. Inspired by Stephen Krug, I didn't want to think too hard about this process.


On the homepage the link to the Photo Gallery is hidden in the left hand navigation menu under the Explore heading, and can only be exposed when the user clicks the "See More.." link to expose the rest of the menu. The Explore menu falls very close to the bottom fold of the page on a 15 inch screen and is completely cut off on a 13 inch screen. This forces the user to work harder to find the link and suggests that this feature is unimportant. In the updated version, the Photo feature was moved to below the link to the News Feed, and the username with their icon was removed from that spot. The reason the username and icon was removed is because it's already showing in the top right corner of the browser window, in a space that most users tend to expect to see links related to their personal information.(1)


On the Photo Gallery Landing Page, the header is too tall and forces all the body content down (2a). On 15 inch screens you don't see much of what the landing page can offer because the height of the header pushes everything else down beyond the fold. When main content is pushed down beyond the fold which is generally about 800px from the top, the user has to engage themselves to scroll and they consider it "work". It also fails to enrich the users experience by not giving them enough incentive to explore the page by hiding content that would prompt them to do so. The sub-navigation links related to the users profile (2b), and the extra padding above the album photo thumbnails (2c) add to how top-heavy this page is and push the content down further. The goal of this section should be a main landing page to manage the users photos, add more content to each album, and share their albums with their network. The "Photos of You" and "Your Photos" link wording is also vague and their sourcing algorithm is unclear. Are these both a dumping ground for photos that I took or photos that people took of me? Why are the photos in these two sections older than the latest photos in the latest album?


In the updated version the masthead is shorter to allow more room for the landing page to feature the photos. (3a) The "Album" link is moved to the first spot in the list of links it sits in so that it denotes a default importance, and the corresponding section below that features the individual albums. (3b) The first two albums fill 50% of the width of the container, denoting that they are the latest so they have the most relevance and activity. (3c) Then the next 4 albums, listed in an order set by the last time they were accessed, have a 25% width to give the user more incentive to browse and explore older albums.(3d)

On the individual Photo Album landing page, there are Call-To-Action links floating in various groups in the center area of the page, organized in such a non-specific way that it's hard to tell why they were grouped as they were. "Add Contributor" is floating off to the top left (4a) while "Feature on Profile" is grouped with "Edit" and a Settings icon on the right side. (4b) "Feed View" and "Group View" are right in the middle of the page (4c). "73 Posts" isn’t so much of a link as it's a description showing how many posts were made inside the album, though the verbiage should be updated to reflect that (4d). The spacing in between "Add Photos / Videos" is forcing the letters to expand into the sides of the container and restrict white space.

In the updated version, any link related to customizing the functionality of the photo album was moved into the destination link behind the "Edit" button (5a) including "Adding Contributor", "Feature on Profile", Privacy settings for sharing and post counts. This organizes all the settings into one menu that's easily accessible and in a location the user expects to access it. The toggle between Grid View and Feed View are in the left top area, where users typically expect to find options and filters for lists of content, as typically seen on e-commerce product listing pages.(5b) Spacing in-between the lettering for "Add Photos/Videos" is tightened up to allow for more whitespace and breathability so that it doesn't seem constricted.(5c)

Summary:
My main goal was to consolidate a lot of the random navigation into a more predictable location, and make the IA more intuitive and easier to access. The goal was to incorporate a level of predictability that seemed to be lost in the evolution of the feature over its lifecycle.