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