AR Painting | Mysite

AR Drawing

Oct 2018 - Now

UX Designer / UX Prototyper

Made with Unity 3D, Keynote

I created a new AR GUI Design Framework called "Surface"

And tested this framework in six different working scenarios.

Augment the physical world with the power of the digital part.

Give the physical attributes to the digital object.

The Story of AR Drawing

Features

Prepare and place the virtual canvas, pen box, and palette as you want;
Draw the picture by selecting different crushes, colors, and shapes;
Display your work in the physical place.

User flow

Choose your working position - Sit down in front of a drawing board or Sit in front a table

Preparation - Create your drawing board

Create virtual canvas on a physical surface, which could provide haptic feedback for drawing.

You are all set!

Preparation - Rearrange your virtual working zone

Customize the position of your drawing board, pen box, and palette by pinching

Horizontally move the virtual surface

Adjust the degree of the virtual surface

Attach your virtual toolbox to a physical surface so you can bring it with you.

Attach your canvas to a physical wall

Drawing - natural hand movement

Drawing - Select your drawing brush

Drawing - Change Color

Drawing - Move

Drawing - Resize

Drawing - Zoom in and zoom out (Canvas Level)

Display - Use physical surface to display your digital works

Display - Display your work in a physical place

Design Considerations

Interaction Mode

Touch

( laser pen + gaze + voice input )

Even though we have a lot of technical limitations here, these ways are natural for us to interact with not only the digital world but also the physical world. So in this case, I use Touch as the main way to accomplish most of the interaction tasks.

User Interfaces and Interaction Designs

From 2D to AR

①Augment the physical world with the ability of the digital world

My principle :

Don’t obscure the users’ view with too many 2D Details
Only display the UI that high frequency of use and fast access

My approach:

Disassemble the one-piece application window into different components, which include:

Layer Management Window
Drawing Area
Basic Attributes Setting Area
Palette
Other Toolkit Bar

Physical Surface could become the container for the Digital interface

For Canvas/For Palette/For other toolboxes/For works’ display

table/wall /floating in the mid-air

① Give the physical attributes to the digital interfaces

My principle :

Convey affordance by shape and texture
Provide selected, placed, collided feedbacks to boost the sense of agency
Add physical attributes like shadow or weight to increase the realistic of the digital interface.

Let’s give some specific examples to explain how I apply those principles to the real design.

Task: Attachment

Digital Interfaces can be Attachable in the physical surface and bring with them. And provide the drop-down point to remind users of where they can place the object - like shadow. Highlighted physical surface/ Shadow on the wall to tell you that this surface is droppable.

Task: Resizing

Drag two angles and enlarge or reduce the size of it

Prototyping to Test

Similar Works

VR 3D MODELING HTC VIVE + Unity 3D	Gazed-controlled Fetching Robot ARKit + Ardunio	VR Resume A-frame
VR Mandarin Learning APP Physical Prototype + Unity 3D	AR Grocery Shopping A-Frame	AR Inspiration Collector A-Frame + Space AR
Future Workspace Personal Research Project	AR Drawing Keynote	AR Reading Keynote
Power Strip Redesign Rhino + Keyshot	AR Picture Book Designer + Prototyper