I have been taking an online course on "The Ultimate Guide to Visual Perception and Design" by the Interaction Design Foundation and yesterday in one of the lessons they covered the topic of "Figure & Ground". In this section they talked about how this might be a function of both the processing of the visual information in our brain and the visual perception of our eyes because of the fovea having around 50% of the optical nerves and is in the center of our retina.

This principle is really important because as the author says, it allows us to parse through a page with tons of information with a very clear background and foreground perception. Modals are a huge part of thing process, the most common ones we see on the web are login modals.

Lets walk through a few example of where people might use this Gestalt Principle for improving the design.

69024e5858222d97ee3d66c7980fb621

In this image by James, the modal is used to create a new project wizard which in itself has been broken down into three steps for providing limited amount of user interaction at each step and categorized based on the steps. The figure/background principle is applied really well and clearly separates the step of adding a new project from the browsing area.

🔗 Share Question Exploration ios pattern ux ui slider share popover modal mobile minimal list flat design clean multi select button sheet bottom sheet bookmark app

This is another excellent example on mobile where a lot of options are hidden behind an alert or a modal like sharing, reporting and in some places even further options.

For further reading on how to use elevation for creating depth and showing figure and ground Material Design Guideline is my go to.

Good things

  1. Found old music: Yesterday while I was backing up some images from iCloud to SSD I found music that I had been listening since I first became a digital native. Moreover, found out that Google Play Music allows you to upload 50,000 songs of your own to the platform thus making this archive of mine now easily accessible over the web.
  2. Working out: For the first time since I started using Monkii 360 did I feel that I was stretched to my limits and the feeling was really good. I followed that with a amazing açaí, berries and protein based smoothie.
  3. Danced my heart out: I'm doing the 100 day project for the second time this year and coming up with new things to do is always challenging. Yesterday, I did a third video where I just put a really high tempo swing dancing song and move without thinking much about moves or choreography