Expect the extraordinary
Expect the extraordinary
GYRO MOUSE
Upgrade your life
Page layout
Name: Sarah Som
Age: 38
Occupation: Graphic Designer
The buisness professional
Background: Sarah is a successful graphic designer who works for a large advertising agency. She spends much of her day working on a computer, using a mouse to navigate through her design software. However, she has been experiencing discomfort and pain in her wrist, which she believes may be due to her overuse of the mouse. This pain has been causing her to slow down and take breaks, which is affecting her productivity and ability to meet deadline
Needs: In addition to a solution that will allow her to control her cursor without putting strain on her wrist, Sarah needs a solution that is customizable to her specific needs. She also needs a solution that is reliable and easy to use, as she cannot afford to waste time troubleshooting technical issues.
Solution: Additionally, the app's calibration feature allows her to customize the app to her specific device, ensuring precise cursor movement. Overall, the gyroscopic mouse app is the perfect solution for Sarah to work more efficiently and meet her deadlines without any discomfort or pain in her wrist.
Interactive models
We created some interactive 3d models on spline so that you can better understand how the product looks and works
THIS SECTION MAY TAKE TIME TO LOAD
Product Visualization
Product breakdown
Gyromouse holder
Primary Research
● Understand the demographic of our users - Age, occupation, and location.
● Find the target demographic and their main concerns.
● Understand the scope of the market and its feasibility
● Identify pain points and gain points
● Identify opportunities for design interventions
● Create an idea of how the product should perform
Online survey
Ain initial online survey was created to get some basic information from the users. The ease of use of different pointer devices, the problems facing each of them, how much they use a laptop daily and other questions. These questions help us identify the primary target audience, their problems and methods we can use to address them.
Competitor Analysis
hough no direct competitors aim to solve the exact problem, a few companies try to turn a phone into an input device.
Out of these, most of them focus on using the touch screen as an alternative to a trackpad, this was very clumsy, and there was significant lag. However, a few apps tried to utilize the gyroscope module on the phone to make it act like a hovering mouse.
I went into detail about two apps, Mouse droid and Remote mouse.
Design language
Landing page
A simple mobile app landing page
Gives user info about the app and two simple call to action buttons.
Login
and
sign Up
App page
This is the main mobile app screen,
All the functions provided to the user are available on this screen
There is an informative line in the center that can be customized to pass on tips as needed to users
There are two CTA buttons on the bottom
Customize
this will allow the user to change the app layouts and add / edit shortcuts
Configure
this is necessary on the first use as it allows the app to be personalized for the device and the mounting piece used and to give the user a more personalized experience.
Configure Screen
This screen allows the user to personalize the app with the user's current mounting piece.
The app takes in the maximum gyroscopic inputs at each extreme tilt to calculate the accurate cursor acceleration to give users the best possible experience.
There are four stages to the calibration process,
each of the stages involves tilting the phone to the maximum possible amount in one direction
This has to be repeated four times
Front, Back, Left, and, Right
Control Screen
This page is visible when the app is running and is connected to a computer.
Accidental touches are disabled to make sure no unwanted gestures cause the app to minimize or close.
To leave the app the user will have to press the power button twice
This is the default layout (created to resemble a mouse) but users can change the placement size and shortcuts that are accessible from this screen
The scroll functionality is also mimicked with the addition of the scroll wheel in the center.
Information on how to exit the app is always displayed at the bottom to avoid confusion
Customize screen
This page is visible when the app is running and is connected to a computer.
Accidental touches are disabled to make sure no unwanted gestures cause the app to minimize or close.
To leave the app the user will have to press the power button twice
This is the default layout
(created to resemble a mouse)
but users can change the placement size and shortcuts that are accessible from this screen
The scroll functionality is also mimicked with the addition of the scroll wheel in the center.
Information on how to exit the app is always displayed at the bottom to avoid confusion
Physical Component Breakdown
Developing the final physical piece for the gyroscopic mouse was a crucial step in the design process. The physical component was intended to be small and portable, while also being sturdy and durable enough to withstand regular use.
The design of the physical component was divided into five parts:
The plastic cover,
Magnet casing,
Transparent bottom case,
Rubber friction pads,
and the attachment mechanism(magsafe magnets).
The plastic cover was designed to be placed on the ground and to have a specific curvature that would help activate the gyro sensors. This was crucial to ensure that the sensors could accurately detect the movements of the device and translate them into cursor inputs. The curvature was carefully calibrated and tested to ensure optimal performance.
The magnet casing was another important part of the design. It was designed to hold the 132 magnets used to connect the physical component to the back of the phone. This casing was specifically designed to work with the magsafe technology on iPhones, ensuring a perfect and secure connection. The magnet casing was also designed to be sturdy and durable, so that it could withstand regular use and provide a long-lasting solution.
The transparent bottom case was an aesthetic choice, designed to showcase the magnets and to create a sleek and minimalist look. This cover was carefully designed to fit snugly around the attachment mechanism and to be transparent, allowing the magnets to be visible.
Rubber friction pads were also included in the design, to ensure that the magnets held on well to the phone and to prevent scratches. These small pieces of rubber were placed strategically to provide a firm grip without causing any damage to the phone.
The attachment mechanism was the final component of the physical design. This mechanism was designed to be simple and easy to use, allowing it to be used by any phone as long as it has a MagSafe or similar attach module.
References
Wikipedia: Gyroscope (https://en.wikipedia.org/wiki/Gyroscope)
React Native documentation: Sensors (https://react-native sensors.github.io/docs/Introduction.html)
React Native Bluetooth HID Device (https://github.com/Polidea/react-native-bluetooth-hid-device)
Bluetooth HID Protocol (https://www.bluetooth.com/specifications/specs/hid-over-gatt-profile/)
Mouse Report Descriptor Example (https://eleccelerator.com/tutorial-about-usb-hid-report-descriptors/)
Mouse Input Report Example (https://eleccelerator.com/tutorial-about-usb-hid-report-descriptors/#mice)
HID Usage Tables (https://www.usb.org/document-library/hid-usage-tables-112)
"Accelerometer and Gyroscope Based Gesture Recognition for Human Computer Interaction" by Zhe Li, Wei Mao, and Wenming Yang (https://ieeexplore.ieee.org/document/7847851)
Mobile device gesture and motion recognition through the use of an inertial sensor and Bluetooth mouse" by Yen-Hao Hsieh, Chien-Te Wu, and Cheng-Yuan Liou (https://ieeexplore.ieee.org/document/6623456)
"A Novel System for Mouse and Keyboard Emulation Using Smartphone Motion Sensors" by Mohammad Alshibly, Omar AlZoubi, and Islam Almasri (https://ieeexplore.ieee.org/document/8428577)
Plane-Casting: 3D Cursor Control With A SmartPhone
https://dl.acm.org/doi/pdf/10.1145/2525194.2525275
Move cursor with gyro
https://stackoverflow.com/questions/59352757/move-mouse-cursor-with-accelerometer-and-gyroscope
Move cursor with gyro
https://www.engineersgarage.com/computer-mouse-control-by-accelerometer/
Air droid
https://play.google.com/store/apps/details?id=com.tzgames.mousedroid&hl=en&gl=US
Air droid
AIR MOUSE | GESTURE MOUSE using GY-521 MPU6050 Accelerometer and gyroscope Module with Leonardo
Patents
https://patents.google.com/patent/CN201142065Y/en
https://patents.google.com/patent/US9098122
https://patents.google.com/patent/US8325138
https://patents.google.com/patent/US10093280B2/en?q=~patent%2fUS5898421A