High-Fidelity Mockup

To refine our interface design, we needed to create a high-fidelity prototype which would look and function exactly like how we would want our application to be. For our hi-fi mockup, we decided to put together all of the gestures that we compiled through our lo-fi user testing and have our users perform tasks using an interface that will be nearly identical to what we will have as our final product. The results from our future hi-fidelity prototype testing will help us diagnose design details, and inform our final design.

So far, we’ve constructed a prototype based on one of the demos that we did for our tutorial. We integrated the Leap Motion Interface with Three.js in order to create a working experience prototype that will allow users to fully interact with the rendered model. Using code samples from the Three.js and Leap Motion tutorials, and our knowledge of programming, we created a web-based demo hosted on Ted’s student server. Our demo will not be projected onto our 3D volumetric display yet; the purpose of this mockup is to show the users the actual functionality of our application. An example of our initial attempt can be found below:

demoClick here to view our first demo

One of the biggest challenges that we ran into was being able to render an entire 3D model of the human body. A vital task that we plan on having for our hi-fi mockup is the ability to “take off” layers. We were able to render a single body part (the mandible; see below) but rendering multiple body parts at once was an unexpected challenge for us. We realized that planning time for problems in advance was a wise decision to make.


Click here to view our second demo

We were unable to construct the entire hi-fi prototype in time because of this issue. To workaround this challenge, we created videos of storyboarded interactions with the interface. The videos mimic the interface, and are designed to be played when users are asked to perform specific, hard-coded functions. These videos will help us diagnose interface and interaction problems. What we have so far will be a foundation that we can utilize to have the user feel like they’re actually using the application.

2.brainlayers (0-00-06-14)

Click here to view our prototype videos

During our actual user study, we will follow procedures that are similar to our lo-fi mockup. We plan to have gestures for every major interaction, and have the user perform actions such as taking off a layer, or accessing the quiz in order to study up anatomy materials. We plan to finalize our High-Fidelity Mockup by next Thursday, which is when we have our first user study scheduled. The prototype will allow us to push our designs to final refinement before heavy development begins.

For the prototype, Ted developed the web prototype (5 points), Alyssa developed the prototype videos (5 points), and Connie prepared the user testing (5 points). The next step for each of these team members is to pull together for user testing, further prototype refinement, and finalizing the Design Spec.

Deliverable: High-Fidelity Mockup

Extra: Hi-Fi Prototype Draft


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: