Get ready for depth scrolling

Much has been said about the newest first-generation product from Apple, VisionPro. Anticipated for years now, VisionPro brings the challenges of spatial design to a broader audience of designers like myself, whose work has previously been mostly devoted to two dimensions. As Gabriel Valdivia predicted years ago, becoming experts in Immersive Design will now become table stakes for all, not just designers specializing in gaming or virtual and augmented reality experiences.

“I’m willing to bet that…the Product Designer is approaching extinction, and setting the stage for the Immersive Designer.”

- Gabriel Valdivia, Principal Product Design at Patreon

While new products, apps and experiences resulting from VisionPro are almost boundless, I’m just as excited about how it will affect the work we’re already doing. Specifically, how we design websites going forward and the layering of our UI elements with Z-index or similar HTML/CSS/JS features.

I’m no web developer, so I’ll leave the technical side of the discussion to the experts, but as a UX professional, I’m absolutely thrilled at the idea of depth scrolling and to consider it more in my work.

Depth Scrolling

Web design has been relegated to 2 dimensions until now: up & down/height (Y) or side to side /width (X). We’ve seen some gorgeous websites come and go over the years (often Apple Product pages) allowing the users to feel like they’re “going inside” the experience — zooming into a landscape, exploding the innards of a product, etc. — but it’s still assuming the same scrolling behavior of going up and down or side to side with a mouse, trackpad or finger, and limited by two dimensions of a screen.

I’m eager to dig into how we design for the 3rd dimension - depth (Z) - for the web in a totally new way. How will we craft sites where we can “scroll into” the third dimension?

Of course, this approach to web design isn’t entirely new. Here’s a fun example from Leeroy Agency I’d say is a great demo of “depth scrolling.”

Interestingly, Apple design elements online (even when they’re subtle) and in their presentations have hinted at this idea for quite some time, almost as if they’ve been preparing for this day.

In order to responsibly prepare for this aspect of our site design language, some questions are coming to my mind. No doubt most or all of these questions will be addressed, either by Apple or the design community, very quickly when the headset is available to the public. Several videos and guidelines are already available from Apple to start learning their core spatial design principles.

How do we decide when to use depth scrolling and when not to?

It’s probably safe to say that not every browser-based experience needs all sorts of wild and fancy depth scrolling. If I’m booking a flight, I don’t need to “dive into” a calendar to select my travel dates. However, maybe I want to “scroll into” the plane to get a sneak preview of all the luxury I should treat myself to in first class. Maybe we’ll start creating sites about events in history where we can feel like zooming into a timeline, events passing us by as we scroll back or forward in time.

“I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying ‘no’ to 1,000 things. You have to pick carefully.”

- Steve Jobs

As excited as I am, it’ll be just as interesting to see how designers use spatial design sparingly online to make it all the more impactful. Apple calls these “key moments.” I’d argue the fewer key moments you have on your browser-based experiences, the more impressive they’ll be. As Apple advises, “do more with less.”

On a practical note, we must be mindful to not disorient our users too much. If they’re going in and out, up and down, side to side on your site and other sites, it’ll make the web an unpleasant experience overtime. For me, my first entrée into dimensionality in web design years ago was parallax scrolling. As fun a trick as parallax often is, we’ve all seen sites that go overboard, then don’t even work on mobile devices. As we revisit those tools to prepare for depth scrolling, we should learn lessons from the past on where it’s effective versus just in the way. The tide of good judgement when using depth scrolling will raise all ships of the spatial design universe.

Where can depth scrolling offer us the best key moments in our sites?

How will our design tools or process evolve for depth scrolling & spatial design?

Will I need a headset to design for headsets? I’d love to try to design in Figma using a VisionPro, but I have to assume that’s a good ways out (for Figma and my wallet). How will Figma, Sketch, and other tools evolve as software within our current 2D toolkit to accommodate these demands? No doubt at first, our current 2D equipment (monitor, mouse, etc.) may feel almost blunt when trying to create experiences of depth scrolling. How will our equipment and working spaces evolve? Maybe designers need to become animators? Should we all start brushing up on After Effects to better get our ideas across?

I may be biased since I studied Painting in college, but I also wonder if those with backgrounds in fine art — illustrators, painters, filmmakers, photographers, and sculptors — will be uniquely positioned to express these concepts with a finer visual vocabulary. I wouldn’t be surprised if I start using sketches from apps like Procreate or Mental Canvas to better articulate spatial experiences to clients or stakeholders in my pitches or presentations.

The tide of good judgement when using depth scrolling will raise all ships in the spatial design universe.

Possibly the most well-equipped for this new era will be architects and environmental designers, as they’re already trained with a deep understanding of how we enter, experience, and use dimensional spaces. I’m eager to learn from them how to take factors like distance, lighting, and accessibility into consideration as I broaden my design skillset. Jessica Outlaw wrote a wonderful series on her research in 2018 on what we can learn from physical space experts to prepare for VR which I highly recommend.

How will considerations of time affect our design thinking?

Spatial design and VisionPro’s interface emphasizes time as a design element as important as any other. Micro-animation and its timing has been a table-stakes consideration for years now, so designers are already accustomed to being mindful as they create UI transitions. However, judging only by Apple’s demo, it’s fair to say time will become a more critical part of our experiences. As a user transitions and scrolls “into” your site, the time is takes to do so will become another element to craft.

It’s more than just animation. It’s cinema. Sites may become like movies, and whether your style is more Wes Anderson, Ava DuVernay, or Bong Joon Ho, as designers we’ll be unwittingly referencing cinematic experiences as users explore our worlds.

Maybe the user doesn’t realize it, but the experience has to be planned out and directed by someone… There is a storytelling aspect. You can’t create pieces, throw them in and have them interact. There has to be something that holds it together.

— From Jessica Outlaw’s (Extended Mind) VR Research “Own the Narrative of Your Virtual Space”

As depth scrolling and dimensionality become more commonplace online, we must embrace this new challenge as an opportunity to find our storytelling style. Are you a “bold shapes getting bolder” person? Maybe you’re a “subtle vibrancy” designer? Any good designer will be playing with all these elements all the time, but it’ll be so fun for all of us to explore what we love most and gets us most excited.

I’m fascinated by Marques Brownlee’s observation regarding the “forbidden word” in Apple’s promotion for VisionPro. I didn’t even realize as I was watching, but Brownlee notes they mentioned the term “virtual reality” zero times.

By virtue of omitting this term, Apple is already teaching us how to think about creating content for this format. Thinking you’re designing for “virtual reality” is, ironically, thinking too small. Think bigger. What story are you telling? How will you immerse your users in that story? How do you want your users to feel as they dive into your experience?

What about all the sites out there without depth scrolling enhancements?

I dunno, maybe it’s ok they don’t have depth scrolling! To my earlier point, it might be a little challenging (at least as we get used to this new platform) if every site everywhere had depth scrolling in spades. However, we have a unique gift of time before VisionPro is more widely available and accessible (especially as the price hopefully reduces in 2nd and 3rd generation models) to see where we can “plus up” our past work. Where can you go back to those photo galleries of your products or even a more immersive checkout or set-up process and bring a new perspective on those experiences? Even if it’s subtle enhancements, considering how dimensionality can be added your work going forward is a great question to keep in the back of your mind.

How will browsers & CSS evolve for depth scrolling?

Again, I’m not a developer, so I won’t talk out of school, but I can’t wait to see how browsers accommodate depth scrolling and the experience of “going into a site” in a greater capacity. I can only assume this means the Z-index property and its abilities will have to evolve as well. That said, just like when motion and micro-animations became more prevalent in our digital experiences, responsible designers still have to account for when motion or depth may be unavailable (like when “Reduce Motion” is toggled on iOS devices).

When we include depth scrolling, we mustn’t forget that for the next 2–3 years at least, this will be a fun feature enjoyed by a privileged few. Our entire site can’t hinge on depth scrolling in order to be absorbed. Let’s not go back to the days of telling people a site isn’t available on certain browsers.

Maybe depth scrolling features could somehow still be “simulated” for other screens and browsers ? Maybe that’s where the biggest creativity challenges and opportunities will lie! Maybe we’ll need to create “back-up” interactions for standard browsers on most screens to simulate the experience intended for VisionPro. These considerations could become the biggest opportunities for flexibility and empathy.

Questions I’m Pondering

• How do we decide when to use depth scrolling and when not to?
• How will our design tools or process evolve for depth scrolling & spatial design?
• How will considerations of time affect our design thinking?
• What about all the sites out there without depth scrolling enhancements?
• How will browsers & CSS evolve for depth scrolling?

We have a gift of a few more months to get used to the idea of spatial design and depth scrolling. Start brainstorming enhancements and new experiences you can create for your clients and stakeholders. Get those enhancements on your roadmaps now!

We’re entering into a new time, breaking free of breakpoints, into an infinite canvas. What we edit out of it will be just as important as what we keep in it. Accounting for the masses while enhancing experiences where we can, will keep us as responsible as we are creative. To rephrase an earlier question, this all boils down to one idea — As we become “immersive designers,” how can we add dimensionality to our past, present and future work?

It’s on all of us to enter into this new time balancing excitement with temperance, innovation with accountability, and storytelling with judgement. VisionPro will be in more hands faster than we think.

I can’t wait to see what you make!

Christina Goodwin is a UX Director, Artist and Writer who loves discussing how digital experiences affect our culture and how we think. Opinions are her own.