“They say that your eyes tell all!
And with the “eye tracking” technology, we can tell what you’re saying.”
Create an neuro-analytics view
Think of a vivid artistic photography in one corner of your room, which is so subtle that it looks almost real than reality. Now imagine you have few more mural collections in the other corner as well, somewhere in the surrounding walls. With all these, you still determine that all the attention or rather visual senses in terms of color, appeal, orientation is specifically around the artistic photography. This is great, you have been able to fundamentally capture the objects and their contours in relation to each other by the heavy lifting of the artistic photography, but this specific object is inter-relations with other objects surrounding the space. A renowned German psychologist, Kurt Koffka, in his research stated such an instance as a positive continuation to what he believes visual system perceiving the individual elements as one single group.
Now encircle this in a similar envision around your website. You did all the basic rights in collecting the requirements around banner placement, content, color, CTA, etc., in your homepage, but still your page scroll of <30% is something to worry.
With such reports, two conclusions can be made, one you are able to engage your visitors in the top fold of the page with certain CTAs to drive traffic to relevant form or landing pages or you are seriously missing some element that can help in the overall page engagement. Let us study this in the context of data.
Consider that the website https://www.blendedstories.com has around ~4000 daily visits. Monthly we assume somewhere around 120K visits, and with this we see humongous heatmaps data. As usual, the large-scale datasets are a problem here, which required suitably large-scale analyses. Initially those can be part of the taxonomical datasets based on which we can decide to frame obvious and embarked reports. Let’s go little deeper in understanding the data points that are collected as part of heatmaps.
Connection building with Heatmaps
Firstly, let’s take the study forward with “eye trackers”. With this we study what it that attracts immediate attention.
It reveals, which section of the page got maximum attention, or which section is ignored. The connection is so vital as it help create and measure stimuli-induced visual responses.
So how it stimulates the brain function? Heatmaps produce various visualizations to positron emission tomography (PET) which captures neural activity indirectly by measuring blood flow or other metabolic processes in different parts of brain. These are nothing, but simply the neuro frequency that are seen in the form of heatmaps across the webpages that are build in.
Once the visualization are collected by the brain, it further assigns correlations based on areal assignments into further classification to understand when and where the connection has to be build. Here neurons and reflexes play a critical role in determining the activity that the human brain has to make. Many studies even suggested that spinal nerves can help generate neural activity to support postural activities without input from the cortex (Honeycutt, Gottschall, & Nichols, 2009).
In heatmaps, we see cluster of information that are collected from web page and representing with dark and light color scale to segregate data based on user attention and activity with dark representing maximum attention and light being the least. And after the scale is created, building the stimulus based on human interaction is how heatmap mechanism work.
Now that we have started building the connection with heatmaps, next evolutionary step is to introduce the visual density.
Now check in terms of visualizations
Of late we have heard so many definitions of visualization, however in simple terms it states statistical distribution of data that amplify human cognition. Besides a mean for conveying both abstract and concrete ideas, visualization can also be used to elucidate the nature of the data itself. Refer the graph below, which shows the visual representation of data over a selected period. The vertical columns in the graph represents the histogram for the time bucket.
It is so important to read the data accurately and plan and device strategy for the basic need and requirements. Here I want to present the Ascombe’s study which stated that independent numerical data can be misleading, so we need to have the visualization. He further layered that with four datasets which later termed as Ascombe’s Quartet, where the sample mean, variance, correlation coefficient & linear regression are same, it is the graphical representation or visualization of data that reveals them separately.
Figure above: Ascombe’s quartet visualized as scatter-plots. The blue lines are the linear regression of the data-points.
And this is exactly why we are so reluctant on data visualization that are collected as part of neuro determinants, so that patterns and anomalies can be detected. However, to study the neural activity, only data representation is not enough as there are multiple open questions that needs to be addressed as part of various neural activity patterns. Example, multi-dimensional data stretched over time, where we need to address the multi-dimensional data values in two-dimensional plane. They are normally created as part of abstraction where we can have additional dimensions mapped through color and geometry.
Now that we have started the discussion around color, let me reiterate the statement again as how neural activity are presented through colors. Here we generally mean the mathematical abstractions of color, which is simply the linear combinations of basis vectors determining the color perceptually. It then maps to the movement of the eye syndrome, something which we mentioned above as: “eye trackers”. All colors are simply the basis vector that are then multiplied with a constant coefficient.
This might be simpler and easy to implement, however cannot be termed error-free. Monochrome, which I am mentioning here, might not be the ultimate solution for visualization as someone with normal color vision can discriminate a few million colors.
Now to solve the purpose, RGB color space came into picture, which is using Red, Green & Blue as basis vectors. These three colors are used as the primary colors and various outputs are created by framing all the different possibilities of primary colors and hence is termed as a more productive model.
Oxford in 2008 came with an ultimate answer in support for RGB, stating this as the de facto method for specifying colors on a cathode-ray tube or other light-emitting displays and is the main reason why we see in our computer systems. Now like every other system, even RGB came with some issues and challenges, especially considering it is more related around subtractive color models, i.e., something starting with white light and then subtracting to produce colors.
Now, lets put this in some angular study. When we mix the RGB or the additive primaries in different combinations, which can be then in various levels of intensity, we can perceive in two different stimuli. If the reflected light is combined around pure red, green and blue light, our eye perceives this as white. And if there is no light present, the eye perceives this as black. Now when both the primaries are combined, it is then termed as subtractive color model. The subtractive primaries of cyan, magenta, and yellow are the opposing colors to red, green, and blue. Because of all these limitations and lack of corresponding to perceptual properties of the resulting color, HSL came into picture.
HSL i.e., hue, saturation, lightness and HSV or hue, saturation, value is some of the alternative answer to the existing RGB color model. Developed in 1970, the HSL or HSV models are most commonly used as a cylindrical coordinate system to RGB model.
Let’s make the terminologies simpler.
- Hue: The angle around the central vertical axis corresponds to hue, given as unit less number. Red=0=360, Green=120, Blue=240
- Saturation: The distance from the central axis corresponds to saturation. (0% – Grey & 100% – Full saturation)
- Lightness: The distance along the central axis corresponds to lightness. (0% – Black & 100% – White)
Note: Saturation & luminosity is represented in %.
HUE
- Hue is basically the similarity to primary colors
- Hue is the most obvious characteristic of a color
- There are wide range of hues exists. Example in the diagram below, between Red & Yellow, exists the wide collection of orange hues.
- The color wheel also shows each of its six colors with medium value and high saturation.
SATURATION
- Saturation is the purity of a color
- High saturation colors look rich and full. Low saturation colors look dull and greyish
LUMINOSITY
Determines the brightness of an area judged relative to brightness of similar illumine.
Since we have played with few quadrants and understood the value, now presenting the below computation to tweak and play with colors.
HeatCanvas.defaultValue2Color = function(value) {
var h = (1 – value );
// to make the luminosity inversely proportional
var l = 1 – value * 0.6;
var s = 0.8;
var a = 1;
return [h, s, l, a];
}
So, how it works is relatively plain. As the value starts dipping, the luminosity also goes down. And so to get some better result, we can always play with the constants.
Rapid Tables and Nix Sensor – https://www.rapidtables.com/convert/color/rgb-to-hsl.html & https://www.nixsensor.com/free-color-converter/ are some of popularly used color conversion tools and formulas for easy understanding. So if you are interested in learning more around the color cylinders, explore and associate your requirements here with various conversion elements.
HSL, HEX & RGB co-ordinates for prominent colours
So by now, we can say that HSL serves some of the true benefits in terms of providing unique color model from its light and saturation aspects and is something worthwhile to test around. Also, it is user-oriented and hence color adjustment and selection can be done more easily and quickly.
But like others, there are few open questions, which seems still unanswerable by the model, such as:
- Lack of circular statistics
- Lack of complexity of color appearance
- Difficulty in statistical computations or quantitative comparisons
And because of which HSV color model came into picture. HSV which stands for Hue, Saturation and Value is a model which describes colors (hue or tint) in terms of their shade (saturation or the amount of grey) and their brightness (value or luminance). Today, HSV are said to be the most common cylindrical-coordinate representations of points in an RGB color model.
We discussed around the attributes “Hue” and “Saturation” earlier, let’s now emphasize on “Value”. Value is simply the brightness of a color and works in conjunction with saturation. Value describes the brightness or intensity of the color, from 0-100 percent, where 0 is completely black, and 100 is the brightest and reveals the most color.
Unlike RGB and CMYK, which use primary colors, HSV is quite closer to how humans perceive color. The process begins with picking one of the available hues and then adjusting the shade and brightness values.
HSV Scale
HUE
- Red falls between 0 and 60 degrees.
- Yellow falls between 61 and 120 degrees.
- Green falls between 121-180 degrees.
- Cyan falls between 181-240 degrees.
- Blue falls between 241-300 degrees.
- Magenta falls between 301-360 degrees.
SATURATION: ‘0′ at the center (no saturation, which makes no real coloring) to 1 at the edge (full saturated colors).
VALUE: From 0 at the bottom (no color, or black) to 1 at the top.
Based on all that we studied above, let’s pick few examples to check why it is important to have eye trackers in place to figure out where exactly people really look. Overall this helps us derive insights around human behavior and tendencies and accordingly all your efforts around promotion or advertisement can be shaped.
Example 1: Almost 90% instant attention and mouse movement around Scarlett Johansson’s face in this Dolce & Gabbana ad., suggesting the celebrity brand value here over the product.
Example 2: In the below meat retail shop, instant eye catcher has been the meat and then people read the label and check out the sticker finally.
Example 3: The below example clearly shows that having a pretty face on an ad isn’t enough. What even matters, is where she is looking.
Example 4: Below is a complete example of “banner blindness”; reveals a potential problem with banner ads.
Example 5: Now referring below is a example of soccer match, people pay attention on the player throwing the ball and the area he’s facing.
There are plenty more examples, which depends on animations, human behavior, visual attention which differs by gender, etc.
[For more studies on firmographics, demographics, etc., you can post your comment here and we will share few more live tested & researched examples.]
Now that we have gone through the basic visualization requirements, understood how neuro determinants build the functional connectivity to play a major role in heatmap analytics, it is also important to understand how heatmap calculation work based on various eye-tracking technologies. We will be covering the heatmap calculation together with detailed research around the functional implementation and algorithm approach in our next release.
