Apple Music Air Gesture
Intuitive gesture controls provides users with the ultimate touch-free music listening experience in various scenarios!
Interaction Desgin, Gesture Desgin
2 month
IXDSN-3000 NUI and Objects
Tools: Adobe After Effect, Figma, Procreate, Photoshop
Skills: Research, Prototyping, Gesture design, Style guide, Wire frame.
This project focuses on creating gestures to control interfaces for a better user experience. In many circumstances, the user might need a better way to interact with their phone. So in this project, I want to design some simple gesture control for the music software Apple Music without touching the screen. My initial idea is that when the user is in the car or the kitchen, and their hands are busy and they can't pay too much attention, they can use their hands to interact with the phone in the air to achieve the purpose of the user. For music software, the most crucial and easiest interaction is adjusting the volume and the previous and next song.
In this project, I used ‘Smoke and mirrors’ prototyping, which is when designers create a fake or partially working version of a product to test ideas before building the real thing. It looks real to users and demonstrates most of the functions. I used this technique to show my final design in a video form, and it made a clear demo of the design I did.
Overview:
Research:
In the research process of designing new gestures for gesture control, I wanted to start catching my own gestures that I do daily and categorize them into two different types, intentional gestures and unintentional gestures. So I put up a recoding to myself and started to do some homework. After I watched the recording, I found out many gestures that I liked to do, this gave me a very good understanding of gestures and how they work and reflect people’s emotions and energy.
My Gesture library:
To find a appropriate gesture for a particular function, I drew my hands through procreate and make some of the animation in the very first idea through After Effect. I was thinking about show the movement of the hand for next and previous song, so as adjusting the volume. My design concept is to let the user grab things just like in the real world.
User Flow Diagraming
I used User Flow Diagraming, wanting for more information and more thinking. A User Flow Diagram is a visual flow chart that maps out the steps, and decisions a user will go through to achieve the final goal. It is useful for planning an interactive experience because it clearly shows the needs and decisions, and it helps to analyze and look at the whole experience deeper with each step. The main components are a square which represents what the user does, a diamond which represents a user choice, and a round, which represents the flow’s starting point and ending point.
Wireframes
User Testing
Green Screen Filmmaking
Style Guide
Conclusion
Design Process
I learned many useful tools for interaction design. After Effects is a powerful tool, and I'm happy to understand how it works. Figma's variant functions have also made it much easier for me to create interactions. Additionally, I learned how to shoot green screen videos to demonstrate projects.
My final designs offer a valid and useful form of interaction since they naturally follow finger movements on the screen. Users can easily understand how to control the interface through my guide. The gesture control system is particularly useful in the kitchen or while driving since it doesn't require touching the screen—preventing both distraction and screen smudges.
The gesture designs are intuitive and memorable, with clear and meaningful screen feedback. I believe these designs will be helpful in many situations and can effectively address various user challenges.