GR6 - User Testing
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.
Alternative Uploading
One of the comments we received in our heuristic evaluation was that to ensure user control and freedom, we should have a regular uploading option with the default file chooser in addition to drag and drop. We implemented this for our final version, allowing you to browse through your files and select photos since more users are accustomed to this way of uploading photos. This is done by clicking on the upload button.
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
When doing the paper prototype, it was mentioned that a useful feature we should add would be suggesting emails of people you can share groups with so that you don't have to type in the same email each type. We created this to help the user with this process.
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.