Thursday, November 7, 2013
Axioms of Web Design
The website I chose to analyze is Pottery Barn. I've analyzed it below using the axioms of web design (as outlined on the class blog).
Business/Communication Objectives
Pottery Barn's website fulfills its business objective as soon as you are at the landing site. It is obvious that Pottery Barn is a home furnishing and décor business. You are instantly drawn to three large photographs near the top of the webpage. Each of the three photographs is a link to a particular type of décor, such as décor for decorating, entertaining, and gifting. While the web designer could have made text links serving the same purpose, it is not as likely that someone would click on the link; the visual aspect draws the attention of the viewer and makes the viewer desire to see more.
Similarly, it is beneficial to have photographs of actual Pottery Barn décor so viewers have an idea of what to expect from the business. The photographs set the tone for the type of business that Pottery Barn is - elegant designs that are inviting and illustrate that this is what home feels like. While Pottery Barn products are on the more expensive end of the scale, the design of the webpage does not exclude the business to "poorer" viewers. The design doesn't make viewers feel as if they are not "rich" enough to buy their products but rather invites all customers to enjoy a taste of this type of elegance - whether it be limited to their time on the website with intriguing images or brought into their home through purchased products.
Strong Grid
Pottery Barn's website has a quiet structure. Unlike the information- (text-) based CNN website or similar text-based websites, Pottery Barn is picture-based, meaning that users don't go to Pottery Barn to read but instead to buy. While a quiet structure is easily defined in accordance to text, it can still be illustrated through the arrangement of photos and two or three word headings.
At the top of the page, there are 11 headings that direct your search. If you put your cursor over one of the headings, a list of subheadings appear. The subheadings are again divided into categories, each divided by a vertical line and bold text for headings. The spatial relation are categories is well designed in that nothing is grouped too close or spread far apart. Similarly, as you scroll down the page, each major photo spread or block of text is separated with a clean, white line. This white line has the same width horizontally as it does vertically, minimizing visual noise. In simpler terms, it is a consistent grid. The lines are even throughout the page, side to side, top to bottom. Although there is no pattern to the background, the white color creates continuance throughout the website - as you click and are taken from page to page, the white background remains. This allows the user to feel comfortable in knowing what to expect of the entire website and its contents.
As you continue to scroll down the page, there are photos on the right with text on the left. In this horizontal layout, the reader can read from left to right, and the eyes do not have to move all around the page to obtain information. This is a great use of space and creates for a clean alignment. As the cursor is placed on several of the photos, a sentence appears explaining the particular product in the photo. However, the photo still appears in the background of the text, but the opacity of the photo is reduced so it isn't difficult to read. This, too, creates continuance in that the user isn't taken away from the photo but instead remains in contact with the photo and the information.
The Lower Right
The landing page of Pottery Barn does not execute a lower right. It simply has three, large photographs of different products. Because there isn't necessarily one product offered by Pottery Barn (unlike the GoPro website illustrated on the class blog and here), I don't think the lower right is necessary for the website. The three photographs act similarly to the use of the lower right by GoPro - they provide a visual example of what to expect out of a Pottery Barn product.
Continuity
As I said above, underneath the "Strong Grid" heading, Pottery Barn's website illustrates continuity quite well. With evenly spaced horizontal and vertical grids, the website is creating continuance for its users because the eyes aren't jarred up, down or all around in order to collect information. Also as explained above, the white background, though simple in pattern, allows for continuance from page to page of the website. The viewer comes to expect the white background as he/she scrolls pages or clicks images.
Intuitiveness
The design of the website allows for intuitiveness; the user can navigate throughout the website based upon previous experience of web navigation. There is nothing confusing or different in the web design. Also illustrating intuitiveness are the photographs of Pottery Barn products. Photos of dining rooms, living rooms and bedrooms provide intuition to the user - This is what the website is about. This is what the product is about - It isn't a surprise to click on an image of a dining room and be taken to a page where there are several more dining rooms. Perhaps better explained, the user knows that an image of a dining room won't take him/her to images of food. While dining rooms and food are related, the intuitiveness of the user is successfully put into place by the design of the website.
Another part of intuitiveness is whether or not the company logo represents what the product is truly about. Pottery Barn's logo is simple: a capital PB, white in color, inside a black box. The logo, in particular, isn't a product of intuitiveness. However, much like the different logos of cars or appliances, Pottery Barn's logo, if used on all products, can become intuitive to a user who buys from Pottery Barn often or shops at potterybarn.com frequently.
Affordance
The Pottery Barn website executes affordance because the user knows how the webpage is to be used because of its design. The landing page allows the user to scroll up and down and click from heading to heading, photo to photo. One website stated affordance as when you see it, you know what it means. Upon entering the potterybarn.com, you know it's a home furnishing and décor brand. You are not confused that it has to do with pottery or barns because there are headings and photos throughout the website that tell you what Pottery Barn sells.
Greatest Contrast
The contrast of Pottery Barn's website is illustrated in its colors. While the design is not a bold black and white contrast, the colors used still create a strong contrast. As I said above, under the "Intuitiveness" heading, the Pottery Barn logo is a capital PB in white, inside of a black box. The logo has the greatest contrast, but the rest of the webpage uses a less obvious contrast of colors ranging from white and ivory to shades of brown and reds. This palette of colors is warm and creates an inviting feeling. As explained in my introduction of this post, the photographs set the tone for the type of business that Pottery Barn is - illustrating that this is what home feels like. Just as the photographs do, the contrast in colors also illustrate a feeling of "home sweet home". The example of contrast on the class blog and here, is black and white photographs of testimonies from survivors of the 911 tragedy. The black and white contrast sets a mood for what is expected in the webpage. It sets a tone of tragedy, reality, determination, perseverance, etc. Pottery Barn's contrast, too, sets a particular mood and tone that users can be in touch with while on the website.
Good Looking Means Easy
This particular axiom relates to Pottery Barn because the website is, as explained in the seven axioms above, well-designed. It's clean and "good looking" - which, apparently, "means easy". One way I look at this axiom is that if the look of the website is good looking then the product is too; if the website is easy then the product (the timeliness of the service), is too. It's most likely a rarity that anyone would order products from a website that is confusing and doesn't execute the axioms of web design. It's more likely that someone is to actually purchase an online product if the website is "good looking". It's kind of like judging a book by it's cover.
Subscribe to:
Post Comments (Atom)







No comments:
Post a Comment