Design
The main layout of our design remain largely the same from the paper prototype. It consists of three main tabs that allow user to select tattoos they like, browse artists in the area, and analyze their tattoo style. However, the interaction and behavior of each elements on the page have been drastically change to address usability problem found during our user testings.
We had an extensive discussion of the color theme to use, considering many color themes from kuler.adobe.com. The mood, and feel that a color theme gives off play an important role in our decision. We ended up with mainly black and white scheme, with occasional desaturated orange and green because they will not compete with our tattoo images which are high in saturation.
Login Page
The very first page the user will encounter is the sign up/log in page. It gives an overview of what our application does, and presents the user with a sign up form. Signing up is necessary for the user to be able to save their tattoo and artist selections, which are main features of our application. However, during testing, our users preferred not to sign up, so we provide an option to use our application without the ability to save their selection by clicking the "Browse" button on the lower right.
During heuristic evaluation, many users pointed out that our text is hard to read because some part of the background are also white, especially the "..into the tattoo.." part on the title. So a shadow drop was added. Some user also mentioned that they don't have a good idea of what our application is all about from a glance at this page. As a result, the blank space on the left was filled with a quick overview of our application.
Browse Page
Once the user has signed up/logged in/clicked browse, they will be taken to the Browse page, which allows the user to browse our tattoo collection, and make selection of the ones that they like. When users hover their mouse over an image, it gets highlighted, and a little "add" button appears (see the tattoo on the bottom right). The image will be added to the InkBox on the right, if the user clicks on the "add" button. This is an improvement over our previous design, where we allowed adding by simply clicking on the image.
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 would popup with some more example tattoos, and some artist suggestion.
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.
To add an extra layer of safety, an undo bar appears every time the user removes an image from the InkBox. Once clicked, the image gets added to the same location it was before in the InkBox.
If the user clicks on one of the images, either in the display area or in the InkBox, a slideshow of the enlarged versions of the images is displayed. This is major modification from our GR4, which lacks this feature. We received many feedback that a zooming function is needed. We have considered the alternative design which allow the user to enter slideshow by clicking on the corner of an image, but we decided that users are more likely to enter slideshow, than to add an image. Therefore, we use clicking the image (easier, bigger target) as a way to enter slideshow, and have an add button in the corner, as described earlier.
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.
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.
During our GR4, the users seemed to like our tabbed design. However, we did not make use of the space we have on the detailed info panel very well, so we had to remake all of that. The slideshow functionality was also an add-on that comes later.
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!
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.
We use ruby on rails as our backend to handle our database, which was created by hand from google searches. All images were manually labeled. We also implemented cookie system to save user's preference in case they do not want to log in.
The most tricky thing we find was how to populate the display area in the browse page. We were hoping to display all the images we have, and separate them into pages, but this would complicate the mechanism that keeps track of image location on the display area, and we did not have time to implement it. For this reason, we decide to have a fix number of tattoo images shown in the random mode, which may be inconvenient if the user wants to browse the entire database.