Virtual Button Process Work

Three Btn State Current Design.png

Problem To Solve

3D spatial depth can be tough for users in a 3d environment. During the first tutorial, users continued to have issues with identifying that a button was press-able and reaching far enough to activate and successfully press a button. To work on this issue, we turned to a project in flight that was in need of a updated button system to control the functional capabilities of a fracture table.

Tasks

Design:

  • Way for user to control fracture table using a button press

  • Improve the button system already in place so that the user knows that

    • the button is press-able

    • they have successfully pressed the button

Solution

Provide a user interface with buttons to control the fracture table. The buttons will capture the attention of the user and reinforce the successful completion of the button press.

The Outcome

Button Feature successfully implemented in the technique and received positive feedback from the customer. User knows that a button is press-able and can successfully get through the technique without prompting from a proctor.

Target Audience

Medical Device Representatives and Surgeons Using Osso VR to Learn a Technique

Programs Used

Unity, Adobe Illustrator

Role

UX Designer and UI Designer


The Design Process

Establishing Requirements

Requirements were established by the product owner:

  1. Fracture table controls need to be driven by a button press

  2. There should be a difference between the inactive and active button states

  3. Buttons should work similarly to those created for a different technique

Ways to Control Fracture Table with Buttons

A number of ideas came out of the first brainstorming session ranging from different ways of presenting buttons to veering away from a single button press all together. Below, is an image of one of the ideas mocked up to show buttons and dials on a single panel. To even more effectively show the potential use of different buttons type I imported a png of the panel into our 3d program unity and recorded a video of myself walking through the potential design for the product in a video.

First Exploratory Mock Up.png

This initial example was fun to create but also taught me the need to continually look back at the established requirements and get feedback from other collaborators (technical artists and product owner in this case) and to deliver a product at the lowest resource cost, but with the highest impact to the customer. A number of ideas (such as the dial) were shelved until future iterations of the buttons.

UI Panel in VR to control the fracture table

UI Panel in VR to control the fracture table

The simplified button design that was further iterated on above is as follows. All fracture table controls were contained on one panel, so the user could rely on one central location to control the table. The femoral hook and the traction table controls were separated since each of those components of the table are found in two different locations. The buttons were all single press buttons to fulfill the requirement that the buttons work similarly to what had already been created.

Customer Feedback

Following the implementation of the simplified button design we showed our customers the panel in context of the technique and received feedback that the panel looked and felt great to control the fracture table. That being said, the aesthetic look and feel of the panel could be further improved, so we went ahead and kept the design but improved the button design. (see below)

Final version of buttons.png

We improved the overall visual look and feel of the panel by adding a gradient along with a drop shadow to the 2d png that would be imported and placed on the final button. Other considerations with this button design was the way the user interacted with the panel in virtual reality. Several iterations were focused on how responsive the button should feel when in virtual reality and how we could work with the Unity software and visuals to create a button press that closely resembled that of a real world button press on say a phone or a tablet.

Outcome

The panel was included in the technique and the customer has provided feedback that the panel works wonderfully, and enjoys the look and feel of the feature. Overall, this short design feature was successful!

Learnings

  • For designs in VR sometimes resources can be scarce, and design needs to be able to jump into the more complex programs to push their design forward before other departments (tech art or engineering) can get to implementing the designs. In this case, I had to prototype my design in unity which made me uncomfortable, but also resulted in the success of the buttons.

  • Showing designs earlier and more often is crucial to keep momentum of the project moving forward. If you wait for someone to review the buttons, progress can really slow down

  • Always have a deadline and keep yourself accountable, even if the feature you’re creating isn’t needed for a few months, you never know what else is on the horizon in terms of design work.