When making a purchase, especially when it is something expensive like a digital camera, most people tend to do a bit of research comparing brands and products before they make their final decision. The first place most people look for quick answers, price and quality comparison is the internet. When looking for a nice quality digital camera, two competing brands come to mind: Canon and Nikon. When most people are using the internet to decide which brand and type of camera to get, it’s important that the websites for each brand are appealing and easy to use in order to help the customer make a decision. I will be critiquing the official store websites rather than the company website because that is what most people will be looking at when making a purchasing decision.
There are a few things to look at that determine a successful website; How the website is organized such as use of hierarchy, white space, containment, and use of grids. Other elements that give a website style, such as color, texture, imagery, scale, animation and variability.
How information is displayed and read is very important. When comparing Canon and Nikon‘s website I notice some similarity in organization with hierarchy. When loading both pages, I see the logo/name of the brand first in the upper left hand corner and then immediately look at the large picture advertisement above the fold, Nikon’s picture is much larger taking up the entire space above the fold. Both sites show that there is more to look at below the fold so the viewer will scroll down to see what else is on the main page, and then they would scroll back up to look that the navigation bar to find what they are looking for. One thing about Canon’s site is that it has two navigation bars and the main one is smaller which could potentially be confusing.
While browsing both websites I immediately notice that Nikon’s website makes better use of white space than Canon. Nikon gives its content and pictures padding and margins so there is plenty of places for the eye to rest, while Canon’s website is still organized and uses borders, padding and margins. It uses less than Nikon and when comparing the two it feels that the information on Canon’s site is too close for comfort.
Canon's 6 column grid showing types of cameras
example of Canon's 5 column grid for showing the camera choices within a specific style.
The use of grid is used to help organize information on a page and creates unity and balance when the same grid system is used throughout the site. Both websites have a grid system and are fixed width. Nikon’s site has a good use of Modularity because the grid system is used more consistently through out the site because when you make any selection in the navigation bar everything is laid out in the same place. While Canon’s site seems to have two different lay outs if you select a general topic such as ‘cameras’ its organized into what looks like a 6 column grid and when you select something more specific, it looks like it turns into a 5 column.
Color used in both sites is very simple. Black, white and one accent color that relates to the brands logo; red for Canon and yellow for Nikon. Nikon uses its accent color mostly for the button colors, this is helpful to know where to click. Canon used its accent color for the navigation bar text, headings and buttons. Canon’s use of its accent color helps the user with hierarchy and makes it easier to identify the product and price.
On a website when you’re shopping for products, imagery is pretty important because the customer has to see what they are purchasing. The imagery is pretty straight forward and is displayed well so the customer can see the product and is able to visually compare one type from another. Nikon’s images are a little bit bigger and makes it a bit easier when shopping. When looking at Canon’s site I felt like I needed to click on the product to get a larger view of the item.
Example of imagery for Canon
Example of imagery for Nikon
Neither site really had much use of texture, depth, animation or variability. It’s possible that if this type of site used these techniques that it could be distracting for the user when trying to shop or compare a product.