Aesthetics of the webshop

website-start website-productswebsite-specific

The images that you see above are the images of the redesign of the website “goudacheeseshop.com”

We designed the aesthetics of the website with the following in mind:

In this webshop, it is relevant to experience the actual physical product. In order to make a choice between the many cheeses that are available in the website, it is nice to have more perceptual information about the cheese. Because it is not possible to taste, smell or touch the cheeses online, the aim was to improve the tactile experience. Therefore, the focus is put on the stiffness of the cheese. The stiffness of the cheese can tell how old the cheese roughly is and it is also an attractive interaction to show in the webshop. In order to show the stiffness of the cheese on the website, there was chosen to show the cutting of the cheese at the product specific page. You can see a moving image of the page at the end of this post. On this product specific page, the customer can make the cutting motion his or herself by moving the mouse. Thereby, they can also select the size of the cheese they would like to have. Furthermore, we looked at the experience when people enter the website. We wanted to create the impression of entering a real cheese shop. By doing this, the webshop will look more authentic and traditional. In order to do this, there was looked at the colour scheme. In the original design, the website consists of vibrant primary colours and does not give a traditional or authentic feeling. For the redesign, we have used more subtle colors to create that feeling. We worked on a simpler menu structure with more readable fonts. Handwritten fonts were used on the banner in order to create an authentic look.

finalgif

Advertisements
Aesthetics of the webshop

design process of redesign

Before we designed our final redesign of the webshop, we did an exploration of ideas. Every member of the group made a sketchy design of the aesthetics of the website. Finally, we choose a final one and we added all the good things of the other website into the final design.

We finally choose to go on with the 3rd website, because this website looked professional but still had an authentic appearance.

Aesthetics-v3 Aesthetics-v3

design-wolke Aesthetics-v3

design process of redesign

Objectives for the redesign

In order to redesign the website, we made some objectives to help us do this.

The website should…

– give the visitors information about the products;
– allow the user shop conveniently;
– express the company’s identity.

According to our fields findings, we can conclude some important things. Those conclusions can help us redesign the website. The conclusions are about elements of the website and are made visual. You can see the conclusion in image 1. The elements are at the left and the importance of this element or button is showed at “rating”. Then there is showed if the location of this element was right and if it was visible enough.

test_resultsimage 1

Objectives for the redesign

Results Eyetracking (17-03)

When we were comparing the results of the eye tracking tests, it was obvious that most of the initial fixation is in the middle or on the banner. Images on the left side seem to get more attention, because there was a human person on these images. The human figure can be recognized easily by human perception. This was proved to be true in our test. The human figure on some pages got the immediate attention. Intense text areas does not seem to attract users and got the least attention. Only the last sentences of whole paragraphs was looked at.

You can see the images of the results here:

results-eyetracking1 results-eyetracking2 results-eyetracking3 results-eyetracking4

 

In our new design we included the results of the eye tracking test. For example, we will not use a lot of text but keep the page clean. We will design the website with a more “focus-structure”. The results show that the eyes are moving through the pages, because there is so much to see. In the new website the user will be more visually directed through the pages. We will not make use of images if it’s not necessary.

Results Eyetracking (17-03)

Functional Redesign (17-03)

Today we finished the functional redesign of the webshop. This design shows how the website ‘works’ and what different pages there are. In the link below you can see this redesign. There are three pages shown: the page on which you enter with it’s menu, the productpage and the product information page, where you can buy the product.

functional-redesign-newwebsite

We choose to redesign the website like this, in order to create more structure and overview. In the change blindness test there were a lot of icons that took some time to recognize. We limited the amount of information and made a better structure.

Functional Redesign (17-03)

Analysis (10-03)

The past few days we did some analysis. Therefore, we performed the eye tracking test and two other tests: the visual search and a ‘change blindness’ test. Not all objects were analyzed from our website. We choose two 3-points, two 2-points and two 1-points objects. In the previous post we ranked the importance of objects in our website. The objects that are chosen are shown in the image below and are enclosed in pink.

showlocations-v2

 

The Visual Search

In the visual search the observer will get to see some objects of the website, like the logo or a object like the shopping cart. This image is shown without its’ context. After they click the space button, the observer has to select the place where this object is displayed in the website.

Change blindness test

In the change blindness test, the observer is shown different flashing images. In these flashing images, an object is deleted from the image. The observer has to see which object is deleted from the image.

Outcomes

Buttons Visual Search Change Blindness
Shopping Cart 4.2 15.8
Language 2.4 15.9
Search Bar 4.0 18.9
Product Slider 3.6 4
Customer Service 2.6 4.4
Discount Advertisement 6.4 8.3

(Time needed to complete tasks in seconds)

The outcomes of the visual search test are useful for indicating whether the buttons are on the expected location. The buttons we ranked most important are the language button and the cart button. The language buttons for are found quickly and are probably on a spot that is easy to find. However, the cart button took twice as much time to find. People would probably expect the button to be more on top of the page.

The discount page took even more time. This is the least important button and therefore it is a relative good position for this button.

The change blindness test measures whether these elements are visible amongst other elements. This test was relatively harder than the visual search test, therefore the differentiation in the results was more .

According to the results of the both tests, following conclusions can be made;

Shopping Cart: The shopping cart element is considered to be one of the important elements at the beginning of the study. However both tests stated that this element is neither visible enough nor at the expected location.

Language Selection: Language selection was one of the important elements the visual search study indicated that this element is located at the expected location. On the contrary, it took a long time for the participants to point out this element in the change blindness test. Therefore, it is not visible enough.

Search Bar: Search bar was considered to have mediocre importance. According to the VST it can be inferred that this element is somewhat close to the location where it is expected to be. However according to the CBT, it is not visually attracting enough.

Product Slider: Product slider was also an element with mediocre importance. VST showed that it is relatively at the expected spot and CBT showed that it is easy to see. Because it was the biggest element at middle these results were obvious.

Customer Service: Customer service was one of the elements that has lesser importance. According to both tests this element was so easy to see and locate. However because this element is less important than the others it should attract more attention that other elements.

Discount Advertisement: Similar to the previous element, this was also less important compared to to others. VST showed that this element was not at the location where the participants expected it to be. The reason for that might be that this kind of information does not have a common location.  CBT stated that it was not highly visible which can be an expected quality.

Image