...

The users can also browse the tattoo by category, using the drop down menu just above the images. The default value is random, where 20 images are picked at random from our database. When they are finished, they may click "Analyze" button, and an analysis page modal display would popup with some more example tattoos, and some artist suggestion. In GR4, the rest of our page behind the modal screen was still active, which was not consistent with how modal display usually behaves. Our heuristic evaluator pointed this out, and we have disabled the application outside the area, and darkened them to give more focus to the modal display.

Removing image from the InkBox requires more involved action. The users needs to drag and drop the image on the trash can on the bottom right. We believe this will provide safety against accidental deletes, and we believe that users are unlikely to delete multiple images at once. If the deleted image was recently added, it will get added back to the same location it was before on the left. Otherwise, it may disappear, or appear at the end of the page on the left depending on whether or not it fits the category being shown.

...

During the slideshow, we also provide a quick add button for the images on the display area, and quick remove button for the images in the InkBox. If the user clicks add or remove, the image gets added/removed, and the slide show advances to the next image in the collection. Additionally, we realized that the two modes of slideshow are very similar, so we style them using opposite colors, and provide undo function (via the undo bar) as a safety measure against memory lapses or mode error.

As with the analysis screen, the rest of the application was disabled and darkened when the slideshow is displaying.

Artist Search Page

The user may also explore artists they may be able to get tattoo from. The interface consists of over view tabs on the left, and more detailed information on the right. It also includes artist's sample work, which will turn into a slideshow once clicked. The user has the ability to quickly add tattoos they like to the InkBox, with an undo functionality to reverse any accidental adds. If the user logs in, they will also be able to like the artist, who will appear under their profile page.

...

The final part of application is the profile page. It contains the summary of tattoo style analysis based on the InkBox content. Additionally, any liked artists are also shown. However, if the users were not logged on, they will be greeted by Tim Beaver, and prompted to sign up for free!

This feature was canned in GR4, and we included many information that we decided to remove later. In particular, we included many personal information such as profile picture, and some short paragraph about yourself. For the final design, we realize that our application is not a social network application, and we remove all those unnecessary personal information. The only things that are left is their name, analysis result, and the artists that they have liked.

Implementation

We use javascript and jQuery to implement the frontend. We did everything from scratch because we realized that most people will be using twitter bootstraps, and we wanted our website to look different. This comes with a cost. We made heavy use of css and custom graphic design to make sure that our interface looks consistent. All interactions (drag and drop, slideshow, mouse hovering, etc) were all handled using javascript, jQuery, or css.

...