To gain insight in perception of the user of the webshop, we use different experiments. One of these experiments was 'Change Blindness'.
Color scheme
As you can see, the website of Phonehouse uses cold and unsaturated colors together with warm and very saturated colors to create a contrast between elements. Its logo uses a dark shade of blue that is used in the top menu as well as parts of the text. The red color that is used to accentuate parts of the website works well, but the green and orange that are used seem a bit off.
The reason why these two additional colors were chosen might be because the designer tried to use a so-called ‘tetradic’ color harmony to find additional colors to use in the design (see figure X)1. A tetradic color harmony works best if one of the colors in the scheme would be considered dominant and there is a fine line in balancing the other colors (especially warm vs. cold)2,3. And unfortunately, that is one thing that the designer did not take into account very well. Especially on the homepage, orange seems to be the dominant color, which might explain why the colors look “a bit off”.
In order to assess the accessibility of the Phonehouse website, we analyzed the homepage and product-page with software that simulates the effect of colorblindness. Color Oracle for Mac allows the user to simulate three types of colorblindness: deuteranopia, protanopia and tritanopia. The screenshots below show how the pages look for each of the conditions.
As you can see on the screenshots, none of the screenshots seemed to have lost important elements due to the colorblindness simulation. The contrast between elements is still good, and the color use doesn’t seem to pose accessibility issues. This is something we will have to keep in mind for our redesign.
Luminance
test
Another part that doesn’t relate as directly to the accessibility as the previous analysis, but does affect the pleasantness of looking at the website, is how the luminance of colors is used. When we edit the images to become gray scale, it shows the contrast in the webpage. This reveals if the color use is done in a way were different colors of the same luminance were used next to or on top of each other.
Another part that doesn’t relate as directly to the accessibility as the previous analysis, but does affect the pleasantness of looking at the website, is how the luminance of colors is used. When we edit the images to become gray scale, it shows the contrast in the webpage. This reveals if the color use is done in a way were different colors of the same luminance were used next to or on top of each other.
When you look at the screenshots of the homepage in gray scale, you might notice that the Phonehouse made good use of contrast to emphasize the menu bar, parts of the advertisements and the actual phones (although they just use stock photo’s for the last). What is interesting to see is that the “check deal” buttons aren’t nearly as present in the gray scale screenshots as in the original screenshots.
Another thing that shows at the bottom of the home page is the amount of different colors that are used for the different buttons. It gives the page a bit of a chaotic feel, which could easily be solved by rethinking the color use.
Conclusion
One of the main insights from the visual analysis was that the color use of the Phonehouse website could be more balanced. The designers seemed to have used a color harmony, but did two things wrong. Firstly, they didn’t make use of one dominant color, and secondly, they chose slightly different hues than the tetradic harmony suggests for the green and orange that they used.
The colorblindness test pointed out that the website has no real accessibility issues, which is a good thing. It will be something that we will have to keep in mind for the redesign.
Resources
1.
Sessions College: Color
Calculator http://www.sessions.edu/color-calculator
Geen opmerkingen:
Een reactie posten