- Design a prototype of the Petpet user interface<\/li>
- Experiment with Leap Motion Controller<\/li>
- Propose new and unique gesture controls<\/li>
- Create meaningful interactions to nurture virtual pets<\/li><\/ul>\n\n\n\n
Process & Insights<\/h2>\n\n\n\n
![\"\"](\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/07\/leapmotion-1024x576.jpg\")
<\/figure>\n\n\n\nProcess Overview<\/h3>\n\n\n\n
The project consisted of two parts: research and development. Research included understanding the Leap Motion Controller capabilities, uses and experimenting with it. The development stage included the design of Petpet\u2019s style, wireframes, and gestures using the Leap Motion.<\/p>\n\n\n\n
Leap Motion Controller 2<\/h3>\n\n\n\n
![\"\"](\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/07\/Leapmotion-1024x683.png\")
<\/figure>\n\n\n\nThe Leap Motion is a hand tracking device that uses infrared sensors to capture finger movement in 3D space. This allows users to navigate and control of digital content on a computer or as an attachment to VR. For the project I used the second-generation leap motion with a higher res camera, increased field view and more.<\/p>\n\n\n\n
Similar Products<\/h3>\n\n\n\n
As part of my research, I looked into similar products to Petpet that utilized the Leap Motion to interact with animals. Hand Physics Lab and Cat Explorer are two VR-integrated apps that experiment with gesture-launched controls with consideration to natural UI. At some point in both apps, they interact with a cat by reaching out and touching it. The natural gesture UI is designed for how a person would generally interact with the general environment. Petpet\u2019s UI, in contrast, will be designed specifically for interacting with pets.<\/p>\n\n\n\n
\n\n![\"\"](\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/07\/physics-cat-1024x576.jpeg\")
Hand Physics Lab<\/figcaption><\/figure>\n<\/div>\n\n\n\n \n![\"\"](\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/07\/cat-1.gif\")
Cat Explorer<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n Spatial UI Design<\/h3>\n\n\n\n
Designing for the leap motion differs from designing for a website because it utilizes 3D space to control the computer. To learn more about how to design the digital interface of Petpet, I read Ultraleap\u2019s best practices and recommendation for UI components from the developer documentation.
Quick Takeaways:<\/p>\n\n\n\n- Gesture controls and UI should be intuitive to learn and not overly complex<\/li>
- Because users are interacting into the digital world, it should simulate it by limiting the number of actions simultaneously in the space <\/li>
- Depth cues are imporant to signal spatial awareness within a 3D environment<\/li><\/ul>\n\n\n\n
Style Guide<\/h3>\n\n\n\n
![\"\"](\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/07\/style-guide-1024x576.png\")
<\/figure>\n\n\n\nAs a tribute to classic virtual pet simulators like Tamagotchi, I incorporated the green and gray colors from the old interface into the main color palette. The purpose of this style guide helped to keep all UI components consistent through out the webpages.<\/p>\n\n\n\n
Building the prototype<\/h3>\n\n\n\n
![\"\"](\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/07\/wireframes-1024x525.png\")
Low, mid, high-fidelity and final versions from left to right.<\/figcaption><\/figure>\n\n\n\n Before the final prototype, I also created low, mid, and high fidelity wireframes. I generated wireframe images of the dog and background using generative fill prompts in Adobe Photoshop. Leveraging AI in this process significantly aided in managing the project scope.<\/p>\n\n\n\n
![\"\"](\"https:\/\/digm.drexel.edu\/uxid\/wp-content\/uploads\/2024\/07\/progressbar-1024x666.png\")
<\/figure>\n\n\n\nThe biggest difference in the initial designs, through feedback, was the incorporation of the health progress bar. This addition aimed to gamify interacting with pets while building motivation to care for the animals.<\/p>\n\n\n\n
Final Solution<\/h2>\n\n\n\n
Petpet is a hybrid-controlled web app that toggles the Leap Motion and cursor. Users start on the home screen cursor only and can toggle once in the pet\u2019s environment. Once in Leap mode, gestures such as petting (stroking with one hand left to right), pouring food (holding a can and tilting), and belly rub (making circular motions with both hands) will trigger a response from the pet that gets displayed through the health bar. <\/p>\n\n\n\n
Users are guided through instructions with tips on how to interact with the environment by the help button on the top-right corner. Between the cursor mode and leap motion mode, different instructions will be given.<\/p>\n\n\n\n