The Science in the System: Fluent Design and Light

The story of light starts with the atom

Mike Jacobs
Sep 14, 2017 · 3 min read
Me playing with movement and light. I created this image with a single exposure using a wireless flash and a flashlight.

Our brains are quite good at processing light.

Movement and light

Our brains are particularly adept at processing changes in light, which might indicate movement. In nature, things that are moving warrant more attention than stationary objects — that glimmer of orange and black might indicate the approach of a tiger. Our retina actually contains dedicated cells that respond to movement in specific directions, and our brains have a dedicated neural pathway for processing movement information.

Enhancing your application with light

We’ve harnessed this elemental force and our brains’ optimization for processing light and movement to help you make your UI feel more intuitive. Meet the Reveal effect, a new feature for UWP applications. The Reveal effect uses light to illuminate content that the user is interacting with. Here’s what it looks like:

Reveal highlight in action
The anatomy of Reveal

Add light to your application

When you create a UWP application, we provide a set of controls, such as buttons and text boxes, that you can use to create your UI. Some of these controls automatically use reveal: ListView, NavigationView, and AutoSuggestBox. For other controls, you can opt-in to the reveal effect by applying a predefined style:

How do I get the Reveal effect?

If you want to start experimenting with reveal (and other cool features, such as acrylic material) right now, join the Windows Insider Program and get a preview version of the Windows 10 Creator’s Update.


Find out more

Read the complete Reveal article for more information and code examples, and this article on cognitive science and design.

Microsoft Design

Putting technology on a more human path, one design story at a time.

Mike Jacobs

Written by

Writer of design guidelines for Microsoft, scuba diver of the oceans and seas, and photographer of things. https://twitter.com/mikethesnowbean

Microsoft Design

Putting technology on a more human path, one design story at a time.