Gesture Controlled Music Player

Gesture-controlled music player that allows users to achieve the basic functionality of a music app with hand gestures without confusion

Gesture Controlled Music Player

Gesture-controlled music player that allows users to achieve the basic functionality of a music app with hand gestures without confusion

Year

2023

Year

2023

Tools

Figma, Premiere Pro

Tools

Figma, Premiere Pro

Topic

UI/UX, Research

Topic

UI/UX, Research

/ PROJECT OVERVIEW

/ PROJECT OVERVIEW

This project explores the design of a gesture-based interface for a music application, enhancing interaction through intuitive, natural movements.

By integrating gestures, users can navigate and control the app seamlessly, improving both usability and engagement. This approach not only streamlines interactions but also enhances the app’s visual appeal, creating a unique and memorable user experience.

/ GOAL

/ GOAL

  • Ensure an intuitive and smooth interaction to create a more engaging user experience

  • Design a high-fidelity interface screen focused on semantic interface feedback with gesture

/ HMW Statement

/ HMW Statement

HOW MIGHT WE design a gesture-controlled music player that provides an intelligent and intuitive user experience without confusion?

/ FINAL DESIGN

/ FINAL DESIGN

FAST FORWARD

FAST FORWARD

Make a hand gesture in the shape of a clock and rotate clockwise to fast forward or skip to specific lyrics quickly

Make a hand gesture in the shape of a clock and rotate clockwise to fast forward or skip to specific lyrics quickly

PLAY + PAUSE

PLAY + PAUSE

To start/stop the music, simply face your palm toward the music app and wait for feedback

To start/stop the music, simply face your palm toward the music app and wait for feedback

BROWSE + SELECT SONG

BROWSE + SELECT SONG

Browse and select different songs by pointing at the screen and swiping up and down

To start/stop the music, simply face your palm toward the music app and wait for feedback

VOLUME UP

VOLUME UP

Increase the volume by pointing at the screen and rotating your finger clockwise (decrease = counterclockwise)

To start/stop the music, simply face your palm toward the music app and wait for feedback

VIEW LYRICS

VIEW LYRICS

To view the lyrics, simply stretch and expand your hand slowly in front of the screen

To start/stop the music, simply face your palm toward the music app and wait for feedback

PROCESS

/ Representing Gesture

/ Representing Gesture

Before beginning to design the gesture interface, I made close observations of the intentional and unintentional gestures that people use in their daily lives and realized that people already have subconscious habitual gestures.I decided to take advantage of these gestures and conducted several rounds of user testing to finalize the gestural design.

I use Procreate to sketch the animation and tested it with different people to make sure the user understood the hand movements and followed the instructions correctly

/ ECHO AND SEMANTIC FEEDBACK

/ ECHO AND SEMANTIC FEEDBACK

Feedback is an important part of any interactive system - especially for gestural interfaces. Users need constant feedback in order to complete the simplest task.

Providing semantic feedback is crucial in gesture design due to its interactive nature. It enables users to visually perceive their movements and effectively follow along with the intended actions.To make an interactive experience feel natural, continuous feedback is essential.

/ Wireframe

/ Wireframe

/ Wireframe