INTRODUCTION
Bugs Music App
Redesign
COURSE
Usability Engineering
Bugs is the top 10 music Mobile Application in South Korea.
People are attracted to wearable devices such as fitness tracker and smart watch such as Apple Watch. Especially, people use wearable devices when they exercise, jog, or do other activities so music app is the most-have app for them. However, we found out that the usability of music application on Apple watch is bad so my team decided to redesign Bugs app.
MY ROLE
UX designer
PROBLEMS
We conducted focus group interview to find out the problems of current app.
These are common problems that users felt.
-
The app doesn't offer the list of songs so user can't expect what is next song.
-
Inconsistent experience; when user press the folder 'Songs that I like', then it plays in order of the date music added. However, for the folder 'Songs that I saved', the songs are ordered alphabetically.
-
Next arrow button is s small that it is hard to press while user in dynamic position.
-
Low expectancy; when user swipe right to left, the page is changed with lyrics.
-
It is hard to control volume.
USER STUDY
A user study is executed with Think Aloud method to gather user requirements. The subjects are given several tasks and asked to talk in words about all they think during experiments.
Experiment
The experiment is consisted of two types.
One is a set for static condition such as listening to music while studying, taking a rest and so on. The other is for dynamic condition such as listening to music while running or jogging. Considering two conditions, we set a study room in UNIST library as a place for static condition of experiment and UNIST Sports Center for dynamic condition. The task list of Think aloud is composed of the results from focus group interview.
Table 1. Experiment details
Table 2. List of tasks
Table 3. Tasks in Static situation
Table 4. Tasks in Dynamic situation
Bad Scenario
The following bad scenario consists of problems found in user study. In next milestone, improved context will be represented as good scenario by solving the problems.
1. Junghui bought an Apple Watch. As he likes to listen to music everywhere, he tries to install a music application in the device. Connecting the Apple Watch with his iPhone, Bugs music application is installed easily. Now he is leaving home to meet his friend. He really likes the watch on his wrist.
2. He goes into search menu to add some songs to playlist while heading to meet his friend.
3. A song of 'Gui-ro' is faintly heard, so he decides to search the song. However, it cannot recognize his voice correctly maybe because of the noise around him. He says the song title again, but one similar but not the word exactly he want appears up. He said the title once again patiently. Another unexpected word appears. Lastly it successfully recognizes the title at the 3rd trial, and he selects and plays it.
4. He wants to listen to this song later easily as he adds the song into an album. However there are no buttons and signs at all for ‘Like’ function. He gives up trying since the right bus he should get on is just arrived. As he gets on the bus, he finds there are too many people here. He wants to see the lyrics of the current song. He thinks for a while and decides to touch the title on the screen. Then he bumps into someone in the bus, and presses the screen strongly rather than touches. And another screen appears up which includes ‘Like’ button. Unexpectedly he adds the song into the ‘Like’ album. As the screen disappears, he touches the title again and meets the lyrics finally.
5. Now he thinks it would be too difficult to find songs one by one in this crowded environment. He decides to play all songs in ‘Like’ album automatically. He goes into the album, but it plays one song of the list automatically and immediately. He doesn’t know exactly why he added this unfavorable song into his album.
6. He doesn’t know why he added this song to the list. He touches the forward button to listen to another next song. Then the bus jolts, and he unintentionally presses the button too strongly. It shows new screen popping up rather than playing next song. To complete his misery, it irritates him ceaselessly!
7. He really doesn’t want to listen to this song. To make things worse, it seems that there is no way to adjust the volume. Maybe he loses his temper when facing his friend.
INITIAL PROTOTYPES
Evaluation
The goals of the evaluations is to find out what are the unexpected usability problems from the experts and to develop the prototype in more appropriate way by using paper prototype.
The evaluation is done by five experts and it have a form of heuristic evaluation. The experts are asked to evaluate the system considering various usability aspects and give some solutions. The experts are selected considering knowledge of usability including user interface and cognitive ergonomics and familiarity with music application. Therefore, students who take ‘Usability’ course in this semester and use music application would be act as experts in the evaluation. Our team conducted evaluation in TD room in 10th floor of Engineering building 1 in UNIST
Table 5. Heuristic criteria paper
Table 6. Heuristic Evaluation sheet
Most experts satisfied with overall aspects of the prototype which was revised from user test. However, there were some other problems newly found. The problems include poor visibility and implication of meaning of the newly added icons and functions and other functional matters. Followings are detail explanation of these newly generated problems related to heuristic criteria.
One problem that all 5 experts felt uncomfortable was ambiguity of icons of playlist and lyrics. The next most common problems were found by 3 experts. The problems include confusing between two icons indicating current playing song and liked one respectively because of their similar color and small size, ambiguity of difference between my album and storage box and between cancel and completion, and poor ability to convey the meaning of a screen after force touch on playlist screen.
Other problems were found by 1 or 2 experts. Those include that they felt like to touch an icon but its function was not that, more important icon such as song title rather than singer, backward button and scroll bar was not remarkable, meaning of icons was not clear for playing method, white and red circle icon in radio function, it was hard to find how checked songs are arranged in the playlist, and it was felt like to be shown album jacket when touch playing screen but it was not, direction of playing loop bar’s movement was confusing about whether it is clockwise or not, inconsistency of using words of cancel and backward, indication of current state and swipe function was insufficient, and it was hard to find existence of force touch function.
Most of the problems are related to affordance of clear meaning and visibility of characteristics of icons such as color and size rather than their functional matters. These newly found problems are categorized according to the number of experts who felt difficulty about each matter, and severity that they marked to each one. Then problems found by all 5 experts commonly and with high severity would be regarded as the biggest problems, and be considered as solutions for final design.
FINAL PROTOTYPES
1. Playing loop bar and Next song interaction: We tried to increase affordance to give the user constraints to move next song, user can only do swiping because there is no next or previous button. And we increased the visibility of playing button and by doing so, we could get enough spaces to put the other icons in playing screen.
2. Playlist: In Bugs application, playing list is not provided that the user cannot know what next song is without moving to next. And also they have to move out of play screen to go albums to find what they want to hear. Therefore, we added playlist screen for user
2. Home screen: Bugs also do not provide the playlist of favored songs. Therefore, in our initial prototype we provide users of favored songs, and specify word next to the back button to let users know the current location. However, in heuristic evaluation in Table 8, users felt the words gives a meaning that user can go the location if they click the back button, because the word is written on the left to back button. So we relocated the word informs the current location in the middle. In addition, we add function of multi selection through the force toughing the screen as like figure 4. Users can select songs, add them to the main play list and play. In initial design, we used word ‘Complete’ for doing that. It was not user word, because experts felt awkward for the word. Thus it was changed as ‘Play’. The most recently added song is on the top of the list, which implies the list aligned in the order of being added. The sequence of it is opposite to the main playlist which the recently added song is in the bottom. The reason for this is, in main play list, the song is played in descending order, and user wants to listen to added music after the latest song.
3. Voice search: In the context of using apple watch, it was found that apple watch user normally used it in noisy outside. In consequence it would cause high rate of recognition error. So, after completing the voice recognition, it suggests 3 similar words and let them to choose one of it. The most accurate word would be listed first, and has bigger size. It would make users choose the word more easily. Then, by giving confirmation would pops up asking ‘Are you search for ‘something’?’ The reason why we set the conformation is because the 3 words look similar so that it can easily cause mistakenly touching another word. Clicking ‘Yes’ continues searching, and ‘No’ for going back to first recognition screen.
PROTOTYPES
