Pure Interfaces

Minqi Jiang
Thought Bubbles
Published in
4 min readJun 15, 2016

--

The iPhone didn’t look like any phone before it, but the software looked surprisingly familiar. Notes, Clock, and Calculator all looked just like their physical counterparts. The Camera app would even blink a simulated diaphragm shutter before displaying the image through the lens. Behind the revolutionary touchscreen, it was at once the future, and it wasn’t.

Imperfect Analogies

In designing a new product, a sensible place to start is an analogy with what already exists. The iPhone’s initial software suite adopted the appearance of each app’s real world analogues—a style of design called skeuomorphism. Skeuomorphic design was extremely popular in the early years of the App Store, as such software offered users an already known mental model of the app by invoking the functional and structural analogies captured by the physical counterpart.

The original YouTube iOS icon (left) was literally a vintage television set. The latest YouTube iOS icon (right) draws its visual identity from the play button, a purely digital control.

Despite its initial popularity, iOS app designers largely abandoned skeuomorphic design by the end of 2013, a shift deliberately incited by Apple’s release of iOS 7, which overhauled the OS’s visual style in favor of flat design, a new visual design that lifted away the faux-physical facade to reveal the pure-bit essence of the UI. By then, designers, including those at Apple, had wised-up to the shortcomings of UI design that relied strongly on real-world analogy — namely that very few sustainable analogies exist between the world of atoms and the world of bits. The mental models reflected by skeuomorphic designs led to software that became bound to the limitations of physical objects. Obsolete functionality like turning a page in a book surfaced on the screen, while many of the best software-enabled features like search eluded any physical analogy. The user interaction models implied by skeuomorphs commonly brought more confusion than clarity. Some physical analogies might work well initially, but software, in all its rampant nature, tends to outgrow them.

Three generations of voice recording apps by Apple. The original Voice Memo (left) was highly skeuomorphic. The microphone graphic takes up over 75% of the screen space, yet is purely ornamental (and arguably counterproductive as the actual on-device microphones are not at all positioned in the middle of the screen). The latest Voice Memo (center) ditches physical analogies in favor of presenting more information in a purely digital context. The recent Music Memos app (right) further abstracts away the underlying concepts to make room for features like displaying metadata and toggles for beat-matched drum and bass tracks, which escape easy skeuomorphic analogies.

Immaterial Physics

Designing apps by analogy to physical objects ended up being more limiting than helpful, but this skeuomorphism period taught app designers many valuable lessons about form. Certain attributes of physical products carried over well to a bitmap screen. Successful design elements today like binary switches, reactive buttons, drop shadows, and the momentum of a scrolled page all derived directly from physical counterparts. Other ideas like reflections and textures emulating real-life materials were dropped in favor of simplicity and focus. Ultimately, only a core physics that gelled with our expectations around interacting with thin slabs of pixels was preserved and invigorated. Apple’s flat design and Google’s material design are both the final outputs of such distillatory exercises. The result is a pure interface, untethered by imperfect analogies that don’t quite carry over into the context in which it resides, but instead follows a form that both fully exploits and is enabled by its medium.

Google’s material design framework defines a new physics for purely digital objects.

When a new medium arrives, everyone first tries to port over the old formats. The first phonograph records were of phone conversations. The first movies were recordings of plays (and it would be decades from the first video recording until fundamental techniques like the establishing shot, 180-degree rule, and the Kuleshov effect would be well understood). The first camera app by Apple looked like a real camera, until one day, the software expanded beyond its allegiance to physical things, and looked like no other camera you could hold in your hands, while offering value no real camera could deliver. This same story of transcending analogies to the past will play out for all new mediums to come: Everything from podcasts to vertical video to VR/AR.

When taking the big step into the next medium, it’s only natural to keep one foot in the last. After all, what worked before is a great place to start. But sooner or later, both feet will land on the other side. The fully expanded potential of the new medium will be unlocked, and things will never look the same again.

Animators went through a similar soul-searching process on behalf of their medium before fundamental patterns that effectively exploit the medium became well understood.

--

--