Visual Processing System: Detecting Change and Contrast
Introduction
The biological processing system in human beings is the outcome of millions of years of evolutionary development. During evolutionary history, the human brain increased in size and this led to many qualitative and quantitative changes (Schoenemann, 2006). The classical belief is that these changes include the evolution and optimization of the use of the five senses: sight, smell, taste, touch, and hearing.
Among these senses, sight plays a crucial role in our lives. This is primarily because the visual processing system has always been central to the way we perceive and process information. The human capability of receiving and understanding visual signals and cues is remarkable. Whether we are tasked with distinguishing different hues, reading a text on a screen, or driving a car, we perform all these tasks effortlessly.
This paper explores the characteristics of a visual processing system and how we can use it to solve a design problem. It is divided into two sections. The first part of the paper examines several theoretical topics like signal detection theory, the properties and evolution of the human eye, light as stimuli, the concept of luminance contrast, and color and the second part of the paper provides a science-based design review of Tumblr.com.
Signal Detection Theory
Consciously and subconsciously, human beings are in constant communication with the world they live in. In a way, therefore, sensing and perceiving a clear signal in a disturbance-free environment is probably the simplest perceptual task a human being is capable of. Swets, Tanner, and Birdsall (1961) discuss how Signal Detection Theory provides “a framework for a realistic description of the behavior of the human observer in a variety of perceptual tasks.” Signal Detection Theory depends on the signal-to-noise ratio, and it is applicable in situations where two classes of events are to be distinguished for decision making under noisy conditions (Allan & Siegel, 2002). When detecting a stimulus, it is always important to focus on recognition, acumen, and classification.
Fuzzy Signal Detection Theory
The classical Signal Detection Theory has some limitations when it comes to the real world. When the definition of a signal or category is not clear-cut, Fuzzy Signal Detection Theory steps in. According to Parasuraman, Masalonis, and Hancock (2000), “Fuzzy SDT can considerably extend the range and utility of SDT by handling the contextual and temporal variability of most real-world signals.” It can be applied to “include evaluation of the performance of human, machine, and human-machine detectors in real systems” (Parasuraman, et al., 2000). As far as understanding visual processing system from this perspective is concerned, it is imperative to know the importance of all its triggers, components, and processes.
The Human Eye
The eye is the visual system that allows humans to capture light and convert it into an electrical signal. As a signal detector, human eyes are biologically attuned to get stimulated by only a narrow band of electromagnetic rays. Rays enter our eyes through cornea, which acts like a transparent window into the eyeball. These rays are refracted by the biconvex eye lens to focus on the retina, located at the back of the eyeball. According to Gibson (1966): “The human retina has a fovea that corresponds to the subjective center of clear vision, or the external point of fixation.” Fovea consists of several layers of neurons and specialized cells called photoreceptors. These receptors are of two types: rods and cones. Rods, prevalent in the periphery, are responsible for night vision and cannot function in bright light whereas cones, though lesser and found mostly in the fovea, are primarily responsible for color vision. (Lindsay & Norman, 2013). Ganglion cells are neurons, also located in the retina, whose axons together form the optic nerve. They receive signals from these rods and cones and transmit them to the visual cortex of the brain. This enables us to see and perceive the world around us.
Stimulus: The Physics of Light
Information can be processed through either bottom-up or top-down processing. According to Wolfe, Butcher, and Hyle (2003), bottom-up processing is the “guidance of attention by the properties of the stimulus.” In a visual processing system, light acts as the stimulus that helps us perceive the world.
In fact, what we call light is actually a band of electromagnetic radiation within a narrow energy range of 400 to 700 nanometers in wavelength. Light is unique in the physical world because of its dual nature – it is both a wave and a particle at the same time – a property scientists call the wave-particle duality. Light, through the signals produced in the eye, supports the brain’s work of reconstruction and classification of reality. But the ability of light as a stimulus to enable efficient signal detection and improve visual acuity depends on some of the key properties.
Contrast Sensitivity
Part of a human’s ability to discern information from this light stimulus is attributed to their capacity to efficiently make out differences in luminance within a field of vision. The physical property of light that enables this is called luminance contrast. According to Tai and Inanici (2010), luminance contrast can be “identified as an effective pictorial cue”. They also add: “Luminance variations within a space impacts the perceived distance as much as they impact the luminance contrast between the target and the background” (Tai & Inanici, 2010).
We can see an object because it reflects light. Objects that reflect almost all the light appear white, while those that reflect a fraction of light or no light at all appear black. According to Logvinenko (2005): lightness is the “perceptual continuum of various shades of grey from black to white”. He also adds that lightness is usually “determined by relative rather than absolute luminance or luminance contrast, that are unaffected by illuminant changes” (Logvinenko, 2005, p. 337).
Mathematically, it is the ratio between the higher luminance and the lower luminance that defines whatever is being perceived. Finely patterned, fuzzy or detailed objects may generally require sensitivity to finer grades of contrast. Larger objects, however, require less sensitivity to contrast. The human eye is biologically much more sensitive to luminance contrast than to absolute luminance. For example, street lights are much more clearly visible at night time rather than in day time. The luminance of street lights does not change. What changes, in fact, is only the perceived luminance that which is different at different times of the day.
Color Vision
Objects intrinsically do not have color. We perceive them as colored because of the physical aspects of light. Color serves a useful role in signal processing. According to Conway (2009): “Color processing begins with the absorption of light by cone photoreceptors and progresses through a series of hierarchical stages.”
Color stimuli can be characterized in terms of its hue, saturation and brightness (Valdez & Mehrabian, 1994). Hue refers to the specific tone of a color and saturation refers to its purity or intensity. A saturated color is high in intensity, it is bright. A color that is dull is unsaturated or low in intensity. Brightness is, in fact, the perceived luminance that depends on the adjacent luminance. Another term for saturation is chroma. Human vision is much more sensitive to slight changes in brightness than slight changes in hue (Stuart, Barsdell, & Day, 2014).
Jetsu (2010) talks about two major theories that can help us in understanding color vision in human beings: Trichromatic and Opponent Process theories. According to the Trichromatic theory, there are three types of cone receptor cells in the retina. These cells, responsible for color perception, are defined as S, M, and L. The S, M, and L cell types respond to overlapping ranges of wavelengths. While S cell responds to shorter wavelengths and helps us perceive the color blue, M cell is sensitive to medium wavelength and helps us see yellow. The L cells respond to longer wavelengths and help us perceive red (Bowmaker, 1983). Opponent-Process Theory is another similar theory which proposes that the retina’s ganglion cells receive different types of inputs from different cones. This creates the perception that some colors like blue/yellow, red/green, and black/white are opposites. When a member of this pair is activated, it acts as an obstacle and constrains the activity of the other member. This is why we cannot perceive certain color combinations like bluish yellow, greenish red, or whitish black (Hurvich & Jameson, 1957).
Conclusion
This paper has tried to explore the various facets of a visual processing system. The study of human visual perception from this point of view can facilitate in understanding the importance of signal detection theory and help designers to separate noise from clear signals. This will ensure that designers make better and more informed choices when designing a product or website.
Tumblr.com: A Science-Based Design Review
Tumblr.com is a popular social networking and microblogging website with millions of users worldwide. It is very popular in the US and caters primarily to a young audience (Chang, Tang, Inagaki, & Liu, 2014). The website’s homepage has a carousel slider with six dots as carousel indicators. The first and last slides are very similar, so this review will focus only on the first five slides.
The purpose of this review is not to critique the visual design components of Tumblr.com. Rather, this evaluation aims to analyze the strengths and weaknesses associated with how a new user would perceive these slides on Tumblr’s homepage, and also to provide corrective design recommendations. The focus will be on examining the website from the point of view of signal detection by our visual processing system. This shall include a study of factors like luminance contrast, color (hue and saturation) and their impact on the overall design and user experience. The website will be discussed and analyzed in the context of a young individual who wants to browse Tumblr.com and sign up as a new user.
The Five Slides of Tumblr Homepage: Analysis and Recommendations
Slide 1
The legibility of a text on a computer screen is primarily determined by its luminance contrast (Bouma, 1980). According to a more recent finding by Hall and Hannah (2004), “colors with greater contrast ratio generally lead to greater readability.”
The background image of the login or sign up page uses fan-art, is personally tailored, and changes every time a user refreshes the page. It can be observed that a lot of text on the screen is not clearly visible. However, the call-to-action buttons pop up because of sufficient contrast. Although the call-to-action buttons (Get Started and Log In) are visible, the luminance contrast ratio between the background blue and white text of the Get Started button is 2.25:1. In comparison, the Log In button’s gray text on a white background has a luminance contrast ratio of approximately 9:1. The Log In button is therefore clearly visible, much easier to detect, and immediately draws a user’s attention.
Since the new user would want to sign up to create a new account, it makes sense to pay more attention to the Get Started button. Using better luminance contrast ratio between the button and the text will make it more visible and easier to detect. A darker hue of blue as the background of the button with white fonts or a darker font used on lighter button would be ideal.
According to Leykin and Tuceryan (2004) “both luminance contrast and texture of the text and background” define the “perceived contrast”. A new user might want to search the website or reach out for support, but he/she may not be able to do so quickly. This is because the patterned background almost camouflages the search bar and links in the footer of the first slide. Since the pattern on the background and text are either gray or white, it puts strain on the eye and a user will find it very difficult to read the text or make sense of it.
The background noise makes the text almost indecipherable, and therefore it would make sense to use plain background and bigger fonts with better luminance contrast ratio. Also, Tumblr.com should either use an opaque background for the search bar and links in the footer or use fan-art that does not affect overall readability.
Slide 2
This slide does not showcase fan-art as the first slide, and the overall design remains the same for all users. The background is a bright green, which is one of the colors the human eye is most sensitive to. Though, this color may be suitable for young users, such a highly saturated green may overstimulate the retina and cause unnecessary strain to the eye. Moreover, the use of white text on a highly saturated green background is not a great choice. This is because the luminance contrast ratio is 2.55:1, which makes it difficult to read the text.
Since a new user would want to read the content on this slide it makes sense to use a more muted shade of green.
Slide 3
Even though the luminance contrast ratio between the background and text is somewhat better in this slide, the purple is highly saturated. The luminance contrast ratio between the background and the white text is 4.35:1. Reading larger text on this slide will not be as difficult as reading smaller fonts. The four rectangular boxes are links to different blogs. The black font on white background makes it easy to read but it is difficult for a user to guess whether it is an image or a link.
Using bigger font for the description would be much better. A background color which is less saturated can also be used to grab the user’s attention.
Slide 4
The text on this slide pops up and the contrast is quite good. This is because the slide’s dark blue background and white text has a luminance contrast ratio of 17.64: 1. Even the smaller text is noticeable and very easy to read. The search bar, even though gray with white text, is not difficult to spot. Although the text of the Log In is clearly visible, the button somehow seems to merge with the background. The Sign-Up button has ideal luminance contrast ratio and can be easily spotted by new users. The darker background makes it easier for a user to read the text.
Ideally, the other slides should use a similar luminance contrast ratio. Using darker text on a lighter background would also be a good way to improve readability.
Slide 5
This slide, too, has a highly saturated background. The luminance contrast ratio between the background and text is 2.37:1. The smaller text is not legible and reading it would put a lot of strain on the eyes. Since the white icons (that cannot be clicked) are bigger, they would draw the user’s attention.
If the purpose is to attract a new user to sign up, the noise should be kept at a bare minimum and the focus should be on the primary buttons and text.
References
Allan, L. G., & Siegel, S. (2002). A signal detection theory analysis of the placebo effect. Evaluation & the Health Professions, 25(4), 410-420.
Bouma, H. (1980). Visual reading processes and the quality of text displays. IPO Annual Progress Report, 15, 83-90.
Bowmaker, J. K. (1983). Trichromatic colour vision: why only three receptor channels?. Trends in Neurosciences, 6, 41-43.
Chang, Y., Tang, L., Inagaki, Y., & Liu, Y. (2014). What is Tumblr: A statistical overview and comparison. ACM SIGKDD explorations newsletter, 16(1), 21-29.
Conway,B. R. (2009). Color vision, cones, and color-coding in the cortex. The neuroscientist, 15(3), 274-290.
Gibson, J. J. (1966). The Senses Considered as Perceptual Systems. p.175-177
Hall, R. H., & Hanna, P. (2004). The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. Behaviour & information technology, 23(3), 183-195.
Hurvich, L. M., & Jameson, D. (1957). An opponent-process theory of color vision. Psychological review, 64(6p1), 384.
Jetsu, T. (2010). Modeling color vision. University of Eastern Finland.
Leykin, A., & Tuceryan, M. (2004). Automatic determination of text readability over textured backgrounds for augmented reality systems. In Third IEEE and ACM International Symposium on Mixed and Augmented Reality, 224-230).
Lindsay, P. H., & Norman, D. A. (2013). Human information processing: An introduction to psychology. Academic press.
Logvinenko, A. D. (2005). Does luminance contrast determine lightness?. Spatial Vision, 18(3), 337-345.
Parasuraman, R., Masalonis, A. J., & Hancock, P. A. (2000). Fuzzy signal detection theory: Basic postulates and formulas for analyzing human and machine performance. Human Factors, 42(4), 636-659.
Schoenemann, P. T. (2006). Evolution of the size and functional areas of the human brain. Annual Review of Anthropology, 35, 379-406.
Stuart, G. W., Barsdell, W. N., & Day, R. H. (2014). The role of lightness, hue and saturation in feature-based visual attention. Vision research, 96, 25-32.
Swets, J. A., Tanner Jr, W. P., & Birdsall, T. G. (1961). Decision processes in perception. Psychological review, 68(5), 301.
Tai, N. C., & Inanici, M. (2010). Space perception and luminance contrast: investigation and design applications through perceptually based computer simulations. In Proceedings of the 2010 Spring Simulation Multiconference (p. 185). Society for Computer Simulation International.
Valdez, P., & Mehrabian, A. (1994). Effects of color on emotions. Journal of experimental psychology: General, 123(4), 394.
Wolfe, J. M., Butcher, S. J., Lee, C., & Hyle, M. (2003). Changing your mind: on the contributions of top-down and bottom-up guidance in visual search for feature singletons. Journal of Experimental Psychology: Human Perception and Performance, 29(2), 483.