Learning Report 5

Using Design Principles to Enhance Usability

This week, I focused on making my website look good. I enjoy a lot of graphics and detailed decoration on websites, but I decided to move away from that for my site. Most of the users who visit my site will be looking for a comfortable reading environment, much like the old man in Hemmingway's A Clean Well-Lighted Place. I have tried to keep my website as clean as possible and have avoided clutter wherever I can.

Resources

My main resource was Robin William's The Non-Designer's Design Book. The full reference for this book can be found at the bottom of this article. My other resources were mainly pages where I saw how the basic elements of design were used to enhance usability. Some of these sites include Wizards.com,Bing.com, FoxNews.com, and Crutchfield.com.

What I Learned

I learned that the elements of design can absolutely make the difference between a site that is incredibly easy to look at and a site that is completely ugly and confusing.

Contrast seems to be the most effective technique that was used well in all four sites. Wizards accomplished the most with contrast. This shouldn't be surprising because they employ some of the best artists in the business for their designs, but I still find their talents incredible. They have used contrast to lead my eye to what they want me to see.

Wizards of the Coast has some amazing artwork in the top left and bottom right corners of the page, but both of these images lead your eye to other areas of the page. It is incredible that the artwork is not what I find myself looking at. The images of product logos in the middle of the page are the highest areas of contrast and attract my eye more than the dragon (whose color makes him a passive lead in to the search bar at his right).

Crutchfield also used contrast, but their use is not as effective as Wizards of the Coast. Where Wizards used three or four colors of grey to lead their user to the levels of importance on their page, Crutchfield has the same basic blue over and over again. Wizards of the Coast also greyed out their background. This was effective because the eye of a general user is most comfortable on the lightest part of the page. Even with all the artwork amid the greyed background, the user's eye will always drift to the white middle.

Crutchfield's white background doesn't give their user a place to rest their eyes. The direct contrast with their background is a bright blue text that is spread all over the page. The animated advertisement at the center of the page is the only thing I can seem to keep my eye on. This is effective for an online-shopping site that is trying to sell their deals, but I think it may be risking losing an audience to an uneasy page. The page just looks uneasy to me. I am not guided to anything other than their sale.

Bing.com was the best example of alignment. The menu on the left yells menu before the user can even read the words. The search bar is definitely the focus of the page. The shared alignment of the menu bar and the search bar connects them together as important parts of the page, but the breaking of alignment by the search bar brings the user's eye into the most important part of the page.

I also like how Bing has shadowed the back of the menu bar to de-emphasize it. They know that their user's will be drawn to the search bar if it is the brightest part of the page.

I especially like the clean, simple look of Bing's site. I know that design elements are effective when just about any picture can be put behind the functional elements of a page and the user's eye is still caught on the main utility.

FoxNews.com is an opposite example from Bing.com. Everything is cluttered when I first look at the site. The blue and gray colors in the site bring out whatever picture is inserted into the headline. The small text beneath the picture seems confusing. This tactic works in a newspaper because it is separated from the rest of the newspaper with alignment. The bold words and functional links beneath the picture are distracting from the headline. It really seems like there should be a space between the pictures text and the names of other headlines.

From a far view, the headlines on FoxNews.com are easy to see and bring the user's eye to them. But looking closer to the descriptions is almost difficult. The page has the three columns to sort its information, but overall, the site lacks that clean look we found in Bing.com and Wizards of the Coast. This makes sense because FoxNews.com is a news site. Their job is to tell you as much information as they can about what is happening. This is not what I want in my site.

Implementation

I decided on a clean look for my site. I chose light colors for the bars and background to emphasize the middle area. Because my site is mainly to display things I have written, it will be needful to eliminate as many distractions as I can.

My background color is a very light purple to match the light gray of the banner and bars. I also like how this color is harmonious with the blue and purple links. Most of all, the light purple is not distracting at all. The only white on the page is in the background of the article. I have also allowed a ton of empty space to give my site a calm feeling. Just like it is not fun to read in a messy room, it's not fun reading on a site that has ads and headings thrown all over.

Part of the calm feeling of my site is the lack of contrast. I chose harmonious colors to allow my user's eye to remain at the center of the page. The area of highest contrast is the black text on white background. This is also why the gray in the banner was lightened around the sites title. The increased contrast attracts the user's eye.

The single alignment of my site also adds to the contrast, or allows the contrast already created to dominate the page. The black text of the article is able to hold the reader's attention because everything else on the page is contrasting with it.

Overall, I feel that I have been successful in creating a clean site that will allow the user's to feel comfortable and calm. I hope that user's will find the functionality of my site much like lounging back in a comfy chair placed in "a clean, well-lighted place".

Citation:
Williams, R. (2004). The non-designers design book: Design and typographic principles for the visual novice. Berkeley, Calif: Peachpit Press.