Application of Gyroscope | Designs that Makes you Immersive and Irresistible

Preface

iPhone is the first to introduce advanced hardware (such as gyroscope, gravity sensor and other sensors) into mobile phones, making the hardware parameters and upgrades of smart phones an important purchase reference for users. Designers will also pay attention to the application and potential mining of hardware when designing. . Today, let's talk about the practical application of "gyroscope" in enhancing interactive experience and enriching interactive feedback.

Smartphones have rich hardware capabilities

What is a gyroscope

In our natural interaction scenarios, changes in vision (like looking around) and feelings of speed (like flapping and shaking) are experiences that are very closely related to the five senses. Gyroscopes and accelerometers in mobile phones are such hardware that sense changes in angle, position, and velocity as we use the device.

 

The gyroscope measures the orientation and angular velocity of the device

 

Through the gyroscope sensor, the mobile phone application can sense the angle change of the user device and trigger corresponding actions and interactions, expand the 2D screen space, and achieve a more spatial manipulation experience. For example, the most common functions are the automatic switching of mobile phone landscape/portrait screen, navigation guidance, and mobile phone shaking.

The mobile phone automatically switches between landscape and portrait

 

Application scenarios that enhance the experience

1. Going beyond the bounds of the static view

Usually the display area of ​​the background atmosphere image is only the width of the screen at most, but combined with the angle perception of the gyroscope, the view can be extended beyond the originally restricted space through the change of parallax, giving the user more visual information and forming a 3D-like space effect . In Taobao Life's suit display page, when the phone is turned, the background image and character model will also change, making the display of characters and clothing more vivid and impactful.

Taobao life suit display

 

When matching multiple frames of image to changes in perspective, it can even bring about a naked-eye 3D effect.

Naked eye 3D effect

In many applications, the gyroscope carries its core capabilities, bringing users a 360-degree panoramic experience that breaks through the screen. For example, in the star map APP, following the changes of the gyroscope, the romantic starry sky can become recognizable and accessible.

Star app - real time star map experience

 

2. Make the game more manipulative

Gyroscopes can be said to be standard in somatosensory mobile games, and almost all games that need to perceive changes in three-dimensional space need to use it. Especially racing, airplane or sports games have high precision requirements for character control and perspective changes. By adjusting the posture of the mobile phone, swinging up and down, left and right, and simulating the control feedback of the real space, the 3D body sense of the game space is enhanced.

 

The gyroscope in the VR somatosensory game follows the movements of the user's limbs to realize changes in the distance of objects in virtual space and the perspective of space.

 AR somatosensory game 

3. Interaction in real space

In addition to manipulating flat elements, gyroscopes can also enhance the realism of interacting with real space when we use 3D AR interaction capabilities. Like the natural interaction in the real world, when the camera is close to the tracked 3D model, the 3D image needs to be scaled up, and the display angle of the 3D model needs to be adjusted according to the camera's perspective.

3D application

 

Moreover, in scenes with multi-dimensional space switching requirements, you can quickly and easily switch between 2D and 3D spaces by monitoring the angle change of the mobile phone. For example, in the walking navigation of AutoNavi Maps, when the user lifts the mobile phone, he can quickly enter the AR navigation mode, and easily obtain 3D real-world guidance, making it difficult for users to get lost.

Raise to Wake AR Navigation

 

Put down to restore plane navigation

 

Gyroscopes are also used in smart toys, such as Smart Car educational robots. Its gesture-controlled watch is equipped with a gyroscope, which can control the robot to move according to gestures.

 

The gyroscope can also be embedded in other household items, such as in this trendy favorite LED shoe, which follows the speed and angle of your footsteps, displaying dazzling light colors and patterns, making you the focus of the crowd.

Shining shoes through gyroscope

 

4. Let audio-visual integration and immersive

In addition to the visual and physical sense of space and manipulation, the gyroscope can also achieve a more realistic and ultimate surround sound experience in audio. For example, AirPods Pro's built-in gyroscope and accelerometer track the wearer's head, keeping the surround sound in a fixed position even if your position changes, allowing the ambient sound to move according to the movement of the person, creating an immersive sound experience.

Airpods surround sound positioning
The spatial audio capabilities of Airpods can also be applied to interface interactions. By mapping the head angle change to the picture angle change, a parallax effect is formed, and more content can be seen by turning the head.
Airpods follow example

3. More possibilities

In addition to gyroscopes, mobile devices have many rich sensor hardware capabilities, such as pressure sensors, optical sensors, vibration sensors, NFC, etc. They are found in various impressive interactive expressions. For example,  font design websites can make design more free and controllable through multi-finger touch on the screen.

In experience design, we can use hardware capabilities in appropriate scenarios to integrate richer functions, create more natural behaviors and creative interactions and feedback, and bring more direct and interesting experiences to users.

If you like the article, please share it with others with page link, thanks for your supporting! ❤


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.