Surface Neo

I was part of a small but nimble squad of designers placed in a tiny dark room for 6 months. We worked together to build a cohesive motion language that helped set up the foundation for Surface Duo's complex spatial environment and gesture / physics based system. 

My main responsbility was to define the overall look and feel of window gesturing and drag and drop behaviors.

↓

Window Management

Swiping up from the bottom and holding, allows the user to freely move the app to either side of the device. Upon releasing the window, a magnetic attracts the app window to the bottom of the screen and assures that the window stays centered. 

We wanted these apps to feel tactile and dynamic. To achieve this, we worked closely with engineers to build a dynamic system that would allow the windows to rotate in the 3D. During moments like flicking, the windows would subtley rotate before resting in it’s place. Other properities like drop shadows and sheen were later added to help reinforce the story. 

Apps will quickly swap places when moving one app on top of another app on the adjacent screen. 

When moving an app to the center of the screen, the user is prompted with two possible indications. Two blue lines stretch out to indicate that an app can be “split.” A pair of red lines indicate that the app can not.

Tossing an app to the left or right edges of the device will dismiss the app. When dismissing the app, it slowly fades away until it is completely off the screen. 

Drag and Drop

The goal was to create a touch optimized drag and drop system that reinforces that users are doing the right thing and encourages them to
transfer content to the journal.

Similar to moving windows, we wanted our drag and drop behaviour to feel physical and natural to the user. Objects scale along with added flourishes such as drop shadows and tilt to indicate that it’s picked up and ready to be moved.  

Dropping

We came up with several different concepts around dropping a stack of objects. A lot of these explorations were inspired by dropping a stack of physical pieces of paper. 

Credits

Jason Nelson, Conroy Williamson, Ryan Vulk, Jiwon Choi, Julia Carlson, Samuel Gates, Christian Valencia, Christopher Abbas, Carlos Orozco, Sergey Kisselev, Abert Yih, Karina Dion.