Open websiteDocument:
L'Oréal Open: All About Open (FAQ)

Contents:
Gestalt Principles
Usability

Note: although Open's website seems to promote the company's products (ie. a form of advertisement), this particular page seems to be more of a frequently-asked questions page (rather than an advertisement), as it answers general questions regarding haircolouring.

 

Gestalt Principles

Gestalt theories of figure-ground, similar proximity (contiguity, continuity) and closure (area, symmetry), are a part of Gestalt's Principles of Perception theories (psychology) that can be applied to design analysis.

Figure Ground
The contrast of colours separates the figure-ground distinction very well. The similarity between the realistic images of the model and product form a group, which successfully focuses a user's attention to the product. Additionally, there seems to be three different layers of separation, which is evident in the shadow-effects: the background, the images, and the text.

Proximity (Continuity) and Closure
The layout artist seems to have applied contour lines with the concept of continuity. The two angled vectors suggest that the points meet outside of the screen size. The left-most contour is in a semi-circle, but the eye knows to complete (or "close") the rest of the implied image: the O--to represent "Open".top

Usability

The nature of websites, in general, is interactive, especially with hyperlink navigation. Thus, user usability is an important element for effective design, especially if the document is interactive. Although the hyperlinks are not underlined, navigational cues, such as circular dots containing arrows, text in the form of questions, and contrasting colours for rollover effects, serve to point to links. However, the animated shadow "O" of "Open" is misleading as it draws attention to itself without any functional purpose. Organisational layout affects the usability of the website. Although this website originally really appealed to me visually, it soon annoyed me, which caused me to wonder whether the web developer took into consideration usability issues in his or her design choices.

Firstly, the flash site is shown in a separate window than its main site (http://www.lorealparis.com/open). Functionally, such a particular design choice makes sense as some users do not have flash-enabled browsers or do not have high speed Internet connections. Additionally, the Open site seems to have a different sense of ethos than the main website. However, once the flash window is opened, I have no idea how to close it if I do not click on a provided button that says, "Close Window". Granted, the website designers considered the option of "exit"-ing the website, but only allowed one way out. I could not even minimise the window without going to the Windows taskbar or type another link as all the toolbar tools disappeared (unless I type CTRL-O but all my browser navigational tools would still be missing). One may argue that perhaps I am just computer illiterate, but normally, pressing F11 would reveal tool buttons to allow me the option to close or minimise the window.

Secondly, most people are used to order (vs. chaos). With that in mind, I do not see any particular ordering of the frequently-asked questions that the website lists, as the questions are not positioned in alphabetical order, ordered by relevance, or positioned according to length. However, the left-justification of each question, allows for the eye to follow the "O" curve. On the other hand, the use of a pop-up window to answer a specific question is quite effective, as the window allows the user to navigate to another question, which is still partially visible below the top layer (the pop-up window).

Lastly, as mentioned earlier, the Open website may not be optimised for users who have slower connection speeds. Thus, the size of the audience may decrease as a result. The number of visits may also decrease if users have lower resolutions on their computer monitors, as the white text against the textured background almost blends together and thereby, blurring the figure-ground.top

Back to Top