Bring 3D (back) to UI!
Most Interfaces nowadays are 2D. In recent years designers used gradients, shadows and even clay-like 3D-objects to give their interfaces more depth. These elements are usually 2D mockups or static renderings of 3D objects. And often times that’s fine, however there are cases where using real-time 3D could benefit the overall experience. Since there isn’t an easy and powerful tool that allows UI-designers to work with 3D objects and most are afraid to use more advanced tools that require coding experience, they limit themselves to the capabilities of their prototyping tools (figma, sketch, Xd etc.). This way a lot of creative potential goes missing.
But what could designers do if they would use real 3D objects for their designs? I tried to find out by building my own 3D-app in Unity. I hope this is a motivation for designers to try the same thing and an appeal for developers to create tools that allow designers to work with 3D objects in UI.
Furniture shopping app from the future
I decided to illustrate my concept on a furniture-shopping app since buying furniture online is risky and apps will never give you the full in-store experience. But they could try to mimic it. And since buying furniture is usually something not done very often, it is a special experience that deserves distinguishment from usual interfaces. Efficiency-oriented apps like calendars would obviously not be the best option for 3D elements. The following screens are meant to showcase a visual style. The app is not finished yet.
New formats — new possibilities!
With 3D some old UX-flaws can be fixed. For example visualizing dimensions of an object. Nowadays a lot of sites show their product size directly on a 2D-illustration of the prodcut but you still see this extreme example below way to often.
3D can only be fully perceived through motion, so animations are important for a good feeling of depth. Otherwise a bitmap picture could have been used. Furthermore, animations add cohesion and make the UI come to live.
When scrolling through a list the depth is clearly perceivable, since the position of the object also changes the angle towards the camera. I also moved the text on the z-axis to illustrate a parallax-effect.
By changing the depth of field the three-dimensionality can be easily adjusted. By setting the depth of field to a high value the app can be essentially switched to 2D. For demonstration purposes I decided to chose a rather wide depth of field.
New formats — new challenges.
With new formats there also come new challenges that don’t exist in classic 2D apps. One of it being object overlapping when changing position. Having enough white space can be therefore even more important for 3D-apps.
Another issue is that you sometimes get perspectives that seem not right. This becomes especially clear with furniture. When scrolling the user looks down onto objects on the bottom while seeing the bottom of the objects on top. While this is physically correct, it looks weird and unnatural. I wrote a function that changes the x-rotation of the objects when being above 0 on the y-axis. This keeps the front of the object in focus while still keeping the 3D-effect when scrolling.
I encountered several unique challenges similar to this. Ideally these will be automatically addressed in future design software.
The little things…
Delighters can be important to increase the user experience and give the app more character in an ever growing mass of apps. With 3D you can take this to the next level…
Try it for yourself!
If you want you can try an early developer preview of this app live in your browser. I recommend a fast internet connection (21mb need to be loaded). Mobile works, but it might cause some issues on your phone. Safari is not supported.
👉Try it here!👈
You can also visit the github repository 👀 and checkout the code behind this. Currently it is still in development. Feel free to get in touch with me for questions or comments.
