Basic Interactions 1. 3D Projection

Jungsoo Park
@jungsooxpark/User Interface Study

--

I’ve always been intrigued by the cognitive/psychological approach in user experience design. The book The Pocket Universal Principles of Design by William Lidwell will be the resource of my 150 Basic Interactions study. I will learn the principles in the book by finding existing weak examples and creating a new strong interaction with Framer, InVision, or other tools.

1. 3D Projection

People tend to perceive 2 dimensional things as 3 dimensional with specific visual cues. “3D Projection” could help users to focus on the main item so that they can navigate and achieve their goal easily without confusion on the digital screen.

- Tricks to create the illusion of depth

Source: http://www.wcs.k12.mi.us/cousino/wcsart/art%20foundatons%20site/space.html

- 3D Projection Example Demo

Try Framer Demo: https://framer.cloud/bpOUK

- More Thoughts

I find out that this principle shows how digital interface design trends have changed over the years from Skeuomorphism to Flat Design to Material Design. Skeuomorphism is a design style that imitates the physical world. It was adopted in the early versions of iPhone. The early iPhones’ buttons were embossed and have drop-shadow so that users can notice those buttons are clickable and resemble real-world buttons. Novice iPhone users were not familiar with the touch interface, and designers wanted to provide a clear signifier to reduce confusion. A few years later, however, Skeuomorphism was not cool anymore and required too many resources, and more importantly, people became accustomed to the touch interface. Therefore, Flat Design was introduced to create an elegant and clean user experience. However, Flat Design was not clear enough for users. Since then, Google’s Material design, which emphasizes the reactivity of the user’s interaction, has become widespread. It is clean and clear. The design system creates depths in the screen by using drop-shadow and visualizes touch interaction with visual effects.

--

--

Jungsoo Park
@jungsooxpark/User Interface Study

Interaction Designer x Creative Technologist who wants to bridge the gap between differences through design. http://uxjungsoopark.com