GR6 - User Testing

Note: To test our website, please log in using the username: guest@mit.edu and password: guest.

Also, please test on chrome. Please also use a mac or ubuntu.

Design

Color Scheme

Originally, we were deciding between a light theme and a dark theme for our color scheme. For the heuristic evaluation, we had submitted a protocol where we used a light theme, with an off-white as the main background for our site. However, as we asked more people for their opinion using our first computer protocol, we found that more people preferred the dark theme. It seemed that since more photos tend to be brighter, there was more contrast in our site if we had a dark theme, with a gray as our main background color. This also brings more emphasis and focus to the photos.

Animating Group Icons

When we first met with our TA with our first computer prototype, our icon for groups was composed of a stack of three photos with the main photo being a photo from the group. Our TA mentioned that this made our site look like a Web 1.0 site, because it wasn't very animated. We also got a comment in our heuristic evaluation stating that the stacks were confusing because wasn't a correlation between the stacks and the number of photos in the group. Thus, we did away with the stacks and decided to animate the group icons, showing multiple pictures from the group when you move your mouse over the icon for a group.

Drag and Drop Functionality

One of our key features is the ease of the drag and drop functionality for uploading photos, rearranging photos after they are uploading, and deleting photos.

• Upload: From our paper prototype, we knew we wanted the drag and drop functionality for upload. We tested this by having index cards on the side representing photos, and by having a box on our site indicating that you should drag and drop photos there. We found that users intuitively knew that they could take one or multiple photos, drag it into that box, and expected them to upload. When we included this for our heuristic evaluation, we got a lot of positive feedback on the implementation. We were also told our affordance with the box indicating where photos should be dropped and our upload bar when photos began uploading were great additions as well and provided good visibility.
• Reorder: One functionality we wanted to give to users was the ability to reorder and organize photos in a group. We thought this would be especially useful since photos in a group were uploaded collaboratively by different people, meaning the chronology of photos would be disrupted pretty easily if new photos were to be added. To keep to our drag and drop functionality for upload, we also made reordering photos a drag and drop feature. To create an affordance for this, we made it so that the mouse turns into a hand when you hover over a photo, signaling that you can pick it up and move it.
• Delete: Deleting photos was a feature that we still did not have for our second computer prototype. We decided to keep to drag and drop again for this since it was the main way we were handling functionality with our photos. When you click on a picture and hold the mouse down, as if you were going to move the photo, the upload box on the right actually turns into a delete box, and the text for the box changes to signal this to the user. Thus, dragging a photo from the site into the box will delete the photo from the group.

Photo Layout in Groups

Originally for our first computer prototype, we had our photo layout in such a way so that the width for both vertical and horizontal photos were the same, meaning the height of vertical photos were much longer. However, we also decided not to add much white space between rows of photos. This meant that some vertical photos would extend into the second and third row of photos, making rows not perfectly aligned when vertical photos were added. We thought there would be an aesthetic appeal to this layout. However, we found in our heuristic evaluation that some people preferred thumbnail sizes that were more similar. It was also brought to our attention that the lack of defined rows made it harder for users to order photos, because it wasn't immediately obvious which photo came before others. We decided that it was still important to distinguish between horizontal and vertical pictures because it created an affordance for recognizing photos quickly. Thus, to keep this and still have defined rows, we decided to create more white space in between our rows of photos and shorten our vertical photos from what we originally had. That is how we ended up up with our final photo layout for groups.

Share Suggestions

One of the highest friction components of our websites was when a user had to enter the emails of the people he/she wanted to share with. The problem with this was that a lot of people had difficulty remembering the emails of their friends. Thus, even though our interface was very simple to use, this still resulted in a lot of errors because the manual typing would have a lot of room for errors. Thus, we created suggestions when the user began typing the emails of friends to share groups with, and these suggestions were based on previous emails that the user had used before. We believed this made the process a lot more user friendly for the user and also reduced the possibility for error.

Simplification of Comments

For our second computer prototype, we simplified the commenting interface. We had hint text in the comment box that would indicate that comments should be typed there, and we had it so that the submit button would only appear when you clicked in the comment text area. This was so we could have a very minimalistic effect, only having buttons and text when it was necessary to keep things clean.

Scrolling through photos

One feature we implemented is that when you click on the right 70% of the photo, it will go to the next picture. However, if you click on the left 30% of the photo, it will go to the previous photo. We thought this would make it easier to scroll since people do not always click directly on the arrow. We also figured people would be more likely to want to go forward, which is why we came up with the 30-70 division.

Implementation

Sharing Groups

Our original idea was to make sharing groups and the people in a group more visual. We wanted to make it similar to the drag and drop functionality for photos. Specifically, we wanted people's emails to be objects that could be dragged into groups so there would be very little room for error when adding people. There would be an easy way to undo errors, and there would be a very visual depiction for all the people in a group. However, when we began our computer implementation, we realized that this implementation would take a lot of time, and would also require a good affordance and design so it would be easy to understand and use without taking away from the main focus of our site. We also realized that it would be hard to get users away from what they were used to, which was having emails being entered into a text box. For simplicity and to keep with what users were more comfortable with, we decided to stick with having a text box for inviting people into a group. We tried to minimize errors in this implementation as well with the share suggestions mentioned in the previous section.

Reordering Photos

Currently, photos are reordered linearly on our site. Each row of photos wraps around to the next row, and so moving a photo just pushes the other photos up linearly. However, our original plan was to allow users to reorder photos in 2 dimensions, specifying where they wanted it in space. When we began our implementation, we realized that this would be very complicated because we would have to deal with edge cases, considerations when there was a blank area, where we would put photos if a new upload was taking place, etc. It seemed like it would be sufficient, cleaner, and much easier for the linear implementation we ended up with.

Evaluation

For our user test, we briefed our users first with a general description of our website. We told them that it was a collaborative photo sharing site that could be used to share photos for viewing and commenting, similar to Facebook. We also told the users that our site was different because it has the added benefit that friends can be allowed to add, delete, or rearrange photos in addition to just viewing the photos.

The tasks we asked our users to perform were as follows:

1. Log in to an existing account.
2. Browse the website.
3. Create a new group and invite people to join with emails.
4. Upload photos to the new group.
5. View a group. Add more photos, delete photos, and/or reorganize the photos.
6. View a photo and comment on it.

The users we found all had sufficient experience with uploading photos to a social networking site and enjoyed viewing other people's photos on these sites. This is the description of our main user since our site is meant for people who take pictures, upload pictures, and want to share photos with friends.

The first usability problem that we found was that you cannot make an account. We focused on the functionality of our website and did not have time to add this feature. We also foresaw issues because we did not have an email server to actually send out invites when a person who didn't have an account was invited to a group. Another usability issue was that you cannot delete groups or leave a group.

Other than that, we found that users had a bit of time discovering how to delete photos and that it was possible to rearrange photos. If we had more time, we would have created more affordances for these two features.

Reflection

With our initial computer prototype, we had high fidelity with the look of our website. We realized that we should have focused more on testing functionality than aesthetics for our site. Getting general layout and spacing of the website was useful, but we found that fine aesthetics such as colors, effects, pixels, etc. should not have been tested at such an early stage because they were easily altered. Thus, if we could do it again, we would have focused on having higher fidelity with functionality and lower fidelity with look and feel because we found that changing the look was a lot easier than working out issues with our functionality.

Alternatively, a positive reflection we have was that deciding on our main users and the main use cases for our site very early on were extremely helpful when it came to determining which features were most important to implement, which ones could be removed, and which ones could be simplified. For example, user access control such as who can add and delete photos was a planned feature, but we soon realized that this was low priority in our primary use case of allowing photos to be shared among friends.