Design Manager at Disney Media & Entertainment Distribution

Thesis Development

Thesis Development:

Below is the link for the Alpha Prototype that I am building in Framer Studio. The prototype is a proof of concept for building a three-dimensional interface using some of the principals of Material Design to suggest additional affordance.

http://share.framerjs.com/lpvo4vjm58in/

Link to current Framer file for anyone that wants to download.

The share link does not display the z-axis layers on faces that are not the face currently visible on screen. May have to change some layer dimensions to force them to appear in all browsers. The following is a "To-Do List" for the prototype top bring it to higher fidelity and better usability.

  • Lock directional scroll that opposes the current drag direction
    • i.e. If user drags horizontal, lock vertical
  • Cause faces to snap when they are the center one in view and user is no longer dragging
  • Follow Material Design guidelines more closely
  • Develop usability test questions and scenarios for test users

Here are some initial sketches of possible interaction models for a three dimensional interface. I'm basing many of the baseline interactions off of a cube because it is easy to work with, but this could ideally be used on any number of geometrical shapes.

Since we are working with three dimensional objects, there needs to be a guideline with how to go back in the system. I'm reserving the "left rotation" for backtracking to keep things uniform.

Cubes also present an interesting problem seeing as there are only six sides to a cube. With the reservation to manipulate backwards in the system, I am also reserving the "right rotation" for moving forwards. This is again for uniformity and simplicity. This would leave the "up" and "down" rotations for content selection, which in turn allows us to have any number of content faces since we can always progress forwards and backwards using the uniform left and right rotation commands.

Using three dimensional objects, we can scale the system up to multiple objects that control different content systems. We can also stack the objects to create more complex systems, where one can remain on a content section, while the other manipulations to another face.

For clarity, if we place the user inside of the three dimensional object, rotations and the system would work identically to the previously detailed method. The differences here would come if you were using multiple three dimensional objects, as now the user needs to be able to transition from one object to another.