Monica Okubo

Browsing through Polyvore’s Shop Section is somewhat of a disorienting experience. The weak visual location cues coupled with auto-refilling content make it difficult to find your bearings. The most contentious aspect of the interface is the decision to automatically load more content upon reaching the end of the currently displayed content, reminiscent of the bottomless soup bowl experiment. Its implications on the user experience and the quality of content consumption need to be considered in determining the value of this interaction technique.

“Bottomless Soup Bowl” Scrolling Polyvore auto-loads content as the user scrolls down the page.

The Bottomless Soup Bowl

The bottomless soup bowl experiment revealed that people rely upon visual cues, such as the amount of soup remaining in their bowls, to determine when they are sated. Consequentially, in the absence of these cues their consumption increased dramatically. The subjects who used secretly self-refilling bowls ate 73% more soup than the control group.

The User Experience

Like the bottomless soup bowl, Polyvore’s interface automatically delivers more content without displaying cues that inform the user of their progress in viewing the data (though the user is aware when additional content is being loaded onto the page). While I see the potential for increasing a the amount of data a user will consume, I wonder whether or not this finding can be translated into an effective interaction technique without sacrificing the user experience. Two problems with Polyvore’s implementation immediately come to mind:

1. The lack of solid visual cues to denote progress leaves the user feeling increasingly stranded without a map in the middle of a seemingly endless mass of data as they scroll down the page.
2. The goal state becomes diluted as the user reaches the bottom of the page and triggers the auto-load function. Just when they believe they have finished viewing the content they are confronted with another helping that they did not explicitly request–this destroys the sense of fulfillment attained when completing a task.

The Quality of Content Consumption

Even if these problems can be resolved, I question the quality of the user’s content consumption. At some point the user’s ability to attend to the data begins to wane. Ideally they would be able to pay meaningful attention to all the content in a given portion size.

When displaying large sets of data pagination is usually employed. In paginating data a fixed portion size of content is displayed on each page. One of the ideas behind this is to prevent attention exhaustion before reaching the end of a page; upon loading the next page of data the user’s depleted attention should be recouped to some degree.

If the entire set of data is loaded onto a single page, one helping at a time, how much attention can be regained relative to that in the case of pagination? Based upon my experience with Polyvore, my guess is that users will be less able to recover their ability to attend and, as a result, content portion sizes will need to be limited.

Final Thoughts

Auto-loading content while scrolling may sound like a fine idea, but if it is to be implemented, these concerns must be resolved.

Recently, photo sharing site Divvyshot held a design challenge: to take a shot at redesigning one of their weakest pages. One page, one day, let’s go:

Friends Page Redesigned My take on the Friends Page puts an emphasis on facilitating the sharing of photos with specific sets of people.

Background

Divvyshot is a photo sharing site in the most literal sense of the term. The idea is this: (1) you create an Event, (2) upload the relevant photos you have, (3) invite others to upload the relevant photos they have and (4) download your favorite photos so you can (5) post them on Flickr or Facebook.

Of the pages Divvyshot identified as being particularly weak, the Friends Page stood out to me because I could see a lot of missed potential in it. The sloppily laid out list of Friends hints at the larger problems inherent in the design of the page. The most striking flaws are the ill-conceived information architecture and the lack of a strong and compelling purpose for the page to serve.

Current Friends Page Divvyshot’s current Friends Page suffers from an ill-conceived information architecture and lacks a strong purpose.

Due to the limited amount of time I had to work on the challenge I left the current design aesthetic intact and focused on the usability of the page.

Information Architecture

The nearsighted information architecture of this page lacks scope of the entire site. This is most strongly evidenced by the inclusion of the User Actions section in the right column. Amid content aimed at adding new Friends, this section is a grab bag of links that would be more appropriately encompassed by either of the two classes of links in the header: “Content” links and “Account” links. “Content” links take the user to different areas of the site (e.g. Photos), while “Account” links allow users to manage their account (e.g. Profile).

I reorganized the header to better reflect the structure of the site as well as the status of the user’s account.

• To visually delineate the distinction between the two classes of links I placed the general navigation links on the left side of the header and the account links on the right side.
• The addition of links to the header (Messages and Preferences) accommodates the dismantling of the misplaced User Actions section and closes the navigational gaps left by the current header–all areas of the site relevant to Divvyshot members are now accessible through the header.
• The header navigation is used to indicate system status in terms of how many pending friend requests and unread messages are waiting for the user to act upon (the numbers after “Friends” and “Messages,” respectively).

Header Comparison My header (bottom) closes the navigational gaps left by the current header (top).

Purpose

As it stands, the current Friends Page fails to accomplish little more than doing a subpar job of displaying a user’s list of Friends. The right column adequately fulfills the goal of adding new friends, but the My Friends section is lacking in purpose.

Before redesigning the content of this page, I had to establish the goals I wanted it to accomplish. Personally, I very rarely view the Friends Page on social sites because I find no reason to do so.  I asked a few of my friends about what they use the Friends Page for.  Although they also rarely visited this section, one friend mentioned that she would occasionally browse through her Friends to ensure that she didn’t forget to invite someone to an event.

Based on this input, I identified two goals that the Friends Page should achieve:

1. Facilitating the sharing of Events with specific sets of people in order to streamline the UI flow and improve the user experience.
2. Adding and discovering new Friends is also important in that users can become more invested in the site and spread the service to others.

While translating these goals into the page’s information architecture I considered the possibility of putting the content for adding Friends on a secondary tab in the Friends section. I ultimately decided that it is important enough to merit its placement on the right column beside the primary content, the Friends list.

The Friends List

The most significant innovation I made to the Friends list is the introduction of the Divvylist.  A Divvylist is a group of Friends selected by a user.  I envision that when a user wants to send invites to share an Event they will have the option to pick from their Divvylists. If a Divvylist is selected, invites to the Event will be sent to all the Friends in the chosen Divvylist.  This will aid users who often share photos with the same group(s) of people.  Users can create their own Divvylists, but a few seed lists (e.g. “Family,” “College,” “Work”) should exist so users can become familiar with the feature.

To accommodate this feature into the layout, I placed the options of which Friends to display on the left side of the Friends list.  Users can choose to view all their Friends (the default display) or one of their Divvylists.

Divvylist View While viewing a Divvylist, the user can add or remove Friends or delete the list.

Aside from adding new functionality to the site, I reorganized the Friends list in terms of how it is displayed and what data is shown.

• I contained the list of Friends in a box because it anchors the content on the page and it is important for the user to be aware of the boundaries of each element in order to provide a more solid user experience. On the current Friends Page some important boundaries and data appear upon mouseover and disappear upon mouseout; I was conscious to avoid this. The system should be perceived as being stable so as not to shake the user’s trust.
• I added a header and footer with pagination to the Friends list.  This cues the user in on how much data exists as well as how far along they are in viewing the data.  The user should never feel lost.
• The data that is displayed for each Friend in the list is tailored to the specific user who is viewing their Friends list.  The number of Events that the user shares with any particular Friend is listed in order for the user to quickly gain a sense of how strong the connection they share is.  The Divvylist(s) the user has placed the Friend in is displayed, as well as a drop-down menu to add the “Friend” to additional Divvylists.  I added this element to make using Divvylists easier and more accessible.

Adding a Friend to a Divvylist Upon clicking on the “Add to Divvylist” button a drop-down menu will appear, listing the user’s Divvylists.

The Right Column

The right column of the Friends Page is dedicated to the act of adding and discovering new Friends.

• Notification of any pending friend requests appear at the top of the column in a box with an orange background containing a yellow icon.  The current Friends Page displays this notice above the list of Friends, but the purpose it serves is aligned more strongly with the content in the right column. It retains its prominence in its position in the column as well as through its graphical treatment.



• In order to encourage users to import their contacts from their email address books, I included the form on the page rather than linking to and sending them to another page to input their information.  With this direct approach the user knows exactly what is involved in the process of importing their contacts.
• I implemented borders around the elements representing Divvyshot members in the “People You May Know” section.  I chose this graphical treatment to improve perceived system stability–the same logic behind boxing the Friends list.

Final Thoughts

The sloppy information architecture and the ill-defined purpose of the current Friends Page leave much to be desired. Through reorganizing the content and introducing Divvylists, my redesign targets these problems. Given more time I would have more thoroughly fleshed out the new functionality and considered the consequences of certain design decisions in greater depth, but it was fun exercising my analytical skills on this design challenge. Since Divvyshot provides a service that I would actually use, I hope to see great things from them in the future.

The historic district of Skagway, Alaska maintains the old Gold Rush-era aesthetic in its architecture. Here are some beautiful signs, ranging from the simple and hand-painted to the polished and ornate.