Live from Visual Studio Live!

Blog archive

4 Biology-Based UI Design Tips

When it comes to design, what you see is not always what you get. During his Visual Studio Live! Las Vegas talk on app design, Billy Hollis noted the fascinating role that the human brain plays in interpreting and comprehending visual input, and offered insights into how developers can take advantage of biology to make their app UIs more effective. Here are four key points Hollis highlighted in his talk this week.

Gestalt Principles: Mind the Gaps
The human visual system is designed to see structure and relationship. Things like the color, shape and proximity of elements to each other impact the mental grouping that the brain commits. So pay close attention to how these elements impact the visual hierarchy of your design. What's more, the brain willingly fills in missing information in the visual field to yield expected or anticipated patterns. This enables designers to, for example, employ minimalist icons (such as the camera icon in Windows 8) that are both spare and simple, yet immediately convey their meaning to users.

Inattentional Blindness: Hiding in Plain Sight
The human brain filters out things that it's not looking for. This is called "inattentional blindness," and it can render objects essentially invisible to the user even though the objects are in plain sight. For instance, if you put error messages in the status bar, you stand a good chance of not getting those messages read because no one will be looking for them there.

Figure and Field: Perception Is Everything
No doubt you've seen the optical illusion that can be interpreted either as a vase in the middle or the silhouettes of two faces at the edges. This happens because your brain chooses what elements in the visual range are the "figure" (that is, the object of interest in foreground) and what elements are the "field" (that is, the background), depending on what you're doing. Microsoft ran afoul of this phenomenon when it tried deemphasizing menus and controls in pre-release versions of Visual Studio 2012, in an effort to make the code windows pop. But developers struggled when they shifted focus to the controls, which remained stubbornly in the background due to their design.

Mapping Principle: Keeping It Real
Want to cut down on user training and frustration? Try presenting tasks in a way that has a close analog to familiar, real-world interactions. For instance, the Windows Screen Resolution dialog box for setting up multiple monitors lets you drag little monitor representations to align the displays and define how graphic elements will cross from one display to the next. The task of aligning monitors is extremely intuitive, precisely because it maps so closely to the physical ideal.

Posted by Michael Desmond on 04/01/2013 at 1:16 PM

comments powered by Disqus


  • How to Create a Machine Learning Decision Tree Classifier Using C#

    After earlier explaining how to compute disorder and split data in his exploration of machine learning decision tree classifiers, resident data scientist Dr. James McCaffrey of Microsoft Research now shows how to use the splitting and disorder code to create a working decision tree classifier.

  • Microsoft: Move from Traditional ASP.NET to 'Core' Requires 'Heavy Lifting'

    There are plenty of reasons to move traditional ASP.NET web apps -- part of the old .NET Framework -- to the new cross-platform direction, ASP.NET Core, but beware it will require some "heavy lifting," Microsoft says.

  • Purple Blue Nebula Graphic

    How to Compute Disorder for Machine Learning Decision Trees Using C#

    Using a decision tree classifier from a machine learning library is often awkward because it usually must be customized and library decision trees have many complex supporting functions, says resident data scientist Dr. James McCaffrey, so when he needs a decision tree classifier, he always creates one from scratch. Here's how.

  • Blazor's Future: gRPC Is Key

    Blazor guru Steve Sanderson detailed what Microsoft is thinking about the future of the revolutionary project that enables .NET-based web development using C# instead of JavaScript, explaining how gRPC is key, along with a new way of testing and a scheme for installable desktop apps.

  • Don't Do It All Yourself: Exploiting gRPC Well Known Types in .NET Core

    If you're creating business services that send dates and decimal data then you may be concerned that gRPC services don't support the relevant data types. Don't Panic! There are solutions. Here's how to use them.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events