Eye tracking experiment

With the eye tracking test, it is possible to analyse what participants focus on when looking at the site and the way they take it in. This is important as it shows how people unconsciously react to the site lay-out and what information they see first. The goal with this test was therefore to find out which elements attract the eye and which don’t. From this it can be decided some elements need to be noticed more or which should be noticed less.

Results

The results from this test are displayed in the graph below. On the bottom axis are the elements and on the right axis is the amount of participants that looked at those elements.

Home page

CD page

Conclusions

Home page

The parts of the Home page on which the participants should have focused are: the Velvet logo, the (not loading) image and the new and expected CDs. However, though most looked at the image, the Velvet logo still scored high, but not maximum. This should be improved, as the logo is most important to the company. The expected CDs scored very low, so this should be made more noticeable as well. The Facebook button gets a lot of attention, just as the text. This should however be less.

Cd page

The focus points on the CD page should be the CD cover, the information about the CD and the Velvet logo. Now however the participants focused more on the standard page elements as the search area, the social media buttons and the navigation bar. These elements should become more part of the background, to help users of the website direct their focus to the actual CD.

Discussion

Possibly the results of this experiment are not very accurate, since calibration mistakes could lead to differences of interpretation in the results: elements that are placed close together are hard to distinguish when a participant is looking at one of them. Therefore the results of the larger elements are more certain than of the smaller ones, such as the ‘login/subscribe’ button or the title of the CD and social media buttons.

The results of the other experiments will be added soon!

Blog analysis

Before starting the redesign of the Velvet music page, the pages were analysed on different things: the visual structure of the pages and the importance of the elements. The results are shown and described below.

Visual structure

Home page

On the home page the first thing that really catches the eye is the shopping cart. This feels very unpleasant as people are immediately confronted with paying. Furthermore, the shopping cart and search engine are styled in such a way that they look like they might be advertisements, because they do not match the site. The shopping cart is placed in the right position for a web shop. 

On the left side of the page a lot of buttons can be found with a lot of different functions. 

In other sites these buttons can partly be found on the top of the site in the ‘Pages’-bar. This would really improve the usability of the website as it shortens the time need to find some of the main functions. The buttons have different functions as well. Some are dropdown menus and some are direct links. Even though this is made clear with icons for the dropdown menus, it probably feels very strange to the user.

Also the buttons on the side of the page change color when the user is about to click them. This makes it clear which button will be selected but creates use of even more color shades. The buttons have different colors. Some of the buttons have similar colors to the color of the start screen. Users can get the impression that these few buttons correspond with the selected page. 

CD page

The elements are shown in the image below. When users click on the CDs button, the site shows a page of all the CDs being sold in little boxes.  Only the centre of the website changes so the other elements located left and right are the same.

Above the little boxes, there are iconic and textual symbols of internet based applications: Facebook, Twitter, Google+ and more (+). On the right side, there is another Facebook icon which is bigger and in the opposite colors. Just below them, there are two icons of twitter and Gmail. Each of them can be clicked on to share.

When we come to the CD box below, a lot of information about the selected CD is given. In the box under the information about the CD you can see the price and a button “buy”. Below that you can add a reaction about the CD on Facebook. Beneath that the buying information can be found, with two clickable boxes.  The little boxes has two options on named “order” and “details”. Clicking on the image of CD and clicking on “details” button are the same in terms of functionality that a page with brief descriptions can be seen.

Importance of elements

In the two pictures below the importance of the different elements on the pages is classified in three categories: 'Most Relevant' (green), 'Less Relevant' (orange) and 'Not relevant' (red). The most relevant are the elements that have to stay. The less relevant are the elements that should be made less noticable, so they don't distract from the main information. The not relevant elements should be left out. 

Furthermore elements were defined which should be taken into consideration to add to the page:

• Possibility to listen to the beginning of a few tracks on the CD a user considers buying.
• Other recommended bands or CDs.
• Band information.
• Individual CD ratings and reviews.
• Forum for people to discuss music as if they were in an actual music store.

First impressions

As first impressions normally say a lot about a product, or in this case website, these were immediately written down before doing anything else.

General Style

Upon opening the Velvet site, the general style of the site sets the tone for the whole website experience. The main issue is that this general style does not seem to exist for the Velvet site. They use a lot of different fonts without a clear meaning or structure behind it. Even the fonts in the logo can not be found anywhere else in the website. Also the typing is very small, which probably makes it difficult to read for for example older people.

Furthermore the colours used in the pages are a lot of different shades of the same base colour. None of these shades are used in the logo though. Again no logic can be found which would explain this. The colours are in such low saturated shade that together with the small letters make the website look old-fashioned. Put on the dark background of the site the colours furthermore have a very low contrast. This does not improve the ease of reading.

Last the website has slight differences in different browsers. For example in Google Chrome it provides you with information about the encrypted connection and the sidebar buttons have rounded corners, in Mozilla Firefox this encrypted connection information is missing and the corners are non-rounded.

Home page

When shifting from their basic Dutch site to English a blue screen with the word ‘English’ in the middle fills the screen for a few seconds. This makes the site feel very cheap and badly made. After this screen users see a big empty spot where probably an image is loading, this loading hawever takes about 20 minutes. Without the images this page is mostly a lot of text and again very old-fashioned looking. Some people actually thought at first that this was an error message. As soon as the image does load though, it looks quite a lot better.

On the home page the first thing you see and really catches the eye is the shopping cart. This feels very unpleasant as people are immediately confronted with paying. Furthermore the shopping cart and search engine are styled in such a way that they look like they might be advertisements, because they do not match the site.

On the side of the page a lot of buttons can be found with a lot of very different functions, which in other sites can partly be found on the top of the site in the ‘Pages’-bar. This would really improve the usability of the website, as it shortens the time one needs to find some of the main functions (contact, stores etc. ). These buttons have different functions as well. Some are dropdown menus and some are direct links. Even though this is made clear with icons for the dropdown menus, it probably feels very strange to the user.

Also the buttons on the side of the page change colour when the user is about to click them. This makes it clear which button will be selected but creats use of even more colour shades. The buttons have different colours and some of the buttons have similar colours to the colour of the start screen. Users can get the impression that these few buttons correspondate with the selected page. 

CD info page

This page is reached by the users when they first go from the Home page to the CD page and then click on a specific CD. This page includes a table with a lot of space for information including the price and release date, which is usely partly empty, the front of the CD cover, a box for facebook comments on the CD, other titels of this musician/band and last the tracklist. The page has a lot of information, which most users would probably not want or need. Also the table lay-out makes it look very business like, instead of like a page for leisure, which it’s supposed to be.

The main part of this page has a white background. This makes it stand-out of the main site so much, that it feels like a copied Word document page in the page. This looks very fast made and cheap. Some one mentioned the order in which part of the information is displayed feels backwords. The more interesting information like the track list is in the bottom and the less interesting is more on top.

Velvet website

So, the website we choose is the website of velvet:

We use the home page
http://www.velvetmusic.nl/?lang=en

And a cd page
https://www.velvetmusic.nl/shopping/product_details.php?gt=Ogh&lang=en&id=9824696&kid-rock-first-kiss-CD#.VOyawPnF_Ew