Four Design Lessons Learned from Upgrading the Panoramic Photo
Facebook Photos Come Full Circle
Since the nineteenth century, photographers and storytellers around the world have been attempting to freeze a moment in time by capturing immersive vistas.
One of the first recorded patents for a panoramic camera was submitted in 1843 by Joseph Puchberger for a hand-cranked 150° field of view focal length camera. Shortly after, photographers would take anywhere from two to a dozen of the ensuing albumen prints and piece them together to form a panoramic image.
Fast forward to the twenty-first century and the advent of digital photography: the most common method for producing panoramas is to take a series of pictures and automatically stitch them together.
Capturing panoramas on your camera phones has now become fairly ubiquitous—just hold your phone straight as you move it across the horizon, like Puchberger’s hand-cranked camera. But viewing these panoramic photos is far from immersive.
Panoramas are typically represented as a thin strip of unrecognizable content in your camera roll surrounded by black. The longer and more immersive you attempt to make the photo, the thinner and smaller the panorama will look when you share it with someone. It’s almost as if the phone’s software is trying to discourage you from using the hardware.
In 2015, Facebook introduced 360 Videos, which paved the way to immersive, high end storytelling delivered to billions of people. Joseph Puchberger’s dream of transporting people to new worlds through immersive media was finally starting to come true in the digital world.
However, the creation of this content was limited to a few professionals with multi-thousand dollar equipment or hyper-creative early adopters willing to hack multiple cameras together to form a 360 projection. At Facebook, we sought to help these professional content producers with a simpler, more affordable way to capture high-end 3D-360 content.
Earlier this year, I joined the Facebook VR design team after wrapping up a two year stint working on Facebook Photos and Composer. Being fairly familiar with the way people share content on Facebook, I saw an opportunity to improve the panoramic photo format and kickstart it into a more immersive medium.
So, the Facebook VR team set out to chase the dream that started nearly two centuries ago. We upgraded every panoramic photo—which seemed forgotten by digital media—and projected it onto a 360 degree sphere then manipulated it through natural gestures.
When you take a panorama with your phone and upload it to Facebook, it now covers your entire phone’s screen: no more of that pesky thin film strip! Your friends can move their phone or use their finger to pan the photo in 360 degrees.
We thought all those panoramas buried in people’s camera rolls could be the first step to bringing the creation of 360 content into the mainstream. This marked the first time people could easily create and share VR content with a simple piece of hardware: their phone.
The following are four lessons the Facebook VR design team learned as we explored 360 photos on Facebook:
- Define core design principles
- Think in three dimensions
- A prototype is worth a thousand mocks
- Show, don’t tell
Defining Core Design Principles
Although somewhat familiar, 360 photos were an unprecedented new medium introduced to the Facebook ecosystem. After much consideration, the Facebook VR design team defined a few principles that guided our design as we explored how to find a home for 360 photos and videos among the rest of Facebook’s supported media formats.
Like most principles, these are a living document that evolve every day as we explore immersive media more deeply. However, consider these four principles when working on immersive design yourself. Ask yourself how you might apply these principles in your work as you move away from 2D and into other dimensions.
Enhance the familiar — Build upon existing models, habits, actions, and identity. Add spatial aspects only where there is real value. We gave users the ability to opt-out of the 360 rendering of a panorama simply by tapping a button before sharing their post.
Promote agency — There should be some element of user’s choice that impacts the environment and experience. We worked on a number of educational prompts that taught new users how to interact with 360 content by moving their phone.
Upgrade or degrade gracefully — Create interaction models that scale from low-end to high-end VR. We created a 360 photos fallback experience for less capable phones that respects the author’s intent while giving folks the ability to consume a paired-down version of the fully immersive content.
Be comfortable and calm — Environments, transitions, and gestures should optimize for physical and emotional comfort. Tapping a 360 photo in News Feed animates that same photo smoothly to cover the entire screen, giving users a clear understanding of the spatial relationship to go back to where they came from.
Thinking in Three Dimensions
One of the most challenging pieces of designing 360 photos was using two-dimensional tools and processes to describe three-dimensional concepts. If you’ve been designing 2D work for your career, making the leap to 3D is going to require a new perspective on your usual tools.
The VR design team had to become proficient with entirely new concepts ranging from aircraft principal axes like roll, pitch, and yaw, to absolute and relative positioning of the viewport within the sphere. Having a clear understanding of these concepts became essential when thinking about the ways in which people could comfortably navigate a 360 photo on Facebook.
In the example above, my colleague
explores different contexts of use for panning 360 photos while sitting, standing, and even lying in bed (aka hammock mode). On the left you see the phone’s gyroscopic movement, on the center the viewport’s movement inside the sphere, and on the right the way the photo pans inside the story in News Feed.This exploration was invaluable in describing the desired behavior when scrolling through News Feed and it required a deep understanding of 3D concepts and tools to actualize.
A Prototype Is Worth A Thousand Mocks
When designing for 360, you’ll have to consider things like interacting through a phone’s gyroscope and touch, as well as absolute and relative positioning of panoramas and full spherical content. For the VR design team, the combination of interactions and content created a lot of edge cases which made it increasingly difficult to transfer knowledge in the abstract.
Looking at two dimensional mocks describing 3D interactions proved to be ineffective very quickly. The team was often confused by the terminology —“what is pitch again?”— and applying an uncomfortable level of abstraction to discuss basic interactions. This was already proving difficult working between teammates in our VR design team in Menlo Park and our engineering team in London.
Using tools like Origami Studio, we quickly prototyped several variations of the phone’s gyroscope interaction and got feedback from members of the team as well as with regular folks through user research. You can improve your own prototypes for 360 work using this simple example my teammate,
, shared for panning and scrubbing a 360 video using Origami Studio.This prototyping process shortened a lot of theoretical, long, and mathematical discussions into “check out this prototype and tell me what you think.” It allowed us to quickly transfer our ideas from our head to a phone in our hands and iterate from there.
Showing, Not Telling
Making 360 content easily recognizable in News Feed became a big priority for the VR design team. It can be helpful to show users how a feature works instead of telling them through a myriad of tooltips and popovers.
We wanted to make sure users could easily identify a photo as 360 while leaving room for discovery through interaction. This led to a lot of explorations to hint that there’s more content to be explored while carefully avoiding taking complete reign over the experience.
For the desktop experience, we mapped the mouse position and slightly panned the photo as you moved your mouse over the photo. After several rounds of user testing, we noticed people preferred this solution over the previous iteration, which automatically panned the photo left and right as it scrolled into view. This signaled to users that there was more content to be explored by bringing the photos to life while giving the user complete agency over the experience.
360 Photos launched worldwide earlier this year, and since then we’ve seen the creation of 360 content skyrocket on Facebook. This has allowed millions of people to freeze a moment in time and—with the help of VR—bring their friends to different worlds.
Defining core principles, thinking in three dimensions, prototyping, and showing versus telling seem like obvious lessons in retrospect. However, it’s difficult to over-emphasize how important they can be as you dive into 360 and VR design.
We hope 2016 marks another milestone in the journey that started back in 1843, to transport people to different moments in time. Although it’s been nearly two centuries worth of work, we believe this is just the beginning of where immersive media is headed. In the meantime, take a panorama and share it on Facebook and let people dive into your world.
Check out more stories and resources from the Facebook VR design team at facebook.design/vr.
