Lstnr+-+Usability+test

Lstnr Usability Test

We change our prototype. The new version can be found at: []

** Usability Test Plan **

 After assessing our user needs, we found we need to test the following tasks: 1. Log into Lstnr (pretend your username is testuser) 2. Find the featured artist’s profile page. 3. Find The Beatles’ next show 4. Listen to a song by any artist 5. Pause the song. 6. Vote for that song.

Before the evaluation began, each subject was recited the following upon being presented with the Lstnr home page: “This is Lstnr. The idea behind it is to aide you in discovering upcoming artists right here at UMD.” The subjects were then presented with the [|pre-test questionnaire] and asked to fill it out. After the pre-test questionnaire, the tester says “I am going to ask you to do a few things on the website. Remember, we are testing the interface-not you. When you feel you have done what was asked, let me know and we will continue to the next task. Please think out loud whenever possible.” A new task is read to the subject as they complete the previous task. After the test, subjects were presented with the [|Post-test questionnaire] and asked to fill it out. Here are some screens the subjects saw: ** Usability Test Results **  We managed to interview 6 subjects. The results are as follows: First subject: A 22 year old, female UMD student who is always looking for new music.
 * Observations/Notes:**
 * Subject had trouble finding the pause button
 * She initially thought the home page was the featured artist’s profile page.
 * Subject seemed pleasantly surprised by the auto complete feature of the search box
 * Had trouble finding links but did not comment on it.


 * Noteworthy remarks by subject: **
 * “There are a lot of words on the screen. Have you not gotten around to drawing icons?”
 * “This isn’t the profile page? It looks like it could be.”
 * “I love the search suggestions.”
 * “I really don’t like text play/pause buttons. They should be icons”

**Post-test results:** The subject informed us that she found the interface to be very attractive and the search suggestions are great. However, the radio player controls should be icons and the notification popup should be smaller in size. She identified with “strongly agree” for “Finding the date, time and venue for a performance was easy” and “Lstnr has an inviting interface.” She identified with “neither agree nor disagree” when asked about the ease of use of the radio player.

Second subject: A 20 year old, female UMD student who primarily hears of new music from Youtube.
 * Observations/Notes:**
 * Had difficulty playing a song by an artist. She did not know the “add to playlist” link would play the song immediately
 * Thought the home page was the featured artist’s profile page
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">It seemed she was expecting to find auto complete in the search box
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Had difficulty pausing the song


 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Noteworthy remarks by subject: **
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“How do I play the song? Do I Have to add it to a playlist first?”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“The picture and info about [the featured artist] was so big I assumed it was the profile page.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“The words [in the radio player] threw me off at first.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“Oh, the back button doesn’t do anything?”

<span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">**Post-test results:** The subject told us she enjoyed that the radio player remains unchanged no matter what page she navigated to. She would change the radio player controls to icons instead of words. Subject identified with “agree” for each “Finding the date, time and venue for a performance was easy,” “Using the song player was easy,” and “Lstnr has an inviting interface”

Third subject: A 23 year old, female UMD alumna who tries to stay connected with the university whenever she can. She hears of new music from friends.
 * Observations/Notes:**
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Tried to click on image to get to featured artist’s profile page
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Took a while to find the links on the page.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Immediately found the pause button on the player


 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Noteworthy remarks by subject: **
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“The links blend in too much with the rest of the text.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“I wanted the band picture to take me to their profile.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“The music player looks too wordy.”

<span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">**Post-test results:** While the subject liked the “featured artist” featured so prominently, she did not like that the image did not direct her to the profile page. She identified with “stongly agree” for “Finding the date, time and venue for a performance was easy,” with “neither agree nor disagree” for “Using the song player was easy,” and with “agree” for “Lstnr has an inviting interface.”

Fourth subject: A 22 year old, male UMD student who uses many online resources to find new artists but does not know how to find UMD student artists.
 * Observations/Notes:**
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Tried to click on the featured artist’s image, but did not remark on it
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Immediately found the pause button
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Had trouble finding the link to the aritst profile page


 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Noteworthy remarks by subject: **
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“I like the player controls. Makes it unique.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“I like the dark theme but I think the font should stand out more”

<span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">**Post-test results:** The subject informed us that he enjoyed the look of music controls but that the text on the page (especially links) should stand out more from the background. He also commented that the layout of the page makes it easy to find any information. He identified with “strongly agree” for each “Finding the date, time and venue for a performance was easy,” “Using the song player was easy,” and “Lstnr has an inviting user interface.”

Fifth subject: 20 year old female college student. She goes to the University of Maryland but does not know any UMD artists.
 * Observations/Notes:**
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject had trouble finding the pause button.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject took a bit of time before coming to the search function when attempting to get to The Beatles’ profile page.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject thought that the front page was the featured artist profile at first.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject had trouble getting to the featured artist’s profile page.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject had no trouble logging in.


 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Noteworthy remarks by subject: **
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“The link to the featured artist page should be a different color or something.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“I think the colors blend too much with each other.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“I don’t like the text buttons. You should have the standard media player buttons instead.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“How is this different from myspace?”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“Don’t you think that the login link should be separate from the rest of the navigation tabs? Also once you login, the link should change to ‘logout’.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“Maybe change some of your text links to icons with those pop ups that tell you what it does.”

<span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">**Post-test results:** The subject informed us that the layout made the website easy to navigate but she would change the featured artist’s image so that it takes her to the profile page when clicked. She identified with “strongly agree” for “Finding the date, time and venue for a performance was easy,” and with “agree” for each “Using the song player was easy” and “Lstnr has an inviting interface.”

Sixth subject: 23 year old male. This person does not know any UMD artists and is not affiliated in any way with the university.


 * Observations/Notes:**
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject is very tech savvy and has a lot of experience with user interfaces.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject tried to click on the featured artist picture several times when trying to go to the featured artist profile page.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject seemed confused that the radio stopped when he clicked “next song” (he didn’t know he had to add songs to the playlist by clicking the links).
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject was able to log in very quickly.
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Subject was able to find The Beatle’s page through the search function very quickly.


 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Noteworthy remarks by subject: **
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“This is pretty cool. Not bad.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“The fake text threw me off.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“Change the featured artist picture to be a link. That’s a must.”
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">“I think if I were going to UM and I wanted to check out artists from the school I would definitely use this.”

<span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">**Post-test results:** The subject liked the ease of use of the radio player but said he would change the player icons to images rather than text. He identified with “agree” for each “Finding the date, time and venue for a performance was easy,” “Using the song player was easy,” and “Lstnr has an inviting user interface.”

In general the subjects enjoyed the layout of the website as a whole. However, most had difficulty with the radio player controls stating they should be icons instead of text. Many found it frustrating that the image does not link to the artist’s profile page. Some thought it would be best for the links and font to have more contrast with the background.
 * Overall: **

** Issues: **


 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">The radio player controls should be changed from text to icons (priority 5)
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">The radio player should have a more concrete idea of a playlist (priority 5)
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">The featured artist section on the home page is confused for the featured artist’s profile page (priority 4)
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">Links and text should have a higher contrast with the background (priority 4)
 * <span style="background-color: transparent; font-family: Arial; font-size: 11pt; text-decoration: none; vertical-align: baseline;">The featured artist image should link to the artist profile page (priority 3)