Goal
The eye-tracking test will be used to analyse what draws the attention of the viewer in the webshop. This information we can then match with the importance we gave to different queries. If they are not the same, some changes have to be made to get the right results.
Method
With the use of an eye-tracking device, participants were asked to look at the website. Both the promarker-page and the homepage were used for this test.
Results
The results of all the participants was then put in on one and the same page (see images below). The grey circles indicate where and how long the participants looked at a certain spot (more circles when a participant looked at the spot for a longer period of time). Then, only the relevant circles were highlighted (pink circles). The non-relevant circles are the first and second places the participants looked at. These first two spots are considered random, since the test only just started. In the first few seconds, the eyes are looking at something random, maybe even unconsciously, and not deliberately looking at the different queries.
The eye-tracking test will be used to analyse what draws the attention of the viewer in the webshop. This information we can then match with the importance we gave to different queries. If they are not the same, some changes have to be made to get the right results.
Method
With the use of an eye-tracking device, participants were asked to look at the website. Both the promarker-page and the homepage were used for this test.
Results
The results of all the participants was then put in on one and the same page (see images below). The grey circles indicate where and how long the participants looked at a certain spot (more circles when a participant looked at the spot for a longer period of time). Then, only the relevant circles were highlighted (pink circles). The non-relevant circles are the first and second places the participants looked at. These first two spots are considered random, since the test only just started. In the first few seconds, the eyes are looking at something random, maybe even unconsciously, and not deliberately looking at the different queries.
Discussion
HOMEPAGE
The spread on the homepage looks chaotic and random. They are spread at almost the complete range of the page, almost everything is covered. This is probably due to the fact that there are a lot of information and images on this page. Viewers don’t know where to look at. What stands out of this chaos however, is the fact that not one of the participants looked at the small textual information bar, nor to the contact information on the bottom of the page. Another remarkable thing is the concentration of circles on the logo and on the word ‘uitgelicht’. The concentration on the logo has probably something to do with the fact that most logo’s are placed in that corner of a website, so viewers know where to look for this information. The ‘uitgelicht’ concentration has a less obvious reason. The word isn’t that big, nor in an outstanding colour. The only thing is that the font is bold.
PROMARKER PAGE
The circles on the promarker page have a less chaotic spread. Probably because the page is less full and chaotic than the homepage. There are however a lot of weird placed circles on completely white spaces of the page. This makes us question the reliability of the eye-tracking device. What we see happening on this page is that the ‘schrijf een review’ text, is looked at a lot. Maybe because it is a little bit in the center of the page (comfortable to look at?) and it has a lot of white space around it, so it stands out of the rest. The most important things on the page however, are almost completely ignored; namely the logo, the product and the price. This is a negative point of the design of this page. This could be due to the absence of contrast in these places. The logo is dark, as well as it’s surrounding on this page. On the homepage, the logo was a big, blue block in the middle of a lot of white, now it has to compete with the ‘markers/viltstiften/ banner.
We can conclude that some changes are needed on both of these pages. The homepage needs to be more organised. There needs to be an hierarchy in the texts and images shown on this page.
On the promarker page, the hierarchy also needs to be changed, especially with the use of contrast of certain elements.
The results of the eye tracking test, in combination with the results of the change blindness test and the visual search test, will be used to set up a list of requirements for the functional and aesthetic redesign.
HOMEPAGE
The spread on the homepage looks chaotic and random. They are spread at almost the complete range of the page, almost everything is covered. This is probably due to the fact that there are a lot of information and images on this page. Viewers don’t know where to look at. What stands out of this chaos however, is the fact that not one of the participants looked at the small textual information bar, nor to the contact information on the bottom of the page. Another remarkable thing is the concentration of circles on the logo and on the word ‘uitgelicht’. The concentration on the logo has probably something to do with the fact that most logo’s are placed in that corner of a website, so viewers know where to look for this information. The ‘uitgelicht’ concentration has a less obvious reason. The word isn’t that big, nor in an outstanding colour. The only thing is that the font is bold.
PROMARKER PAGE
The circles on the promarker page have a less chaotic spread. Probably because the page is less full and chaotic than the homepage. There are however a lot of weird placed circles on completely white spaces of the page. This makes us question the reliability of the eye-tracking device. What we see happening on this page is that the ‘schrijf een review’ text, is looked at a lot. Maybe because it is a little bit in the center of the page (comfortable to look at?) and it has a lot of white space around it, so it stands out of the rest. The most important things on the page however, are almost completely ignored; namely the logo, the product and the price. This is a negative point of the design of this page. This could be due to the absence of contrast in these places. The logo is dark, as well as it’s surrounding on this page. On the homepage, the logo was a big, blue block in the middle of a lot of white, now it has to compete with the ‘markers/viltstiften/ banner.
We can conclude that some changes are needed on both of these pages. The homepage needs to be more organised. There needs to be an hierarchy in the texts and images shown on this page.
On the promarker page, the hierarchy also needs to be changed, especially with the use of contrast of certain elements.
The results of the eye tracking test, in combination with the results of the change blindness test and the visual search test, will be used to set up a list of requirements for the functional and aesthetic redesign.