iOS 7: Parallax by Design

The eye is an amazing instrument, finely attuned to detail and movement. In the new iOS 7 design, there are two optical phenomena at play that take advantage of the eye’s unique physiology. The first is a concept that you know and experience everyday whether you know its name, parallax. The second relies on the eye’s innate reflexes and reaction to motion.

First, some physiology—you have two eyes that create overlapping fields of vision, known as stereopsis. It is the brain’s attempt to reconcile those two different images that creates depth perception. This is what allows us to move through a 3-dimensional world and why you’ll probably never meet a one-eyed pilot.

As a culture, our obsession with 3D, artificially creating a forced depth perception, predates the current hi-tech 3D blockbuster movies and TVs. Victorian stereoscopes, children’s View-Masters, and other toys played with stereo optics, colors, and other visual tricks to fool the eye. Over a century ago, optics enthusiasts knew that objects at a distance appeared to move more slowly than objects closer up relying on your relative position—a delightful, but simple trick.

You’ll notice this when you’re driving up to a large landmark, the pavement below you is receding like quicksand, the telephone poles pass by pickets (first to the left, then in alignment with, then to the right of the building), but the building in the distance seems to be fixed. This is known as parallax, “the displacement or difference in the apparent position of an object viewed along two different lines of sight.”

You will find parallax in iOS 7 as soon as you turn it on. Shift your hand slightly and you’ll see that the background image appears to move relative to the graphics in front as if they are on different planes and you are moving past them. (You’ll find great videos demonstrating this effect here.) It is a subtle effect, but it is found throughout iOS 7. Suddenly things that you thought were flat seem alive, responding to your movement, thanks to the accelerometer.

On the importance of parallax in design, Louie Solomon, Interactive Designer, [x]cube LABS explains, “I use parallax scrolling in app and web design because it accomplishes a few things: it adds dimensionality to a normally flat medium through the illusion of depth of field. And by doing so, parallax scrolling can also bring focus and importance to foreground objects.” He continues, “I also enjoy using parallax scrolling because it still feels new and oftentimes unexpected.”

As an instrument, the eye is very attuned to noticing even very small movements. There is a reason why we say something “caught the corner of your eye.” Whether you are actively paying attention or not, your eye perceives movement and directs your attention to it. Near constant movement is part of the world that we live in.

A multitude of small movements and animations in the new operating system make it appear lively and responsive, giving the OS its personality. It is playful and bouncy while bound by physics, weight and structure; but most importantly, it is responding to you.

Just as I mentioned previously about the importance of being grounded in space, achieved through transparent layers and dimensionality, the animations serve as reminders of real space and gravity while transporting the user from one screen or function to the next, zeroing in on an icon to open an app or giving a satisfying bounce when an swipe drops a screen down.

It is responsive not only to your touch and force, but environmental shifts, such as the parallax effects described above, all of which give it a vitality, sophistication and depth that complements the overall design style, while taking advantage of some of the oldest optical tricks in the book.