#6 - From Pixels to Dimensions: Crafting Immersive Experiences with Spatial App Design

👋 Welcome to the sixth issue of creative currents! Get ready to be inspired and informed as we dive into the latest trends, tips, and insights from the world of virtual reality (VR). Whether you're a seasoned product designer or just starting out, this newsletter is your go-to resource for all things around creating human-centered products which people ❤️

As a product designer watching WWDC23, my focus is on the 5 principles of spatial design: familiarity, human-centered, dimensionality, immersion, and authenticity. I am determined to learn how to create spatial computing apps that deliver immersive, rich experiences.

In this article, I will share invaluable knowledge providing insights on how to integrate these principles into your future spatial app.

//Familiar

Apple prioritizes the use of familiar and recognizable elements in their interfaces to ensure users can easily understand and locate what they are looking for, for example by leveraging design elements like tabs, and sidebars.

Additionally, Apple's window-based interfaces emphasize visibility and effortless usability, allowing users to effortlessly locate and interact with elements within a clear and organized framework.

A. Windows

Apple chooses to use a glass material for the windows which adds transparency to the interface. This gives users the sensation of floating content within their surroundings and adapts to different lighting conditions.

Users have control over the movement, resizing, and closing of windows. They can easily manipulate and adjust the windows according to their preferences.

B. Sizing

Apple designs windows to ensure they fit comfortably within users' views and can be adjusted in size according to the content. Furthermore, Apple's windows can have flexible shapes, incorporating features such as tab bars and toolbars that extend beyond the window or exist in separate sections. These controls are layered above the main window, maximizing space efficiency while offering convenient access to additional functions and options.

Apple provides the flexibility for developers to create apps that can have multiple windows, offering valuable functionality in specific scenarios. This capability allows users to work with multiple instances of an app simultaneously.

C. Points

Points are used to specify element sizes and ensure scalability across devices in spatial design. When users move a window closer or farther away, it dynamically adjusts in size, making apps functional and usable at different distances.

//Human-Centered

A. Field of view

Apple recommends placing the main content in the center for a visually balanced and engaging user experience. The use of layout templates in media-centered apps prioritizes content presentation. It's important to consider that users naturally look around and explore their surroundings. By acknowledging this behavior, developers can extend the reach of content, enhancing the immersive experience

B. Ergonomics

The placement of content holds significant influence over users' physical reactions, making it crucial to create an optimal experience. Apple recommends placing objects comfortably in all dimensions, ensuring users can interact with ease. By default, windows are positioned along the natural line of sight, encouraging a comfortable posture and facilitating seamless interaction and content visibility.

Apple recommends placing content at a distance from users to encourage interaction within a comfortable range.Also, Apple suggests avoiding placing content behind people or at extreme heights or lows unless it is part of an intentional immersive experience.

Apple emphasizes the importance of avoiding the anchoring of content to users' views, as it can generate feelings of confinement and disorientation. Instead, Apple suggests anchoring content in the users' space, granting them the freedom to explore and look around naturally.

C. Movement

When utilizing Apple Vision, it's important to consider that users may also be moving around. Apple recommends designing a stationary experience. Unless movement is a core aspect of the app experience, it's acknowledged that users may occasionally move while using the app. In such cases, when users settle in a new position, they can simply press and hold the digital crown to recenter. This action conveniently moves the content back in front of them.

//Dimensional

A. Space

In spatial design, it is crucial to design apps that can function effectively in any given amount of space. Since you cannot predict where users will be using the app, it is essential to ensure its adaptability.

For example, a window can be moved through an object in the room, ensuring the object remains visible during the window's movement. Once the object is released, the content within it becomes fully visible.

During movie playback, the video occupies the entire window. To maintain focus on the video content, the surrounding passthrough is intentionally darkened. Dimming is a powerful technique that maximizes space by directing user focus on the content.

B. Depth

In spatial platforms, depth introduces a new dimension that impacts our interaction with objects in space. Distant content can be visually prominent, encouraging users to engage from a distance. Nearby objects invite closer inspection, offering the opportunity to explore from different angles.

Apple leverages depth to establish a hierarchy in spatial design. For instance, in immersive cinema experiences, playback controls are intentionally placed small and nearby. Despite their size, they remain clear and easily recognizable as the means to control the movie.

Depth can be reinforced by incorporating visual cues such as light and shadow. Objects like movie screens emit light, creating a focal point within the scene. Other objects in the environment should cast shadows, further enhancing the perception of depth and spatial relationships.

C. Scale

In spatial design, scale serves as a powerful tool to emphasize content. Smaller feel personal and lightweight, while larger objects feel impressive. Certain objects are best viewed at their real-life scale, especially in applications such as shopping apps.

//Immersive

A. Immersion spectrum

The dynamic nature of the user experience allows for fluid transitions between different states of immersion based on the user's location within the app. As users navigate through the virtual environment, the app can dynamically modify the level of immersion and the presentation of content to match their current position and context.

Spatial computing apps adapt to different contexts. They can be displayed in a window alongside other apps or expanded to full-screen mode. For example, Apple's Keynote app uses dimming for focused presentations or offers VR for immersive experiences, such as a virtual theater stage. This adaptability enhances user flexibility and engagement.

Immersive apps have the ability to establish a strong connection with users' physical surroundings. Apple exemplifies this by showcasing a significant and well-known "Hello" message that casts a shadow across a table. This design choice adds a layer of realism and depth, enhancing the sense of integration between the virtual and physical environments. By leveraging visual cues like shadows.

B. Essential tips

When designing immersive experiences, it is crucial to consider that users have the ability to look around and direct their attention to various elements. However, overwhelming the user with excessive visual stimuli can diminish the overall experience. Apple provides valuable tips to address this challenge.

• Guide user's focus

• Blend thoroughly with reality

• Create an atmosphere with sound

• Do more with less

C. Comfort

When it comes to moving the user or their position within an immersive app, it's crucial to avoid large and fast movements that can lead to disorientation. Apple advises designers to implement smooth transitions to prevent user discomfort. One effective technique is to gradually fade out the content while it's in motion and fade it back in once it has settled into its new position. This approach provides a visual cue and allows users to maintain their spatial awareness during the transition.

Apple emphasizes the importance of providing a clear and intuitive way to enter and exit the immersive experience. This can be achieved by implementing a concise and prominent call to action accompanied by recognizable symbols. By using clear language and easily identifiable icons, users can quickly understand how to engage with the immersive content and navigate back to the non-immersive interface when desired.

//Authentic

On the spatial platform, the best apps are immersive, rich experiences. Apple urges designers to create apps that go beyond quick interactions, like Freedom, which offers a creative space to focus on projects. Apple emphasizes the importance of making apps engaging, distinct, and worthwhile, delivering original experiences that captivate users in the spatial realm.

Learn 🎓

• Design spatial user interfaces (LINK)

• Creating value in the Metaverse (LINK)

Unclassifieds

• Will Apple Vision’s Pro be a design success? (LINK)

• How will the Metaverse really affect Business (LINK)

Struggling with a design challenge? Let’s jump on a call

Share the Creative Currents Newsletter with at least five friends in your network and Book your Free Consultation Session 👉 [email protected] with a design expert

Support the Creative Currents newsletter

• Forward it to your product design friends and recommend them to

  👉 Subscribe 

• Have product design related topics like events, newsletters, tools, jobs, articles or anything you'd like to share with our subscribers?

• Sponsor the next edition and become part of the network