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.

...

• 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.

Image Added
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.

...

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

...