The Science in the System: Fluent Design and Light
The story of light starts with the atom
Normally, an atom’s electrons are at their lowest orbit. If you add enough energy, the electrons will jump to outer orbits — for a time. Eventually, drawn by the positive charge of protons in the atom’s nucleus, the electrons plummet back to their original position, releasing energy. This energy takes the form of photons, elementary particles that exhibit properties of both waves and particles, have zero mass, and travel at 299,792,458 meters per second (in a vacuum).
Inside a typical star, such as our sun, nuclear fusion generates massive amounts of these photons, blanketing the earth in light. The photons sail through space, reaching the earth in about eight minutes. When the light hits an object — say a flower growing on the lawn — photons are partially absorbed and reflected into light-sensitive cells in our eyes. These cells send electrical signals to your brain, which processes the information: enhancing it, identifying objects and filling in missing details. The process takes about 15/100s of a second. And then we see the flower.
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:
Our goal was to create an effect that helps users track their location in the UI and highlight interactive elements, such as button and menu items. More than just a simple color change, the Reveal effect applies a gentle halo shape around the hovered or focused item, calling our attention to it:
The Reveal effect doesn’t just highlight a single item; light radiates from the focus point and subtly highlights nearby objects that can perform actions similar to the focused item.
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:
<Button Content=“Button content” Style=“{StaticResource ButtonRevealStyle}”/>
You can even add Reveal to custom controls, by templating them. For complete instructions, see the Reveal article.
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.
Check out Fluent Design’s Linked In Group.
Follow me on Instagram.
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
