| Table of Contents |
|---|
!logo_black.png|align=center!Design
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.
...
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 | ||||
|---|---|---|---|---|---|---|
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="b3b0238e-12c3-4a07-918a-2aae67fda22b"><ac:plain-text-body><![CDATA[ | 1. Login Page: User mistook the signup form as the login form. (2) [ 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). | |||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="ac4a8a01-06a6-4f0d-950b-9058e6b19729"><ac:plain-text-body><![CDATA[ | 2. Browse Page: User is lost on 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
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 | <ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="1ff3f89d-292e-424a-8d0f-ec0b8f2bb4ff"><ac:plain-text-body><![CDATA[ | 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. | <ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="d35cb57b-4844-493c-8f73-2533dbffd542"><ac:plain-text-body><![CDATA[ |
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 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. | ]]></ac:plain-text-body></ac:structured-macro> | |||
5. Inkbox: Analyze button completely ignored or confusing. (2) [Major] | Some users are completely oblivious to the analyze button. | Providing | <ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="7f10ce7b-f5a2-439d-909e-dbf459934492"><ac:plain-text-body><![CDATA[ | 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. |
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="018d1d3e-f602-4374-a6ed-bbf90dcf8a66"><ac:plain-text-body><![CDATA[ | 6 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="e8460ef4-91c2-4ecb-992d-add3ad5af501"><ac:plain-text-body><![CDATA[ | 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. | |||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="33ef73bb-21c9-412e-8358-9117aafd29ac"><ac:plain-text-body><![CDATA[ | 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). | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="80b8f579-282b-4426-b8f3-f1bd36656a88"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="73ee9f32-bb70-4567-9e9a-0d5fe8d360dc"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="1b6eff10-b72b-4e54-8d05-d01f1c1d4f8c"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="523fbc9a-0931-4828-82db-f1d90ac7da40"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="34fbc0ac-2e57-4570-8ca0-9200af775651"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="42a0410b-efe4-4ef9-9cfc-cdd9909d6c1e"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="26e9590b-363d-4cc7-aa56-e22eca18b03d"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="9d08c445-f690-493b-8cc8-c570e4297751"><ac:plain-text-body><![CDATA[ | 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. | ]]></ac:plain-text-body></ac:structured-macro> | ||
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. <ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="9b1dd91e-3c0e-47da-8e2e-5b052d651abd"><ac:plain-text-body><![CDATA[ | ||||
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. | ]]></ac:plain-text-body></ac:structured-macro> |
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!
...
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.
...
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.
-
.
