The Facebook iPhone application has improved notably over the last year or so as the importance and prevalence of smart phones have become more apparent. The specific action I would like to explore is photo uploading via iPhone. As more people begin using their phones as their primary camera, the traditional digital steps of downloading from device to computer and then uploading have begun to drop off. Facebook has now integrated the uploading of photos to Timelines from mobile devices.

          On a high level, users can take a photo or photos on their mobile device and upload them directly to their social network via application. This is an interesting topic thanks to the prevalence of photo sharing culture (Instagram, Facebook, Twitter, multimedia messaging, etc). Users will be more apt to use a certain device or network if the uploading is understandable, easy to follow, and easy to complete in a situation where attention may not be completely focused on the task.

          Upon opening the application, the user is met by the Newsfeed, along with some mildly cryptic icons. Without prior exposure, either on the app or on the web interface, this presents one of the first issues.

The clearest actions are the ones that have labels accompanying the icons in a conspicuous row across the top of the screen. Selecting Photo takes the user directly to their Camera Roll with thumbnails of the photos that reside on the user’s mobile device. This is a good series of actions because there are no redundant questions about where to get the photos from, as most mobile devices have a single location. The bottom right corner also has a camera button, allowing the user to take a brand new picture at that moment if desired. Another positive on this screen is the visible checkmarks on each photo. This makes the process of selection much easier with clear actions (tap the checkmark) and obvious feedback (both a green checkmark and a green numbered badge in the bottom right corner). It also allows for the selection of multiple photos at a time. 

However, in contrast with that set of positive features, there is now a large negative. Once the user has finished selected photos, it is not clear how to continue. There is the option to view the Selected photos using the toggle at the bottom, and there is a blue square with a pencil and the selected number badge. What is confusing here is that it looks like the “Compose” icon (e.g. on Twitter) but that does not directly map to a continue action. Rather, it gives the impression that something new is being created. This is the last possible button though, and so the user most likely taps it, albeit uncertainly.

This button does in fact lead to the next step in the process. This screen that the user lands on, however, may create additional hesitation. The user is med by a screen with their selected pictures below a “What’s on your mind?” prompt which mimics the status feature of Facebook. There are a few more mildly cryptic icons along the bottom and a clear button that reads “Post” in the top right corner. 

After the user clicks “Post”, the feedback is well done, marking progress as the upload happens and then displaying the uploaded content.

          Since Facebook is a constantly growing social media platform, the users cover a large number of demographics. In this particularly context – uploading photos from a mobile device – the demographic is narrowed to users with smart phones, and more specifically, those who use them relatively thoroughly (as in beyond basic phone functions like calling and texting).

          Since Facebook profiles are not easily created through the mobile application, it’s probably fair to assume that users have at least been exposed to the web version of the Facebook interface at some point in time. Therefore, icons and general flow should be somewhat familiar. This does not, however, mean that every user will know immediately how to navigate.

          When focusing on the uploading photos aspect, there are a few different situations when the app could be used. A user may be out and about at an event or with some friends and wish to post a picture on the spot. In this case, the user is moderately distracted and the photo is probably a new one. An alternate set of events would be when a user takes some photos with her phone and then returns to the Facebook application at a later time to upload them. This delayed-posting scenario could be split further into two categories: Wall Photos and existing album photos. Users can have the intention of posting a photo or photos to their wall for people to view, perhaps with a caption that serves as a status update. However, there is also the case that the user would like to add photos to an already existing album associated with their profile.

          The users in this case are not brand new to technology, as they must have signed into a computer to make their account and they must have a smart phone which takes some (admittedly, minimal) technical awareness to navigate. They have likely been exposed at least to some applications before and will probably recognize conventional icons such as the camera.

          Users will expect to be able to upload a photo or multiple photos without too much previous knowledge or frustration. This is a case where the action could be a very common part of a user’s smart phone experience, or it could be very sporadic depending on the user’s frequency of photo taking. With this in mind, the steps should not be difficult to decipher and should not require established knowledge to complete. Users will expect to do all the same things they can do on the computer from their phone, as there is usually a disconnect between users’ mental models for the mobile version of existing services.

 

1. Upload a picture to Facebook that already exists on your mobile device. Tag the faces in the photo and add a caption.

This is a common task users complete when wishing to share a photo they already have. This could happen when there is a situation that requires quick photo snapping or when the photo was taken somewhere without 3G or WiFi, making uploading difficult and slow, if not impossible.

2. Add 5 photos to the album “Junior Year at Cornell”. Tag and caption two of them. 

As mentioned previously, users may desire to add photos from their phone to albums rather than simply posting them to their walls. Since this can be completed on the computer, a user would likely expect the process to be simple from a smart phone which commonly doubles as the user’s main camera.

3. Post a photo of whoever you are with right now. Specify the location, who is with you, and include a caption. Set the privacy settings to “Friends Except Acquaintances”.

Facebook is part of a social network that emphasizes sharing of information such as current company and location. It is a stretch to believe that at some point a user may want to take a new photo and post it immediately to Facebook. In this case, the user will most likely want to include details about the photo such as who is in it and where it was taken. Finally, privacy settings are a hot topic with Facebook. If the photo has some qualities that cause the user to want to define who can see it, they will want to do that before the upload so as to avoid retroactive modification and risk of unwelcome eyes seeing the photo.

 

          A cognitive walkthrough can be useful in identifying tension points within an interface. In this case, the interface for the app is very large and has a lot of functionality. By focusing on the photo uploading aspect, the scope is smaller and more manageable.

          As shown in the “Problem” section at the start of this document, the main screen has a set of icons across the top of the screen (from left to right: three white horizontal lines,  the silhouettes of two people, two overlapping dialogue shapes, an outline of the world, then a white silhouette with three horizontal lines). Directly below, there is a set of three buttons – Status, Photo, and Check In – labeled with both text and an icon. Below that is the Facebook newsfeed. This screen is the starting point for all three tasks.

 

          Correct Action Sequence:

1.   Click on “Photo”.

2.   Tap the thumbnail of the desired photo.

3.   On the larger photo, tap the face to tag.

4.   Type in the name when prompted by the text “Who is this?”

5.   Select the name of the correct person from the auto-filling list.

6.   Click on the button on the bottom right.

7.   At the “What’s on your mind?” screen, type the caption.

8.   Click “Post” in the top right corner.

 

          Correct Action Sequence:

1.   Click the icon in the top left corner (the three horizontal lines).

2.   Tap user’s name.

3.   Scroll down and click on the Photo with the label “Photos” below it.

4.   Toggle to the Albums view using the button along the bottom.

5.   Find “Junior Year at Cornel” and tap it.

6.   Click the plus sign in the top right corner of the screen.

7.   *Tap the checkbox on the five desired photos.

8.   *Toggle to Selected using the button on the bottom.

9.   Click on the thumbnail (not the checkbox) of one of the photos to enlarge it.

10.                Click on the face of the person to tag.

11.                Type the person’s name when prompted with “Who is this?”

12.                Select their name from an auto-filling list.

13.                Click on the icon in the bottom left of the screen: a dark arrow with a grid of squares.

14.                Repeat 9-12 on a second photo.

15.                Click on the blue icon in the bottom right.

16.                Type a caption for all the photos.

17.                Click Upload.

 

*Steps 7 and 8 can be completed alternatively. The tagging can happen prior to the photo selection (using the checkboxes) if desired.

 

          Correction Action Sequence:

1.   Click “Photo”.

2.   Click the Camera icon in the bottom left.

3.   Take photo.

4.   Click on the icon in the bottom left of the screen: a dark arrow with a grid of squares.

5.   Tap the photo that was just taken.

6.   Tap the faces to tag.

7.   When prompted by “Who is this?”, type the person’s name.

8.   Choose the correct name from the auto-filling list.

9.   Tap the checkbox in the top right corner.

10.                Click the blue box in the bottom right corner.

11.                Type a caption at the screen “What’s on your mind?”

12.                Click on the icon that looks like an upside down raindrop with the tooltip “Where was this taken?”

13.                Type in and select the correct location.

14.                Click on the icon that is a silhouette of two people with an arrow beside them.

15.                Choose “Friends except Acquaintances”.

16.                Click “Post” in the top right corner.

 

Pulling from Task-Centered User Interface Design by Clayton Lewis and John Rieman, the cognitive walkthrough will be evaluated using the following questions:

1.   Will users be trying to produce whatever effect the action has?

2.   Will users see the control for the action?

3.   Once users find the control, will they recognize that it produces the effect they want?

4.   After the action is taken, will users understand the feedback they get, so they can go onto the next action with confidence?

 

These questions can be used to evaluate the successfulness of the interface by revealing a user’s thought process, finding places where the action sequence is not obvious, and identifying where actions and feedback do not align. Hearing users’ thought processes as they work their way through the walkthrough will be helpful for figuring out what they expect to see in contrast to what they actually see. These expectations can be considered for improvements to the interface.

 

 

User Ursula wants to upload a photo she took last night at a party with her boyfriend. She opens the Facebook application and sees the “Photo” button in the top middle. Since it is associated with other user-produced actions, Ursula decides that it is the right place to start. She clicks on “Photo” and a screen appears with the heading Camera Roll and thumbnails of all her photos. Ursula is confident that this is the right place.

She sees the photo that she wants to upload with a gray checkbox in the top right. Ursula hesitates, not sure if the checkbox means that the photo is already selected. She notices that all the photos have the same checkbox which makes her wonder if all of her photos are selected and if she’ll need to “uncheck” all of them. She attempts to “uncheck” the first photo by tapping the checkmark and it turns green. Ursula smiles as she realizes that the grey checkmarks are unselected and the green ones are selected. She taps the checkbox on the photo she wants to upload.

 

She now wants to continue onto the next step where she hopes she can tag her and her boyfriend and write a quick caption about what they were up to. She sees nothing that looks like a “Next” button, but she feels like the step of selecting the photo is complete. Based on the available actions (a camera icon, an already selected “All” button, a “Selected” button, and a blue square with a green circle holding the number 1) Ursula tentatively clicks on the blue box, solely because none of the other options make sense: she doesn’t want to take a picture and she can see what photo she selected. Clicking the blue box takes Ursula to a screen with her current profile picture, a blinking cursor over the words “What’s on your mind?”, a thumbnail version of her selected photo, and a series of icons above the keyboard. Ursula is not sure that blue button was the right choice because “What’s on your mind?” reminds her of status updates, not photo uploading. However, she sees a “Where was this taken?” tooltip, and associates that wording with a photo, and concludes, somewhat uncertainly, that she is on the right page.

 

She now wants to make sure to tag her and her boyfriend in it, but isn’t sure how. She sees an icon that is a person with a plus sign and her instinct is that it reminds her of adding friends. That doesn’t feel right. She also sees an icon that is a silhouette of two people. That looks somewhat promising, since tags have to do with people, so she clicks it. She is met with a list labeled “Audience” and knows that isn’t what she wanted. She taps back out of the menu that popped up to return to where she was. She remembers that on the computer you tag by clicking directly on people’s faces. She doesn’t see a way to go back to the thumbnail selection page (Cancel isn’t the right action, but there are no icons that she can trust would result in a step back to the thumbnail selection screen). She decides that she needs to get the picture to be full screen, and so she clicks on the thumbnail. Ursula is happy when the picture takes up her whole screen, and there are two tooltips pointing at her and her boyfriend’s face that are labeled “Tap to Tag”. She taps the one pointing at her, types her name, sees her name pop up in the list, and selects it. Ursula is satisfied because “Tap to Tag” has been replaced by her name. She does the same to tag her boyfriend.

 

She now wants to return to the screen she was just at with the “What’s on your mind?” prompt and the “Post” button. Ursula sees the blue box she clicked before which took her to the screen, but she is also drawn by the gray arrow on the other bottom corner of the screen. Since she tapped the thumbnail, now she wants to return to the screen she was at before which to her feels like a backwards motion. She taps the arrow and is brought back to the original thumbnail page. Ursula is now frustrated. This is where she wanted to get before, and now that she is here when she didn’t intend to be, she wants to get back to the “Post” screen. Drawing on her previous experience, she taps the blue box, hoping that the tags saved since the thumbnail version means they are no longer visible. Ursula is happy when pushing the blue button takes her back to the “Post” screen. She is also happy to see her name and her boyfriend’s name on the screen above the thumbnail, leading her to believe that the tag saved. She is no longer prompted by “What’s on your mind?”, but sees a blinking cursor and the keyboard. She types in the caption for the picture. Ursula feels she has completed the steps she wanted, and is ready to upload the photo. She sees the word “Post” in the top right corner which aligns with what she has seen on the Facebook web interface. She clicks the button and the filling progress bar results in Ursula’s satisfaction as she watches the photo upload. Once finished, the photo shows up on Ursula’s screen with the caption and tags intact.

 

-The checkboxes may be misleading at first
-The blue box is not an obvious button for forward motion in what most people consider to be a process
-The “What’s on your Mind?” prompt could be confusing as it is typically associated with another, different Facebook process
-The tagging process is well done… If you can get there
-Not all icons are associated with obvious actions

 

          User Ulysses took some photos while walking to the library at sunset. He has an existing album on Facebook called “Junior Year at Cornell” where he’d like to add the photos. He doesn’t want to have to plug his phone in to do so, so he is hoping to complete this entirely on his mobile device.

          Ulysses opens the Facebook application, and sees the word “Photo” in a relatively prominent, central position. He clicks on it since his action has to do with a photo. He is met with a grid of thumbnails called Camera Roll. He sees his recent sunset photos and feels optimistic that this the right place to start. He sees the grey checkmarks and taps one to see what it does. When it changes to green, Ulysses is convinced that the photo has been selected. He does the same tapping action on the next three photos. On the fifth and final photo, Ulysses is not as accurate with his thumb placement and taps the thumbnail rather than the checkmark and the photo is brought to full screen. Eager to return to where he was, Ulysses scans the screen for anything reminiscent of a back button. He sees the arrow icon with the grid of squares and is reminded of the grid he was just looking at. Fairly sure that the button with take him back, he taps it and is rewarded by the same thumbnail screen with four photos selected. Ulysses more accurately taps the checkmark on his final photo.

 

Now he isn’t sure how to proceed. Ulysses realizes that he has five options: cancel, camera icon, all (which is already chosen), selected, and a blue box with a green five on it. By process of elimination, Ulysses realizes that the blue box is the only one he doesn’t know what it does, but since none of the others do what he wants, he taps on it.

 

Ulysses is brought to a screen with three of his selected photos in thumbnails beneath a “What’s on your mind?” prompt next to his profile picture. His eye is drawn to a tooltip that is labeled “Where was this taken?”. He can’t tell which photo the tooltip is referring to and since the photos were taken all over campus they can’t all be labeled with the same location. Ulysses decides to ignore the tooltip. He hesitantly decides to type a caption where the cursor is blinking, but isn’t thrilled with the idea of them all saying the same thing (a problem similar to the location identification).

 

Ulysses would also like to tag his mom in one of the pictures because she loves sunsets. He remembers that tagging happens via clicking in the web interface and concludes that he needs to be in the full size photo view. He taps the thumbnail which successfully enlarges the photo. He taps arbitrarily on the photo and a “Who is this?” tooltip appears. He types his mom’s name and is pleased to see her show up on the generated list. He taps her name and it remains on the picture.

 

To exit the photo after tagging it, he trusts the lesson he learned earlier and taps on the blue box to return to where he was. Now instead of “What’s on your mind?”, Ulysses sees a blinking cursor at the end of the caption he typed earlier. However, now it is appended by text that says “With Ulyssa” (who is his mom). He is not happy with that wording as he wasn’t actually with her, just trying to tag her to draw her attention to a particular photo. He decides to leave it, but isn’t thrilled with the way the information was interpreted.

Now Ulysses wants to make sure the pictures are uploaded into the right album. From this page, he sees an icon with a person and a plus sign, a tooltip location icon, a camera, and a pair of people with an arrow next to them. Ulysses doesn’t find any of these options promising. Feeling frustrated, he decided to tap some icons to figure out what they do. The person with the plus sign takes him to a page labeled “With?” and a list of users. Already annoyed with that wording and not wanting to add anyone else, Ulysses clicks cancel. He skips the location icon since he recalls the tooltip prompting him for a location earlier. The camera icon is highlighted blue, and when he taps it, it takes him back to the thumbnail view of his entire Camera Roll. That was also not his intention, so he once again clicks cancel. With only one option left, Ulysses is starting to think that sorting into albums might not be possible via smart phone. He taps the last icon and is prompted with a list labeled “Audience”. Ulysses recognizes that this is not what he wants and taps “Cancel”, located in the same place as the last two times he used it. This time, something different happens: the cancel causes a pop up with the options “Don’t Save” and “Cancel”. Not wanting to delete all of his work up until now, Ulysses chooses “Cancel”. The menu remains and Ulysses is not sure how to exit it. He taps the “Friends” choice since a checkmark is already marking it, and the menu disappears.

 

Ulysses realizes that there are no further options here for sorting the photos into one of his albums. Feeling somewhat defeated but still wanting to share his photos, Ulysses decides to click “Post” anyway and resolves to log onto the full version of Facebook from a computer and move the photos later.

 

-The user did not complete the task because it is so buried and unobvious
-Moving forward from the thumbnail selection uses an unclear icon
-Forcing the users to pick one caption for all the photos is not always desirable
-The “With” wording when a person is tagged may misinterpret the tagger’s intention
-The Cancel button and icon actions should be consistent so cancel doesn’t mean one thing in one place and another with a different icon
-Sorting into albums should be possible here since it’s the most obvious place to deal with photos

 

          User Ulla is getting coffee with an old friend she hasn’t seen in a while. She wants to post a picture to Facebook to commemorate the occasion. She opens up Facebook and sees Status, Photo, and Check In as possible user posted input. She taps Photo and is brought to a page with her existing photos. She hesitates, as she was hoping to take a picture via Facebook and didn’t think she’d have to choose between ones she already had. She cans the screen and find the Camera icon in the bottom corner which looks promising. She taps it and is brought to a camera view which she is familiar with. She poses with her friend and then snaps a picture. The picture freezes for a moment and then minimizes into the corner of the screen. Ulla is not sure how to proceed, as she wanted that picture to stay up for her to work with (tag, caption, etc). Even the box it minimized into doesn’t show a thumbnail, which leaves Ulla wondering if she even took the picture. She decided to click on the box in the corner to see if it works similarly to the normal iPhone camera. When she does, the picture takes full screen and Ulla is satisfied.

          She taps the screen on her friend’s face and a tooltip appears with “Who is this?” in it. She types her friend’s name, it pops up, and she selects it. She does the same with herself. Now she wants to add a caption. Her available options are an arrow with a grid which makes her think of going backward, crop and enhancement options she recognizes from photoshop, and a blue box that has a pencil. The pencil she associates with writing and decides that is the right option.

          Ulla is brought to a screen with a blinking cursor preceding a “with Ulla and Uma”. She concludes that that is from the tags she just added. She also sees a “Where was this taken?” tooltip, and decides that she will tag their location after adding the caption where the blinking cursor is. She types what she wants, but the tooltip disappears. She clicks on the location icon since the tooltip seemed to be hovering over it. It prompts her with a list of nearby locations and a type your own. She sees the coffee shop in the list and taps it. The tap returns her to the same page as before with “At The Coffee Place” tacked onto the end of her caption.

          Ulla is a private person and decides that she wants to make the photo visible only to her friends. She sees two icons that involve people. The one with the plus sign looks promising because it looks like she can add viewers. Ulla clicks it but the resulting screen has a header of “With?” which makes Ulla think of the caption addendum from earlier. Not wanting to add more people to the photo caption, she clicks cancel. Now she tries the other icon (with two people), and lands on a menu headed “Audience”. She is pleased with this result, and chooses “Friends Except Acquaintances” by tapping on it.

          Ulla is now ready to post the photo. She sees the “Post” button and taps it without hesitation. She is greeted by a loading bar, convincing Ulla that her photo is in face being uploaded. Once the bar is full, she is shown her newly uploaded photo and verifies that it shows all her additions.

 

-This walkthrough presented the fewest problems of the three tasks
-The camera action upon taking a new photo is slightly unclear
-The difference in the people icons on the final page are not obvious

 

From these takeaways a few major things should be addressed: icon usage, inaccurate interpretation of tags (the “With” issue), and adding to a specific album should not be so roundabout.

 

          While the Facebook iPhone photo uploading experience has a few good areas (tagging feedback, along with a few others), it does have some weak points as pointed out in the Results section above. I am not sure if actual user testing will have as strong an aversion to icons as I predicted using the walkthroughs, but I do think the album idea will be a large issue. I would actually suggest that Facebook treat is as more of a workflow process rather than additions to a single entity. This would align more closely with the web version and makes more logical sense with the users’ concept of how photo uploading works.