The
Z blog
- improving webdesign -
This page is part of the blindness test. How easy do you find the difference between the two images?
A total of 10 participants is asked to both perform the visual search and blindness test. Alternated was the start with one or the other in order to prevent the influence of each test on each other
When designing a webpage, you want to visitor to find the wanted information as fast as possible. Therefore a visual search test will be applied to the zooplus website. Visual search is defined as “the common task of looking for something in a cluttered visual environment”. Whereas the item that the observer is searching for is termed the target, while non-target items are termed distractors.
What targets to investigate?
Before investigating the website, the targets need to be defined so the effectiveness of the parts can be interpreted afterwards. Bertin (1967/83) explains the criteria for effectiveness of 2D images, which is applied for measuring the effectiveness of the chosen parts. In our case, we want our customers to go to the dog snack page, since this is one of the chosen pages to redesign. There are several paths to get there, of which three start with the word 'honden'. Furthermore, the logo will be investigated as well as the search indication. The last one is interesting since this will be the first direct link when visitors are unable to find the dog snack page with a different route. How easily find participants these specific parts? Further details about
For evaluation, the reaction time (e.g. the the time it takes the participants to find the target) in relation to the size of the part will be graded. This indicates only the effectiveness of the targets, not the separated criteria mentioned by Bertin.
Results
In the graph the relation between the surface and the reaction time are given. It shows which of the paths to the dog snack page is found fastest as well as the ability of the visitors to recognize the logo.
Conclusion
The peak is formed by one of the words ‘honden’ which can be found in the middle of the webpage. Apparently this is thus not a convenient place for such a clue and should be avoided. The word ‘honden’ in white letters with a green background is found quick, though the word ‘honden’ at the right sight of the graph is found even faster! This might be because it is the first item written in a bold in a list with regular words. According to Bertin this is ranked in the selective effectiveness criteria or because of the placing. Either way, this is thus most beneficial word of ‘honden’ out of three.
The search icon is evaluated as suitable, probably because of the common used place and a very recognizable icon. The logo however should be changed to draw more attention, especially because it will direct you to the home page on other pages.
Results
The time to find the changes is measured. The average time of all 10 participant is measured. The change “Alles” was only found by 4 people, therefore the average time is calculated for only those 4 participants. The change “Vissen” was found by 8 people and therefore the average time is calculated from only those 8 participants. The calculated average time is used in the graphs and analysis.
Conclusion
We can concluded that the order of elements on the website from most striking to least striking is:
-
Shopping Beam (order to shopping cart)
-
Advertisement (discount programs)
-
Shop cart
-
Main menu Bar
-
Logo
-
Award
-
Vissen (offer selection all categories)
-
Alles (side menu bar)
This order is based on the average time to find the element (how faster the change is found how more striking) If we look at the graph of the effect of the size on finding time, we see this is for most of the changes correct. An exception is Shopping cart logo, probably because of the contrasting orange color and a quite common icon.
The logo was harder to find than expected, this could come, due to the colour of the logo which is green and similar to the largest part of the website.
Looking at the graph of the effect of the position on the finding time, the elements in the centre are not found faster than the elements on the outside. Therefore we cannot draw conclusions from this graph.
Looking at the graph of the effect on the difference in HSB on the finding time, there is no relation between the size of the difference and the needed time to find the change. The HSB is calculated by looking at the colour which is most present in the the change compared with the background around the change.
Eye-Tracking Set-up
To analyse our website we use a screenshot of the homepage and a screenshot of the product details of the ‘hondenspaghetti’. By letting 10 participants look at the pictures for 10 seconds, a clear overview of fixation points is generated. Among the participants we look for overall conclusions to take into account for the redesign.
With eye-tracking you can ‘see’ what a person is looking at. This method registers and analyses the eye-movements a person makes. Besides that you can find the point of gaze, the spot where someone is looking for a longer period of time. It is a measure of the interaction between the user and the device but can also be used to understand human behavior. The human brain starts to process information from the moment you open your eyes, often this happens unconsciously. With eye-tracking you get a better insight of the unconscious process to apply it in designs. It is often used to improve visualisation and nowadays it is applied to improve for example websites and product packages.
How to use the conclusions?
Both pages
-
Search bar is found the fastest → Easiest to find, is good because is high priority element so keep the same.
-
Side menu bar “Honden”is found the quickest among the menu bar options→ For the menu bars this bar is found the easiest, so keep this menu bar.
-
“Honden”in offer selection takes the longest time → Hard to find, so make it more noticeable
-
“Honden” in mean menu bar → Harder to find than the other menu, so delete this menu, because two menu’s is too much and creates confusion.
-
Logo is found medium fast. → High priority element so make it more visual
How to use the conclusions?
Both pages
-
“Main menu bar” and “Logo” is medium striking but should be more important (in relation to functional analysis) → Make more noticeable main menu bar and logo
-
shopcart → on home page is it medium priority and on product page is it a high priority → keep the same
-
award → low priority on both pages so keep the same
-
“Alles” (Side menu bar) is a low priority element on both product page and home page. → hard to find, remove this menu bar because other is easier to find
Homepage
-
“Discount/ newsletter” is striking, but has a low priority → Change visual attractiveness in compare to rest of webpage. Make less noticeable
-
“Offer selection in all categories” the categories are not visual but it has a medium priority → Heading is hard to find, so make it more noticeable
Productpage
-
Shopcart → high important element and is most striking so keep the same
-
“Order to shopping cart” is striking and is also important → keep the same
1. Visual Search
Indication of the targets
3. Eye tracking
Conclusion
From the analysis there can be concluded that the big picture do draw attention and most of the time this is what people notice first. When there is a lot to see on a page there is no guided visual path and people are kind of looking all over the place. When there is too much text on the page, like in the hondenspaghetti productpage no one is paying attention to all the information and it may distract them to see other important info like the price. The hondenspaghetti productpage was not design in importance of information, only a few people looked at the price of the product and the actual buy button. There is just too much information on the page to process within a certain time, the main risk is that people get confused and leave the website.
How to use the conclusions?
Homepage
-
Logo is looked at by 80% → Keep the same, is an important element
-
Changing zooplus advertisement (changing) everyone fixated on it → Reduce in conspicuousness, is not an important element
-
On the right column people tend to look at all elements from top (80%) to bottom (40%) If people look at the first object, they tend to look at the next below
-
Everyone looked at offer selection in all categories → Is medium/high priority element, remain as it is.
-
60% of the participants looked at several points of the main menu bar → Most important element of the homepage so has to be more noticeable.
-
80% looked at the award → medium priority, so make less noticeable
-
50% looked at the payment possibilities → medium priority, keep the same
-
40% looked at the discount/newsletter → medium priority, keep the same
-
50% looked at Discount/Newsletter→ Medium priority, keep the same.
-
Only 20% looked at the search bar → is high priority element so make it more striking
-
Only 30% looked below the side menu bar. → Low priority, so remove side menu bar
-
20% looked at the delivery cost → Is also low priority, might be reduced in conspicuousness
There is no visual guidance. Site is a blur/chaos/no focus/see brainstorm
Productpage
-
Everyone starts looking at the Product picture → high priority element so it will stay the same
-
80% looked at the orange title in the “Description of Product” → High priority element, so keep the same or make more striking
-
90% kept looking back at the main picture → No visual guidance
-
70% read the bold part of the product description. → People don’t read entire product description, with test set up in mind we can’t conclude that it needs a change to stimulate full reading.
-
60% of the participants is not focussing on a single point. → No visual guidance
-
60% looked in a circular pathway across the page. → There is more structure as in the home page.
-
40% looked at the price and discount as part of the order to shopping cart element.--> Has high importance, so can be made more important in appearance
-
30% did not look at the logo and 40% scanned it only briefly → medium priority so it can stay the same.
-
30% looked at the buy button in the order to shopping cart element → Has high importance, so can be made more important in appearance
-
10% looked at shopping cart button. Is important in visual importance pilar. → make more noticeable
-
No one looked at the expansion of the product description. → Is also a low importance element, so does not need a change.
Functional Redesign
A functional redesign is a redesign in which only the functionality (which elements, where and which size) is considered and not the aesthetical part. This chapter explains what the functional redesign looks like and why it looks like that. The functional redesign is mainly based on the recommendations from the analysis and research which are described in the previous chapters. First the fixed elements will be explained and then the specific elements of the home page and product page will be discussed. The current home page and its functional redesign are shown in the figure underneath. In the other figure the current product page is displayed next to its functional redesign.
Home page
We removed the category top brands in the main menu bar, however we want to show on the website which brands are available on the website. Therefore we have chosen to add logo’s from the brands on the right-side in the same column as the advertisements.
The changing zooplus advertisement is made smaller, because it was too noticeable. In contrast we made the offer selection in all categories a bit bigger, so there is enough space to present the products.
Product page
The most important change in the product page is removing a lot of texts. The text was not read as described in the previous chapter. Due to less text the web page looks less chaotic and it is easier for the viewer to start reading. We also removed the tabs ‘Apotheek’ and ‘
We liked the website navigation under the main menu bar, so we made that bigger to make it more noticeable.
The functional redesign is an advice for the redesign of the website. It is still possible to change the size and position of some elements if that is aesthetically better.
Our vision
The research showed that Zooplus.nl can be improved when considering the look of the website elements. By giving specific parts attention and others not or less, the website already has a better overview, which we applied in the functional redesign. There should be considered, how the website wants to be perceived. A vision will be created to communicate the zooplus identity and taken into account when designing the aesthetics of the website.
In our opinion, Zooplus now wants to show all of their products, not from a marketing perspective, but because they want to show it all. But by showing too many elements at the same time their webshop becomes unclear. This in contrary to their vision of providing to be an easy webshop. Therefore we envision a webshop with a clear overview. By doing so, we align with their identity and make in order to maintain their. In this manner we want to give Zooplus a better overview.
How are these terms translated in the current website? Pet owners can probably find all (or at least the majority of) the products that they search since Zooplus provides a very complete assortment. Visiting only one page to buy all your necessities is of course easier than using various. To radiate trust, they have the Leading Pet Shop button and give descriptions for the products. Furthermore, having a complete assortment is generally associated with trust (Paolo Guenzi et all, 2009).
Zooplus has a rich community as we discovered via their social media and active users. That is why we choose to revive the sweetheart of the day element, because we did not consider the community as important in the functional redesign
Our vision for the website is making an appealing and clearly structured website. Besides that we want the aesthetics to still be recognizable as zooplus.nl because they are operating internationally. Furthermore, we want to enhance the natural appearance of the website which will be less overwhelming at the first look.
Our vision does not replace the vision of Zooplus but is either supportive or complementary. For example, by giving a better overview of the assortment of the zooplus website, it will be easier for the customer to use the webshop. Same goes for trustworthiness and showing the quality of the products.
The aesthetic redesign is based on the functional redesign, the changes are based on the results from the experiments. Nevertheless, it is not the exact division of the website but gives a more overall impression. Besides that our design vision is kept in mind while designing the new website.
It is noticeable that the website is less chaotic. More natural colors were chosen to give a more peaceful impression. In a lot of elements a gradient factor was applied which gave it a old-fashioned look. By making it an uniform color the appearance improved.
We decided to make new advertisement for the banner and a new advertisment for the discount of the newsletter. In this way it looks like everything belongs together instead of being separate elements put together.
The communities were not well communicated and nowadays they play a big role in ones marketing. That is why we made them more visible by placing the grey symbols at the bottom of the page, instead of the long list of links that it currently is.
Home page
The figure shows the new redesign for the website next to the orignal web page. The main improvement is the structured way of presenting, and enlarging most important elements. Top brands are added in the advertisement banner at the right because people more often buy the same brand every time. This creates an easy and quick navigation to their favorite products. We also designed a new offer selection of all categories so that it becomes more in the same style and therefore creates a peaceful and visually attractive page.
Aesthetic Redesign
Product page
The figure underneath shows the improvements for the product page. An important change is getting rid of all the orange on the page, we only used the color for the buy-button and the shop cart-button to indicate the important features. The price is made more visible so it is immediately clear how much it costs. The product picture was already a central point of the page so we emphasised this by putting it even more central.
During redesigning the dynamic interaction was kept in mind. The main interactions of the website will be explained.
Buttons are indicated on the website in the redesign (static) and the dynamic interaction can perfectly complement the indication. With a scroll over, all the buttons will become lighter in color. For example, when your mouse is moving across the main menu bar the tab where you are will turn into light green (like is done with the tab ‘honden’ in the redesign). This counts for all buttons, except the logo button on the product page. A distance deviation is taking into account for this function.
Dynamic Interaction
Furthermore, when scrolling over the menu bar, a drop down menu will appear. This dropdown menu is more subtle than the existing one; it will not cover the complete page. Besides is an example for the tab ‘honden’ again.
Product page
Some additional dynamic interactions are designed for the product page. As a start, when you want more information about the product you can click in the description on ‘meer informatie’ and an expansion of the description will appear.
The product image will furthermore be enlarged when clicking on it. For products of forage this will be sufficient. For products with more pictures, like aquarium decoration for example, you might want to see other perspectives. In that case, on the right sight you can choose for the other pictures of the product and see the different from different sides.
When scrolling over the rating stars, they will be filled green. This instead of letting the user click and leading the user to an expanded evaluation page. When you want to buy a product, you should click the buy button. When there is clicked on this button, a small pop-up will appear at the shop chart that says ‘1x hondenspaghetti toegevoegd’.
Some final words
The redesign for the webshop Zooplus.nl has made the webite much more user-friendly, while it still expresses the same identity as before the redesign.
It was interesting to do the visual search, change blindness and eye-tracking research to find out what people literally see and do not see when looking at a website. Some of the outcomes were already expected, but some where surprising and gave us new insights in how people perceive the website when looking at it for the first time.
After making the redesign, as a group we are very curious about what would be the results when doing the visual search, change blindness and eye-tracking tests again when showing the redesigned web page. We would recommend Zooplus.nl to test and analyse again to see which functional and aesthetical elements could be even further optimised before really implementing the redesign to the webshop.
Product
For the product positioning on the product page, the same elements are introduced. So there is the animal to indicate the relevance, there is a balloon with the pricing and unnecessary background noise is reduced to a minimum.
For the food department of the website, it is not necessary to be able to rotate it, or know how it feels in your hands. For the non-food department (e.g. aquariums etc.) this might be different, but this is not considered in this redesign. The product should convince the customer to buy the product. That is why the animal is presented next to the product instead of the background, it makes the product sell.
week 3.03 - 3.06
- part 1: FUNCTION-
Measuring
1. Visual Search - 2. Change Blindness - 3. Eye Tracking
week 3.04
- part 1: FUNCTION-
Analysis
The site diagram shows the many different roads to get from the Home page, to the chosen product page. There are at least 10 different routes to get to the desired product page.
The visual querie shows which buttons all enter the same menu. When a visitor visits the website and looks for a certain term, there is a strong possibility that the term can be found multiple times.
From the Importance of Elements can be concluded which parts should get an high priority spot on the webpage.
The site diagram shows the many different roads to get from the Home page, to the chosen product page. There are at least 10 different routes to get to the desired product page.
Conclusions of analysis
After analysing the home page and the product page of zooplus.nl, the overall conclusion is that there is too much information displayed at once. Also, is shown that there are many different ways to reach the same subpage. These two findings together confirm our first impressions about the chaotic “structure” of the website. If someone visits this website, for example looking for some kind of dog food, there are many possibilities to see what kind of dog food zooplus.nl is selling. This might be very confusing for the visitor, because you are not guided to a logical overview. In addition to this, all the different texts, buttons and pictures (of which most of them tell approximately the same) make the website not easy or clear to oversee.
Zooplus.nl
The website zooplus.nl (see figure current website on the right) is a webshop with a comprehensive assortment of pet supplies. This company was founded in 1999. They mainly focus on products for: dogs, cats, rodents, fishes, birds and horses. According to their own introduction, Zooplus is specialized in offering an easy and trustworthy place where animal lovers and owners can buy their necessities online. They have a dedicated team operating in Europe to provide the best products; they aim for the best quality products for the best prices. In addition, they cover a huge range of the animal product market by offering more than 7000 products. Furthermore, not specifically mentioned, they radiate animal friendliness and environmentally consciousness.
This webshop is chosen to be redesigned because the web pages show too much information which results into chaos. Also, there is a lot of double information, which makes the structure also unnecessary chaotic. Everywhere you look on the webshop you see special offers, bonus programmes and discounts. On one hand we see that they want to distinguish themselves by these offers, but on the other hand it makes the webshop visually less attractive.
We like that this webshop already exists for over 15 years, this means that they do a good job and sell products of good quality which customers appreciate.
A brainstorm is made (see brainstorm result) to summarise the current situation of the website. The brainstorm shows what most stands out when looking at the webshop.
With this brainstorm as a first impression, the functional redesign starts with an analysis of the elements.
Doing an analysis and making this visual gave us new insights about the build-up of the zooplus.nl website.
week 3.02
- part 1: INTRODUCTION-
Product enlargement when clicking on the magnifying glass.
Product positioning with a focus on relevance (the animals) and the price above the products.
Recurring elements that will give the customer a recognizable feeling when visiting the website.
Aesthetic redesign homepage versus the current homepage.
Aesthetic redesign product page versus the current product page.
Graph that indicates how fast the indicated targets were found by the participants.
Left the targets for the Change Blindness test are indicated, on the right side how the website looks without the targets.
Result of how one participant looked at the current Zooplus website.
Brainstorm result
Current homepage of Zooplus
This blog shows the redesign process for the Zooplus webshop. More in depth information can be found in the report.
Change blindness refers to the difficulty to notice large changes to visual scenes by observers (Simons & Rensink, 2005). In this section changes blindness is explained and who we used it to test our website.
What is it?
Change blindness is the difficulty to notice large or small changes to visual scenes by observers under certain circumstances. These circumstances are a brief disruption in the visual continuity, such as a brief flicker, an eye blink, a shift in the picture or a large retinal disturbance product by an eye saccade. To see what the change is the viewer uses his/her visual memory and compare the information of the change location before and after the change. Viewers will only see changes in the gist of a scene, because the brain fills in the rest of the scene (Simons & Levin, 1997). According to Simon and Rensink (2005) it is more difficult to notice unexpected changes. (O’Regan, 2015)
How we used it?
For our research we used two pages of the website and made changes in pages. The changes are indicated in the images. We have chosen for these change to make a combination of large and small changes and important and not important parts of the website.
2. Change Blindness
week 3.06 - 3.08
- part 2: FORM-
- part 2: FORM-
week 3.06 - 3.08
The icons on the current website are replaced by more relevant textual announcements. This attracts less attention, so the website can become more structured.
So, for the home page, the offers are presented with the relevant animal and the discount offer that it provides. Just beneath it will be the current price, and in smaller letters the price/kg.
This way we try to create more white space, by structuring the text in a text balloon. By introducing recurring elements, as the balloon with the same text structure and the animals, we try to give the customer a recognizable feeling when visiting the website.
Now the product presentation mainly deals with the discount, and also mentioned the price in a small font.
To translate the vision to the product presentation, the focus should be more on the relevance and the price. The discount can be less noticeable, because this is only relevant when someone is already interested.
To create more relevance, the animal is introduced next to the product. For dog food, a dog will announce the price and/or discount. This way people can see at first sight if the product is relevant and this can create a better guideline through the web page.
When visiting the webshop, the main focus should lay on the articles sold. The website offers a lot of products for a wide range of animals. The discount programs and options are even wider in range. When going to the website, the visitor should be informed about different aspects:Is this relevant for my kind of animal?
-
Is this relevant for my kind of animal?
-
What product is sold?
-
What is the price?
-
What discount do I get?
- part 2: FORM-
week 3.06 - 3.08
- part 1: FUNCTION-
week 3.03 - 3.06
- part 1: FUNCTION-
week 3.03 - 3.06
- part 1: FUNCTION-
week 3.04
Introduction
Redesign of the dropdown menu bar.