Unpacking Vision Pro’s Practical Impact on the Product Design Workflow
Product design never stands still. You can see one notable example of the field’s ever-evolving nature with the impending launch of Apple’s Vision Pro headset, coming in early 2024. This launch spotlights the need to think about how experiences will change. So let’s look past Apple’s impressive marketing videos and dive into the practical implications that these announcements have for product designers like us.
There’s a new normal ahead, and it looks like hand gestures, eye control, dictation, and sound design for immersive experiences. As product designers, we’re in the unique position to help define new design patterns and behaviors that make the world more accessible and enjoyable. Software engineers have tools like Reality Composer and the Xcode simulator to create and test XR experiences. But as product designers, where does that leave us?
Bespoke design software suited for product designers to create XR experiences doesn’t exist. Yet. But it’s not too early to start thinking about it. Because immersive input methods like gesture and eye control, dictation and sound design will play a role in the products and services that will become commonplace — or that we’ll all soon be tasked with making. For now, we’ll still have to rely on the tools we use every day as we begin to design experiences that span the immersion spectrum. Here’s what to think about, research, and do to keep your design skills sharp as the next wave of product design comes into focus.
AR, VR, MR: What the Heck do all the Acronyms Mean?
So, what do we call the technology of Apple’s new headset? Mixed reality is the combination of augmented reality (AR) and virtual reality (VR), while (XR) extended reality is a blanket term for all technologies that simulate a virtual environment, such as AR, VR, and MR. In these experiences, digital objects are placed in the physical world, allowing users to interact with and manipulate them in a natural way—Apple calls this spatial computing.
The New Reality of Your Next Product Design Job
Product designers like us are approaching the horizon of a brave new landscape of work. XR will be calling on us for new types of experiences, and some new considerations will come along with the new nature of our business. When designing for visionOS, you’ll need to work within the immersion spectrum. This consists of three different extended reality experiences, and you’ll likely need to consider all of them. Keep in mind, when users explore extended reality they’ll always be wearing some type of head or eyewear to view the experience. Let’s journey in!
Windows. Websites will generally live here. While you wouldn’t count modals, menus, popovers and other interactions as separate windows per se, an app might live in a window or even require multiple windows. Windows can also be moved around in 3D space. If this is where you leave things, an XR experience viewing a traditional website won’t be all too different than it is today. But seriously, where’s the fun in that? XR is our opportunity to turn up the wow factor!
Volumes. Here’s where things start to get interesting — highlighting 3D content. Volumes confine elements that users can interact with, and can be viewed from different angles. Think of an e-commerce website where someone might want to see how a sculpture looks from all angles before they make a purchase. That’s the perfect use-case here. If you want to get really fancy, a window could activate a volume, which is likely to be the case.
Spaces. Experience design is at peak interaction here. Melt the physical world away and give users something they’ve likely never seen before: a configurator to redesign their interior space; a weather app that casts snow on a user’s surroundings; and games are ripe for this level of immersion. Though, with technology and software still nascent, especially for product designers, you’d want a tight collaboration with software engineers to fully realize your vision.
A New Reality Calls for New Design Thinking
There’s another “new normal” in our world. Websites will inherit basic XR properties by default. The good news here is we won’t have to go back and redesign them all. That leaves us to focus our energy on cultivating new experiences. When you do, here are some visual expectations and best practices to keep in mind:
- Glassmorphism will be back with a vengeance. It appears as if the glassmorphic effect wasn’t merely a passing fad. Now that Apple has implemented it into its platform, it is sure to ignite resurgence in product design. In fact, a beta UI kit has already been launched. As for the design-to-development handoff process, software engineers will be relieved knowing that visionOS takes care of the creation of the glassmorphic effect, so no extra labor is needed on their part.
- Content can have an associated 3D model. Remember that hypothetical e-commerce website I mentioned in the Volumes section? Let’s say, for example, you’re designing it. Your users can examine items on the site in more detail by linking to a 3D file they can place in virtual space. These files will be of the USDZ type which you can easily create using open source software like Blender. Just remember to keep your polygon count as low as possible and use simple textures that render quickly.
- Flip the lights off on dark mode. People prefer design patterns they’re already familiar with; the principle of familiarity and Jakob’s Law confirms this. That means, we can be sure that once Apple releases their new headset, experiences designed to work with and look great on it will become the norm. Just like Google’s Material Design system did for much of the web, so too will visionOS do for XR experiences. So, say goodbye to dark mode. Why? Because visionOS won’t support it. When users interact with a menu, modal, or popover with a glass effect and semantic text styles are used, stylistic properties that make your text legible will be built in. The operating system will dynamically adjust the vibrancy of colors seen through the glass surface. This doesn’t mean that the white or solid color of a background of a website will go away. From the looks of things, we’ll still be able to control when that happens.
- Design interface elements with points. For a viewer, legibility is everything. So when you design using points, you’re building legibility in with scaling. As elements move away, their size increases, and when elements near, their size decreases, so interface elements stay legible despite their distance from the viewer’s eye.
- Wider is better. In spatial design, navigation works best when the user looks left to right as opposed to up and down or diagonal. As such, interfaces will favor a wide orientation vs a tall one.
- SVG will be more important than ever. Our eyes have an incredible ability to see detail, which will be exacerbated by headsets firmly affixed to our faces when XR goes mainstream. For that reason, the pixel density of Vision Pro to iPhone is 64:1. Dang! SVGs remain crisp no matter the dimension, plus their file size is much smaller than their raster counterparts. If you haven’t already gotten into the habit, start using scalable vector graphics for production-ready assets whenever you can.
- Rounded corners are here to stay. The wisdom of Apple says sharp edges can be tough on the eyes. Those round corners that most of us love to design with aren’t going anywhere. Whew! Further, when rectangular shapes with rounded corners are used and nested inside other rectangles, the radius should be concentric. For the same reason, icons will favor being in an ellipse too.
- Be bold. Literally. Think way back to iOS 7. Are you squinting yet? That was when Apple used an extra thin or practically hairline font for everything. (Anyone else remember this pain?) The point is, illegible font weight makes for a terrible viewing experience. This time around they’re getting it right. In spatial design, fonts are bolder to maximize legibility. Regular font weight is replaced with medium, medium weight is replaced with bold and so forth. Even companies with robust design teams (*cough Apple *cough) can get it wrong. Now that you’re clued-up, the lesson they’ve given us is never be afraid to break the “rules” or make new ones when it suits the project you’re working on.
Get Ready to Put a Spin on Your Navigation Design Habits
Even if you only design websites, you’ll need to understand new navigation paradigms. Sure, Vision Pro will support Magic Mouse, Magic Keyboard, and trackpad. But XR experiences will be the catalyst for new design patterns, hand gestures and more to navigate the web, games and anything else spatial computing gives us. Unlike other platforms such as the HoloLens, and Meta Quest, Apple’s headset will track hand and eye movement. Look, then pinch to select is one example of a new gesture, the likes of which we’ve never used before. Here are a few other ways people will orient themselves when using the websites, products, and services you create.
Introducing Ornaments. Ornaments are a flashy term for navigation. And bringing XR to the masses will hinge on how experiences use them. Think outside the box, and I don’t mean that figuratively. Ornaments can hang inside, outside, up-top, down-low, on the left or right of a window. Interfaces that consider where and how Ornaments are used to both simplify while giving it that perfectly designed aesthetic are what users will soon grow to expect. Can you anticipate how the next project you design might look and behave?
Know your minimums. Creating interfaces is like taking a journey, and XR is no exception. Design systems for the interfaces we use every day are well established by now; grids measured in 4 pt increments, responsive design that can shape shift to fit any screen, and floating action buttons give users a helping hand in performing the key task on any given screen. But when it comes to spatial design, the size of your buttons will be key, and they need to be big enough to ensure accuracy. A minimum of 60 pt x 60 pt will be the standard, at least as far as Apple is concerned. But that doesn’t mean things can’t be smaller, so long as the target area meets this minimum dimension, you’re good. Do take an objective look at your designs and consider whether too-small elements are impeding function. Now that you’re in the know, how can you design your products to ensure maximum navigability?
The eyes have it. Extended reality experiences don’t include tangible objects. That means, if someone’s not using a mouse to navigate, looking at an object signals intent to interact with it. When this happens, focus feedback will cause it to raise slightly or receive a subtle highlight. What other visual cues could you offer users when they focus on an icon, link, or graphic? Will visited and pressed states require new treatments? Will your experience require novel ways to orbit and pan? This is an amazing opportunity for product designers like us to invent new methodologies. Let’s all get thinking!
Knocking It Out of the Park — an Illustrative Example
Getting into the headspace of immersive design can be a head scratcher. You’re not just designing for a flat surface anymore. In the business of designing spaces, you’ve got to consider how a viewer consumes content. You’ll have the X,Y, and Z dimension — a full 360-degree canvas! As you mock up XR experiences, there are a few ideas you’ll want to get familiar with to maximize users’ perception and understanding of things.
Imagine you’ve just been hired to design a website for an amusement park. Will it just be two-dimensional? Or will you leverage and think through all the interactive features it might encompass? Maybe you’ll design a feature that lets people preview some of the games they could play in real life once they’re actually at the park. Let’s use the classic ring toss game as our muse. The user selects the ring toss game to preview it. Here’s how that experience might work.
Use a window to display game details.
You might start with a modal window that shows instructions on how to play. And those instructions will live in their own window. But, in a 3D space where people are standing or moving more openly, a user could easily become disoriented — that can lead to injury. With this in mind, it’s a best practice to keep the horizon of the content in a window aligned with the real world horizon. As for the window’s positioning, it could inherit one of a few properties as users consume its information:
- World locked. Content remains stationary, enabling the user to look away from it and around their space. This is the preferred method.
- Head locked. Content follows a user’s view. In general, it’s a good practice to shy away from this option, as it disrupts the immersive feel of an experience.
- Lazy follow. A firm compromise between head and world locked content, content follows the user’s field of view with a slight delay.
Use a volume to show potential prizes.
In XR, you can give users the thrill of winning. Which is way better than actual reality. They can pop out, rotate, zoom, and admire the potential stuffed animals at their virtual fingertips to the point where they’re tempted to reach out and grab them. Because in XR winning an amusement park prize is totally possible!
Use a space to play a game.
Why not take your users into the whole experience? You can fully immerse them in the ring toss game, letting them navigate an environment that looks and “feels” like they’re actually there playing it. Using hand gestures to toss rings onto bottles in virtual space would come with a host of requirements that you as a product designer would think through and design in order to create an enjoyable demonstration. Here are the depth cues you’ll need to keep in mind to maintain the illusions of extended reality:
- Scale. If you’re standing in front of a real ring toss game, the bottles in front look larger than the ones in the back. So in your virtual game, you’d make each bottle progressively smaller the farther back in space it goes.
- Blur. Objects that are close to the user should be more in focus than those that are farther away. (You’d apply this effect based on the circumstances you’re designing for.)
- Transparency. Is there a portion of the interface that a viewer may need to be aware of but that falls behind something else? Are virtual amusement park guests walking by, partially obscuring the experience? Reducing their transparency adds a sense of depth but enables the player to see past them.
As you start to shape XR experiences, I hope you’ll be able to use these sparks of inspiration to build some muscle memory for the new, vast realm of potential.
Design vs Engineering in XR; Who’s Responsible for What?
Taking ideas from mockup to reality is a job that needs both design and engineering. Spatial experiences require specialized software that isn’t included in our product design stack. And that’s exactly where the engineering teams come in. Because when developers are building XR experiences, they have many resources at their fingertips to help visualize 3D spaces, build 3D models, 3D icons, and more. This is why our mockups only need to go so far. But if you’re not one to just hand off designs and responsibility, never fear. To keep you in the loop, these insider tips will help bridge the gap. Plus, I’m exposing the top tools that software engineers use when crafting apps.
Create 3D Icons Without Breaking a Sweat — Apple’s Method
As you dial in the overall look and feel of your experience, you’ll want to start thinking about finer details like iconography. Primary app icons as well as more incidental icons within an experience will be expected to have 3D characteristics. And creating the illusion of 3D in XR is easy with visionOS.
As a product designer, if you want to have a voice in how that looks, all you really need to do is divide the art into 3 layers to suit your preference. Start by stacking 3 layers on top of each other: a background, foreground 1, and foreground 2, all @ 1024 x 1024 px. From there, hand over your files to the software engineer to implement into their codebase.
From Design to Deployment
These next few tools give you a glimpse into how your designs go from mockup to deployment. If you’ve ever wanted to experiment with this side of things, here’s the software you’d use.
- Object Capture. Using just an iPhone, scan real objects and automatically generate lifelike 3D models complete with textures in only a few minutes. The process is based on photogrammetry and essentially turns a series of photos into a USDZ file. Use-case: making stuffed animal prizes for ring toss.
- Room Plan. Using the LiDAR scanner on an iPhone or iPad, create a 3D floor plan of a room including dimensions and furniture. Room Plan generates USDZ files for engineers to bring into Reality Composer. Use-case: mapping a booth at an amusement park.
- Reality Composer. This is Apple’s primary augmented reality tool for authoring immersive app experiences. 3D objects, animations, sound, and interactivity are all built in this framework predicated on ARKit.
- Xcode. This is an engineer’s flagship software for Apple operating systems. All of the elements you can create with Object capture, Room Plan, and Reality Composer converge here. Even more, as engineers work to turn designs into finished products they have access to virtual backgrounds and environments to help them visualize the experience.
The Product Design Matrix Awaits
I hope all this has given you a picture of what the world of product design can, and will, look like. Daunting as it may feel to keep up with the complexities of windows, volumes, spaces, who’s responsible for what, and more, your muscle memory will eventually kick in. Soon enough, you’ll be flexing your own memory-building skills that’ll have you performing like the pro you are. Staying informed and researching new possibilities is key to staying ahead of the Vision Pro curve.
What’s your take? Drop a comment below. You can also find me on Twitter, and LinkedIn, or reach me via my website at www.jonathanpatterson.com with any product design inquiries or questions.
Hope to see you in the grid soon!
