woensdag 1 april 2015

Dynamic interaction

For the dynamic interaction, the information that is displayed can be adapted to the user’s musical preferences. This can be done with cookies remembering the pages that the user visited or other products the user has previously purchased through the website. This will create a more personal store experience. Plus it might increase sales, as the web site can now show the users’ music they might like and thereby stimulates them to try new artists, whose albums they might want to buy as well.
Other interactions that can be used are:

1. When someone hoovers over a button at the top bar, a drop down menu will appear beneath the button. 


2. Changing images for the recommended CD’s at the CD page and for the new and expected CD’s on the home page.

3. When a user wants to play a preview of a CD he can drag the CD from the cover to the recordplayer which would be added to the page.

Aesthetic Redesign

After the functional redesign the aesthetic redesign was made. All the pages now have aesthetics that fit better with the visual identity of Velvet Music. This way the different pages have a corporate identity that is characteristic for Velvet Music. For example the main banner with logo is given a wood print. This creates the old record store atmosphere. Also the colours used on the web pages now fit the colours of the Velvet logo. The logo was of course left unchanged. For example the background colour of the pages is the same light yellow colour as the logo. The different bars and headings have the same purple/blue colour as the outside colour of the logo. Also the fonts on the web pages were changed to fit with the font used in the ‘Good Music’ logo slogan. The total appearance of the webpage looks more relaxed and at ease in comparison to the original design.



Visual Identity

Keywords: Vintage, Retro, Dutch, Expert Music, Lifestyle

Velvet Music store is a Dutch company chain with several stores spread through the country. It has a retro style that adresses musicians and real music fans who feel serious about music and rejoice listening to it. Besides, people can search for new items as well as discussing about their musical experiences in the website. Velvet aims for a personal approach, so it's website should give a feeling of an old record store with its ambience. This should make the store feel like a musical living room for serious music fans, for whom music is an important part of their lifestyle. Also musicians should feel that this is the right place to buy some new CDs, gaining new experiences by listening new music styles and enjoying themselves due to the friendly space of it.


 



Physical experience & Context of the product

A webshop differs very much from a normal shop, especially in the sense that you cannot physically experience the product you are buying and that the context of the product might be less noticable or different. Therefore these important aspects are described below for the new Velvet music website.

Physical experience


Of course the customers miss a certain experience since they cannot touch the CD or feel it in their hands, but this experience of the actual physical product is not as important for CD’s as it is for clothing. However it should be possible to listen to examples of tracks on the CD before purchase, so people will be able to explore music as they would in stores. 

The feeling of the CD can be simulated by showing the cover of the CD in its specific case and by adding the opportunity to flip the CD case to see the backside of it and open the case to see what is inside. 

Also the online shop lacks the experience of an offline shop. People miss the great atmosphere: the retro looking store where music lovers and musicians come to find and explore music by going through hundreds of CD’s and talking with other people. Thus setting up a music sharing community could greatly improve the web store experience. 

Velvet tries to encourage people to share their music by creating social media buttons. However sharing music should be something actively social: instead of just clicking a “like” button, people should talk and discus with others. Therefore we would recommend creating a forum to share music preferences and delete most of the social media buttons. 

Context of the product

Since CD covers generally are already obviously present it is not a good idea to add more context to the CD’s at the home page. However, for the CD pages it could be nice to add a link to an autobiography/ description of the band and their music style. Also it would be nice to add a section that provides recommendations for other CD’s that fits the music style of the CD people are looking at. This is not because of pure aesthetical or functional reasons, but to create a better atmosphere around the web shop.

In the image below an example of the 'Last.fm' website is shown, in which they recommend other artists based on your music style:


Functional redesign

Home page



In the picture above the redesigned home page on the left is shown next to the original page on the right. This makes explaining the changes in comparison easier.

The original page seems to not have been designed for broad screens. To update the look and help the website fit better with wider screens, the sidebar has been deleted, as currently the sides of the screen show white. The buttons which could originally found here are partly combined and placed on top. Also the search box was integrated with the other buttons.

The search box is an important element of the site, but seemed very out of place in the top part of the screen. Also originally there was a second ‘Advanced search’ button in the sidebar. These are now combined into one button in the top bar.

The Facebook ‘Like’-button has been deleted, as it seemed very oppressive. The other social media links have been put in the bottom of the page. As these links contrast with the idea, that Velvet is an old school music store.

Also in the original page a lot of albums are displayed in the ‘New’ and ‘Expected’ categories. People found it hard to find a specific one during the tests, so these categories are now limited to three and are made slightly bigger.

CD page



From the tests it can be concluded that the original CD page has so much information on it, users found it quite hard to find the desired information. Therefore in the redesign a lot of the information next to the album cover that most users are not interested in or is not of any use to them, is left out. 

Also users told us they thought the interesting information like the track list was harder to find than the less interesting like the kind of disk and the release date. Therefore the sequence of the information was shuffled as well according to their statements and our own insights. 

Furthermore in the original page there are a lot of social media links. This kind of contrasts with the idea, that Velvet is an old school music store. Therefore a lot of them were taken out and the remaining have been put in the bottom of the page.

To make it possible for users of the site to get more of a feel for the product the option was added to listen to a preview of the music on the CD. For now this has been put in the same format as the other information displayed on the screen.

A lot of sites directed at music fans have a part where the site has suggested artists suiting your specific taste. People felt this was missing in the Velvet site. Therefore in the redesign this was added. This links to a page with information about the artist’s autobiography and samples of their music.

The button used for buying the product is now put underneath the album cover in order to make this stand out more from the other informational elements. Despite the colour it was found from the visual tests, not everybody could find it as fast as the store would want.

What We Can Easily See & Visual Search

Visual Search 

In the visual search test the participants first saw a black page with one element of the page. After pressing the spacebar the complete website was shown. People had to search for the element and to click on it. For the home page eleven elements were used. These can be seen in the image below:


The results of this for the home page  are shown in the graph below:



The elements used for the search of the CD page are shown below:


The results of this for the CD page are shown below:

Conclusion

Search home page
When looking at the graph in the results section, it becomes clear that it was the easiest to find the login button, the search section and the Velvet logo. The graph shows that finding the like button for Facebook was the hardest part of the website to search for, followed by offers.


Search CD page
When looking at the graph in the results section, it becomes clear that the price, barcode and order on the CD page were easiest to find. It took the participants the most time to find the ‘add a Facebook comment’ part on the website, followed by the track list, genre and delivery time. 


What we can easily see

For this experiment two different images of the website were used: the normal website page and the website page where an element is missing. These images were shown quickly after each other and with a grey screen between them. The participants had to search for the item that was appearing and disappearing. The results of this are shown in the graphs below.

For the home page:


 For the CD page:


Conclusion

When looking at the graph in the results section, it becomes easily clear that the Velvet logo, the chart and the Facebook-comment parts of the website were easy to be recognized to be appearing and disappearing. Meanwhile, the appearing and disappearing CD album was hardest to discover, followed by the expected date and price. But these two have values close to navigation, language, genre and order. 

Overall conclusion

When comparing these different conclusions, general conclusions about the website of Velvet music can be drawn. It was easiest for the participants to find the Velvet logo, the chart section, login button, search section, barcode and order. It was the hardest for the participants to find the CD cover, expected date, Facebook like button, offers, track list, genre and delivery time.

Discussion

The validity of the results can be doubted because of the setup of the test. First, the tests were all conducted at different places and different laptops with different visual qualities were used. This could have caused the participants to see the different parts easier or harder. For example, a participant could have conducted the test and had troubles with the size of the symbol on the screen while on another screen he would not have had this problem. 

Second, in the search assignments the participants had to search for a specific symbol and click on it. The program was built in a way that they had to click on one specific place on the symbol. Sometimes participants had trouble selecting the symbols while they already saw them. This increases the time to find the symbol significantly. This is especially possible for large items, such as the search section, the shopping chart, the Facebook comment, the CD cover and the Velvet logo. This could have caused the high measured search time of Facebook comment in the search the CD page part and the CD cover on the CD page.

Also, not all parts and sections of the website were tested. Perhaps there were parts on the website that were not included in the test that were very hard or easy to find. 

Finally, there was not a real participant group chosen. The ratio between ages and gender of the participants is maybe not representative for the results.

zaterdag 21 maart 2015

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.

dinsdag 24 februari 2015

Introduction

Hi there!
We are group C for Visual Communication Design.
Our groups consists of:

Wanda Bloemers
Tessa Majenburg
Anna Spaenij
Cisem Özkul
Marieke Lous

We chose the website of Velvet music to redesign.