Making sense of the iOS themes – Depth (Part 3)

iOS often displays content in distinct layers that convey hierarchy and position, and helps users understand the relationships among onscreen objects. The theme of Depth really means that the UI as much as possible relates to real life. For example, when you walk through a door that takes you from being inside to being outside you’ve changed physical contexts. I think it’s obvious but there’s an immediate change, you were just inside and now you’re outside. And, as you continue walking away from the door that took you outside, depth and distance becomes even more dramatic as the distance from the door you walked through increases. This same concept of depth can also be applied to the user interface.

Explained succinctly, depth is communicated much like we see it communicated in real life with objects that are in focus and objects that are out of focus. The same rules apply to photography where depth is communicated with focus. So, in iOS design you can use the principle of depth in much of the same way to support the purpose of your app and the path that you’d like your user to take.

When rightly used depth can help improve your how well your app communicates to it’s users in the following ways:

  • Depth helps communicate meaning by helping the user focus on things that are in the “foreground”
  • Depth helps support environment by keeping the user in a familiar state
  • Depth removes complexity by giving the user a foreground element to focus on while the rest of the environment is blurred or out of focus
  • Depth allows you to maintain context by presenting ui that doesn’t distract from other content but is instead layered on top of other content.

Here are a few examples of apps that have applied this theme of depth

Example 1
Depth in iOS can be communicated with a blurred background, using scale or overlaying the content behind what you want the user to focus on. This allows the user to maintain their screen context which includes content and colors and perform a distinctly different interaction. In the example below the New Message screen is layered on top of your current app using a modal context to communicate depth. In the iOS9 multitasking example the app screens are layered to communicate depth and the iOS wallpaper has been overplayed and blurred. Overlaying the background not only allows you to keep its natural colors, but also brings focus to the foreground. Adding an overlay or a blur isn’t introducing something that’s unnatural, it’s something that already exists in real life; as you focus on something, everything else become blurry.

depth 3

Example 2
iOS uses UI transitions when zooming into a folder to communicate depth and clear when dragging down to create a new task.

depth 1

Example 3
The iOS calendar app uses motion to communicate depth and changing contexts from year, month and day views.

depth 2

Tips to help with Depth:

  • Don’t introduce depth arbitrarily, be selective
  • Use depth to support or communicate meaning
  • Don’t use depth if it distracts from the purpose of your app, clarity of the user interface should be more important than adding visual interest.
  • Pay particular attention to shadows and gradients if you use these elements in your interface. Graphic elements like gradients can sometimes evoke vibrancy, motion and energy, and a strong connection to a brand but too often they cheapen a design if they are not carefully crafted.
  • Zooming in and zooming out can help communicate depth but make sure you use life-like transitions instead of linear ones to help add personality and visual interest. This means using motion paths that are realistic instead of linear motion paths.

I’m currently writing a book on iOS app design and how to apply the best design practices to help you design better apps for iOS. Learn more about the book here and sign up to get notified when it’s launched! As a thank you for signing up I’ll also send you an 11 page iOS App Design Kit to that will help you create your next iOS app.