Interface Blog

Just another weblog

XII. Project 1. The Good, the Bad, and the Ugly

leave a comment »

What exactly makes a website “bad”? What elements make the design of a website unsuccessful? Well there are certain factors that can make a website seem rather confusing and constructed of poor quality.

For example:

1. Clutter

Clutter is a big nuisance, headache and eyesore to many. The saying “less is more” is not familiar to websites who pile on information, images, and ads. These websites think they’re doing viewers a favor by squeezing in as much writing as they can onto one page. Instead of spreading the pictures or links to different pages, they choose to place everything on top of each other; they take whatever empty space is available and clutter it with a plethora of things, whether they’re all useful or not.

2. Poor Navigational Direction

This goes hand in hand with clutter. When there’s too much information being shown all at once, there’s no clear direction or navigational path throughout the site. People don’t know where to click or what to look at because there’s too much thrown at them all at once. Even Krug mentions in DMMT (Don’t Make Me Think) that as viewers when we look at a web page we just scan it for the words and phrases we’re more interested in. However, if a website has poor direction then it’s going to be harder for the eye to wander to it’s correct destination and for the viewer to find what they’re looking for. 

3. No Distinguishing Features

No distinguishing features means that the website is very monotone or the same throughout. The font’s all the same color and size which add to the poor navigation. There’s no color coded sections to separate anything and when you hover over the clickable links there’s no underlining or anything that makes it different from the other text on the page.  Krug mentions that in order to make a website one should create a clear visual hierarchy, take advantage of conventions (standardization), break pages up into clearly defined areas (grouping), make it obvious what’s clickable (feedback), and minimize noise (Krug 31). He even mentions that more important something is, the more prominent it is (Krug  31). This means in order for the viewer’s eyes to wander to the important sections of the page, the important font needs to stand out from the rest of the font; this means the font can be bold, underlined, bigger etc. As long as it makes a statement and pops out at the viewer, the designer has done a successful job. 

Now I have two examples of good and bad websites that follow the formula above.

Example 1: Cinderella Photography Studios

Picture 5

This wedding website is an example of a bad website as it shows clutter, lack of navigational direction and no distinguishing features. The Be Mine background repeats throughout the whole website which already makes it a distraction and hard to read the font. Also the background really has nothing to do with the content of the website considering this site sells cameras. The coloring on the text is at random and isn’t separated into different categories. The good thing about the website, however, is that the biggest font is the Cinderella Photography Studios which shows it’s importance but down below there’s a bunch of fine small print which is too small to read and therefore strains the eyes; it’s just squished in with all the other text on the site. Also, there’s no sidebar on the left, right, or top showing options but instead there’s more hyperlinks when you scroll down which serves as a nuisance. I don’t like that everything is extended onto one page and that there’s no side bars to make things easier; the infinite scrolling to get to the many different things of text doesn’t make it any easier either. 

Picture 6

The red font is slightly bigger than the purple font but are hard to read with the distracting repeating background. Also the big WEVA ad takes all the attention away from the text. 

Picture 7

The very fine print I was talking about earlier is above all the randomly colored hyperlinks and is too small to read. There’s too much information on this website to know what to read or where to click and go. 

Picture 17

If you look at the image above, there are these colorful links that lead to other pages that show their clients, cameras, prices etc. I decided to click on the first link which is *Love Walks*Weddings*New Clients*Old Movie Conversion and it lead me to the page (image) above. Also I just realized that by clicking on these different words within the asterisks leads you to different pages. In short, instead of having a sidebar that separates these categories, they have asterisks to separate them which leads to a lot of confusion considering it’s all on the same line and underlined. Anyways, going back to the page above, it shows the different couples on another page and this time shows these really gaudy heart gifs next to their names which are clickable links to another separate page (posted below).

Picture 18

The new website leads to another tacky background with the couple’s image and a youtube video underneath. I don’t understand why there aren’t more photos displayed for the couple. I don’t understand why there’s no extended portfolio of the couple. 

In conclusion, just looking at the website and trying to figure out makes me frustrated and gives me an eyesore. If the website doesn’t look professional and well kept, why will anyone gravitate and give you their business? Now onto a better/more refined website:

Example 2Rebecca Ruth Photography

Picture 14

The website is clear and simple. There’s no annoying repeating or overlapping ugly backgrounds to distract the viewer. The visual hierarchy is evident up at the top bar. The top bar acts as a rollover bar when you hover above the different categories; the navigation is nice and easy to read. There’s also a nice wedding image taken by the photographer on the far right which balances out the text on the left. 

Picture 15

I clicked on the portfolio link and it navigated to another page where it shows two different separated sections labeled our portfolio and recent weddings. This is easy to read considering the two sections are separated by a line and symbol. Nothing’s squished and everything’s separate from one another unlike the previous Cinderella website. 

Picture 16

Here’s another image of the portfolio page where it shows the different couples and their pictures. I find it to be really balanced with the couples’ names and their big photos right underneath it. Also Rebecca Ruth added small thumbnail photos of their wedding on the right of the big photo which is a nice visual effect; you can click on the thumbnails and they pop up in another smaller screen magnified. 

In conclusion, this website is much easier to navigate around and doesn’t have annoying text and images squished together all into one. There’s good feedback, visual hierarchy, minimal noise and clearly defined areas which are all things Krug wants.

My view:

Picture 21

Picture 23

I just used the Bella Pictures website layout as a template since i’m not good at using photoshop or illustrator and blanked out the Bella Pictures text and replaced it with Cinderella  since both websites are similar. This is a more refined website now with a rollover menu on top of the page which makes it easy to find things. There’s even a Check Availability and Contact Us button in pink in the upper right hand corner which stand out; along with that there’s gray links that direct you to Client Center, Wedding Look Up, Reserve and Payments. There’s also an array of images right above the text describing the site which makes the website look balanced. This refined site is now easy to navigate around, has a clear hierarchy, and effective feedback. It’s user friendly and isn’t gaudy or flashy anymore. Now it looks as though it would draw in potential customers instead of scaring them away.


Written by minjikwon

October 14, 2009 at 3:48 pm

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: