Duration
Duration
November 2023
November 2023
Embedded Files
Role
Role
Solo project
Solo project
Tool
Tool
Figma
Figma
- Project Overview -
- Project Overview -
Background
The first time Apple revealed their Vision Pro introduction video not long ago in June 2023, I was in awe. I was really amazed at how intuitive the UI was like even though it was a whole entirely new product Apple has created, let alone a whole entirely new experience for their users. The Vision Pro's user interface is overall very similar to what we currently see on Macs and iPads, just enlarged and not being bound to just the screen size. In addition, with eye tracking and simple and familiar finger gestures makes the experience that much more seamless and easy to use. I mean, obviously I don't have the product in hand to test out how the user experience really is for the Vision Pro, but knowing Apple and from watching the video, I'm sure it will be smooth like butter. Not sure I will drop $3500+ taxes for it though...With this being said, I am also really excited at how UX/UI designers and developers will be creating experiences for the Apple Vision Pro once it is released next year in 2024.Background
The Challenge
Being inspired by Apple Vision Pro's user interface design and principles, I decided to take on a challenge and redesign Apple Books in the spatial scene (since I am usually in my college library most of the time, I thought it would be appropriate). Before I began designing, I looked for many spatial design inspirations online and watch many videos on some of the known essential principles when it comes to spatial design since this is also new to me. After gaining the basic understanding of the spatial interface design principles like using glassmorphism (essentially background blur), I jumped right into Figma to start designing. The Challenge
The Reference
To make a redesign of Apple Books for Vision Pro, I of course had to take inspiration from the user interface of the existing Apple Books application from my laptop. It is crucial to remember that the user interface of Vision Pro should not stray too far away from the regular application as users will get confused and not like the experience. The interface should feel familiar and easy to learn regardless of the medium it is on. The Reference
- The Designs -
- The Designs -
Now that I have the knowledge in spatial design and a reference to refer back to, I began designing in Figma.
Home Page
For the home page, I tried to make the interface as close to the desktop version as possible. The only major difference I made was placing the search bar on top of "All" and stretching it out horizontally. Originally, I think the search bar is too small and I want to make it prominent in the spatial version. Most users would want to do a search for their books. In Figma, I used the background blur feature and lowered the opacity of the frame to give it a glass looking effect. You never want a solid background frame color as it would look unnatural in the real world. Using a nice subtle background blur makes the frame look pleasing to the eye and it sense of immersion with your surroundings. I also designed a light mode and a dark mode, giving users the option to choose between the two from the settings. Home Page
In dark mode, when the background is darkened, the frame darkens with it. But all the text, icons, and book covers remain the same opacity so that they are still easy to see. Going dark mode while not sacrificing legibility is essential.
Reading Experience
When designing the reading experience for users in the spatial medium, I tried to make it seem as natural as possible without neglecting the reading experience. In light mode I designed an all white frame with black text to mimic the original reading experience. I decided to not make the frame completely white as that would increase eye stress so I reduce the opacity by a bit. Users could also easily switch between double page or single page view when reading. Giving them the option to tailor their own experience. (scroll down to the "user interface design" section to see how users can optimize their reading experience)Reading Experience
In dark mode, the page frame becomes black with white text. Again, I didn't want the page to be completely "solid" black as that would cause eye strain and plus, it just doesn't look as good with your surrounding.
I also took the liberty to add some beautiful background sceneries in which users can customize their reading experience as if they are in another place (virtual reality)... with appropriate background ambience noises. Being fully immersed in reading like never before.
User Interface Design
When the user looks outside of the page frame for a few seconds, the user interface will be shown where users can perform numerous functions like: exit, search the book, share, customize, and more. They can also expand or condense the page columns and scroll to a page number. When the user is back to reading just by looking at the text, the UI will fade away. Apple Vision Pro has a built in eye tracking feature where it knows what the users are looking at so that the experience is tailored to what they see, very seamless. User Interface Design
- Experimental Design -
- Experimental Design -
During the process of designing Apple Books for the Vision Pro, I made some trials and errors that I would like to share with you! When designing the core reading experience in the spatial medium, I played around with color, opacity, and background blur to make sure that everything fits together nicely and makes reading easy, but not without bad designs. Let me show you some...
Bad Design #1- The Black Doesn't Look Right...
When designing the experience in dark mode, I tried setting the color of the background blur to black. But, I thought to myself, "Would a black page frame really fit in a room with lights?" I mean, it would look fine if the room was dimmed down, so that users wouldn't get bothered by everything eye-catching around them. Bad Design #1- The Black Doesn't Look Right...
Bad Design #2- Text Hard to See
The text legibility on this one is just a plain...no! For the home page, the background blur color for this one would work because it is not the text dominating the whole experience. But, if everything is mainly text, the background color just makes the white text extremely hard to see. A simple fix would just be to make the text black, then change the background blur color to something close to white. This increases legibility while still being able to see your surroundings. Bad Design #2- Text Hard to See
Bad Design #3- Too Much White!
Too much white on a super dark surrounding is just not great for the eyes. Although the text is easy to read with great contrast, the white page can really strain the user's eyes and hurt them in the long term. It is like being in a room with lights shining in your face. Bad Design #3- Too Much White!
- Closing -
- Closing -
What I Learned
Overall, this was a fun mini project to work on and I learned a lot about spatial design and its principles/ UI. It is also a nice refresher from designing mobile apps and websites. Some of the most essential principles about spatial design I've learned is that the user interface must look familiar so users know exactly what to do when they enter the app and must also look natural with your surroundings so users can easily see what's around them. All content must be front and center of the user, never too left or too right unless content is split up. Watch this video and see for yourself! It is so cool!What I Learned
Next Steps
Although this project was mainly about designing static mockups, I didn't really had the chance to prototype it. If I were to design another immersive spatial experience, next time I would definitely try prototyping and making the experience interactive with cool transitions and hover effects. With this project acting as a base, I hope to design and learn more spatial interfaces and experiences in the future! It just feels very magical in a way to try this new design medium. It is like being in a whole new era of design. Being that spatial is whole new design medium, there is so much to discover with immersive experiences. When Vision Pro hits the market, people start buying it and using it, the UX design industry could change with it. Next Steps
The Future- Spatial Design
There could be so many exciting opportunities with spatial design for different industries like:The Future- Spatial Design
- E-commerce (seeing the product in AR as if it is really there with its original size)
- Clothings & Accessories (trying it on before buying it)
- Home (like decorating your home with furniture and seeing how you like it before making the purchase)
- Gaming (immersive gaming feels like you are part of the game)
- Photos (reliving a memory through video or live photos)
- Streaming services (watching immersive movies/ tv shows in spatial could change the industry and who knows, we might not need movie theaters anymore)
- and so much more...the opportunities with spatial design seems endless
Miscellaneous- Tony Stark AR
Thinking about it, Apple Vision Pro (or spatial design in general) really reminds me of Tony Stark's AR which he uses a lot in the Marvel Cinematic Universe movies. Back then, this seems like science fiction, but now it could really be happening in real life. Miscellaneous- Tony Stark AR
Screenshot from Iron Man 2
All rights goes to Marvel Entertainment and Walt Disney Inc.
Page updated
Google Sites
Report abuse