Performing experiments
Before redesigning the web-shop, we performed three different types of experiment. We did these tests in order to analyse if the elements are positioned right according to our priority list. The three experiments were: visual search, change blindness and eye -tracking. These tests will show if the different elements are placed in the right spot or if they need to be placed somewhere else on the page.
Results
In the data we see clear distinctions between the different tasks that are performed by the participants. Some tasks were harder than others, but overall, we think that the data shows consistency throughout.
Change Blindness
Change blindness is a method in where people need to find small difference in an image while it flickers on and off again. For observers it is quite hard to find this differences when a blank page is placed between the two different images. To see which elements of the web-shop are placed well we will do a time comparison on how fast people find the differences.
Home Page
In the change blindness test it became clear that the tasks that had to be performed on the homepage took significantly longer than (most of) those on the product level page.
On the homepage the following changes had to be found:
- The image of one of the product changed;
- The category ‘Most Viewed’ disappeared;
- The subcategory ‘Men’ disappeared;
- The footer ‘Blog’ disappeared.
Findings
First of all we noticed that the first tasks took longer than the last. But besides this we also found:
- The changing image took long to find. However, this could be because this was the only thing that changed instead of disappeared.
- The sub-menu ‘Men’ was found easiest and quickest. This is good since this is an important link.
- The category ‘Most Viewed’ was not found that easily. The text of this link is much smaller than the text of the sub-menus in the header. Furthermore the categories are located in the middle of the page and might disappear between all the images on the homepage.
- The footer ‘Blog’ was not found that quickly.
Proposed Changes:
- The homepage of United Wardrobe contains probably too much images and information, since changes on this page were less easily found than changes on the product-page.
- Bigger product-images;
- More white space between the images;
- scrolling left or right should only happen when the mouse hovers over an arrow.
- The categories that are located between all the images are less easily found than sub-menus in the header.
- Make these links bigger and give them more space between all the images.
- We think that the link to United Wardrobe’s blog is important, since people need to know what kind of website this is. We see the blog in line with the video that is located above the products-showcase.
- The blog should have a more important place on the website.
Product page
On the product page the following changes had to be found:
- The Facebook button disappeared;
- A product on the background disappeared;
- The comment disappeared;
- The product thumbnail disappeared;
- The buy button disappeared;
Findings:
- There is not a direct relation between the size of the image and how fast people will find it. However there was quite a difference between the really small Facebook button and the bigger product thumbnail but according to the priority list this is not a problem because the Facebook button(11) is much lower on the list than the product thumbnail(3).
- The product thumbnail together with the buy now button where found the easiest which is a good thing because these are the most important ones.
- The background and the Facebook share button where the hardest to find but also the least important which also is a good thing.
Proposed Changes:
According to the change blindness test for the product page there are no elements that are really placed at the wrong spot. However we still think there could some small adjustments to this page:
- The background is still too visible. To make it a less distracting we could make the background a bit more faded. Also we could bring the modal window a bit more to the front.
Visual Search
‘Visual search is a type of perceptual task requiring attention that typically involves an active scan of the visual environment for a particular object or feature (the target) among other objects or features (the distractors)’ (source: www.wikipedia.org/wiki/Visual_search). In other words, we tried to find out if the website is build in a logical or organized manner by letting people search for different elements of the website we are analyzing.
Test setup
For the test we asked 8 students of the Architecture faculty at the Technical University Delft to participate. Using Processing we constructed a test in which the subjects needed to find 17 elements on the homepage and 7 on the product page. The time the participants need to find the object as well as the location they click with the mouse are measured. All tests are performed on a laptop in the faculty and the test subjects are picked at random.
Homepage
The items that need to be found are(in prioritized order):
- ‘Play’ button
- The United Wardrobe logo
- ‘Subscribe’ button
- ‘Most viewed’
- ‘top sellers’ button
- ‘accessories’ tab
- ‘Coats’ tab
- ‘Condition’ button
- ‘Contact’ button
- ‘Search’ field
- picture of a shirt
- ‘Blog’ button
- Selfie picture of product
- Sub-menu men
Results
It took people significantly longer to find most viewed and the picture of a shirt than it took them to find the rest of the elements. These items where rated 4th and 11th in the prioritization ranking. Further one could argue that ideally the amount of time that it takes to find an element should correlate with the place in the prioritized ranking. This is not the case.
Conclusion
We can conclude that namely the ‘most viewed’ item is not visible enough since it is pretty high in the priority ranking and took relatively long to find. Furthermore the play button, the logo and the subscribe button should be easier to find than the other items since they are the top three most important elements on this page.
Product page
The items that need to be found are(in prioritized order):
- Product information
- Product photo thumbnails
- Product statistics
- Buy button
- Close button
- User name
- Share buttons
Results
It took people significantly longer to find the product statistics element. But also the Product information, buy button and Share buttons took people a little bit longer to find. These items were respectively rated 3th, 1st, 4th and 7th in the prioritization ranking. Further one could argue that ideally the amount of time that it takes to find an element should correlate with the place in the prioritized ranking. This is not the case.
Conclusion
Since the 1st, 3th and 4th prioritized elements are all relatively hard to find we can conclude that this page needs big changes in order to get to a better redesign of the page.
Eye Tracking
The eye-tracking test is conducted with an eye tracker device. This device is able to track the the eye movements of the participants. These movements will indicate which parts of the website will be watched most and in which order. We will compare this data with the prioritised elements in order to conclude if the right elements attract the right amount of attention. These conclusions will help us to visually redesign the website.
Setup
A test is conducted with 10 participants in the faculty hall. The programs to run the test were installed and the pictures of the websites made ready. First we had to calibrate the device for the particular participant before we could conduct the actual test. The test was done with 4 groups so each participant got to see 4 different websites and 2 or 3 pages of each of these websites. Every picture was shown for 10 seconds.
Results Home
Since scrolling was not possible during this test only the upper half of the page is researched. It became clear that the logo and subtitle were watched first. Secondly people scan the product images and thirdly most of them looked briefly at the menu.
Conclusion
The logo and the subtitle are placed in the right spot since our opinion is that this is the most important element on the page because it explains what the website is about. But the background image is too busy. we concluded this from the fact that look back and forth to this a lot. This distracts people from the other important elements on this page such as the menu elements. Not only the big picture is really busy but also the product pictures attract a lot of attentions. One could say that these two element are in battle with each other for attention which makes the page tiresome to look at.
Results product page
The header with the profile picture attracted the most attention and was the first thing people looked at. Then people tended to circle around the big picture looking at the product info, comment box and buy button.
Conclusion
Noticeable is that the picture with the product in the middle should attract the most attention because this is the main subject of the page but infact it’s getting less attention than the rest of the elements on this page. Furthermore we can conclude that the header with the profile picture is attracting more attention than it should. It is nice to know who is selling to get a personal touch but it is less important than the product itself. Especially the header which is different between sellers is very busy in many cases.
