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 modal display would popup. 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.
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.
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.
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!
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.
We use Ruby on Rails as our backend to handle routing, database, relations between data, and running algorithms such as analyze and pulling random images. Two separate modes are possible: cookie-based browsing when browsing as guest, and registered user browsing where data are actually stored in the database.
Images were taken from Google Image searches and were manually categorized. They are then seeded to the database.
The most tricky thing we found 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.
Evaluation
We tested our application with 3 users.
We found our users by sending an email to our friends, asking if any of them are thinking of getting a tattoo for the first time. Some replied back, and out of all who replied back, we chose 3 people, all in the age range of 18-24. One is an MIT student, and the other two graduated from MIT. These users indeed match our target user population; they are young, never had a tattoo, and have considered or are considering getting a tattoo. However, there is no guarantee if they will actually get a tattoo or contact any of the artists listed on our system, which might affect how motivated they are when using our system.
Procedure
Briefing
First, the users were orally briefed on the goals of the system. We used the same briefing that are used in our paper prototype:
- Our application is designed for users who are looking to get a tattoo for the first time. They do not know anything about the tattoo process, and may not have a good idea of what they way. The goal of this application is to assist these users to not only learn more about the different types and styles of tattoos, but also find an artist who can match his style and preferences.
- Our target user base is the young adult population who are most interested in getting a first time tattoo. Imagine that you are part of this population and age group (which you are).
- Finally, we would like to say thank you very much for helping us test our system. Note that:
- We are testing our system, not you. Our system is a prototype and we need you to help find these problems.
- If you run into some difficulties, that's great because it means there is some problem in our system.
- We will be taking notes on what you are doing so we can improve our system, but you will not be voice or video recorded.
- Finally, you can stop the test and leave at any time!
- Ok let's begin!
No demo is shown to the user.
Tasks
3 high-level tasks were presented to each of the users. The first two tasks involve the user to use our application as a first time user who are looking to learn more about tattoo process, while the third one involves a user retrieving their saved preferences after a busy week.
- Learn about the different styles of tattoos, and find the category which best fits your aesthetic preference.
- Find a suitable tattoo artist who will best fit your preference.
- You saved your tattoo preferences (collected designs and suggested styles) on our website last week. In this task, retrieve these information before heading to a tattoo parlor.
Problems Found and Possible Solutions
Problem (#people pointed out the problem) |
Analysis |
Possible Solution |
|---|---|---|
1. Login Page: User mistook the signup form as the login form. (2) [Catastrophic] |
The login dropdown is not very visible and the signup form is very prominent. |
Display the login form directly on the page instead of hiding it in a dropdown menu and make it at least as prominent as the signup form (bigger and similar layout). |
2. Browse Page: User is lost on what to do and start choosing different image categories while ignoring the Inkbox. (3) [Catastrophic] |
No detailed instructions on how to use the system and that there is an "Analyze" capability is given to the user since we only gave them high-level tasks. |
Provide newcomers with a tutorial or instructions on how to use the system. |
3. Browse Page: User missed the existence of the "add" round button when a mouse hovers over an image. (1) [Major] |
The "add" text and the button might be too small, especially since the tattoos tend to be colorful, making the colored buttons less visible to the user. |
Think of a good symbol to represent adding an image to the inkbox, or make the "add" text larger. |
4. Browse Page: User overwhelmed by the number of images displayed and would like to have more tags on the images (body part and size in addition to style). (1) [Minor] |
This particular user knew what she wanted to get: a small tattoo on her ankle or something not very prominent, so she really wanted to browse based on body part and size. |
Further categorization of images (body part, size, etc.) and more filters on the browse page based on the new categories. |
5. Inkbox: Analyze button completely ignored or confusing. (2) [Major] |
Some users are completely oblivious to the analyze button. |
Providing tutorials and instructions in addition to making the Analyze button smaller will solve the problem. |
6. Inkbox: Analyze button clicked with an empty Inkbox. (2) [Minor] |
User tried to click on the analyze button when the inkbox is empty, but the system does nothing to prevent that. |
Provide a pop-up message saying that the inkbox is empty. Completely removing the "Analyze" button is detrimental to learnability. |
7. Inkbox/Profile: No history of removed image or unliked artists. (2) [Minor] |
User asked, "What if I want to undo removing more than one image? What about re-liking artists?" This is another level above the security feature (undo) that we have already implemented. |
Keeps track of all images that a user have liked and what artists have been liked on the database. |
8. Inkbox: User tried clicking on the Trash Can icon but nothing happened. (2) [Major] |
Currently there is no feedback on what should be done with the trash can icon which leaves the user confused. |
When a user clicks on the trash can, a help message should pop up and tell the user what can be done with the trash can. This can be done only for newcomers. Afterwards, it will display the image history (see above). |
9. Inkbox: User tried dragging to add images to the Inkbox. (1) [Minor] |
Since users can drag images to the trash can to remove them, they assumed that they can also drag images into the inkbox. |
More consistency should be provided, either by removing the drag-and-drop feature entirely or making it possible to drag images into the inkbox. |
10. Inkbox: User confused if Inkbox is collapsible; they tried clicking on the "My Inkbox" text above the Inkbox. (1) [Minor] |
The little triangle above the inkbox and the absence of title in the inkbox makes the user think that the inkbox is collapsible. It is not. This is a problem with external consistency, as many interfaces implement collapsible menus this way. |
Remove the triangle and make put a title in the Inkbox, or actually make the inkbox collapsible. |
11. Analyze Modal: Sample images for a given category were thought as selected/own images. (1) [Minor] |
A heading that explains what images are being displayed was omitted for simplicity. However, the omission ended up confusing the user. |
Put an explanatory/header text above the images. |
12. Analyze Modal: When browsing as guest, the text "Signup to like an artist" has no link to go to the signup/login page directly. (1) [Minor] |
It is common for user interfaces to provide a link to pages that the application is telling the user to go to. |
Make the "Signup" text a link to the signup/login page. |
13. Analyze Modal/Profile: User would like to go to an artist page to see more details about artists listed. (2) [Minor] |
User wants to see more details about the artists and see more sample images. |
Provide a link to a page dedicated for the artist or to the artist search page with the artist pre-selected. |
14. Analyze Modal: User is not sure what exactly is being analyzed. (2) [Minor] |
The help text is not prominent enough, and also the lack of tutorial or instructions for newcomers. |
More prominent explanatory texts and instructions for beginners. |
15. Profile/Artist Search: The behavior of the like/unlike button is confusing. (1) [Major] |
Unliking an artist is too similar to liking the artist. |
We can provide more mode visibility by changing the shape of the button (currently they are different in color but similar in shape) or use spatial differences to indicate the actions that the user is about to take. |
16. Artist Search/Artist Info Panel: No direct feedback on images that are already selected. (2) [Minor] |
Even though on the browse page there is feedback when images are selected (they disappear into the inkbox) but there is no feedback on the artist info panel if an image has been selected (except that the zoom-in modal replacing the add button with "added"). |
There are a couple ways to solve this. 1) Remove the image when selected, therefore keeping it consistent with the browse page. 2) Provide an overlaying image over images that have been added. To keep it consistent, we can probably do the same to the browse page as well. |
17. Undo: Undo message is too similar to an ad-blocker; it went unnoticed (1) [Minor] |
Even though we tried following Gmail's example, it was mistaken to be a pop-up blocker by one user and went unnoticed. |
Making the undo more prominent and distinctive (color, size, image, etc.) will help solve this problem. |
Positive Feedback
- The interface is very simple, clean, and uncluttered.
- The login page is very artistic and structured.
- The zooming functionality works great and is really useful.
- Everything's working!
Reflection
There were very many things that we learned throughout the course of this project, but if there was only one thing we learned (aside from the technical aspects), it was that iterative design working closely with our end-uders is the most crucial. Afterall, the entire point of designing the interface was the make sure that it was usable, easy to learn and safe for our intended audience.
We spent a lot of time working on the technical implementation of the interface ourselves, and therefore became very familiar with the different functionalities, which might not be obvious at all for a first time user. We found that out very much both through the paper prototyping and computer mock/ups, and even with the final version. Bringing a fresh pair of eyes helped us to see (sometimes quite major) issues which we had overlooked, and allowed us to brainstorm and come up with new ideas to improve it.
Another part of the iterative process which we found very helpful was the paper prototyping. It was true that we started to become hesitant in throwing away things we had already made/coded up, just because of the time we had invested into it. Starting with the paper prototype helped to remove this attachment which would have otherwised hindered our ability in making any major changes or come up with more creative features. As a result, we built the entire site mostly from the final iteration of our paper prototype, and this worked out very well.
Looking back, it might have even been better to come up with more than one paper prototype, to allow us to considering a larger variety of features which we could test with our users. This would have allowed us to create a richer and perhaps more focused interface as we weed through and select the best snippets of designs for the final prototype.
In conclusion, we have worked very hard with our design and while we know that it is still not without flaws, we are proud of the design and implementation and all the work and late nights that went into it. We learned how to work together as a team, and how to make compromises and prioritize things on an important schedule. We also learned the importance of splitting up working and working to our talents. Most importantly, we have learned much about design through this process, and are glad to have produced a product that our users both enjoy and find useful.
-
.
