Style+Share+-+Usability+Test

=Usability Test Plan = [|Style Share Test Site]

User's Introduction to Project
//"You have been selected to participate in a study regarding StyleShare, a clothing-oriented website for creating and sharing style. We are testing the functionality of the website, not you in particular. We will ask you to complete a set of tasks and observe you as you do. We would like to iterate that we are testing how an anonymous user interacts with the site." //

Pre-Test Questions

 * 1) Gender
 * 2) Age
 * 3) How frequently do you use the web?
 * 4) How frequently do you shop online? For clothes or other things?

Tasks That We Asked Users to Test

 * 1) Add an article of clothing to your closet
 * 2) Add a friend
 * 3) Add an outfit to your closet
 * 4) Create an outfit from your clothing
 * 5) Edit an outfit
 * 6) <span style="font-family: Arial,Helvetica,sans-serif;">View your closet
 * 7) <span style="font-family: Arial,Helvetica,sans-serif;">Get more information about any user

<span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif; font-size: medium;">Post-Test Questions
=<span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif; font-size: medium;">Usability Test Results =
 * 1) <span style="font-family: Arial,Helvetica,sans-serif;">On a scale from 1, Very Hard, to 7, Very Easy, how easy was it to navigate through the pages?
 * 2) <span style="font-family: Arial,Helvetica,sans-serif;">Did you feel a sense of familiarity as you explored the website? If yes, what other websites did you relate to your experience?
 * 3) <span style="font-family: Arial,Helvetica,sans-serif;">What did you believe to be the most difficult task?
 * 4) <span style="font-family: Arial,Helvetica,sans-serif;">What did you like most about the site?
 * 5) <span style="font-family: Arial,Helvetica,sans-serif;">After the second task, in which you had to add a "friend", did you feel comfortable in the website? Did you find everything to be clear? Were there any pages or functions that made you feel uncomfortable or confused?
 * 6) <span style="font-family: Arial,Helvetica,sans-serif;">After completing all tasks, do you think the website serves its purpose well? (The intention of this website is to help users mix and match their clothes without having to physically remove articles from their closet in real life. Eventually, the website will also include the option to share the outfits with friends.)
 * 7) <span style="font-family: Arial,Helvetica,sans-serif;">Considering the purpose of the website, is there any functionalities or improvements, such as things you think would be cool, that you would like to see added?
 * 8) <span style="font-family: Arial,Helvetica,sans-serif;">Any additional comments?

===<span style="background-color: transparent; color: #000000; font-family: Arial,Helvetica,sans-serif; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Screenshots of What the User Saw ===
 * <span style="font-family: Arial,Helvetica,sans-serif;">//** Home Page: **//
 * [[image:Screen_shot_2011-11-15_at_10.49.45_PM.png width="648" height="249"]]


 * <span style="font-family: Arial,Helvetica,sans-serif;">**//Browse Clothes://**
 * [[image:Screen_shot_2011-11-15_at_10.53.28_PM.png width="648" height="398"]]


 * <span style="font-family: Arial,Helvetica,sans-serif;">//**Browse Outfits**//
 * [[image:Screen_shot_2011-11-15_at_10.54.52_PM.png width="648" height="454"]]


 * <span style="font-family: Arial,Helvetica,sans-serif;">//**Browse Users**//
 * [[image:Screen_shot_2011-11-15_at_10.55.34_PM.png width="648" height="319"]]


 * <span style="font-family: Arial,Helvetica,sans-serif;">//**My Closet**//
 * [[image:Screen_shot_2011-11-15_at_10.57.11_PM.png width="656" height="256"]]


 * <span style="font-family: Arial,Helvetica,sans-serif;">//**Edit (/Create New) Outfit**//
 * [[image:Screen_shot_2011-11-15_at_11.03.30_PM.png width="656" height="473"]]

<span style="font-family: Arial,Helvetica,sans-serif;">User Experience Summaries

 * <span style="font-family: Arial,Helvetica,sans-serif;">User 1
 * User 1 was a 26-year-old female. She used the internet daily and felt very comfortable with it. She described herself as someone who shops online often, frequently for clothing.
 * The user was clearly a bit impatient with the site and quickly and constantly clicked on things, which made it a bit hard to observe. She was able to complete the first four tasks easily and without many problems or extra clicking. Her first instinct was to always click on "My Closet" and looked a bit confused when it did not seem to have what she wanted. Task Four and Task Five are what gave her the most problems. When creating an outfit, she pretty easily navigated to the proper page. However, after adding an article of clothing she seemed confused and didn't know what to do. She seemed genuinely upset that there were no images of pants to add to her outfit. She then left the page while muttering "I guess I added that". She quickly realized that she had not and assumed it was an error with the functionality of the site. During the Post-Test Interview, she said that the Save button should be at the top. Also, text should appear in the input section at the top so she knows what the name of the Outfit should be. Task Five gave her a similar problem, but she was mostly confused as to why the outfit viewed in the picture did not appear in the gray boxes. Task Six she completed without a problem and remarked she had "already clicked on this page a bunch". Task Seven was not too difficult and ultimately achieved, but not as quickly as the first few. The problem seemed to be with some inconsistency in the dialog boxes.
 * Overall, the user liked the idea of the site, but complained it was visually unappealing. She said that the website could be a "little clearer, especially the Edit Outfit page". She also noticed that the drop down menus, especially "Options" in the header were non-functional. She seemed a bit startled when the alert message initially launched telling her that she had added a User as a Friend. But, she commented later that she did like this. Her parting suggestions was that she would like if she could upload her own pictures, such as of her in the outfit. She said it would be very cool to get the clothes to appear on a human model, especially one in the image of herself, but that sounded "too hard" and "wasn't that important".
 * User 2
 * The person is a 21 year old female undergraduate studying Government and Politics, but she also enjoys surfing the internet and browsing social networks.
 * Initially, the user was confused by the home page. It was not immediately obvious that the user had already logged in as a guest user. The format of the homepage was also confusing. For example, the user asked why the notification was just centered on the page if this was the home page where things are supposed to be described. In other words, the home page did not conform to the mental model she already understood from other webpages. The user proceeded to create a new outfit, but it was not immediately obvious that she had to click on the images in order to begin the process. Instead, she thought she could drag the images to the empty boxes on the right. The user noted that picking where the clothing should go (ie, Accessory Item #1) was a slow process. Also, there is a textarea at the top of the page, but it was not clear to the user what this was for. The user then proceeded to the browse clothes section of the site. She was able to successfully add new clothings to her set of clothes. The user noted that once she added the clothes to her set of clothes, the site did not remove the newly added clothing from the area that defined clothes which she did not have. Ie, once adding a clothing from “Clothes you don't have”, it should be removed in that section since the user now owns it. The user then proceeded to the browse outfits section of the site. In this section, the user was able to successfully add in a new outfit. However, the same problem of not removing the added item in the browse clothes section is still present here. The user was able to edit an outfit, but it was not immediately obvious how to save it. The user then proceeded to browse users. The user was able to add in new users to her friend list. However, it was noted that there was no option to remove someone after being added. Unlike most social networking sites, this site had no option to view other people's profiles. The user noted discrepancies across sections of the site. For example, the user could select whether to share a newly created outfit or not, but this option was not present for existing outfits that the user already owns. The user noted that the overall design of the site was a bit unorganized. Unlike social networking sites such as Twitter and Facebook which has nice colorings and such, this site's buttons seemed like they were “floating” on the page rather than anchored to a particular area. She said some items on the pages were also misaligned. For example, the user stated that the borders that surround “My Clothes” and “Clothes You Don't Have” aren't aligned together. It was noted that if other users can suggest clothings to her, then that option should be present for her as well (which it wasn't). Also, she stated that the “My Closet” button at the top right wasn't immediately obvious that it was a button since the other buttons such “Browse Clothes” were colored. The user felt the overall aesthetics was a bit lacking. When asked about what the good parts of the site was, the immediate answer was that the popups was a good idea. When asked on what new features could be added, she suggested giving the user the ability to add/edit descriptions to clothings and outfits as well as an option to delete existing clothings and outfits.
 * User 3
 * User Three is a 29-year-old female. She spends approximately 12 hours per day on the net. She has done some online shopping, though not so frequent. She usually online shops for gadgets.
 * Throughout the test: She was startled at first - but figured out in a few minutes on how to navigate through pages. However, when I asked her to do the first task (Add Clothes to Closet), since she was at the homepage, she clicked on the Featured Clothes first and tried to add that, but failed to do so. Otherwise, adding other inventories were easy for her. However, the part which confused her the most was when she had to 'Create New Outfit'. She managed to get to the page fast but startled with the different kind of page. She expected the ability to drag and drop the clothes to the place - and when she can't do that, she thought that the right panel was the way to navigate through items. (Click on Top #1, she'll get a list of tops to choose from to put it there.) When she didn't manage to do both of that, she started navigating to other pages thinking that the solution was in other pages. Her mental model was the left panel should be the model/human body and the right side is the list of clothes - it's like that in other pages. The editing was just as confusing - although she knew she can replace things from the left side, she thought she'll be able to delete from the panel itself. But didn't manage to do so.
 * According to the user, she feels like the page itself is simple and nice - however, creating the closet task confused her. It doesn't match her mental model. For her, it should be from right to left. Hence, she expected things to be on the right. Plus, as a Mac user, she expected the drag and drop functionality for the model. She feels like there should be an indication (e.g. icons, "alt" tag) to show her what she should do when she mouse over.
 * User 4
 * User Four is a 20-year-old male. He spends approximately 10 hours per day on the net. He has never done online shopping.
 * Throughout the test: He managed to figure out most things in a split second. However, he got stuck in the task to Create Outfits. He wasn't sure what the page would do and got terribly confused. He kept on clicking on the right panel boxes expecting for a response from the page. Then, he tried drag and drop - which didn't work, too. When he clicked on the image - he saw an almost similar interface as the one for him to add into his 'Closet'. So, he immediately clicking close without checking much. After awhile only he realized that there was a dropdown for him to choose from. Similarly in the edit section, he expected more of a right click on the box the images were placed on to modify the items. Other than that, everything went quite smoothly.
 * When asked to the user, he mentioned that the website gave him a sense of familiarity. He could immediately grasp the purpose of the website. However, creating an outfit was the toughest task. He wasn't sure what to do at all. He clicked on many things and expected some response on how he should do it. The simple layout according to him, was nice, but a little too dull. Adding some design features would make it more attractive. The title wasn't clear - he clicked on a button and wasn't sure which page was he on. (No breadcrumbs)
 * User 5
 * User Five is 21-year-old male who uses the internet roughly 2 hours per day and is familiar with online shopping websites since he recently purchased shoes online and frequently browses items he does not purchase.
 * The user reacted very well to most of the tasks given. When given tasks 'Add clothing...', 'Add a friend...', and 'Add an outfit...', the user utilized the top navigation bar, which is the intended design. He did this naturally - it seemed like he recognized the top bar as a navigation bar. In hindsight I feel that the order of the tasks may have caused a bit of bias in this situation, since the three tasks all require similar use of the navigation bar. Hypothetically once the user figured out one task he could have more easily figured out the following two.
 * The next task the user completed was 'creating an outfit,' which gave mixed results. He was easily able to find the link to the page (although I did make note that the link should be more evident), but once he reached the page he wasn't sure what to do. He mistakenly tried to click the outfit 'placeholders' we created on the right, then eventually gave up and hovered around the clothing area on the left before clicking. It seems that he wasn't able to easily deduce that the images were clickable. Once he clicked one of the images he easily figured out how to add it to the outfit, but he also had trouble putting items in different areas of the outfit. It seems that he overlooked the drop-down menu we provided since he didn't click on it at all.
 * 'Edit an outfit' also gave mixed results from the user... After a bit of hesitation he navigated to the Browse Outfits page via the navigation bar and immediately selected an outfit. He easily located the edit button in the popup that greeted him, then followed the link to the edit page. He knew to click the images on the left this time (since he just used the same page to create an outfit), but he suffered the same problem of never discovering the drop down menu that allows for the entire outfit to be edited rather than one field.
 * Viewing his closet seemed intuitive - he took his mouse right to the navigation bar and found the link. Once in the closet, however, it seems that he didn't immediately recognize the tabs. He scrolled up and down the page and clicked on clothing items. When he returned to the top of the page he was able to see the tabs again, and finally clicked the outfits tab to explore outfits as well. This was certainly not an ideal reaction.
 * 'Getting more information' was easy for the user. He used the navigation bar to reach users, then clicked an image to find the link in the pop up, which he followed to the user's closet.
 * User 6
 * User Six is a 21-year-old male who uses the internet roughly 1 hour per day and is not familiar with online shopping websites.
 * This particular test was completed using an ipad - everything was checked beforehand and the website was fully functional.
 * The user didn't complete any of the first 3 tasks correctly. He was able to navigate to the correct pages for the tasks via the navigation bar, and immediately knew to click the images to proceed, but while 'Adding clothing...', 'Adding a friend...', and 'Adding an outfit...' he routinely clicked on the 'My xxx' area items and attempted to add them to his closet. Unfortunately we had a flaw in our system (we knew about it beforehand) that allowed for him to click 'add' once opening the images, which led him to continue the process. Based on his actions, It is clear that the purpose of the 'My' area needs to be more blatant.
 * The user did figure out how to create and edit outfits rather easily, by using the navigation bar and corresponding buttons. He had trouble finding the 'create outfit' button, but once he found it he did not hesitate to click items and add them to the outfit. He accidentally clicked the cancel button in the pop up instead of the add button, and he also seemed to overlook the drop-down menu for selecting various parts of the outfit. He was never able to locate the 'save' button and therefore did not complete the tasks.
 * The user did not have any trouble viewing profiles. His own profile was one click away using the navigation bar, and he was able to figure out the tabbed structure quickly and browsed between tabs. He quickly found how to get information on a user by finding the user, clicking the user, then clicking edit in the pop-up.
 * User 7
 * User Seven is a 22-year-old male who uses the internet daily and is very comfortable with it. He does not shop very much, but the shopping he does do is mostly completed online.
 * The user had a lot of problems with the first task. And was actually attempting to explore the entire site before I reminded him that this was a task-by-task test. Like other users, he seemed to click on "My Closet" a lot, but overall did not understand it's functionality. He was unable to complete the first task, which frustrated him and made him feel as though he was not able to successfully complete any of the other tasks properly other than the second, adding a friend, and the last two, viewing your closet and getting more information on a user. In retrospect, we should have let a user start out with clothing in "My Closet", so that if they could not figure out how to add something to that section, then they could still use the sample image to add or edit an outfit. The user was able to successfully click on "Edit an Outfit", but felt as though he could not complete the task because "Nothing showed up". The user was also incredibly confused by the "blank space" on the website. He did not understand why nothing showed up in his closet or the "My " sections. Finally, the "Featured" sections caused a good deal of problems. The user did not understand why he could not add that outfit or article of clothing to his closet. The user never once clicked on "Browse Clothes". He later explained in the Post-Test Interview that this was because he thought it was clothes he already owned and that was "pointless".
 * The user's feedback mainly consisted of visual comments and his dislike of the site's apperance. He said it reminded him of sites from "GeoCities", except that there was no obnoxious blinking text. He did like how it was "not cluttered", but "the site does not look professional at all". He thought that "My Closet" was the most confusing and seemed to use this as his initial click-to site. However, he did not understand how to branch away from it. The user also craved a stronger visual difference. He said that he did not really understand the difference between the "Featured" items and did not really want to have to //look// at it: "[He] should be able to see it at a glance". He also later complained during the Post-Test Interview that "Browse Clothes" and "Browse Outfits" looked way too similar. He had no suggestions for things to add to the website, but said that "if it worked, it would be pretty cool".

Key Comments

 * "Why is the picture of the outfit not showing up?" [In regards to "Edit Outfit"] (User 1, Task 3)
 * "In the other pages, you'll have to click on items in the right panel (considered main panel) to get them in the left panel. Why doesn't the same thing happen in Create Outfit & Edit Outfit!" (User 3, Task 4 & 5)
 * "Why can't I right-click on these items in the main panel to delete them! How to delete items? I accidentally put tops in the accessories panel!" (User 4, Task 4)
 * "No one is going to look down there, the save button should go at the top." [In regards to "Edit Outfit"] (User 1, Task 6)
 * "Why do the buttons look like they're floating at the top?" [General Aesthetics] (User 2, Post-Test)
 * "The edit outfit area should look more like a person so that it is easy to tell what the purpose is." (User 5, Post-Test)
 * "I would like to be able to comment on various items, and like/dislike them like in Facebook" (User 5, Post-Test)
 * "There are no visual differences anywhere!!" [General Aesthetics] (User 7, Post-Test)

<span style="font-family: Arial,Helvetica,sans-serif;">Post-Test Statistics

 * **<span style="font-family: Arial,Helvetica,sans-serif;">Average Number of How Hard it Was to Navigate the Site on a Scale of 1 (Very Hard) to 7 (Very Easy) **
 * 3.57, "Sort of Hard to Navigate"
 * //5 + 3 + 5 + 5 + 4 + 3 = 25 / 7 = ~3.57//


 * //**<span style="font-family: Arial,Helvetica,sans-serif;">Page That Confused the User the Most Confusing **//
 * <span style="font-family: Arial,Helvetica,sans-serif;">[[image:chart_1.png]]


 * //**<span style="font-family: Arial,Helvetica,sans-serif;">Task the User Thought Was the Most Difficult **//
 * [[image:chart_2.png]]


 * //**<span style="font-family: Arial,Helvetica,sans-serif;">Users' Sense of Familiarity **//
 * <span style="font-family: Arial,Helvetica,sans-serif;">[[image:chart_3.png]]


 * //**<span style="font-family: Arial,Helvetica,sans-serif;">Users' Sense of Comfortability **//
 * <span style="font-family: Arial,Helvetica,sans-serif;">[[image:chart_7.png]]


 * //**<span style="font-family: Arial,Helvetica,sans-serif;">Users' Opinion of the Site's Purpose & If it was Served **//
 * <span style="font-family: Arial,Helvetica,sans-serif;">[[image:chart_8.png]]

**Problems Identified By Priority**

 * //**5, Most Important**//
 * Inability of "Edit Outfit" page to visually reflect a user's mental model
 * Improving the visual aesthetics of the site
 * Lack of clicking on images or an incomplete understanding of why some images were clickable
 * Confusion about the "My" areas
 * //**4, Pretty Important**//
 * Displayed images that did not work with a user's mental model and caused confusion (such as the lack of the outfit picture representing the contents of the outfit)
 * //**3, Somewhat Important**//
 * Being able to remove an outfit or article of clothing
 * Inability to browse through all parts of or re-designing without tabs for "My Closet"
 * Making the navigation of the site more intuitive
 * //**2, Could-be Important**//
 * Making the home page describe the purpose of the site more
 * Making the purpose of the "Featured" items more clear
 * Making the "View Profile" link more prominent
 * Making the "Create Outfit" button stand out more
 * //**1, Not Very Important**//
 * Adding more features onto the site