Interface Exploration: Depth and Color

As hardware begins to fade and software experiences come to the foreground, it is essential to focus on the way we design the interfaces that users will see and interact with.

Over the last decade, interface design has seen a turn from replication of the physical/material (referred to as skeuomorphism) to a much more flat, abstract aesthetic. While this new visual style appears more appealing, I’ve felt that a sense of intuition and approachability has been lost by discarding some skeuomorphic characteristics. In order to further explore these observations, I endeavored to visualize a future interface that finds a balance between minimalism and physical context, for a future that will further enable people to interact with seamless slabs of glass and simulate tactile buttons.

My goals for this investigation were to infuse the modern interface with three primary alterations:

• Shadow — A sparing but consistent use of shadow can give a 2D space dimension, and even indicate what interface elements can be acted upon. An even cooler use-case is that shadow can respond to how much pressure a person applies to an interface object, and how the objects will act based on varied pressure.
• Translucency — It can be difficult to remember how complex these digital systems can become. A sensible use of transparency within an interface can allow a person to understand how various layers collaborate, and even be used to provide a spacial hierarchy alongside shadows.
• Visual Consistency — Too much visual consistency can quickly become a bad thing; every area of an interface could look the same and become confusing for a user. However, a similarity in layout and interaction can be incredibly useful for one to build confidence while using these interfaces and expect that objects will respond in a reliable, natural manner.

Through a combination of these three concepts, as well as additional smart perks/changes to the current interface design, I hope to demonstrate how designers can begin to once again use more natural aspects of design within the digital landscape.

All New Depths

While the first aspect of this interface that I redesigned was not the Messages component, I think that this app definitely demonstrates the potential that the use of shadow can bring to an interface.

It may have been more obvious for each message in the list to be separated by lines and then distinguished as unread by a marker. I cast all of this out and focused more on simplification. The boldness of each photo and name commands its own space, allowing for quick delineation down the list. The pure white background and blurred shadow on some of the entries makes it clear which messages are unclear at a glance, and also invites a person to just tap on these pronounced squircles to dive into the conversation.

Similarly, shadows give a great opportunity to reduce the visual clutter that accompanies displaying sets of lists. Many may point out that the current Reminders app implements some skeuomorphic design with its card-based view and grainy paper effect; as I’ve become familiar with this app to manage my daily tasks throughout the semester, I’ve found these two design choices to be less helpful and more hindering from a visual design standpoint. Assigning each Reminders list it’s own colored, separated block provides an easily-glanceable identity. An added bonus: tapping on one of these lists (as we are so keen to do due to the shadow effect) leads more seamlessly into the second view that displays all the appropriate reminders. This screen presents very clear instructions on how the interface can be interacted with through the “+” symbol and down-arrow.

This revised layout gives each list room to breathe, and should be easier for those hard-of-vision to navigate. You can spend more time scribing your ideas and less time staring at your screen trying to gather your thoughts.

Crystal Clear

The above examples make great cases for how shadow and depth can be incorporated within an interface in a meaningful, clean manner. By the same token, they also subtlety introduce the idea of translucency for additional context and some personality. Let’s take a closer look.

On the far left, you can see what a person’s Home Screen would look like. The wallpaper that they see and change often becomes a source of comfort and familiarity throughout the interface. My application of translucency banks on this familiarity, and gives a hint of this wallpaper in the background of each app. You can see that blue gradient present in the milky white canvas of both Messages and Reminders, as well as the other apps in this study. This concept of translucency makes the most sense when it comes to the multitasking view, of course. During the development process, many variations of this concept actually gave the canvas a higher level of transparency (85% or even 90% vs. the current 95% opacity), but the colors of the background started to interfere with the visibility of app content in these cases.

A cool perk that results from this new feature is the subtle way the background changes the overall look of an interface, giving each screen a personality that is more you. Check it out:

Notice the subtle shadow and curvature of the button that slides the volume up and down, as well as the inverse shadow on the AirPlay icon. This inverse shadow indicates that AirPlay is already activated, and can also be seen in Control Center.

It’s a very slight change, but the effect produced can generate very different feelings and choices than a plain white interface would.

Constant. Consistent.

As I mentioned in my above to-do list, consistency on both the visual and interactions fronts was a priority. As you’ll see, each app’s “splash page” has a similar layout, with a big heading and dividing bar preceding the content below. What lies beyond the splash page stays true to the content of each app; think of the splash page format as a comfortable stop to the new land that lies ahead.

There’s no mistaking one app for the other, but the formatting is familiar and once a person learns how one set of interactions works, they can be sure that it will work similarly in all other apps. Take the common action of Search, for example. With this design, the Search bar stays almost hidden until it is summoned by the familiar downwards-swipe gesture, at which point the dividing bar transforms into the Search bar.

The best part? This gesture will work with every app that displays the dividing bar.

This article was originally published on Karthik's Medium profile.