Make it real: bringing physicality to UI design

Throughout the history of UI design physicality has been explored in digital experiences. Think of the trash bin icon that has been used for discarding files for decades now, and who can forget the floppy disk that signifies saving files? The latter is an example of something that no one born after 1999 would understand (floppy what?), yet the icon still has traction. But why have designers constantly looked to the real world for inspiration?

The concept is known as skeuomorphism. It’s defined as a way to describe interface design that utilises objects and details that mimic, and therefore have familiarity to, their real-world counterparts. The main reason for its use is to help users to use an interface, making it intuitive through recognisable features; “I know how a bin looks, so that must be where I put my rubbish!”.

It’s famously known as a trend that designers think ‘died out’ with the surge in popularity of flatter design styles. This was led in some part due to the increase in different screen sizes that designers needed to accommodate for. As the popularity and use of such screens grew, flatter, simpler interfaces that could stretch, scale, collapse etc. took to popularity too. One of the most visible examples of this was when Apple ditched its skeuomorphic iconography and interfaces with the launch of iOS 7 in 2013, updating icons such as the notebook app to a yellow-lined notepad or changing the iBooks icon which was previously designed to look like a 3D wooden bookshelf.

Another big player, Google, has also explored and moved away from skeuomorphic representation. It debuted its Material Design system in 2014 using paper as a metaphor; although much more subtle than the polished wood and chrome Apple were using in the years prior, digital elements were stacked, like how sheets of paper on a desk might be, affording users a visual cue to sift and sort through information intuitively.

“Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch,” explained VP of Design Matías Duarte.

Only very recently have Google decided to move away from this visual representation, as people no longer need a visual metaphor to help them in the “expanding computing landscape”.

The reason I have titled this article physicality is because whereas skeuomorphism is a trend that has all but disappeared from modern UI design, I believe there is still a space to explore bringing some elements of physicality to the design of digital experiences. How do we make app interfaces, digital tools and websites feel like spaces you can explore, uncover, unravel, dig into, and peel back?

As screens get bigger and ever more present, they blend more and more into the physical realm we explore daily. Increasingly with the rise of AR and virtual reality, we will see the increase in immersive UI systems. Interfaces are set to be augmented in front of us as we walk, work and workout, with rumoured technological advances from Apple and others. And as we explore new worlds in virtual spaces, we need to perhaps explore this physical representation to help guide users through new navigation structures and immersive worlds.

So instead of thinking of physicality in UI design as a skeuomorphic visual metaphor that mimics objects, we should think of it as an interface layer that enhances digital experiences to feel less flat, linear and contained to screens, but instead more expansive, more immersive and ultimately more real.