Assignment 6: User Testing and Analysis ​

Vercel Deployment ( HERE) ​

User Task Table ​

Test #1: Riley ​

Riley quickly found the register button and create an account. I was immediately surprised by her choice of "handle" for her account. She began to type in what looked like a username. It was at this moment that I realized I had made a terrible choice of words -- current social media apps use "handle" to describe the name displayed to others. What I really meant for user's to input was a "bio". Thus, she was a bit confused when she changed her "handle", that the name displayed at the top of the page had not changed. Another interesting observation was the way that Riley navigated to the Settings section. There was a Settings tab on the home page; however, she navigated to the Profile and then clicked on a "Manage Settings" button to redirect to the proper tab. This was one solid example of the benefit of adding multiple routes to the same page.

Next, Riley quickly created labels for her account. After creating the labels, she went back to Home to attempt to label certain accounts. On a post, there is a green button with a "+" on the side to label an account easily with a dropdown. Riley validly started spam clicking the plus button, and was flustered when nothing was happening. She hesitantly clicked the green circle that activated the dropdown menu. However, the first label (which she happened to be using) was default selected in the dropdown. Thus, she said "Oh. It seems like it is already labeled". After labeling another account and seeing a visual of the label pop-up, she quickly deduced that the initial post was indeed not labeled. In the debrief, she touched on how the "+" symbol was misleading as it had no action attached to it. Further, she validly pointed out that she did not think the green circle was a button in that based on her past social media experiences, it followed a similar formatting to a profile picture.

One last, interesting interaction during Riley's user testing was when she was attempting to filter her feed based on accounts that she followed. Her first instinct was to go to Settings to make this filter. She quickly figured that there was no option to do this within Settings. This surprised me because the "Filter" componenet was large and centralized. However, this stems back to habits rooted in previous social media experiences. After attempting to use the "Filter by label" section, she was not able to properly filter the feed. This came down to case-sensitive inputs, which in hindsight is an awful choice of input for a "select" operation.

Test #2: Grant ​

Like Riley, Grant was able to quickly register and log into his account. One subtle point that I found very interesting was his observation of the "Logout" button. It was placed very largely in the top right corner of the header for all pages. Although he was able to find it, he pointed out that "this was not a place I would expect a logout button." He said that his first instinct was to logout through the sidebar. This brings up the interesting point that although actions may be easy to find, straying away from common design choices may still cause friction in the user experience.

There was no major confusion with his handle, and quickly created 3 labels. The next task,"label 3 accounts", was a source of confusion for Grant. He was already on the Labels page. Because of an iterative design process, there was a section for "Label an account" that took a text input. Trivially not knowing any account names off of the top of his head, he said "Welp, how the hell am I supposed to know what to label". Grant sat there and continued to dig through the rest of the "Labels" page, assuming he was missing something. Newsflash -- he was not! Rather than ease his experience, this additional avenue to label an account misdirected him. Looking back, this component does not make much sense. User's will have a difficult time manually typing in a username. This should have had a dropdown menu of accounts that you follow instead of a text input for the account to label.

Grant had many similar confusions as Riley above. For instance, the confusion of the green, circular label account, profile vs. settings, and filtering the feed. After cleverly figuring out how to filter the feed based on the "Following" label, Grant wittily commented "Grandma would not have figured that one out." Rather than repeat the analysis from above, I wanted to comment on some other observations Grant made during the debrief. He was extremely thorough in testing, almost exploring in between tasks to familiarize himself with "Ounce" more. He made valid suggestions for a variety of small design choices. For instance, (1) there was a lack of confirmation message for deleting an account; (2) no Captcha for login; (3) decreasing the size of the "Filter" component so users could see more posts when viewing the top of the Home page; and (4) incorporating statistical aggregation methods for the Daily Usage.

Future Improvements ​

1. Filtering Component (conceptual, critical) ​

The biggest source of friction found throughout my user testing was the filtering component on the Home page. This stemmed deeper than just a minor UI bug. Both of my users were not clear on the fact that "Following" was considered a label. I initially implemented this as a synergy. However, as it is a special tag that serves a special use (users can't delete or create this label), I should have given it unique functionality on the filter page. For instance, have different sections for filtering on: (1) author, (2) accounts followed (binary), and (3) label. Further, for ease of use filtering on a label should have been a dropdown select to alleviate typo / case sensitiver errors.

2. Label Account Shortcut (physical, major) ​

Another main source of confusion was the shortcut made for experienced users to label an account within the PostListComponent. Each post has a series of labels associated with the author, and I made a circular, green button with a "+" symbol adjacent for user's to directly add a label to an account. The first problem was that < select > tags can not display text within their element. Rather than create a makeshift dropdown, I simply placed the "+" to the side, Both users were spam clicking this symbol to try and add a label. However, there was also a deeper misconception -- the circular green button looked like a blank profile picture. I would fix this by creating a custom dropdown that allows for text on the inside, and making the button share the same shape as the labels to avoid confusion with a profile picture.

3. "Labels" View (physical, major) ​

Although in some cases multiple routes can provide benefits flexibility on how to create a certain task, my "Labels" view had the opposite effect. Additional areas to label an account simply confused them and slowed them down versus aid them. There is a specific section that allows users to "Label an Account" with a text input for the username, and a dropdown input for the label. Ahead of time, this seemed like a reasonable feature to include. However, after conducting my user tests, it was clear that user's would not know username's of the top of their head. There are a few different implementation options that I believe are reasonable. One is to simply delete this feature on the "Lables" view. But, I still think there is some value to be able to mass-label accounts one after another. So, another option would be to allows user's to select multiple labels at once. Then, the username input could either be (1) a text input with an autocomplete dropdown, or (2) a dropdown of all accounts that the user currently follows. I think option (1) would be more useful in that you shouldn't need to follow an account to label it.

4. Handle --> Bio (linguistic, minor) ​

One minor area of confusion was the notion of a "handle". Both of the test subjects in my user testing validly thought that this would be the name displayed to others on the app. This was simply a mistake on my end where I conflated the wrong terms together. In my mind, a "handle" was supposed to be the section where a profile describes a bit about themselves. However, on every social media app, a "handle" is the username (and the "username" is really an email). Thus, I could make a quick and trivial fix to change all occurences of "handle" to "bio". This would be much clearer to users the purpose of this element.