MusicX
(06)
Challenge
Designed a gesture-controlled interface based on the existing music streaming application interface to accommodate a language of hand gestures to allow for touch-free control.
Year
2020
Roles
User research/User Test
UX/UI Design
Finding the Problem
A large number of face/gesture recognition functions have burgeoned into people's daily life. When we are working, driving, eating, touch-free sensing recognition technology helps us accomplish tasks conveniently. This function has been widely used in the modern market, such as music applications, in-car system.
However, some music applications on the market were only developed on technology and there are still exist user experience problems. Therefore, designing a simple and easy-to-use gesture-controlled interface will greatly increase user engagement, and increase the product's competitiveness.
Design Goal
Clear and easy to understand
Draw gestures based on music app functions, and the gesture designs are clear and easy to understand
Easy to use process
Establish a simple and easy-to-use gesture-controlled interface to minimize the users' process
Flexibility
The interfaces are available for touch-free function and also maintains the touch screen function, so that the users can alternate between the two functions
In order to better design the gesture-controlled diagram, I conducted two observational studies:
1. I set an easy-to-operate task for myself and recorded it with a video recorder, such as watching a video. And then I watched the recording and captured the moment when the gestures were made. I divided the gestures into two categories: intentional and unintentional. Knowing which gestures are made consciously or unconsciously helps me understand which gestures should be excluded from my gestures design.
In order to better design the gesture-controlled diagram, I conducted two observational studies:
2.The second study is to observe the gestures of others and see which actions they use to express certain feelings and information. I intercepted a clip of the male protagonist communicating with gestures in the movie "One Thousand Words". I have learned that it is difficult to guess the meaning behind a gesture, and different people have different understandings of a gesture.
GESTURE DRAWINGS & USER INTERVIEWS
I summarized the 6 main functions of the music app, and started the gesture design.
1. Onboarding the user
2. Select an album from a list of albums
3. Select a specific track from an album
4. Stop and Play the music
5. Play the next / previous song
6. Increase and decrease the volume
Interview notes
Based on the interview notes, I optimized the gestures.
Wireframes
I design the gesture-controlled interfaces based on the Apple Music wireframes.
UI Display
Reflection
In this project, I designed a touch-free control interface for the first time. I not only combines 2D interface and 3D gestures to control a music app, but also continuously optimizes the gesture designs to determine the most suitable Illustrations of the functions. Finally, based on the results of user interviews and tests, the final interfaces were designed. This project helped me better understand the way the interactive interface is controlled by gestures. For the next step, I was thinking about how to design a gesture control interfaces without Tracking Dot (Cursor).
Overall Process
Finding the Problem
A large number of face/gesture recognition functions have burgeoned into people's daily life. When we are working, driving, eating, touch-free sensing recognition technology helps us accomplish tasks conveniently. This function has been widely used in the modern market, such as music applications, in-car system.
However, some music applications on the market were only developed on technology and there are still exist user experience problems. Therefore, designing a simple and easy-to-use gesture-controlled interface will greatly increase user engagement, and increase the product's competitiveness.
Design Goal
Clear and easy to understand
Draw gestures based on music app functions, and the gesture designs are clear and easy to understand
Easy to use process
Establish a simple and easy-to-use gesture-controlled interface to minimize the users' process
Flexibility
The interfaces are available for touch-free function and also maintains the touch screen function, so that the users can alternate between the two functions
GESTURE STUDY AND RESEARCH
In order to better design the gesture-controlled diagram, I conducted two observational studies:
1. I set an easy-to-operate task for myself and recorded it with a video recorder, such as watching a video. And then I watched the recording and captured the moment when the gestures were made. I divided the gestures into two categories: intentional and unintentional. Knowing which gestures are made consciously or unconsciously helps me understand which gestures should be excluded from my gestures design.
2.The second study is to observe the gestures of others and see which actions they use to express certain feelings and information. I intercepted a clip of the male protagonist communicating with gestures in the movie "One Thousand Words". I have learned that it is difficult to guess the meaning behind a gesture, and different people have different understandings of a gesture.
GESTURE DRAWINGS & USER INTERVIEWS
I summarized the 6 main functions of the music app, and started the gesture design.
1. Onboarding the user
2. Select an album from a list of albums
3. Select a specific track from an album
4. Stop and Play the music
5. Play the next / previous song
6. Increase and decrease the volume
Interview notes
Based on the interview notes, I optimized the gestures.
Wireframes
I design the gesture-controlled interfaces based on the Apple Music wireframes.
UI Display
Reflection
In this project, I designed a touch-free control interface for the first time. I not only combines 2D interface and 3D gestures to control a music app, but also continuously optimizes the gesture designs to determine the most suitable Illustrations of the functions. Finally, based on the results of user interviews and tests, the final interfaces were designed. This project helped me better understand the way the interactive interface is controlled by gestures. For the next step, I was thinking about how to design a gesture control interfaces without Tracking Dot (Cursor).
GESTURE STUDY AND RESEARCH