Websites, apps, and interfaces bombard us with visual information. Conventional wisdom suggests that more details should improve orientation. Yet users report feeling overwhelmed, frequently overlook critical elements, and abandon tasks. The question is: How does the visual system process information? Which features are detected first? What design principles follow from this understanding—and what evidence supports these principles?
Studies
Orientation-selective neurons
David Hubel and Torsten Wiesel conducted experiments at Harvard Medical School in 1962 that earned them the Nobel Prize in 1981. They implanted microelectrodes in the visual cortex of cats and projected simple light stimuli onto the retina—dots, lines, and edges at various angles. The revolutionary finding: individual neurons responded with remarkable specificity. One neuron fired only for a vertical edge, another only at 45 degrees, a third only for horizontal lines. These "simple cells" detect elementary features before the brain recognizes complex objects. The key insight: the visual system first deconstructs images into basic components—orientation, contrast, and position—and only later assembles them into coherent wholes.
Feature Integration Theory
Anne Treisman conducted a series of visual search experiments at the University of British Columbia in 1980. Participants searched for target objects among distractors on screens—some distinguished by a single feature (color), others by a combination of multiple features. The setup included 48 students, reaction time measurements in milliseconds, and systematic variation in the number of distractors (5, 15, or 30 objects). In feature search (a red circle among blue circles), reaction time remained constant at approximately 400ms—regardless of whether there were 5 or 30 distractors. The red circle "popped out"; the search was parallel. In conjunction search (a red circle among red squares and blue circles), time increased linearly: 800ms with 5 objects, 1,400ms with 30 objects. The striking finding: individual features are detected automatically, while combinations require conscious, serial attention.
Principle
Which principle for Customer Experience Design can be derived from this? The principle of feature-based design states that critical interface elements should be highlighted through distinctive basic features such as color, shape, or motion, as the visual system processes these faster and more automatically than complex object forms. This hierarchy of visual perception enables important actions or information to become recognizable within milliseconds, before users even consciously register the design. This approach is particularly effective for time-critical decisions, warning signals, or primary calls-to-action, while being less relevant for informational or secondary elements. The effect is amplified when the chosen features are used consistently and not diluted by too many competing elements. The following guidelines demonstrate how to implement this principle in practice.
Guidelines
Use color coding for status
Use distinctive colors for critical states and status information. Red for errors, green for success, orange for warnings—this visual recognition is faster than reading text. Key considerations: maintain consistency across all touchpoints and use sparingly. If everything is red, nothing stands out.
Movement for Urgent Actions
Use subtle animation or movement for time-critical elements. The visual system detects motion preattentively, immediately drawing attention. A pulsing call-to-action for an expiring offer or a gently animated notification will be perceived faster than static elements. However, use this technique sparingly—excessive movement creates stress.
Form distinction for primary buttons
Design primary call-to-action buttons with a distinctive shape that sets them apart from all other interface elements. For example, a rounded button in an otherwise angular environment is immediately recognized through feature detection. Users process shape information faster than the text or icons contained within the button.
White Space as a Separation Feature
Use generous white space around important elements—not just for aesthetics, but for cognitive processing. The visual system recognizes contrast and spatial isolation as distinctive features. An element surrounded by white space is identified and processed more quickly as a standalone item than one separated by visual dividers or borders.
Kamitani und Tong (2005). Decoding the visual and subjective contents of the human brain. Nature Neuroscience